Getting digital display to display time

General
1

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

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

3

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

Thank you for replying.

it gives me the same result.
image

6

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

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":"<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}]
8

thank you for your reply
This works great :slight_smile:

9

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!

10

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