Node-RED Tutorial: How to display an analog clock in a Dashboard

Show the time in an analog clock in a Node-RED Dashboard
January 17, 2022 by
Node-RED Tutorial: How to display an analog clock in a Dashboard
Boot & Work Corp. S.L., Fernandez Queralt Martinez

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

Your Dynamic Snippet will be displayed here... This message is displayed because you did not provided both a filter and a template to use.

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 Tutorial: How to display an analog clock in a Dashboard - Node-red-contrib-ui-clock

Node-RED Flows Example

If we click on the node help from on the Node-RED tab, this is what we get:

Node-RED Tutorial: How to display an analog clock in a Dashboard - Node-RED Flows Example 1

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.

Node-RED Tutorial: How to display an analog clock in a Dashboard - Node-RED Flows Example 2
Node-RED Tutorial: How to display an analog clock in a Dashboard - Node-RED Flows Example - Edit inject node

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.

Node-RED Tutorial: How to display an analog clock in a Dashboard - Layout - Edit text node
Node-RED Tutorial: How to display an analog clock in a Dashboard - Layout - Edit template node

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!

Node-RED Tutorial: How to display an analog clock in a Dashboard - Layout - Go to Node-Red Dashboard
Node-RED Tutorial: How to display an analog clock in a Dashboard - Layout - Dashboard Layout
Node-RED Tutorial: How to display an analog clock in a Dashboard - Layout - Dashboard 1
Node-RED Tutorial: How to display an analog clock in a Dashboard - Layout - Dashboard 2

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

​Search in our Blog

Node-RED Tutorial: How to display an analog clock in a Dashboard
Boot & Work Corp. S.L., Fernandez Queralt Martinez January 17, 2022

Looking for your ideal Programmable Logic Controller?

Take a look at this product comparison with other industrial controllers Arduino-based. 

We are comparing inputs, outputs, communications and other features with the ones of the relevant brands.


Industrial PLC comparison >>>