node-red教程7.3 常见的显示型仪表板控件应用

　　上一小节使用了输入性的仪表板控件，此小节使用输出型，或者说显示型的仪表板控件。其实7.2.7小节已经使用了一个最常见的显示型控件了，那就是text控件，显示了“几年能结果子”。仪表板的显示型控件功能强大，界面美观，个人认为，这些控件特别适合来表示数据的变化情况。

7.3.1 仪表gauge的使用

　　向用户界面添加一个仪表类型小部件。
　　输入的msg.payload应该是数值，且格式要与Value Format一致。Value Format是gauge中的一个选项，具体情况参考https://scotch.io/tutorials/all-about-the-built-in-angularjs-filters
　　可以指定3个扇区的颜色，并将其混合在一起，颜色也可以由#RRGGBB来表示，这个表示方法前边已经用过了。
　　仪表板有四种模式，常规的，甜甜圈，指南针和波浪。
　　Label可以用消息的属性来设置。
　　我们直接拖入4个gauge，来看看不同的“Type”有什么区别。为了方便比较，直接让Type与Label的名字一样。

　　然后拖入一个滑块作为输入，为仪表提供数据。
　　为了方便显示，需要给仪表设置不同的group，例如display1和display2。部署以后拖动slider，可以看到仪表上有实时的变化。


代码如下：

[{"id":"fd4813f8.44499","type":"ui_gauge","z":"7a8c632b.0c701c","name":"","group":"311de55a.8c286a","order":0,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":200,"wires":[]},{"id":"2af63854.228338","type":"ui_slider","z":"7a8c632b.0c701c","name":"","label":"slider","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"topic":"","min":0,"max":"10","step":1,"x":250,"y":260,"wires":[["fd4813f8.44499","ba3933fd.bb82a","e8cd8726.0da6e8","dbfc14dd.7b8218"]]},{"id":"ba3933fd.bb82a","type":"ui_gauge","z":"7a8c632b.0c701c","name":"","group":"311de55a.8c286a","order":0,"width":0,"height":0,"gtype":"donut","title":"donut","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":240,"wires":[]},{"id":"e8cd8726.0da6e8","type":"ui_gauge","z":"7a8c632b.0c701c","name":"","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"gtype":"compass","title":"compass","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":480,"y":280,"wires":[]},{"id":"dbfc14dd.7b8218","type":"ui_gauge","z":"7a8c632b.0c701c","name":"","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"gtype":"wave","title":"level","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":470,"y":320,"wires":[]},{"id":"311de55a.8c286a","type":"ui_group","z":"","name":"dispaly1","tab":"aacbcc03.d359b","order":4,"disp":true,"width":"6","collapse":false},{"id":"bd84de44.ae507","type":"ui_group","z":"","name":"CONTROL","tab":"aacbcc03.d359b","order":2,"disp":true,"width":"6","collapse":false},{"id":"2a062d8.0aa96d2","type":"ui_group","z":"","name":"display2","tab":"aacbcc03.d359b","order":5,"disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

7.3.2 图表chart的使用

　　将输入值绘制在图表上。这可以是基于时间的折线图，条形图（垂直或水平），或者饼图。
　　每个输入msg.payload值将被转换成一个数字。如果转换失败，则消息将被忽略。
　　最小和最大Y轴值是可选的。如果没有设置最值，该图表的范围将根据接收的值自行扩展。
　　使用不同的msg.topic可以在同一个图表上显示不同的多个连续数据。同一串连续的数据也可以用msg.label来显示不同的小节。
　　X轴定义了一个时间窗口或显示的最大点数。较老的数据将自动从图中删除。轴的坐标名称可以用特定的格式进行格式化。
　　输入的msg.payload如果包含空数组的话，会清空表格。
　　参考此网站，可以学会如何把预先准备好的数据格式化为完整的图表。https://github.com/node-red/node-red-dashboard/blob/master/Charts.md
　　跟仪表类似，我们直接新建6个图表，用来显示不同类型的图表。然后使用3个slider作为输入的数据源。

　　由于设置比较复杂，我直接把代码放到这里，读者可以先导入代码，来看现象。

[{"id":"2af63854.228338","type":"ui_slider","z":"7a8c632b.0c701c","name":"","label":"input1","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"topic":"input1","min":0,"max":"10","step":1,"x":210,"y":260,"wires":[["7b7be568.72852c","5568446f.3a59fc","59f6a4c.7cd455c","f24f9480.baf318","ff6db426.0ea388","3ed20529.95357a"]]},{"id":"7b7be568.72852c","type":"ui_chart","z":"7a8c632b.0c701c","name":"","group":"311de55a.8c286a","order":2,"width":"0","height":"0","label":"bar chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeOlder":1,"removeOlderPoints":"50","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":500,"y":240,"wires":[[],[]]},{"id":"5568446f.3a59fc","type":"ui_chart","z":"7a8c632b.0c701c","name":"","group":"311de55a.8c286a","order":3,"width":0,"height":0,"label":"bar chart H","chartType":"horizontalBar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":510,"y":300,"wires":[[],[]]},{"id":"59f6a4c.7cd455c","type":"ui_chart","z":"7a8c632b.0c701c","name":"","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"label":"PIie chart","chartType":"pie","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":"00","useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":500,"y":360,"wires":[[],[]]},{"id":"f24f9480.baf318","type":"ui_chart","z":"7a8c632b.0c701c","name":"","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"label":"polar area chart","chartType":"polar-area","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":520,"y":420,"wires":[[],[]]},{"id":"ff6db426.0ea388","type":"ui_chart","z":"7a8c632b.0c701c","name":"","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"label":"raddar chart","chartType":"radar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":510,"y":480,"wires":[[],[]]},{"id":"9dbb7379.4e61c","type":"ui_slider","z":"7a8c632b.0c701c","name":"","label":"input2","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"topic":"input2","min":0,"max":10,"step":1,"x":210,"y":340,"wires":[["7b7be568.72852c","5568446f.3a59fc","59f6a4c.7cd455c","f24f9480.baf318","ff6db426.0ea388","3ed20529.95357a"]]},{"id":"3ed20529.95357a","type":"ui_chart","z":"7a8c632b.0c701c","name":"","group":"311de55a.8c286a","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"30","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"x":500,"y":180,"wires":[[],[]]},{"id":"61d0741.5461c8c","type":"ui_slider","z":"7a8c632b.0c701c","name":"","label":"input3","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"topic":"input3","min":0,"max":10,"step":1,"x":210,"y":420,"wires":[["3ed20529.95357a","7b7be568.72852c","5568446f.3a59fc","59f6a4c.7cd455c","f24f9480.baf318","ff6db426.0ea388"]]},{"id":"bd84de44.ae507","type":"ui_group","z":"","name":"CONTROL","tab":"aacbcc03.d359b","order":2,"disp":true,"width":"6","collapse":false},{"id":"311de55a.8c286a","type":"ui_group","z":"","name":"dispaly1","tab":"aacbcc03.d359b","order":4,"disp":true,"width":"6","collapse":false},{"id":"2a062d8.0aa96d2","type":"ui_group","z":"","name":"display2","tab":"aacbcc03.d359b","order":5,"disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

　　拖动滑块可以直观看到各种表格的现象，也就很容易能区分出它们的作用。比如chart就是折线图，bar chart就是柱状图，bar chart h就是水平的柱状图，等等。
　　特别说明一下，折线图只保留了1分钟或是30个数据。保存的数据多了可能会卡顿。

　　另外除了折线图，我都设置了图表的范围。
　　由于部署前后，并不会清除之前已经保存的数据。如果出现了删除不掉的数据，可以关闭浏览器与powershell，重新启动node-red。

7.3.3 通知notification的使用

　　在用户界面上，把msg.payload作为一个弹出的通知，或是有OK和Cancel的对话框信息。
　　如果msg.topic是可用的，会被用作通知的标题。
　　如果你没有设置一个可选的边界高亮显示颜色，那么可以用msg.highlight属性来设置。
　　通知的位置和持续的时间也可以设置。
　　对话框会返回一个msg.payload字符串，内容是你配置的按钮Label。按钮的内容是可选的。
　　接下来把notification和dialog的功能都验证一下。

　　我们使用按钮来产生消息，消息包含msg.topic和msg.payload。用text来显示对话框的结果。
　　按下notification后现象如下：

　　按下dialog以后有对话框如下：

　　答案当然是帅了，点击帅，结果如下：

　　Notification节点可以设置弹窗通知的时间和位置，也可以自定义主题。

　　在text中，我们也是用了一个新的用法：拼接字符串。

　　代码在这里。

[{"id":"e995f845.35ddb8","type":"ui_text","z":"7a8c632b.0c701c","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"name":"","label":"对话框的结果","format":"这是一个{{msg.payload}}的人","layout":"row-spread","x":790,"y":200,"wires":[]},{"id":"9dfdb279.495ae","type":"ui_toast","z":"7a8c632b.0c701c","position":"dialog","displayTime":"3","highlight":"","outputs":1,"ok":"帅","cancel":"不帅","topic":"","name":"","x":550,"y":200,"wires":[["e995f845.35ddb8"]]},{"id":"ce07034.188a1","type":"ui_toast","z":"7a8c632b.0c701c","position":"top right","displayTime":"3","highlight":"","outputs":0,"ok":"OK","cancel":"","topic":"","name":"","x":530,"y":100,"wires":[]},{"id":"3f99a180.c896ee","type":"ui_button","z":"7a8c632b.0c701c","name":"","group":"311de55a.8c286a","order":0,"width":0,"height":0,"passthru":false,"label":"notification","color":"","bgcolor":"","icon":"","payload":"我按下了按钮","payloadType":"str","topic":"按钮触发了弹窗","x":330,"y":100,"wires":[["ce07034.188a1"]]},{"id":"162ef679.6363ca","type":"ui_button","z":"7a8c632b.0c701c","name":"","group":"2a062d8.0aa96d2","order":0,"width":0,"height":0,"passthru":false,"label":"dialog","color":"","bgcolor":"","icon":"","payload":"你觉得你帅吗","payloadType":"str","topic":"按钮触发了对话框","x":340,"y":200,"wires":[["9dfdb279.495ae"]]},{"id":"2a062d8.0aa96d2","type":"ui_group","z":"","name":"display2","tab":"aacbcc03.d359b","order":5,"disp":true,"width":"6","collapse":false},{"id":"311de55a.8c286a","type":"ui_group","z":"","name":"dispaly1","tab":"aacbcc03.d359b","order":4,"disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

至此，仪表板的使用就告一段落了，相信你已经可以按照自己的想法搭建出一个不错的图形化显示和控制界面。如果已有的控件达不到你的要求，可以自己研究下UI control 和template。