Customized Dashboard toolbar does not update after TAB change

[svho]

In my project (raspberry, MQTT, SignalK(NMEA0183), node-red) to implement a navigation plotter, I would like to display the information time and GPS position in the toolbar. In addition, button NEXT / BACK should be available. This also works, unfortunately the toolbar does not update properly when changing TAB. More and more elements are being added.

The customized toolbar is created via a ui_template. Created from clock in toolbar. Unfortunately, a template has to be created for each tab, because it does not run when integrated into the head section.

Do you have an idea how an automatic refresh of the toolbar can be triggered after tab change or how the problem can be solved?

I hope the question is correctly asked in my first post here.

<script id="buttonScript" type="text/javascript">

var theScope = scope;


        // add buttonNEXT
        var div = $('<div/>');
        var button = document.createElement("BUTTON");
        var img = new Image();
        img.src = '/next-button-icon.png';
        img.height = 50 ;
        button.appendChild(img);
        button.addEventListener("click", doIt);
        button.setAttribute('style', 'background-color: transparent; border-style: none');
        div.append(button);
 
 
        // add buttonBACK
        var div1 = $('<div/>');
        var button1 = document.createElement("BUTTON");
        var img = new Image();
        img.src = '/round-line-left-arrow-icon.png';
        img.height = 50 ;
        button1.appendChild(img);
        button1.addEventListener("click", doItBACK);
        button1.setAttribute('style', 'background-color: transparent; border-style: none');
        div1.append(button1);
 
        
              //add positionlong
        var divlong = $('<div/>');
        var plong = $('<plong id="headerStatuslong" />');
        divlong[0].style.margin = '1px 1px 1px auto';
        divlong.append(plong);
        
        
                    //add positionlat
        var divlat = $('<div/>');
        var plat = $('<plat id="headerStatuslat" />');
        divlat[0].style.margin = '1px 1px 1px auto';
        divlat.append(plat);
        
        
        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');
        div2.append(p);
        div2[0].style.margin = '5px 5px 5px auto';
        
        
        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
            clockInterval = setInterval(displayTime, 1000);

//add to toolbar when it's available
var addToToolbarTimer;



function addToToolbar() {
    var toolbar = $('.md-toolbar-tools');
    if(!toolbar.length) return;

    
    toolbar.append(div1);    
    toolbar.append(divlat);
    toolbar.append(divlong);
    toolbar.append(div2);
    toolbar.append(div);      

    
    
    
    clearInterval(addToToolbarTimer);
}

 addToToolbarTimer = setInterval(addToToolbar, 250);


var msgNEXT = { payload:"NEXT" }
var msgBACK = { payload:"BACK" }

function doIt() {
    theScope.send(msgNEXT);
 }


function doItBACK() {
    theScope.send(msgBACK);
}
 
</script>

[Buckskin]

Have you looked at the ui_control node?

[svho]

Hi, yes. ui_control node is working correctly. It gets the message Change TAB and executes it