display a LED in Node-RED Dashboard

 

display a LED in Node-RED Dashboard

源自於http://node-red.blogspot.com/2017/12/how-to-display-led-in-node-red-dashboard.html

[{"id":"31609c9e.00e3d4","type":"function","z":"ff92ecdb.3a38a","name":"Test","func":"msg.color = (msg.payload === \"ON\")?\"lime\":\"red\";\nreturn msg;","outputs":1,"noerr":0,"x":350,"y":200,"wires":[["27777f4e.e5808","63d8ddd2.495c14","f166de2.9b4e62"]]},{"id":"b111dfc2.ed5c5","type":"inject","z":"ff92ecdb.3a38a","name":"","repeat":"","crontab":"","once":false,"topic":"","payload":"ON","payloadType":"str","x":190,"y":180,"wires":[["31609c9e.00e3d4"]]},{"id":"f199e2d0.0c791","type":"inject","z":"ff92ecdb.3a38a","name":"","repeat":"","crontab":"","once":false,"topic":"","payload":"OFF","payloadType":"str","x":190,"y":220,"wires":[["31609c9e.00e3d4"]]},{"id":"27777f4e.e5808","type":"ui_text","z":"ff92ecdb.3a38a","group":"7efdb5d5.1a0afc","order":3,"width":"3","height":"1","name":"","label":"LED","format":"<font color={{msg.color}} ><i class=\"fa fa-circle\" style=\"font-size:24px;\"></i></font>","layout":"row-left","x":530,"y":200,"wires":[]},{"id":"63d8ddd2.495c14","type":"ui_template","z":"ff92ecdb.3a38a","group":"7efdb5d5.1a0afc","name":"LED2","order":0,"width":0,"height":0,"format":"<svg width=\"100\" height=\"80\">\n    <circle id=\"circle1\" cx=\"20\" cy=\"20\" r=\"10\"\n            style=\"stroke: none; fill: {{msg.color}};\"/>\n</svg>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":520,"y":280,"wires":[[]]},{"id":"f166de2.9b4e62","type":"ui_template","z":"ff92ecdb.3a38a","group":"7efdb5d5.1a0afc","name":"","order":2,"width":0,"height":0,"format":"<svg width=\"100\" height=\"80\">\n    <circle id=\"circle1\" cx=\"20\" cy=\"20\" r=\"10\" stroke={{msg.color}} fill=\"transparent\" stroke-width=\"5\"/>\n</svg>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":520,"y":380,"wires":[[]]},{"id":"7efdb5d5.1a0afc","type":"ui_group","z":"","name":"LED Testing","tab":"3d6eaa0b.9b56d6","order":1,"disp":true,"width":"4","collapse":false},{"id":"3d6eaa0b.9b56d6","type":"ui_tab","name":"Tab","icon":"dashboard","order":0}]