How to display a blinking LED in Node-RED dashboard

There are probably a thousand different ways of doing a blinking LED in the dashboard.

The first idea that comes to my mind is to use an inject node to trigger the flashing every second, for instance. There will be a trigger node that will send the color green, wait for 400 milliseconds and after that delay, it will send the black color as the payload. This way the LED will be green for 400ms and black for 600ms. You can easily change these delays in those two nodes.

A dashboard template is used to display the LED shape (a simple circle).

Following SVG config is added to the template field in the Template node.


<svg>
<circle cx="10" cy="10" r="10" style="stroke: none; fill: {{msg.payload}};"/>
</svg>


This is the end result in the dashboard (pretend that the LED is blinking)

Node-RED flow:

[{"id":"2a2791e4.ff3ade","type":"trigger","z":"9e8ac502.a77a18","op1":"lime","op2":"black","op1type":"str","op2type":"str","duration":"400","extend":false,"units":"ms","reset":"","name":"","x":300,"y":220,"wires":[["db1b4e43.c133a"]]},{"id":"db1b4e43.c133a","type":"ui_template","z":"9e8ac502.a77a18","group":"130aff60.890011","name":"","order":0,"width":0,"height":0,"format":"<svg>\n<circle cx=\"10\" cy=\"10\" r=\"10\" style=\"stroke: none; fill: {{msg.payload}};\"/>\n</svg>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":480,"y":220,"wires":[[]]},{"id":"f49a431f.78814","type":"inject","z":"9e8ac502.a77a18","name":"","topic":"","payload":"Fire","payloadType":"str","repeat":"1","crontab":"","once":false,"x":110,"y":220,"wires":[["2a2791e4.ff3ade"]]},{"id":"130aff60.890011","type":"ui_group","z":"","name":"Blinking LED","tab":"f8f951a0.956ef","disp":true,"width":"6"},{"id":"f8f951a0.956ef","type":"ui_tab","z":"","name":"Blinking LED","icon":"dashboard"}]