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

How to display a LED in Node-RED Dashboard

Node-RED does not provide a user interface node specific to represent a LED in the dashboard.

This is not an issue at all since there are a few different ways to achieve this goal.

1- Using a Text output node from the Dashboard along with an icon from Font Awesome (http://fontawesome.io/icons/)

I have used the most basic representation icon which is the fa-circle.

Simple flow to demonstrate how to configure an icon to represent a LED:

As we want the LED to change colors, normally to green or red we have to add some code to manage the color change.  For this testing, I created a property in the .msg object and assigned to it a color (lime or red).

See the Javascript code inside the function node. It simply adds a color to msg.color property. If msg.payload is "ON" then msg.color will be "lime" (a light green) otherwise (for any other payload) msg.color will be "red"

The text output node should have the following configuration in the field Value format:

<font color={{msg.color}} ><i class="fa fa-circle" style="font-size:24px;"></i></font>

This is the end result of the dashboard.

Flow :

[{"id":"17ca9b9e.d2a564","type":"function","z":"3fc1de78.729e82","name":"Test","func":"msg.color = (msg.payload === \"ON\")?\"lime\":\"red\";\nreturn msg;","outputs":1,"noerr":0,"x":330,"y":200,"wires":[["872b1d71.45076"]]},{"id":"c6ac5bac.e91e38","type":"inject","z":"3fc1de78.729e82","name":"","topic":"","payload":"ON","payloadType":"str","repeat":"","crontab":"","once":false,"x":170,"y":180,"wires":[["17ca9b9e.d2a564"]]},{"id":"872b1d71.45076","type":"ui_text","z":"3fc1de78.729e82","group":"a6e358b.672ffa8","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":510,"y":200,"wires":[]},{"id":"9d39dfc1.aff32","type":"inject","z":"3fc1de78.729e82","name":"","topic":"","payload":"OFF","payloadType":"str","repeat":"","crontab":"","once":false,"x":170,"y":220,"wires":[["17ca9b9e.d2a564"]]},{"id":"a6e358b.672ffa8","type":"ui_group","z":"","name":"LED Testing","tab":"4e528085.a1bfa","disp":true,"width":"4"},{"id":"4e528085.a1bfa","type":"ui_tab","name":"Tab","icon":"dashboard","order":0}]



2- Using a template node from the Dashboard along with very simple SVG directives

Following code, with SVG directives, must be added to the Template field in the configuration dialog page from the node.


<svg width="100" height="80">
    <circle id="circle1" cx="20" cy="20" r="10"
            style="stroke: none; fill: {{msg.color}};"/>
</svg>

Alternatively, instead of writing the parameters stroke and fill inside the SVG tags it is possible (and many times desirable) to use the CSS way of working. We do that using an additional pair of tags <style></style> and write those parameters as property : value; in each line. The hashtag #circle1 defines the style parameters for the HTML element with id = "circle1".


<style>

#circle1 {
    stroke: none;
    fill: {{msg.color}};
}

</style>

<svg>
    <circle id="circle1" cx="10" cy="20" r="10"/>
</svg>

This is the result we get on the dashboard:

Below a variation on the LED design:

<svg width="100" height="80">
    <circle id="circle1" cx="20" cy="20" r="10" stroke={{msg.color}} fill="transparent" stroke-width="5"/>
</svg>