Node-Red Dashboard使用
源自於https://mpolinowski.github.io/devnotes/2018-11-21--nodered-dashboard-getting-started#introduction
|
[{"id":"069f72eae39f2195","type":"inject","z":"2aab461c230527e1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":140,"y":80,"wires":[["ded6d4014c5335af"]]},{"id":"31501a6eeb6867b7","type":"debug","z":"2aab461c230527e1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":450,"y":40,"wires":[]},{"id":"ded6d4014c5335af","type":"function","z":"2aab461c230527e1","name":"","func":"msg.payload
= Math.round(Math.random()*100);\nreturn
msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":270,"y":80,"wires":[["31501a6eeb6867b7","302afc5260c4236e","9abafc3f286f4209","8c8afda63e4f3fd8","a90b32688fcdeb06"]]},{"id":"302afc5260c4236e","type":"ui_chart","z":"2aab461c230527e1","name":"","group":"5cf752b73cb2c7c8","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":430,"y":80,"wires":[[]]},{"id":"9abafc3f286f4209","type":"ui_gauge","z":"2aab461c230527e1","name":"","group":"5cf752b73cb2c7c8","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":430,"y":120,"wires":[]},{"id":"8c8afda63e4f3fd8","type":"ui_slider","z":"2aab461c230527e1","name":"","label":"slider","tooltip":"","group":"fc89dc38.347898","order":3,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":430,"y":160,"wires":[[]]},{"id":"a90b32688fcdeb06","type":"ui_text_input","z":"2aab461c230527e1","name":"","label":"Value","tooltip":"","group":"fc89dc38.347898","order":2,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"topicType":"msg","x":430,"y":200,"wires":[[]]},{"id":"5cf752b73cb2c7c8","type":"ui_group","name":"Chart","tab":"2711d5a2.d68132","order":2,"disp":true,"width":"8","collapse":false,"className":""},{"id":"fc89dc38.347898","type":"ui_group","name":"Control","tab":"2711d5a2.d68132","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"2711d5a2.d68132","type":"ui_tab","name":"Sensor","icon":"dashboard","disabled":false,"hidden":false}] |
|
msg.payload = Math.round(Math.random()*100); return msg; |
Adding another Input
|
var msg = {}; var msg1 = {}; msg.payload = Math.round(Math.random()*100); msg.topic = 'Line'; msg1.payload = Math.round(Math.random()*100); msg1.topic = 'Line1'; return [msg, msg1]; |
|
|
[{"id":"069f72eae39f2195","type":"inject","z":"2aab461c230527e1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":140,"y":160,"wires":[["ded6d4014c5335af"]]},{"id":"31501a6eeb6867b7","type":"debug","z":"2aab461c230527e1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":40,"wires":[]},{"id":"ded6d4014c5335af","type":"function","z":"2aab461c230527e1","name":"","func":"var msg = {};\nvar msg1 = {};\n\nmsg.payload = Math.round(Math.random()*100);\nmsg.topic = 'Line';\n\nmsg1.payload = Math.round(Math.random()*100);\nmsg1.topic = 'Line1';\n\nreturn [msg, msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":270,"y":160,"wires":[["31501a6eeb6867b7","302afc5260c4236e","9abafc3f286f4209","82e35585be8f6c58"],["a90b32688fcdeb06","8c8afda63e4f3fd8","82e35585be8f6c58"]]},{"id":"302afc5260c4236e","type":"ui_chart","z":"2aab461c230527e1","name":"","group":"5cf752b73cb2c7c8","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":80,"wires":[[]]},{"id":"9abafc3f286f4209","type":"ui_gauge","z":"2aab461c230527e1","name":"","group":"5cf752b73cb2c7c8","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":450,"y":120,"wires":[]},{"id":"8c8afda63e4f3fd8","type":"ui_slider","z":"2aab461c230527e1","name":"","label":"slider","tooltip":"","group":"fc89dc38.347898","order":3,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":450,"y":200,"wires":[[]]},{"id":"a90b32688fcdeb06","type":"ui_text_input","z":"2aab461c230527e1","name":"","label":"Value","tooltip":"","group":"fc89dc38.347898","order":2,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"topicType":"msg","x":450,"y":260,"wires":[[]]},{"id":"82e35585be8f6c58","type":"ui_chart","z":"2aab461c230527e1","name":"","group":"fc89dc38.347898","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":160,"wires":[[]]},{"id":"5cf752b73cb2c7c8","type":"ui_group","name":"Chart","tab":"2711d5a2.d68132","order":2,"disp":true,"width":"8","collapse":false,"className":""},{"id":"fc89dc38.347898","type":"ui_group","name":"Control","tab":"2711d5a2.d68132","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"2711d5a2.d68132","type":"ui_tab","name":"Sensor","icon":"dashboard","disabled":false,"hidden":false}] |
|
UI Widget
|
min = Math.round(Math.random()*1000); max = Math.round((Math.random()*10000)+1000); msg.payload = { factory: { machine00: { min: min, max: max, failProb: 20, name: "GE 5200" }, machine01: { min: min*5, max: max*2, failProb: 10, name: "BB SQ100" } } } return msg; |
|
<div layout="row" layout-align="start
center"> <span flex>RPM Min</span> <span flex>RPM Max</span> <span flex>Failure</span> <span flex>Type</span> </div> <div layout="row" layout-align="start
center" ng-repeat="machine in
msg.payload.factory"> <span flex style="color: green">{{machine.min}}</span> <span flex style="color: red">{{machine.max}}</span> <span flex style="color: black">{{machine.failProb}}%</span> <span flex style="color: black">{{machine.name}}</span> </div> |
|
seed = Math.round(Math.random() * 1000); msg.payload = { officeW: seed, storageW: seed / 4, conW: seed / 12, parkW:seed / 8, serverW: seed / 2 }; return msg; |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <div id="chart-example" style="height: 250px;"></div> <h3 align="center">Power Consumption [W] </h3> <script>
(function(scope) { var timer = setInterval(function() { //check
that the Morris libs are loaded, if not wait if (!window.Morris) return; clearInterval(timer); var myData; var myDonut = Morris.Donut({ element: 'chart-example', data: [ {label: "Office", value: 1 }, {label: "Storage", value: 1 }, {label: "Confernce", value: 1 }, {label: "Parking", value: 1 }, {label: "Server", value: 1 } ] }); scope.$watch('msg', function (msg) { //watch
for an incoming NR msg if (msg) { myData = msg; myDonut.setData([ {label: "Office", value: myData.payload.officeW }, {label: "Storage", value: myData.payload.storageW }, {label: "Confernce", value: myData.payload.conW }, {label: "Parking", value: myData.payload.parkW }, {label: "Server", value: myData.payload.serverW } ]) }; }); //close
out the watch }, 100); // close
out the setInterval })(scope);
</script> |
Adding a custom UI Widget
UI Widget
|
min = Math.round(Math.random()*1000); max = Math.round((Math.random()*10000)+1000); msg.payload = { factory: { machine00: { min: min, max: max, failProb: 20, name: "GE 5200" }, machine01: { min: min*5, max: max*2, failProb: 10, name: "BB SQ100" } } } return msg; |
|
<div layout="row" layout-align="start
center"> <span flex>RPM Min</span> <span flex>RPM Max</span> <span flex>Failure</span> <span flex>Type</span> </div> <div layout="row" layout-align="start
center" ng-repeat="machine in
msg.payload.factory"> <span flex style="color: green">{{machine.min}}</span> <span flex style="color: red">{{machine.max}}</span> <span flex style="color: black">{{machine.failProb}}%</span> <span flex style="color: black">{{machine.name}}</span> </div> |
|
seed = Math.round(Math.random() * 1000); msg.payload = { officeW: seed, storageW: seed / 4, conW: seed / 12, parkW:seed / 8, serverW: seed / 2 }; return msg; |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script> <div id="chart-example" style="height: 250px;"></div> <h3 align="center">Power Consumption [W] </h3> <script>
(function(scope) { var timer = setInterval(function() { //check
that the Morris libs are loaded, if not wait if (!window.Morris) return; clearInterval(timer); var myData; var myDonut = Morris.Donut({ element: 'chart-example', data: [ {label: "Office", value: 1 }, {label: "Storage", value: 1 }, {label: "Confernce", value: 1 }, {label: "Parking", value: 1 }, {label: "Server", value: 1 } ] }); scope.$watch('msg', function (msg) { //watch
for an incoming NR msg if (msg) { myData = msg; myDonut.setData([ {label: "Office", value: myData.payload.officeW }, {label: "Storage", value: myData.payload.storageW }, {label: "Confernce", value: myData.payload.conW }, {label: "Parking", value: myData.payload.parkW }, {label: "Server", value: myData.payload.serverW } ]) }; }); //close
out the watch }, 100); // close
out the setInterval })(scope);
</script> |
|
[{"id":"069f72eae39f2195","type":"inject","z":"2aab461c230527e1","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":140,"y":160,"wires":[["ded6d4014c5335af","9f4f3266a2b2335c","88a7d5e3cdad3a2d"]]},{"id":"31501a6eeb6867b7","type":"debug","z":"2aab461c230527e1","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":470,"y":40,"wires":[]},{"id":"ded6d4014c5335af","type":"function","z":"2aab461c230527e1","name":"","func":"var
msg = {};\nvar msg1 = {};\n\nmsg.payload = Math.round(Math.random()*100);\nmsg.topic
= 'Line';\n\nmsg1.payload = Math.round(Math.random()*100);\nmsg1.topic =
'Line1';\n\nreturn [msg,
msg1];","outputs":2,"noerr":0,"initialize":"","finalize":"","libs":[],"x":270,"y":160,"wires":[["31501a6eeb6867b7","302afc5260c4236e","9abafc3f286f4209","82e35585be8f6c58"],["a90b32688fcdeb06","8c8afda63e4f3fd8","82e35585be8f6c58"]]},{"id":"302afc5260c4236e","type":"ui_chart","z":"2aab461c230527e1","name":"","group":"5cf752b73cb2c7c8","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":80,"wires":[[]]},{"id":"9abafc3f286f4209","type":"ui_gauge","z":"2aab461c230527e1","name":"","group":"5cf752b73cb2c7c8","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":450,"y":120,"wires":[]},{"id":"8c8afda63e4f3fd8","type":"ui_slider","z":"2aab461c230527e1","name":"","label":"slider","tooltip":"","group":"e3a9bf198c274be7","order":3,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":1,"className":"","x":450,"y":200,"wires":[[]]},{"id":"a90b32688fcdeb06","type":"ui_text_input","z":"2aab461c230527e1","name":"","label":"Value","tooltip":"","group":"e3a9bf198c274be7","order":2,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"topic","sendOnBlur":true,"topicType":"msg","x":450,"y":260,"wires":[[]]},{"id":"82e35585be8f6c58","type":"ui_chart","z":"2aab461c230527e1","name":"","group":"e3a9bf198c274be7","order":0,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":"5","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":160,"wires":[[]]},{"id":"9f4f3266a2b2335c","type":"function","z":"2aab461c230527e1","name":"","func":"min
= Math.round(Math.random()*1000);\nmax = Math.round((Math.random()*10000)+1000);\n\nmsg.payload
= {\n factory: {\n machine00: {\n min: min,\n max: max,\n failProb: 20,\n name: \"GE 5200\"\n },\n
machine01: {\n min:
min*5,\n max: max*2,\n failProb: 10,\n name: \"BB SQ100\"\n }\n
}\n}\n\nreturn
msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":300,"y":340,"wires":[["08631259607fef1a"]]},{"id":"08631259607fef1a","type":"ui_template","z":"2aab461c230527e1","group":"fc89dc38.347898","name":"","order":3,"width":0,"height":0,"format":"<div
layout=\"row\" layout-align=\"start center\">\n <span flex>RPM
Min</span>\n <span
flex>RPM Max</span>\n
<span flex>Failure</span>\n <span flex>Type</span>\n</div>\n<div
layout=\"row\" layout-align=\"start center\"
ng-repeat=\"machine in msg.payload.factory\">\n <span flex style=\"color:
green\">{{machine.min}}</span>\n <span flex style=\"color:
red\">{{machine.max}}</span>\n
<span flex style=\"color:
black\">{{machine.failProb}}%</span>\n <span flex style=\"color:
black\">{{machine.name}}</span>\n</div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":340,"wires":[[]]},{"id":"88a7d5e3cdad3a2d","type":"function","z":"2aab461c230527e1","name":"","func":"seed
= Math.round(Math.random() * 1000);\n\nmsg.payload = {\n officeW: seed,\n storageW: seed / 4,\n conW: seed / 12,\n parkW:seed / 8,\n serverW: seed / 2\n};\n\nreturn
msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":310,"y":420,"wires":[["525ba78f8bfc387d"]]},{"id":"525ba78f8bfc387d","type":"ui_template","z":"2aab461c230527e1","group":"fc89dc38.347898","name":"","order":4,"width":0,"height":0,"format":"<link
rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css\">\n
<script src=\"https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js\"></script>\n
<script
src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js\"></script>\n
<script
src=\"https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js\"></script>\n\n<div
id=\"chart-example\" style=\"height:
250px;\"></div>\n\n<h3 align=\"center\">Power
Consumption [W] </h3>\n\n<script>\n\n(function(scope) {\n var
timer = setInterval(function() { //check that the Morris libs are loaded, if
not wait\n if (!window.Morris) return;\n clearInterval(timer);\n \n var
myData;\n \n var myDonut = Morris.Donut({\n element: 'chart-example',\n data:
[\n {label: \"Office\", value: 1 },\n {label:
\"Storage\", value: 1 },\n {label: \"Confernce\", value:
1 },\n {label: \"Parking\", value: 1 },\n {label:
\"Server\", value: 1 }\n ]\n });\n \n scope.$watch('msg', function
(msg) { //watch for an incoming NR msg\n if (msg) {\n \n myData = msg;\n
myDonut.setData([\n {label: \"Office\", value:
myData.payload.officeW },\n {label: \"Storage\", value: myData.payload.storageW
},\n {label: \"Confernce\", value: myData.payload.conW },\n {label:
\"Parking\", value: myData.payload.parkW },\n {label:
\"Server\", value: myData.payload.serverW }\n ])\n };\n }); //close
out the watch \n }, 100); // close out the setInterval \n})(scope);\n\n\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":480,"y":420,"wires":[[]]},{"id":"5cf752b73cb2c7c8","type":"ui_group","name":"Chart","tab":"2711d5a2.d68132","order":2,"disp":true,"width":"8","collapse":false,"className":""},{"id":"e3a9bf198c274be7","type":"ui_group","name":"Slider","tab":"2711d5a2.d68132","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"fc89dc38.347898","type":"ui_group","name":"Widget","tab":"2711d5a2.d68132","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"2711d5a2.d68132","type":"ui_tab","name":"Sensor","icon":"dashboard","disabled":false,"hidden":false}] |
沒有留言:
張貼留言