# Client side (offline) timer

**URL:** <https://discourse.nodered.org/t/client-side-offline-timer/74288>\
**Category:** Dashboard\
**Created:** [28 January 2023 10:14 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288 "2023-01-28T10:14:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![docpaul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/docpaul/32/62005_2.png) [@docpaul](https://discourse.nodered.org/u/docpaul)\
**Post date:** [28 January 2023 10:14 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288/1 "2023-01-28T10:14:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![yOyOeK1](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yoyoek1/32/73011_2.png) [@yOyOeK1](https://discourse.nodered.org/u/yOyOeK1)\
**Post date:** [28 January 2023 11:39 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288/2 "2023-01-28T11:39:33Z")

</div>

Try this out

```auto
[
    {
        "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.

---

<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:** [28 January 2023 13:46 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288/3 "2023-01-28T13:46:02Z")

</div>

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

```auto
[{"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

---

<div class="post-metadata">

**Author:** ![docpaul](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/docpaul/32/62005_2.png) [@docpaul](https://discourse.nodered.org/u/docpaul)\
**Post date:** [30 January 2023 02:31 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288/4 "2023-01-30T02:31:33Z")

</div>

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.

---

<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:** [30 January 2023 08:10 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288/5 "2023-01-30T08:10:05Z")

</div>

Sure it is possible.  
There are many examples [js countdown timer - Google Search](https://www.google.com/search?q=js+countdown+timer&oq=js+countdown+timer)  
Try adapting one and adding it to the ui-template.

---

<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 March 2023 08:10 UTC](https://discourse.nodered.org/t/client-side-offline-timer/74288/6 "2023-03-01T08:10:21Z")

</div>

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