# Refresh tab page on opening

**URL:** <https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451>\
**Category:** General\
**Created:** [11 November 2022 14:07 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451 "2022-11-11T14:07:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![andro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andro/32/70042_2.png) [@andro](https://discourse.nodered.org/u/andro)\
**Post date:** [11 November 2022 14:07 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/1 "2022-11-11T14:07:07Z")

</div>

Newbie here. I have a Javascript/CSS clock that I wrote that works great. It takes an injected message every one second to update the time. All is good but of course there is a delay of up to one second when you open that tab, during which the hands sit as 12 noon as the clock is waiting for the next message. It's a minor thing but it does not look very polished.

Is there a way to somehow stimulate the message injection on opening the tab?

I read some threads on the ui control node and the help for the node but I'm afraid I don't know how to apply it, or if this is what is needed anyway.

Or is there a way to do this in Javascript?

---

<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:** [11 November 2022 15:18 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/2 "2022-11-11T15:18:45Z")

</div>

Would it not be easier if the ui-template node did its own updating every second, of the time, as the code is run in the browser, not node-red injecting a message every second and sending it to the browser.  
Have look at [setTimeout and setInterval](https://www.google.com/search?q=browser+clock+with+setTimeout+setinterval+js&client=ms-unknown&ei=lWRuY4bCF-WOxc8PicOjgAo&oq=browser+clock+with+set%7CTimeout+setinterval+js&gs_lcp=ChNtb2JpbGUtZ3dzLXdpei1zZXJwEAMyBQgAEKIEMgUIABCiBDIFCAAQogQyBQgAEKIEOgoIABBHENYEELADOgoIIRDDBBAKEKABOgYIIRAKEBU6BAghEApKBAhBGABQmIsGWNKpBmD-xAZoA3AAeACAAZ4BiAGpDJIBBDAuMTKYAQCgAQHIAQjAAQE&sclient=mobile-gws-wiz-serp) JS clock.

---

<div class="post-metadata">

**Author:** ![andro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andro/32/70042_2.png) [@andro](https://discourse.nodered.org/u/andro)\
**Post date:** [11 November 2022 15:30 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/3 "2022-11-11T15:30:09Z")

</div>

That sounds promising. Where does one put such code? Here's the ui template Angular code:

```auto
<script>
(function(scope) {
scope.$watch('msg', function(msg) {
if (msg) {
    const currentDate = new Date();
    const secondsRatio = currentDate.getSeconds() / 60;
    const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
    const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

    document.getElementById('second'+scope.$id).style.setProperty('--rotation', secondsRatio * 360);
    document.getElementById('minute'+scope.$id).style.setProperty('--rotation', minutesRatio * 360);
    document.getElementById('hour'+scope.$id).style.setProperty('--rotation', hoursRatio * 360);
}

});
})(scope);
</script>

```

My current (limited) understanding is that is a lamda function, so how would I call it from a timer/interval Javascript function?

---

<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:** [11 November 2022 15:51 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/4 "2022-11-11T15:51:37Z")

</div>

Is there some css/html with that script?

---

<div class="post-metadata">

**Author:** ![andro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andro/32/70042_2.png) [@andro](https://discourse.nodered.org/u/andro)\
**Post date:** [11 November 2022 22:46 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/5 "2022-11-11T22:46:55Z")

</div>

Yes, of course,. Quite a lot. I did not post as I thought it not pertinent, is it? The Angular just gets a message acting purely as a trigger and sets the position of clock hands based on the current time from Date(), as can be seen. And of course there is HTML to make the page.

That's a standard bit of Angular straight from the Help for the ui template node.

I am a Node RED beginner so I'sm sure the answer is something simple, as you have suggested, but I don't know how to implement it in the context of Node RED.

---

<div class="post-metadata">

**Author:** ![andro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andro/32/70042_2.png) [@andro](https://discourse.nodered.org/u/andro)\
**Post date:** [11 November 2022 23:26 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/6 "2022-11-11T23:26:42Z")

</div>

I believe I have figured it out. Instead of using the Angular scope I simply changed to using a plain Javascript function and used setInterval() as suggested and it works. I did not realise that it was not essential to use the Angular scope watcher. Hopefully this may help other beginners in the future.

Adding a call to the function that sets the clock hands at the top makes the refresh instant, and then setInterval(0 takes over.

```auto
<script>
    myClock();
</script>
    
<div class="clock">
    <div class="hand hour" id="hour"></div>
    <div class="hand minute" id="minute"></div>
    <div class="hand second" id="second"></div>
    <div class="number number1">I</div>
    <div class="number number2">II</div>
    <div class="number number3">III</div>
    <div class="number number4">IIII</div>
    <div class="number number5">V</div>
    <div class="number number6">VI</div>
    <div class="number number7">VII</div>
    <div class="number number8">VIII</div>
    <div class="number number9">IX</div>
    <div class="number number10">X</div>
    <div class="number number11">XI</div>
    <div class="number number12">XII</div>
 </div>

<script>
function myClock() {
    const currentDate = new Date();
    const secondsRatio = currentDate.getSeconds() / 60;
    const minutesRatio = (secondsRatio + currentDate.getMinutes()) / 60;
    const hoursRatio = (minutesRatio + currentDate.getHours()) / 12;

    document.getElementById('second').style.setProperty('--rotation', secondsRatio * 360);
    document.getElementById('minute').style.setProperty('--rotation', minutesRatio * 360);
    document.getElementById('hour').style.setProperty('--rotation', hoursRatio * 360);
}
setInterval(myClock, 1000);
</script>

```

---

<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:** [11 November 2022 23:51 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/7 "2022-11-11T23:51:52Z")

</div>

There are caveats to using set interval in the Browser [setTimeout() / setInterval() Methods Running on Inactive Tab](https://usefulangle.com/post/280/settimeout-setinterval-on-inactive-tab)

Cool, you managed to work it out, glad to of helped.  
p.s. I asked for css as i like to test before posting if possible, and I am sure others might like the full picture or a link to it.

---

<div class="post-metadata">

**Author:** ![andro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andro/32/70042_2.png) [@andro](https://discourse.nodered.org/u/andro)\
**Post date:** [12 November 2022 00:03 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/8 "2022-11-12T00:03:39Z")

</div>

Actually I'm not done yet. When I move away from that tab the console continously prints dozens of messages:

` Uncaught TypeError: Cannot read properties of null (reading 'style') at myClock (<anonymous>:8:38)`

So now the problem has shifted. Not sure what to do about that! Especially since I removed the initial single call to myClock(). Worse, this happens when I revert to the orginal Angular scope watch code.

---

<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:** [11 January 2023 00:03 UTC](https://discourse.nodered.org/t/refresh-tab-page-on-opening/70451/9 "2023-01-11T00:03:52Z")

</div>

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