Introduction
Do you want to control the time displayed by an analog clock on your Node-RED Dashboard?
In this post, we are going to download Node-RED's ui-clock node in order to add an analog clock into our Dashboard, using the time as timestamp since 01.01.1970
Latest Posts
Node-red-contrib-ui-clock
Node-red-contrib-ui-clock is a simple node which displays a simple analog clock in the Node-RED Dashboard.Â
In order to download it, open Node-RED > Go to Manage palette > Go to the Installation tab > Type: node-red-contrib-ui-clock > Click Install.
Once downloaded, you should see how the clock node appears in the dashboard nodes section.
Node-RED Flows Example
If we click on the node help from on the Node-RED tab, this is what we get:
A simple analog clock for the Node-RED Dashboard.
The time to be displayed is transferred as timestamp (milliseconds since 01.01.1970) in msg.payload. The local time is displayed in the dashboard.
As we can see, the only thing that it needs as input is the timestamp. So, add an inject node to the clock with the timestamp as the msg.payload, and connect it to the ui-clock node. Edit the inject node and click on “Inject node after 0.1 seconds, then" and set an interval every 1 seconds, so the time counts every second.
Layout
By making it work, you can see the time displayed but not the label with the digital time, as it only displays the analog time.
For this, we are going to add a function code and drop it after the inject node with the following code, in order to get the locale time:
var timestamp = msg.payload; let time = new Date(timestamp).toLocaleTimeString();
return { payload: time
}
After the function node, connect a text node with the parameters from the right
Note that we added a custom </> Class called digital_time to be able to change its appearance.
Once we assigned the CSS class, we are ready to change its parameters.
Add a template node, and scale the digital_time value as many times as you want
Click on Done, and display the widget as you prefer, in order to make a nice Dashboard.
Finally, go to your Node-RED Dashboard and see the result!
Flows.json
Once done, copy this flows.json below, go to Node-RED, click on the menu > Import > Paste the flows.json. Click on done, and compare this example with yours!
[{"id":"365e1c699342165e","type":"tab","label":"Industrial Shields","disabled":false,"info":""},{"id":"b9dee3a556739916","type":"ui_clock","z":"365e1c699342165e","name":"","group":"7db45a2e2009a112","order":6,"width":8,"height":6,"x":790,"y":160,"wires":[]},{"id":"e0972d3fd6d6c9a4","type":"inject","z":"365e1c699342165e","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payloadType":"date","x":350,"y":160,"wires":[["b9dee3a556739916","b1430528ef3895d0"]]},{"id":"b1430528ef3895d0","type":"function","z":"365e1c699342165e","name":"","func":"var timestamp = msg.payload;\nlet time = new Date(timestamp).toLocaleTimeString();\n\nreturn {\n payload: time\n}\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":560,"y":240,"wires":[["9393aeb7e03490ca"]]},{"id":"9393aeb7e03490ca","type":"ui_text","z":"365e1c699342165e","group":"7db45a2e2009a112","order":3,"width":3,"height":1,"name":"Digital time","label":"","format":"{{msg.payload}}","layout":"row-left","className":"digital_time","x":810,"y":240,"wires":[]},{"id":"a013259e744decff","type":"ui_template","z":"365e1c699342165e","group":"7db45a2e2009a112","name":"","order":1,"width":1,"height":1,"format":"<style>\n .digital_time{\n transform:scale(2);\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":320,"y":60,"wires":[[]]},{"id":"bfdeaa237e99add1","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":2,"width":8,"height":1},{"id":"5d472d50a3ef3817","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":4,"width":6,"height":1},{"id":"0a03aba497cdb546","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":5,"width":5,"height":1},{"id":"2698058bfa1cfeac","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":7,"width":5,"height":1},{"id":"7d6401b5c15a2a14","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":8,"width":5,"height":1},{"id":"4fe4df3eb4e8afda","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":9,"width":5,"height":1},{"id":"a06a69a17e344fe3","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":10,"width":5,"height":1},{"id":"2c11e851365f3ea9","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":11,"width":5,"height":1},{"id":"1026abb479714a4e","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":12,"width":5,"height":1},{"id":"92f60d2fe1bb4005","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":13,"width":5,"height":1},{"id":"d2df5cf7b05a00b4","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":14,"width":5,"height":1},{"id":"7d62abf82d2d905e","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":15,"width":5,"height":1},{"id":"ce309ef719136da6","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":16,"width":5,"height":1},{"id":"164d9fb9792263ae","type":"ui_spacer","z":"365e1c699342165e","name":"spacer","group":"7db45a2e2009a112","order":17,"width":5,"height":1},{"id":"7db45a2e2009a112","type":"ui_group","name":"","tab":"eb94216d.968598","order":1,"disp":true,"width":18,"collapse":false,"className":"clock"},{"id":"eb94216d.968598","type":"ui_tab","name":"Industrial Shields","icon":"","order":5,"disabled":false,"hidden":false}]
Node-RED Tutorial: How to display an analog clock in a Dashboard