Customized Dashboard toolbar does not update after TAB change

Dashboard
1

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.

image
image1184×427 139 KB

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.

image
image835×348 3.97 KB

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

Have you looked at the ui_control node?

3

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

image

4

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