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. [{"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}]

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 [{"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":" \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 \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \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 \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 ","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}]

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

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. [{"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}]

[image] Mechanical counter display Dashboard 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":" \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) …

Mechanical counter display [{"id":"bf8580a24000c55c","type":"ui_template","z":"bf0d83d32eec75c2","group":"674712f8d915bcc0","name":"display","order":5,"width":0,"height":0,"format":" \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 \n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \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 \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 ","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]

Hope this works for you as well.. [{"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":" \n .roll-display.red .last>.num {\n color: #bd1818;\n /* text-shadow: 0px 0px 1px black;*/\n }\n \n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \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 {\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 ","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}]

thank you for your reply This works great :slight_smile:

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!

Node-RED

Node-RED Forum

Getting digital display to display time

General

smanjunath211 18 May 2023 08:52 4

Topic		Replies	Views
Looking for a countdown clock General	24	425	15 May 2026
Need Help with Making a Countdown Timer Display General	56	5248	27 July 2020
Mechanical counter display Dashboard node-red-dashboard , ui-widgets	29	2038	18 December 2022
[ANNOUNCE] node-red-contrib-ui-countdown-timer-switch Share Your Nodes	28	3704	9 August 2021
Countdown timer Dashboard	2	1765	21 June 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Getting digital display to display time

Related topics