Example flow of three clocks in title bar. (Could use some cleanup)

Dashboard
1

I use Node-RED as the core of my global aircraft website.
Got the idea one day to add a few time zones to the title bar of the dashboard.
Here is the code I am currently using. Its not great... Could use some love, but I honestly don't understand a lot of how it works so am a bit afraid to touch it much more.
It also should be noted that you have edit the code each time one of the zones (not UTC) changes due to day light savings.

This is how it looks:

image
image1488Ă—76 3.73 KB

I am not a fan of how the clocks spread out (randomly) and would love to see a divider of some kind ( | ) between them. Would also like to add another 2-3 zones.

We (my son helped me a huge amount with this code) started with the example in the library: Node-red-dashboard clock in toolbar (flow) - Node-RED

From there we ended up with this code in a template node:

// Multiple sections of javascript:
    $('#clock0').remove();
    var toolbar = $('.md-toolbar-tools');
    var div0 = $('<div/>');
    var p0 = $('<p/ id="clock0">');
    
    $('#clock1').remove();
    var toolbar1 = $('.md-toolbar-tools');
    var div1 = $('<div/>');
    var p1 = $('<p/ id="clock1">');
    
    $('#clock2').remove();
    var toolbar2 = $('.md-toolbar-tools');
    var div2 = $('<div/>');
    var p2 = $('<p/ id="clock2">');
    
// Multiple sections of formatting
    div0.append(p0);
    div0[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div0);
    
    div1.append(p1);
    div1[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div1);
    
    div2.append(p2);
    div2[0].style.margin = '5px 5px 5px auto';
    toolbar.append(div2);
    
// critical functions:
    function displayTitle(lh) {
        p0.text(lh);
        p1.text(lh);
        p2.text(lh);
    }
    function twoDig(val) {return (('0'+val).slice(-2));}
    function upTime() {
        var d = new Date();
        // Adjust the offset when DST comes and goes (Dont display seconds-too cluttered)
        hours = d.getUTCHours();
        minutes = twoDig(d.getUTCMinutes());
        p0.text("UTC : " + twoDig(hours+0) + ':' + minutes);
        p1.text("PST : " + twoDig((hours+17)%24) + ':' + minutes);
        p2.text("AEST : " + twoDig((hours+10)%24) + ':' + minutes);
    }
    // Watch the payload and update the title
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            displayTitle(data);
        });
        setInterval(upTime,1000);
    })(scope);
</script>

Hope it helps someone as it took a good chunk of time and effort to get it working.

Cheers.

4 Likes
2

This is interesting. I live in Arizona USA and Sonora MEX... neither one of these states in their respective countries recognize daylight savings time.... (too much sun in the Sonora Desert.... so who wants the day to be any longer at all in the summertime!)... So, I can make use of your code without worry. But of course, I do have to worry about the other two time zones if I used three of them.

3

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