Node-Red Dashboard使用

 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}]