Client side (offline) timer

[docpaul]

Hi,
I'm looking for a client-side timer for a reboot function.
I have a button that reboots my router so the network goes down for 20 seconds, I'd like a countdown timer to run in the browser which can still work when the node-red server is not reachable.
I can't find anything, any ideas?

Paul

[yOyOeK1]

Try this out

[
    {
        "id": "790232f589ed9701",
        "type": "inject",
        "z": "e960dab18be5ba03",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 270,
        "y": 940,
        "wires": [
            [
                "b3b079e53d3153cd"
            ]
        ]
    },
    {
        "id": "b3b079e53d3153cd",
        "type": "function",
        "z": "e960dab18be5ba03",
        "name": "",
        "func": "node.status({text:\"start timer\"});\nsetTimeout(()=>{\n    node.status({text:\"timer done!\"});\n    node.send( {\n        topic:\"timerDone\",\n        payload:\"do something after timer !\"\n    } );\n},5000);\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 430,
        "y": 980,
        "wires": [
            [
                "8d8baf3e158dcd85"
            ]
        ]
    },
    {
        "id": "8d8baf3e158dcd85",
        "type": "debug",
        "z": "e960dab18be5ba03",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 680,
        "y": 1060,
        "wires": []
    }
]

It will use setTimeout to send delay msg.

[E1cid]

You can use @yOyOeK1 setTimeout() method in the ui-template node, which will run client side.
e.g.

[{"id":"637fa060b767f935","type":"ui_button","z":"da8a6ef0b3c9a5c8","name":"","group":"2d4fe667.28f8ba","order":19,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"refresh","payloadType":"str","topic":"topic","topicType":"msg","x":230,"y":3980,"wires":[["a70816b6798e4a68","8b6b77106a556a6c"]]},{"id":"a70816b6798e4a68","type":"ui_template","z":"da8a6ef0b3c9a5c8","group":"2d4fe667.28f8ba","name":"","order":20,"width":0,"height":0,"format":"<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg.payload === \"refresh\") {\n \n \n  setTimeout(()=>{\n    location.reload();\n},20000);\n\n    }\n  });\n})(scope);\n\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":420,"y":3980,"wires":[[]]},{"id":"8b6b77106a556a6c","type":"debug","z":"da8a6ef0b3c9a5c8","name":"debug 227","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":510,"y":3920,"wires":[]},{"id":"2d4fe667.28f8ba","type":"ui_group","name":"demo","tab":"1caa8458.b17814","order":2,"disp":true,"width":"12","collapse":false},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

click button and page will reload in 20 seconds

[docpaul]

Hi Node-RED experts,

thanks for the suggestions, the page refresh works great, but I'm looking for a visual 20-second countdown timer, i.e. so the user sees the countdown before the page re-loads.
Do you think this can be done?

Paul.

[E1cid]

Sure it is possible.
There are many examples js countdown timer - Google Search
Try adapting one and adding it to the ui-template.