Bind text in the Dashboard header

[rlamp]

I would like to display the connection status of my IoT device in the Dashboard header. I have found this flow that displays date and time in the header, but I haven't found anything that would bind the header to messages. I have tried hacking this flow but with little success. Ideally there would be a node similar to ui_text that would be displayed in the header.

Any ideas out there?

[zenofmud]

Welcome to the forum

If the device is disconnected you will see this message in the editor:

and this in the dashboard:

[rlamp]

I guess I was not clear enough. I have an IoT device connected to my MQTT broker. Node-red also connects to the MQTT broker and displays the connection status between the device and the broker.

[zenofmud]

Ahhh, I missed that (read before my first cup of coffee kicked in).

You could try contact in @robertsLando who wrote that flow to see if he could help or someone else might jump in and figure out how to adapt that code. I've been able to change the clock to text but can't figure out how to get something from msg.payload to appear.

[robertsLando]

If you would like to see it in all dashboards tabs you could use my flow as a base, then place an hidden template node in all tabs (in template node options place it in the body and not in the head section because if in the head it cannot receive msg inputs) in that template just set up the template node to watch for the input:

<script>
    (function(scope) {
        scope.$watch('msg.payload', function(data) {
            // get the element from the dashoard header and change its status using normal js/html
            var elem = document.getElementById("headerStatus")
            elem.className = data.payload ? 'online' : 'offline';
        });
    })(scope);
</script>

[rlamp]

Good enough solution for me. Thank you.
Here is the final result.

[{"id":"3bab7d86.a7d252","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a6442178.6c4f3","type":"ui_template","z":"3bab7d86.a7d252","group":"fe762942.fd8b08","name":"","order":0,"width":0,"height":0,"format":"<script>\n    (function(scope) {\n        scope.$watch('msg', function(data) {\n            var elem = document.getElementById(\"headerStatus\")\n            if(elem !== null) {\n                elem.className = data.payload;\n                elem.innerHTML = data.payload;\n            }\n        });\n    })(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":320,"y":140,"wires":[[]]},{"id":"251f3209.9dd706","type":"inject","z":"3bab7d86.a7d252","name":"","topic":"","payload":"online","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":120,"wires":[["a6442178.6c4f3"]]},{"id":"6e62b465.82538c","type":"ui_template","z":"3bab7d86.a7d252","group":"fe762942.fd8b08","name":"Header Status","order":2,"width":"0","height":"0","format":"<style>\n    #headerStatus {\n        font-weight: bold;\n        text-transform: uppercase;\n    }\n    #headerStatus.online {\n        color: lime;\n    }\n    #headerStatus.offline {\n        color: tomato;\n    }\n</style>\n\n<script id=\"titleScript\" type=\"text/javascript\">\n$(function() {\n    if($('.md-toolbar-tools').length){\n        initHeader();\n    } else setTimeout(initHeader, 500)\n});\n\nfunction initHeader(){\n    if (!$('#headerStatus').length) {\n        var toolbar = $('.md-toolbar-tools');\n        var div = $('<div/>');\n        var p = $('<p id=\"headerStatus\" />');\n        div[0].style.margin = '5px 5px 5px auto';\n        div.append(p);\n        toolbar.append(div);\n    }\n}\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"global","x":140,"y":60,"wires":[[]]},{"id":"573573d6.a455fc","type":"inject","z":"3bab7d86.a7d252","name":"","topic":"","payload":"offline","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":130,"y":160,"wires":[["a6442178.6c4f3"]]},{"id":"fe762942.fd8b08","type":"ui_group","z":"","name":"Default","tab":"3e55b58e.55d1e2","disp":true,"width":"6","collapse":false},{"id":"3e55b58e.55d1e2","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

[robertsLando]

Glad you made it. I suggest to create a flow in node red flows with it, could help other users

[rlamp]

Here is the flow if anyone will be looking for it.