Node-Red 使用 UI Dashboard Template 節點
|
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 Prob</span>
<span
flex>Machine 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>
|
Node-Red程式[{"id":"ef1a3323d20bd108","type":"inject","z":"81c254fd0a75d7a7","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"3","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":290,"y":240,"wires":[["2cab22fbbbdc1d52"]]},{"id":"2cab22fbbbdc1d52","type":"function","z":"81c254fd0a75d7a7","name":"Generate Data","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;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":520,"y":240,"wires":[["ef7b05de376721d3"]]},{"id":"ef7b05de376721d3","type":"ui_template","z":"81c254fd0a75d7a7","group":"7784c75b.8caac8","name":"","order":0,"width":0,"height":0,"format":"\n<div layout=\"row\" layout-align=\"start center\">\n <span flex>RPM Min</span>\n <span flex>RPM Max</span>\n <span flex>Failure Prob</span>\n <span flex>Machine 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":720,"y":240,"wires":[[]]},{"id":"7784c75b.8caac8","type":"ui_group","name":"Default","tab":"ef07f6d1.ceaea8","order":1,"disp":true,"width":"20","collapse":false,"className":""},{"id":"ef07f6d1.ceaea8","type":"ui_tab","name":"Home","icon":"dashboard"}]
沒有留言:
張貼留言