Refresh tab page on opening

General
1

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?

2

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 JS clock.

3

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

<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?

4

Is there some css/html with that script?

5

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.

6

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.

<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>
7

There are caveats to using set interval in the Browser setTimeout() / setInterval() Methods Running 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.

8

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.

9

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