Dashboard Donut Gauge Clock

This flow shows a three-part watch on your dashboard, each with a donut gauge for hours, minutes and seconds. A very unique way to show the time on your dashboard.

Uses node-red-contrib-simpletime to get the current time.

example image showing the clock

[{"id":"d6a5270a.a1ad7","type":"inject","z":"29f5b9ae.4b23a6","name":"1s","topic":"","payload":"","payloadType":"date","repeat":"1","crontab":"","once":true,"onceDelay":0.1,"x":970,"y":2400,"wires":[["70e66951.7f8db8"]]},{"id":"70e66951.7f8db8","type":"simpletime","z":"29f5b9ae.4b23a6","name":"","x":990,"y":2440,"wires":[["1cac2148.949c6f","73cfba63.44fd8c","2c5398c5.39a2c"]]},{"id":"73cfba63.44fd8c","type":"change","z":"29f5b9ae.4b23a6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"myminute","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1135,"y":2440,"wires":[["c8a0935.7345df"]],"l":false},{"id":"2c5398c5.39a2c","type":"change","z":"29f5b9ae.4b23a6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"mysecond","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1135,"y":2480,"wires":[["8602a31e.1509d8"]],"l":false},{"id":"1cac2148.949c6f","type":"change","z":"29f5b9ae.4b23a6","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"myhourpm","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":1135,"y":2400,"wires":[["a4f52203.59e9f8"]],"l":false},{"id":"a4f52203.59e9f8","type":"ui_gauge","z":"29f5b9ae.4b23a6","name":"H","group":"573e0e4a.d065e","order":2,"width":"2","height":"2","gtype":"donut","title":"","label":"","format":"{{msg.payload | ngHide}}","min":0,"max":"12","colors":["#8bcd57","#fdeb62","#de665f"],"seg1":"","seg2":"","x":1250,"y":2400,"wires":[]},{"id":"c8a0935.7345df","type":"ui_gauge","z":"29f5b9ae.4b23a6","name":"M","group":"573e0e4a.d065e","order":3,"width":"2","height":"2","gtype":"donut","title":"","label":"","format":"{{msg.payload | ngHide}}","min":0,"max":"60","colors":["#8bcd57","#fdeb62","#de665f"],"seg1":"","seg2":"","x":1250,"y":2440,"wires":[]},{"id":"8602a31e.1509d8","type":"ui_gauge","z":"29f5b9ae.4b23a6","name":"S","group":"573e0e4a.d065e","order":4,"width":"2","height":"2","gtype":"donut","title":"","label":"","format":"{{msg.payload | ngHide}}","min":0,"max":"60","colors":["#8bcd57","#fdeb62","#de665f"],"seg1":"","seg2":"","x":1250,"y":2480,"wires":[]},{"id":"d69cdc8c.cc5fc8","type":"comment","z":"29f5b9ae.4b23a6","name":"DonutGaugeClock","info":"","x":980,"y":2360,"wires":[]},{"id":"573e0e4a.d065e","type":"ui_group","z":"","name":"Clock","tab":"ff3b7c9c.91ce28","disp":true,"width":"6","collapse":false},{"id":"ff3b7c9c.91ce28","type":"ui_tab","z":"","name":"DonutGaugeClock","icon":"dashboard","order":5,"disabled":false,"hidden":false}]

Flow Info

Created 4 years, 10 months ago
Rating: 4 4

Owner

Actions

Rate:

Node Types

Core
  • change (x3)
  • comment (x1)
  • inject (x1)
Other

Tags

  • dashboard
  • ui
  • clock
  • gauge
  • donut
  • hack
  • design
  • time
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option