# Getting digital display to display time

**URL:** <https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506>\
**Category:** General\
**Created:** [18 May 2023 06:53 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506 "2023-05-18T06:53:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![brian](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@brian](https://discourse.nodered.org/u/brian)\
**Post date:** [18 May 2023 06:53 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/1 "2023-05-18T06:53:53Z")

</div>

Hi

i am trying to get the [node-red-contrib-ui-digital-display] to display a countdown timer [node-red-contrib-countdown-2]

but no matter what i do, i can´t get it to work.

```auto
[{"id":"f6f2187d.f17ca8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"ee6c01554c1399d1","type":"inject","z":"f6f2187d.f17ca8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":330,"y":360,"wires":[["407c2c4692324a51"]]},{"id":"68ab2abc1c879f67","type":"ui_digital_display","z":"f6f2187d.f17ca8","name":"","group":"d5adff23b794e298","order":1,"width":"6","height":"5","digits":"10","decimals":"2","x":940,"y":380,"wires":[]},{"id":"407c2c4692324a51","type":"countdown","z":"f6f2187d.f17ca8","name":"","topic":"","payloadTimerStart":"true","payloadTimerStartType":"bool","payloadTimerStop":"false","payloadTimerStopType":"bool","timer":30,"resetWhileRunning":false,"setTimeToNewWhileRunning":true,"startCountdownOnControlMessage":false,"minuteCounter":true,"x":490,"y":360,"wires":[[],["7e7df2609c7614f7","6b104b0ad3e984bf"]]},{"id":"7e7df2609c7614f7","type":"debug","z":"f6f2187d.f17ca8","name":"debug counter","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":720,"y":260,"wires":[]},{"id":"0412dc76c7f38191","type":"debug","z":"f6f2187d.f17ca8","name":"debug converter","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":940,"y":260,"wires":[]},{"id":"6b104b0ad3e984bf","type":"function","z":"f6f2187d.f17ca8","name":"[s] to [hh:mm:ss]","func":"// Message from preceeding node is in seconds - should be less than 24 hours (86400 seconds).\nvar time = (new Date(msg.payload * 1000)).toUTCString().match(/(\\d\\d:\\d\\d:\\d\\d)/)[0];\n// Pass on the string to the next node, what ever that may be. (groov Data Store for example).\nmsg.payload = time;\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":380,"wires":[["68ab2abc1c879f67","0412dc76c7f38191"]]},{"id":"d5adff23b794e298","type":"ui_group","name":"Default","tab":"21be6bad9ec5d5b8","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"21be6bad9ec5d5b8","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [18 May 2023 08:40 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/2 "2023-05-18T08:40:20Z")

</div>

The node `node-red-contrib-ui-digital-display` displays numbers with a decimal point where you specify it, it does not display time.

You might want to look at [node-red-contrib-ui-digital-clock](https://flows.nodered.org/node/node-red-contrib-ui-digital-clock)

---

<div class="post-metadata">

**Author:** ![brian](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@brian](https://discourse.nodered.org/u/brian)\
**Post date:** [18 May 2023 08:50 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/3 "2023-05-18T08:50:32Z")

</div>

Hello zenofmud

thank you for replying.

i tried using the node-red-contrib-ui-digital-display  
But it can not show the countdown either. i think that i am not parsing the right format to it from the countdown node.

```auto
[{"id":"f6f2187d.f17ca8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"ee6c01554c1399d1","type":"inject","z":"f6f2187d.f17ca8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":270,"y":420,"wires":[["407c2c4692324a51"]]},{"id":"407c2c4692324a51","type":"countdown","z":"f6f2187d.f17ca8","name":"","topic":"","payloadTimerStart":"true","payloadTimerStartType":"bool","payloadTimerStop":"false","payloadTimerStopType":"bool","timer":"1800","resetWhileRunning":false,"setTimeToNewWhileRunning":true,"startCountdownOnControlMessage":false,"minuteCounter":false,"x":470,"y":420,"wires":[[],["ce70a2b5d8ee2973"]]},{"id":"ce70a2b5d8ee2973","type":"ui_digital_clock","z":"f6f2187d.f17ca8","name":"","group":"d5adff23b794e298","order":0,"width":"6","height":"2","x":670,"y":420,"wires":[]},{"id":"d5adff23b794e298","type":"ui_group","name":"Default","tab":"21be6bad9ec5d5b8","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"21be6bad9ec5d5b8","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [18 May 2023 08:52 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/4 "2023-05-18T08:52:13Z")

</div>

> [@Mechanical counter display](https://discourse.nodered.org/t/mechanical-counter-display/72078/7):
>
> Modified the time version to have size a bit dynamically changeable [image] [{"id":"bf8580a24000c55c","type":"ui\_template","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","name":"display","order":5,"width":0,"height":0,"format":"\<style\>\n .roll-display {\n --size:4;\n display: flex;\n align-content: center;\n justify-content: flex-start;\n flex-direction: row;\n }\n .slot {\n height: calc(var(--size) \* 1em);\n width: calc(var(--size) …

---

<div class="post-metadata">

**Author:** ![brian](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@brian](https://discourse.nodered.org/u/brian)\
**Post date:** [18 May 2023 08:58 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/5 "2023-05-18T08:58:47Z")

</div>

> [@Mechanical counter display](https://discourse.nodered.org/t/mechanical-counter-display/72078/7):
>
> `[{"id":"bf8580a24000c55c","type":"ui_template","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","name":"display","order":5,"width":0,"height":0,"format":"<style>\n .roll-display {\n --size:4;\n display: flex;\n align-content: center;\n justify-content: flex-start;\n flex-direction: row;\n }\n .slot {\n height: calc(var(--size) * 1em);\n width: calc(var(--size) * .8em);\n text-align: center;\n line-height: calc(var(--size) * 1em);\n border: 4px solid #000000a3;\n border-radius: 6px;\n border-top-width: 8px;\n border-bottom-width: 8px;\n position: relative;\n overflow: hidden;\n background: linear-gradient(0deg, #5a5a5a, #b7b7b7,#5d5d5d);\n }\n .num{\n position:absolute;\n left: 0;\n right: 0;\n user-select:none;\n font-size:calc(var(--size) *.7em);\n background: linear-gradient(0deg, #0000005e, #4c4c4c42, #0000005e);\n } \n .current{ \n top:0em;\n transition: top 0.25s;\n }\n .old{\n top:calc(var(--size) * 1em);\n transition: top 0.25s;\n }\n .next{\n top:calc(var(--size) * -1em);\n transition: none;\n }\n .last > .num{\n \n background: linear-gradient(0deg, #53535300, #d5d5d52e, #53535300);\n color: #464646;\n font-weight: 700;\n \n }\n .gap {\n position:relative;\n width: 8px;\n }\n .gap:after {\n content:'•';\n position:absolute;\n bottom:0;\n color:#a4a4a4;\n }\n .label{\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-right:1em;\n }\n</style>\n\n\n<div id=\"{{'slot_'+$id+'_0'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_1'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_2'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_3'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_4'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_5'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<div id=\"{{'slot_'+$id+'_6'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_7'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<script>\n (function(scope) {\n let lock = false\n scope.previous = [-1,-1,-1,-1,-1,-1,-1,-1]\n scope.drawlist = [true,true,true,true,true,true,true,true]\n scope.$watch('msg', function(msg) {\n if (msg) { \n\n let time = new Date(msg.payload).toTimeString().split(\" \")[0]\n console.log(time)\n\n if(lock){\n // console.log(\"locked\")\n lock = false\n return\n } \n // console.log(msg.payload)\n lock = true \n\n let data = time.split('')\n while(data.length < 8){\n data.unshift(0)\n }\n\n data.forEach((d,i) => \n {\n //d = parseInt(d)\n if(scope.previous[i] == d){\n scope.drawlist[i] = false\n }\n else{\n scope.previous[i] = d\n scope.drawlist[i] = true\n }\n\n })\n \n data.forEach((d,i) => {\n if(scope.drawlist[i] == false){\n return\n }\n let current = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".current\")\n let next = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".next\")\n let old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n\n if(next.length == 0 && old.length > 0){\n next = old\n next.removeClass(\"old\").addClass(\"next\")\n } \n\n next.text(data[i])\n current.removeClass(\"current\").addClass(\"old\").on('transitionend webkitTransitionEnd oTransitionEnd', function () {\n old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n old.removeClass(\"old\").addClass(\"next\")\n lock = false\n });\n next.removeClass(\"next\").addClass(\"current\")\n })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"roll-display","x":580,"y":780,"wires":[[]]},{"id":"ee10705e762837ef","type":"inject","z":"bf0d83d32eec75c2","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":430,"y":780,"wires":[["bf8580a24000c55c"]]},{"id":"674712f8d915bcc0","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":true,"className":"ordered-1"},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]`

Thank you for replying.

it gives me the same result.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0d29556a10e8596e3cc7ceeb28b1988c0eaf9c1.png)

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [18 May 2023 09:18 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/6 "2023-05-18T09:18:03Z")

</div>

I do not use countdown timer, but i think your issue is you need to subtract an hour from your output, as the the date() will set time to 1 am. As i do not have countdown installed i created my own to demonstarte

```auto
[{"id":"d511a0134875d52b","type":"inject","z":"f6f2187d.f17ca8","name":"1 hour","props":[{"p":"payload"},{"p":"delay","v":"3600","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":350,"y":60,"wires":[["c10c88c25416248a"]]},{"id":"c10c88c25416248a","type":"change","z":"f6f2187d.f17ca8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"","tot":"date"},{"t":"set","p":"delay","pt":"msg","to":"$$.delay * 1000","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":500,"y":80,"wires":[["cdf86dc020c8db6e"]]},{"id":"ee6c01554c1399d1","type":"inject","z":"f6f2187d.f17ca8","name":"30 seconds","props":[{"p":"payload"},{"p":"delay","v":"30","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":370,"y":120,"wires":[["c10c88c25416248a"]]},{"id":"cdf86dc020c8db6e","type":"trigger","z":"f6f2187d.f17ca8","name":"every msg.delay input","op1":"","op2":"false","op1type":"pay","op2type":"bool","duration":"30","extend":false,"overrideDelay":true,"units":"s","reset":"false","bytopic":"all","topic":"topic","outputs":1,"x":660,"y":140,"wires":[["3defb6c2507cc419"]]},{"id":"40397a431f859426","type":"inject","z":"f6f2187d.f17ca8","name":"stop","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":350,"y":180,"wires":[["3defb6c2507cc419","cdf86dc020c8db6e"]]},{"id":"3defb6c2507cc419","type":"trigger","z":"f6f2187d.f17ca8","name":"","op1":"","op2":"0","op1type":"pay","op2type":"str","duration":"-1","extend":false,"overrideDelay":false,"units":"s","reset":"false","bytopic":"all","topic":"topic","outputs":1,"x":860,"y":140,"wires":[["793eb05ff82ee7d3"]]},{"id":"793eb05ff82ee7d3","type":"change","z":"f6f2187d.f17ca8","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"$$.delay - ($millis() - $$.payload) - 3600000","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":620,"y":260,"wires":[["7e7df2609c7614f7","bf8580a24000c55c"]]},{"id":"7e7df2609c7614f7","type":"debug","z":"f6f2187d.f17ca8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":830,"y":220,"wires":[]},{"id":"bf8580a24000c55c","type":"ui_template","z":"f6f2187d.f17ca8","group":"674712f8d915bcc0","name":"display","order":5,"width":0,"height":0,"format":"<style>\n .roll-display {\n --size:4;\n display: flex;\n align-content: center;\n justify-content: flex-start;\n flex-direction: row;\n }\n .slot {\n height: calc(var(--size) * 1em);\n width: calc(var(--size) * .8em);\n text-align: center;\n line-height: calc(var(--size) * 1em);\n border: 4px solid #000000a3;\n border-radius: 6px;\n border-top-width: 8px;\n border-bottom-width: 8px;\n position: relative;\n overflow: hidden;\n background: linear-gradient(0deg, #5a5a5a, #b7b7b7,#5d5d5d);\n }\n .num{\n position:absolute;\n left: 0;\n right: 0;\n user-select:none;\n font-size:calc(var(--size) *.7em);\n background: linear-gradient(0deg, #0000005e, #4c4c4c42, #0000005e);\n } \n .current{ \n top:0em;\n transition: top 0.25s;\n }\n .old{\n top:calc(var(--size) * 1em);\n transition: top 0.25s;\n }\n .next{\n top:calc(var(--size) * -1em);\n transition: none;\n }\n .last > .num{\n \n background: linear-gradient(0deg, #53535300, #d5d5d52e, #53535300);\n color: #464646;\n font-weight: 700;\n \n }\n .gap {\n position:relative;\n width: 8px;\n }\n .gap:after {\n content:'•';\n position:absolute;\n bottom:0;\n color:#a4a4a4;\n }\n .label{\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding-right:1em;\n }\n</style>\n\n\n<div id=\"{{'slot_'+$id+'_0'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_1'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_2'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_3'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_4'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_5'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<div id=\"{{'slot_'+$id+'_6'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_7'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<script>\n (function(scope) {\n let lock = false\n scope.previous = [-1,-1,-1,-1,-1,-1,-1,-1]\n scope.drawlist = [true,true,true,true,true,true,true,true]\n scope.$watch('msg', function(msg) {\n if (msg) { \n\n let time = new Date(msg.payload).toTimeString().split(\" \")[0]\n console.log(time)\n\n if(lock){\n // console.log(\"locked\")\n lock = false\n return\n } \n // console.log(msg.payload)\n lock = true \n\n let data = time.split('')\n while(data.length < 8){\n data.unshift(0)\n }\n\n data.forEach((d,i) => \n {\n //d = parseInt(d)\n if(scope.previous[i] == d){\n scope.drawlist[i] = false\n }\n else{\n scope.previous[i] = d\n scope.drawlist[i] = true\n }\n\n })\n \n data.forEach((d,i) => {\n if(scope.drawlist[i] == false){\n return\n }\n let current = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".current\")\n let next = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".next\")\n let old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n\n if(next.length == 0 && old.length > 0){\n next = old\n next.removeClass(\"old\").addClass(\"next\")\n } \n\n next.text(data[i])\n current.removeClass(\"current\").addClass(\"old\").on('transitionend webkitTransitionEnd oTransitionEnd', function () {\n old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n old.removeClass(\"old\").addClass(\"next\")\n lock = false\n });\n next.removeClass(\"next\").addClass(\"current\")\n })\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"roll-display","x":770,"y":320,"wires":[[]]},{"id":"674712f8d915bcc0","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":true,"className":"ordered-1"},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [18 May 2023 09:28 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/7 "2023-05-18T09:28:42Z")

</div>

Hope this works for you as well..

```auto
[{"id":"a84658c9d6d5c820","type":"countdown","z":"3a7be687018418bd","name":"","topic":"","payloadTimerStart":"true","payloadTimerStartType":"bool","payloadTimerStop":"false","payloadTimerStopType":"bool","timer":"150","resetWhileRunning":false,"outputOnReset":false,"setTimeToNewWhileRunning":true,"startCountdownOnControlMessage":false,"x":490,"y":360,"wires":[[],["f82454e950299451","7c89c753fac60841"]]},{"id":"0ea81fc86ff71d46","type":"inject","z":"3a7be687018418bd","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":330,"y":360,"wires":[["a84658c9d6d5c820"]]},{"id":"f82454e950299451","type":"debug","z":"3a7be687018418bd","name":"debug counter","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":720,"y":260,"wires":[]},{"id":"7c89c753fac60841","type":"function","z":"3a7be687018418bd","name":"[s] to [hh:mm:ss]","func":"// Message from preceeding node is in seconds - should be less than 24 hours (86400 seconds).\nvar time = (new Date(msg.payload * 1000)).toUTCString().match(/(\\d\\d:\\d\\d:\\d\\d)/)[0];\n// Pass on the string to the next node, what ever that may be. (groov Data Store for example).\nmsg.payload = time;\nreturn msg;","outputs":1,"noerr":0,"x":720,"y":380,"wires":[["bf567ed67512093a","d8060619ee0b653e","108264717ac2a76b"]]},{"id":"bf567ed67512093a","type":"ui_digital_display","z":"3a7be687018418bd","name":"","group":"d5adff23b794e298","order":1,"width":"12","height":"5","digits":"10","decimals":"2","x":940,"y":380,"wires":[]},{"id":"d8060619ee0b653e","type":"debug","z":"3a7be687018418bd","name":"debug converter","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":940,"y":260,"wires":[]},{"id":"108264717ac2a76b","type":"ui_template","z":"3a7be687018418bd","group":"d5adff23b794e298","name":"display last 2 red","order":5,"width":0,"height":0,"format":"<style>\n .roll-display.red .last>.num {\n color: #bd1818;\n /* text-shadow: 0px 0px 1px black;*/\n }\n</style>\n\n<div id=\"{{'slot_'+$id+'_0'}}\" class=\"slot\" ng-init=\"init()\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_1'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_2'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_3'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_4'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_5'}}\" class=\"slot\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n\n<div id=\"{{'slot_'+$id+'_6'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div id=\"{{'slot_'+$id+'_7'}}\" class=\"slot last\">\n <div class=\"num current\"></div>\n <div class=\"num next\"></div>\n</div>\n<div class=\"unit\"></div>\n\n<script>\n (function(scope) {\n let lock = 0\n const count = 8\n scope.previous = Array(count).fill(-1);\n scope.drawlist = Array(count).fill(true);\n scope.inited = false\n scope.waitingData = null \n scope.init = function(){\n if($(\"#slot_\"+scope.$id+\"_0\".length)){\n actuallyInit()\n }\n else{\n setTimeout(function(){\n actuallyInit()\n },40)\n }\n }\n function actuallyInit(){ \n lock = 0\n if(scope.waitingData){ \n setTimeout(function(){\n callDraw()\n },40)\n }\n scope.inited = true\n }\n\n scope.$watch('msg', function(msg) {\n if (msg) { \n let data = msg.payload.toString().split('')\n if(!scope.inited){\n scope.waitingData = data\n return\n }\n if(checkCollapsed()){\n scope.waitingData = data\n return\n }\n if(locked()){\n scope.waitingData = data\n validateLocks()\n }\n else{\n if(!draw(data)){\n scope.waitingData = data\n setTimeout(function(){\n validateLocks()\n },40)\n }\n \n }\n }\n });\n\n function checkCollapsed(){\n let d = $(\"#slot_\"+scope.$id+\"_0\").closest('.nr-dashboard-cardcontainer').css('display')\n if(d == 'none'){\n lock = 0\n return true\n }\n return false\n }\n\n function locked(){\n return lock > 0 \n }\n\n function pickLock(){\n if(locked()){\n lock --;\n }\n if(lock < 0){\n lock = 0;\n return\n }\n if(!locked()){\n if(scope.waitingData){\n setTimeout(function(){\n callDraw()\n },10) \n }\n }\n }\n\n function validateLocks(){\n let e = 0\n for(let i = 0;i<count;++i){\n e += $(\"#slot_\"+scope.$id+\"_\"+i).find(\".current\").text().length\n } \n if(e == 0){ \n lock = 0\n callDraw()\n }\n }\n\n function callDraw(){ \n if(!scope.waitingData){\n return\n }\n draw(Array.from(scope.waitingData)) \n scope.waitingData = null;\n }\n\n function draw(data){\n if(locked()){ \n return\n }\n let failures = 0 \n while(data.length < count){\n data.unshift(\"0\")\n }\n data.forEach((d,i)=>{\n //d = parseInt(d)\n if(scope.previous[i] == d && $(\"#slot_\"+scope.$id+\"_\"+i).find(\".current\").text().length > 0){\n scope.drawlist[i] = false\n }\n else{\n scope.previous[i] = d\n scope.drawlist[i] = true\n lock ++;\n } \n })\n data.forEach((d,i) => {\n if(scope.drawlist[i] == false){\n return\n }\n let current = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".current\")\n let next = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".next\")\n let old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\") \n \n if(next.length == 0 && old.length > 0){\n old.removeClass(\"old\").addClass(\"next\")\n next = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".next\")\n }\n \n next.text(data[i])\n if(next.length == 0){ \n failures ++\n } \n current.removeClass(\"current\").addClass(\"old\").on('transitionend webkitTransitionEnd oTransitionEnd', function () {\n old = $(\"#slot_\"+scope.$id+\"_\"+i).find(\".old\")\n old.off('transitionend webkitTransitionEnd oTransitionEnd')\n old.removeClass(\"old\").addClass(\"next\")\n pickLock()\n });\n next.removeClass(\"next\").addClass(\"current\")\n \n })\n return failures == 0\n }\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"roll-display red","x":940,"y":490,"wires":[[]]},{"id":"d5adff23b794e298","type":"ui_group","name":"Default","tab":"21be6bad9ec5d5b8","order":1,"disp":true,"width":12,"collapse":false,"className":""},{"id":"21be6bad9ec5d5b8","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

**Author:** ![brian](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@brian](https://discourse.nodered.org/u/brian)\
**Post date:** [18 May 2023 18:46 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/8 "2023-05-18T18:46:05Z")

</div>

thank you for your reply  
This works great 🙂

---

<div class="post-metadata">

**Author:** ![brian](https://avatars.discourse-cdn.com/v4/letter/b/97f17d/32.png) [@brian](https://discourse.nodered.org/u/brian)\
**Post date:** [18 May 2023 18:49 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/9 "2023-05-18T18:49:15Z")

</div>

Thank you for your reply.  
this also works. But i need the high contrast that the node-red-contrib-ui-digital-clock can show.

But your clock looks great and it works!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 June 2023 18:49 UTC](https://discourse.nodered.org/t/getting-digital-display-to-display-time/78506/10 "2023-06-01T18:49:26Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.