Refresh tab page on opening

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?

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.

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

(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);


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

Is there some css/html with that script?

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.

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.

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

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

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.

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.

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