Text in Tab's Header

Dashboard
1

I found a flow from the forum to add dynamic code to the browser's Node-Red Dashboard Header.

Request help revising the flow to only show the text, on the dashboard header of the tab, on which the flow is installed.

Below is the forum code that adds dynamic text to all tabs.

Alan

[
    {
        "id": "b66356528745219a",
        "type": "ui_template",
        "z": "699947d1aebaa7ac",
        "group": "876fb52665fd9bec",
        "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,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 4600,
        "y": 660,
        "wires": [
            []
        ]
    },
    {
        "id": "374af03ea286d159",
        "type": "inject",
        "z": "699947d1aebaa7ac",
        "name": "",
        "props": [
            {
                "p": "payload",
                "v": "online",
                "vt": "str"
            },
            {
                "p": "topic",
                "v": "",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "online",
        "payloadType": "str",
        "x": 4410,
        "y": 640,
        "wires": [
            [
                "b66356528745219a"
            ]
        ]
    },
    {
        "id": "dbdcf27634699e40",
        "type": "ui_template",
        "z": "699947d1aebaa7ac",
        "group": "876fb52665fd9bec",
        "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,
        "resendOnRefresh": false,
        "templateScope": "global",
        "className": "",
        "x": 4420,
        "y": 580,
        "wires": [
            []
        ]
    },
    {
        "id": "1615fd91c3717b9c",
        "type": "inject",
        "z": "699947d1aebaa7ac",
        "name": "",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "offline",
        "payloadType": "str",
        "x": 4410,
        "y": 680,
        "wires": [
            [
                "b66356528745219a"
            ]
        ]
    },
    {
        "id": "876fb52665fd9bec",
        "type": "ui_group",
        "name": "Memory-Select",
        "tab": "4b29b624.234878",
        "order": 1,
        "disp": true,
        "width": "3",
        "collapse": false,
        "className": ""
    },
    {
        "id": "4b29b624.234878",
        "type": "ui_tab",
        "name": "Memory",
        "icon": "dashboard",
        "order": 2,
        "disabled": false,
        "hidden": false
    }
]
2

I don't think you can do that because the dashboard has multiple tabs but it is a single web page.

3

Thanks, jbudd.

I see your point. Guess we are dead in the water with this project.

Alan

4

I don't think you can do that because the dashboard has multiple tabs but it is a single web page

I don't know what I was thinking when I said that!

Every tab has content which is only visible on that tab, so all we have to do is move it onto the header, which ought to be manageable with CSS.
Mind you, I am having difficulty making it work...

Edit This seems to work: A template containing a div with position fixed and z-index 1000 :

image
image955×303 9.54 KB

[{"id":"57a0afd6a6c306c6","type":"ui_template","z":"3fd2634d3eb8f47a","group":"f149abdd741ca58e","name":"","order":1,"width":0,"height":0,"format":"<style>\ndiv.onheader {\n  position: fixed;\n  top: 15px;\n  left: 200px;\n  width: 300px;\n  border: 3px solid #73AD21;\n  z-index: 1000;\n}\n</style>\n<div class=\"onheader\"><p>HELLO WORLD</p></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":560,"y":360,"wires":[[]]},{"id":"f149abdd741ca58e","type":"ui_group","name":"Demo","tab":"1caa8458.b17814","order":1,"disp":true,"width":"12","collapse":false,"className":"test"},{"id":"1caa8458.b17814","type":"ui_tab","name":"Demo","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
5

You should also be able to push multiple texts, each with a unique HMTL ID for each tab and make them all hidden using a class. Then you can dynamically change the class (or use a style) to turn on the one that you want when the tab changes - which you can do via the ui control node.

Indeed, you could have a single block in place and change the text content when the tab changes. That should also work.

6

Judd

Great, that works, sort of. The Dashboard header looks good.

How do I not show the widget on the Dashboard?

Alan

Screenshot 2023-09-12 at 1.25.05 PM
Screenshot 2023-09-12 at 1.25.05 PM2686×694 46.6 KB

7

Well I happened to have a tab called "Demo" and a group called "Demo" so I put my template node in there.
You presumably have groups on your chosen tab[s] so it can go it them. If necessary, at the bottom below all your dashboard content.

I never noticed the empty group because
It had another widget in it so the name was already on screen
I was using the light theme and I think both the tab and groups have a white background.

But anyway there is an option in the group config to not show the group name.
I presume you can use more CSS to turn the group background transparent, or set it to the same colour as the overall background.

8

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