Node-RED教程(十五):工业仪表盘开发

Node-RED系列文章目前已经写了16篇,介绍了Node-RED的安装以及默认安装的一些基本节点的使用,作为物联网的一个可视化拖动的流程,Node-RED的确实很容易上手。还没开始学习的同学可以先看下我以前的文章。

开发背景

最近有读者私信我,想要使用Node-RED配置一个工业使用仪表盘。
大致的场景是这样的:开发一个面板,用于显示工厂的能耗,能耗的类型包括以下几个方面

  • 天然气
  • 纯水
  • 冷水
  • 工业用水
  • 。。。

需要使用饼形图展示各个能耗的占比。使用仪表盘显示能耗的百分比
使用折线图显示能耗的趋势。

开发要使用的节点很明确,需要使用dashboard模块的页面。我的Node-RED已经安装了。另外这个需求需要每隔一段时间就要刷新一下数据。我这里使用的是定时器。当然如果使用websockt就更好了。

最终的效果大致是这样子的

节点使用与关系配置图

使用的节点

主要使用的节点如下

  • function 用于处理数据,编写测试随机数据

  • tab, ui_gauge, ui_group, ui_tab 用于布局排版

  • inject 定时循环向流中注入数据

  • ui_chart 图表数据 需要多次使用的重要节点

  • ui_template 编写自定义模板

配置方案

能耗仪表盘

在需求中有显示能耗使用的占总数的多少

这部分使用的是gauge节点。只需要将payload 赋值一个数字100以内的数字即可。

节点配置图如下:

function节点的代码如下

msg.payload = Math.round(Math.random()*100)

return msg;

一个gauge节点的配置

官方关于该节点的解释是这样的:

将仪表类型小部件添加到用户界面。
这个消息有效负载搜索数值,并根据定义的值格式格式化,然后可以使用角度过滤器格式化。
例如:{{value|number:1}}%将值舍入到小数点后一位,并附加一个%符号。
可以指定3个扇区中每个扇区的颜色,仪表将在它们之间混合。颜色应以十六进制(#rrggbb)格式指定。
如果为扇区指定数字,则每个扇区的颜色都会改变。如果未指定,则在整个范围内混合颜色。

仪表有几种模式。常规仪表,油炸圈饼,罗盘和波浪。
标签也可以由消息属性设置,例如,将字段设置为属性的名称{{邮件主题}}.

意思就是这个仪表有几种类型可以选择。 默认使用payload的值来显示, 这里有一个简单的格式化,就是使用{{value|number:1}}% 比如像价格单位,%, $, #
使用起来很简单。
类型有这几种

使用的过滤器是 Angular filters.

能耗总量扇形图

这部分是一个扇形图。
主要是使用 function来生成随机数据,然后用chart节点的 pei图表类型来显示数据。

function的代码如下

var m = {};
m.labels = ["电", "纯水", "压缩空气", "天然气"];
m.data = [[300, 500, 100,600]];
m.series = ["Sales"];
return {payload:[m],topic:msg.topic};

在一个扇形图中有多个扇形,每一个扇形在数据层上对应的是 data。data需要对应labels,label就是要显示的辅助信息。

最终效果图

这里为了达到一个比较好的性能,减轻服务器压力。所以每次刷新间隔会长一些。

写在最后

如果需要做一个比较复杂的页面可以尝试使用ui-template 节点,可以发挥angular 和material框架的优势。

有关图表更多的文档可以查看这个链接。dashboard的chart节点的使用。
https://github.com/node-red/node-red-dashboard/blob/master/Charts.md

此外如果你要调整样式,或者执行js
可以写行内css 或者行内的js

<button onclick='javascript:window.open("https://www.baidu.com/", "_blank", "height=300, width=300")'>111111111</button>
<div ng-bind-html="msg.payload"  style="width:540px;height:40px;background:#009999;color: #ffffff;font-size: 18px;font-family: '微软雅黑';text-indent:2em;line-height:40px">

</div>

完整的flow代码,由于太长,这里就不发了,想要的小伙伴字在下方留言。

拿我格子衫来 CSDN认证博客专家 拿我格子衫来 范马勇次郎 琦玉君
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
<p> <span style="color:#313d54;font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;font-size:16px;background-color:#ffffff;">Node-RED工业网物联网的重要组成部分,我最开始接触Node-RED,也算是一个偶然的机会吧,上班后领导安排我的第一个任务就是调研一下Node-RED,我之后上网查了一下,那个时候网上相对于Node-RED的资料也比较少,只知道它是IBM公司的一个开源项目。直到最近,发现许多大公司的产品都支持Node-RED,比如西门子公司的IoT2000,研华公司的WISE PaaS 网关,美国OPTO 22等设备中都安装了Node-RED,表明它在工业物联网和控制中已经广泛应用了。</span> </p> <p> <img src="https://img-bss.csdnimg.cn/202010200935441926.png" alt="" width="1316" height="524" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 那么工业物联网为什么要用它?它又处于工业物联网那个层次?它具有哪些特性?它帮助物联网解决了什么问题?为什么说它是柔性动态可重构的解决方案呢? </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 本门课程,老师将带领你从Node-RED的发展,工业物联网定位开始讲解,并带领着大家进行手把手安装Node-RED,实际操作演练Node-RED,并搭建一个物联网小平台,给大家带来更好的学习效果。 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936289051.png" alt="" width="1841" height="948" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> <img src="https://img-bss.csdnimg.cn/202010200936561564.png" alt="" width="1920" height="977" /> </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;">   </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> 为了能够让小伙伴们快速了解本门课程的结构,本门课程从以下几个方面展开: </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED入门 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED安装与配置 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED教学实战 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED的优势与不足 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED能为我们带来什么 </p> <p style="font-family:'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif;color:#313d54;font-size:16px;background-color:#ffffff;"> Node-RED总结与展望 </p>
相关推荐
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页