Countdown timer

[brian1]

Hi. This is my first post and don't know mouth about java scrips and need some( a lot) of help.
Im urgently looking for a count down timer as the one we been using stopped working its about 10 yours old, so looking to upgrade it to something better and node red ui is perfect for what i want to do. (every one on the network can see it)

Is there anyone that can help me under stand this concept to make it work.

Countdown clock.json (5.4 KB)

[Steve-Mcl]

Something like this should get you close to what you want.

[{"id":"90447108.7e9cc","type":"ui_button","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":2,"width":3,"height":1,"passthru":false,"label":"-","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"-1","payloadType":"num","topic":"topic","topicType":"msg","x":130,"y":220,"wires":[["314a231af5cc42b1"]]},{"id":"73d35d03.74b9a4","type":"ui_button","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":4,"width":3,"height":1,"passthru":false,"label":"+","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"1","payloadType":"num","topic":"topic","topicType":"msg","x":450,"y":220,"wires":[["217c5bd6f65d2089"]]},{"id":"d773305b.7df838","type":"ui_text","z":"3422959b.40de62","group":"9a6254e6.c472c8","order":3,"width":2,"height":1,"name":"","label":"1 Min","format":"{{msg.payload}}","layout":"row-center","x":310,"y":220,"wires":[]},{"id":"a27e6a3d.6c9388","type":"ui_button","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":5,"width":3,"height":1,"passthru":false,"label":"-","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"-5","payloadType":"num","topic":"topic","topicType":"msg","x":130,"y":300,"wires":[["e5c0c3a596a0b11d"]]},{"id":"9e44e8f6.868498","type":"ui_button","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":7,"width":3,"height":1,"passthru":false,"label":"+","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"+5","payloadType":"num","topic":"topic","topicType":"msg","x":450,"y":300,"wires":[["dc5f071d9f131608"]]},{"id":"9ab3331d.e90d08","type":"ui_text","z":"3422959b.40de62","group":"9a6254e6.c472c8","order":6,"width":2,"height":1,"name":"","label":"5 Mins","format":"{{msg.payload}}","layout":"row-center","x":310,"y":300,"wires":[]},{"id":"dad398ac.50ad18","type":"ui_button","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":8,"width":0,"height":0,"passthru":false,"label":"RUN/PAUSE","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":150,"y":440,"wires":[["2827f4ca380f5587"]]},{"id":"b97bc1c0.cb899","type":"ui_template","z":"3422959b.40de62","group":"","name":"Clock Toolbar","order":2,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n\n$(function() {\n    if($('.md-toolbar-tools').length != 0){\n        loadClock();\n    }else setTimeout(loadClock, 500)\n});\n\nfunction loadClock(){\n    $('#clock').remove();\n    var toolbar = $('.md-toolbar-tools');\n    \n    var div = $('<div/>');\n    var p = $('<p/ id=\"clock\">');\n    \n    div.append(p);\n    div[0].style.margin = '5px 5px 5px auto';\n    toolbar.append(div);\n\n    function displayTitle(lh) {\n        p.text(lh); \n    }\n    \n    function upTime() {\n        var d = new Date();\n        p.text(d.toLocaleString());\n    }\n\n    if(document.clockInterval){ \n            clearInterval(document.clockInterval);\n            document.clockInterval = null;\n    }\n        \n    document.clockInterval = setInterval(upTime,1000);\n}\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"global","className":"","x":160,"y":160,"wires":[[]]},{"id":"6df0dfff.72ea18","type":"ui_digital_display","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":1,"width":8,"height":2,"digits":5,"decimals":"2","x":1020,"y":440,"wires":[]},{"id":"f546b0e8a07ea35d","type":"inject","z":"3422959b.40de62","name":"every 1 second","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":720,"y":300,"wires":[["9f5ee17aa6e76be2"]]},{"id":"2827f4ca380f5587","type":"function","z":"3422959b.40de62","name":"toggle flow.clock_state","func":"let clock_state = flow.get(\"clock_state\") || \"stop\";\n\nclock_state = clock_state === \"stop\" ? \"run\" : \"stop\";\n\nflow.set(\"clock_state\", clock_state );\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":440,"wires":[[]]},{"id":"9f5ee17aa6e76be2","type":"switch","z":"3422959b.40de62","name":"flow.clock_state == \"run\" ?","property":"clock_state","propertyType":"flow","rules":[{"t":"eq","v":"run","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":940,"y":300,"wires":[["3c94b9b09226e426"]]},{"id":"5b86e6602e59cfd9","type":"inject","z":"3422959b.40de62","name":"init","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":690,"y":220,"wires":[["c0e7c1fb98d206f8"]]},{"id":"c0e7c1fb98d206f8","type":"change","z":"3422959b.40de62","name":"set clock_value to 0","rules":[{"t":"set","p":"clock_value","pt":"flow","to":"0","tot":"num"},{"t":"set","p":"clock_state","pt":"flow","to":"stop","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":860,"y":220,"wires":[[]]},{"id":"40463b17547e4c43","type":"function","z":"3422959b.40de62","name":"adjust flow.clock_value","func":"let clock_value = flow.get(\"clock_value\") || 0;\n\nclock_value += (msg.payload * 60);\n\nif (clock_value < 0) clock_value = 0;\n\nflow.set(\"clock_value\", clock_value);\n\nmsg.payload = clock_value;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":380,"wires":[["6cc62f0c313a0038"]]},{"id":"0a9bd8efbb26d5fd","type":"link in","z":"3422959b.40de62","name":"","links":["217c5bd6f65d2089","dc5f071d9f131608","314a231af5cc42b1","e5c0c3a596a0b11d"],"x":95,"y":380,"wires":[["40463b17547e4c43"]]},{"id":"e5c0c3a596a0b11d","type":"link out","z":"3422959b.40de62","name":"","links":["0a9bd8efbb26d5fd"],"x":215,"y":300,"wires":[]},{"id":"314a231af5cc42b1","type":"link out","z":"3422959b.40de62","name":"","links":["0a9bd8efbb26d5fd"],"x":215,"y":220,"wires":[]},{"id":"217c5bd6f65d2089","type":"link out","z":"3422959b.40de62","name":"","links":["0a9bd8efbb26d5fd"],"x":535,"y":220,"wires":[]},{"id":"dc5f071d9f131608","type":"link out","z":"3422959b.40de62","name":"","links":["0a9bd8efbb26d5fd"],"x":535,"y":300,"wires":[]},{"id":"3c94b9b09226e426","type":"function","z":"3422959b.40de62","name":"decrement flow.clock_value","func":"let clock_value = flow.get(\"clock_value\") || 0;\n\nclock_value--; \n\nif (clock_value < 0) clock_value = 0;\n\nflow.set(\"clock_value\", clock_value);\n\nmsg.payload = clock_value;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":380,"wires":[["947c9805c834a7e1","6cc62f0c313a0038"]]},{"id":"89793c7330ef9f6f","type":"ui_button","z":"3422959b.40de62","name":"","group":"9a6254e6.c472c8","order":8,"width":0,"height":0,"passthru":false,"label":"RESET","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"0","payloadType":"num","topic":"reset","topicType":"str","x":140,"y":500,"wires":[["18e6774b8d93dcfd"]]},{"id":"18e6774b8d93dcfd","type":"change","z":"3422959b.40de62","name":"set clock_value to 0","rules":[{"t":"set","p":"clock_value","pt":"flow","to":"0","tot":"num"},{"t":"set","p":"payload","pt":"msg","to":"0","tot":"num"}],"action":"","property":"","from":"","to":"","reg":false,"x":350,"y":500,"wires":[["6cc62f0c313a0038"]]},{"id":"947c9805c834a7e1","type":"debug","z":"3422959b.40de62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1010,"y":360,"wires":[]},{"id":"6cc62f0c313a0038","type":"function","z":"3422959b.40de62","name":"seconds to minute:seconds","func":"let secsDecimal = msg.payload;\n\nlet mins = Math.floor(secsDecimal/60);\nlet secs = secsDecimal % 60;\n\nmsg.payload = (mins + (secs / 100.0)).toFixed(2)\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":440,"wires":[["6df0dfff.72ea18","488c6335a0d62db5"]]},{"id":"488c6335a0d62db5","type":"debug","z":"3422959b.40de62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1010,"y":500,"wires":[]},{"id":"9a6254e6.c472c8","type":"ui_group","name":"Default","tab":"2043e431.1fd824","order":1,"disp":false,"width":"8","collapse":false},{"id":"2043e431.1fd824","type":"ui_tab","name":"ON TIME","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

NOTE: As the time value is computed server side and passed to the browser, I limit the updates to 1 second. If you re-do this to have the client side do the work, you should be able to animate milliseconds.

[brian1]

Thank you very much this is just what i was looking for. for now this can work, thanks. i still need to add some things . will post updates here. thanks.