Any way to display a payload in the title bar?

[zbyrd]

I have a dashboard that displays industrial sensor data. Each machine gets its own tab and I use a ui_control node to change tabs every 30 seconds so all the data can be seen. However, I would like to make the system-wide air pressure visible on every tab without having to manage a bunch of redundant nodes. I had the idea of displaying this payload in the title bar but I wasn't sure how to go about that. The search function turned up some flows that can display a date in this way but I'm too dumb to reverse engineer this to solve my problem. Any ideas?

[smcgann99]

I am also trying to do something similar.

I have managed to hack this together based on the clock example.
Add this to a ui template node set to site head section.

You can follow this example to add or remove elements as needed.

Then to update the information create a ui template on each tab using my second code, set size to auto so they are invisible.

Elements are targeted by msg.topic eg

msg.topic = status
msg.topic = user

Send a message with the relevant properties to change, eg
msg.fontSize,
msg.color

msg.payload contains the text to display

<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

        //add logo
        var div1 = $('<div  />');
        var logo = new Image();
        logo.src = '/images/logo.png'
        logo.height = 50;
        logo.id="logo"
        div1[0].style.margin = ' auto';
        div1.append(logo);


        //add status message
        var div2 = $('<div id="status" />');
        div2[0].style.margin = '50px auto';
        div2[0].style.color ='white';
        div2[0].style.fontSize ='xx-large';
        div2[0].style.fontWeight='bold';
        
        
         //add user name
        var div3 = $('<div id="user" />');
        div3[0].style.margin = '50px auto';
        div3[0].style.color ='white';
        div3[0].style.fontSize ='xx-large';
        div3[0].style.fontWeight='bold';
        
        
        //add clock
        var div4 = $('<div id="clock"/>');
        var p = $('<p/>');
        
        div4[0].style.fontWeight='bold';
        div4[0].style.fontSize='xx-large' 
        div4.append(p);
        
        function displayTime() {
        var options = {weekday: 'long',  month: 'long', day: 'numeric', hour: 'numeric', minute: '2-digit',second: '2-digit'};
        p.text(new Date().toLocaleString("en-GB", options));
        }
        
        
        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(div2);
            toolbar.append(div3);
            toolbar.append(div4);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

<script>
    scope.$watch('msg', function(data) {
            var elem = document.getElementById(data.topic)
            if(elem !== null) {
                if (data.hasOwnProperty('fontFamily')) {elem.style.fontFamily = data.fontFamily}
                if (data.hasOwnProperty('fontStyle')) {elem.style.fontStyle = data.fontStyle}
                if (data.hasOwnProperty('color')) {elem.style.color = data.color}
                if (data.hasOwnProperty('fontSize')) {elem.style.fontSize = data.fontSize}
                if (data.hasOwnProperty('fontWeight')) {elem.style.fontWeight = data.fontWeight}
                if (data.hasOwnProperty('payload')) {elem.innerHTML = data.payload};
                if (data.hasOwnProperty('image')) {elem.src = data.image};
                
            }
        });
    })(scope);
</script>