Am trying to modify my topbar so that a home button, a status indicator and "name plate" is assigned based on these topics earlier:
"Dashboard top bar Logo clickable?" and
"Node-red-dashboard dynamic element in toolbar (flow) - Node-RED"
i am able to show the logo in the topbar the "name plate" and the status indicator, the logo act as a home button but whatever i try the topbar mod is only visible when i click on the "home" menu option on the sidebar, it´s not autoloaded when Node red Dashboard is loaded, question is how can i autoload the topbar mods so they will be shown when the dashboard is loaded?. Secondly how can i fix the indicators so that the "home icon" will be indicated at the far right of the screen, the "status indicator left of it and the "nameplate" exactly in the middle?.
Like i said i copy pasted the code from above topics and needs to be cleaned only for my purposes, is there anybody who can help me with that, i am not a programmer at all but trying to understand bit by bit but this is a little beyond my knowledge of Node-red. This is the code i´m using:
[
{
"id": "a6442178.6c4f3",
"type": "ui_template",
"z": "036824da45036a93",
"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>\n\n<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n \n logo.src = 'data:image/png;base64, <<< cutted to minimize post size >>> '\n logo.height = 50;\n div1[0].style.margin = '10px auto';\n\n var a = $(\"<a/>\"); //create an anchor / hyperlink\n a.attr(\"href\", \"/ui\"); //set HREF to dashboard homepage\n a.append(logo); //add logo to anchor\n div1.append(a); //add anchor to div1\n\n //add clock\n var div2 = $('<div/>');\n var p = $('<p/>');\n\n div2.append(p);\n div2[0].style.margin = '5px';\n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n //clockInterval = setInterval(displayTime, 1000);\n\n //add to toolbar when it's available\n var addToToolbarTimer;\n \n function addToToolbar() {\n var toolbar = $('.md-toolbar-tools');\n \n if(!toolbar.length) return;\n \n toolbar.append(div1);\n toolbar.append(div2);\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n });\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": false,
"templateScope": "local",
"x": 400,
"y": 200,
"wires": [
[]
]
},
{
"id": "251f3209.9dd706",
"type": "inject",
"z": "036824da45036a93",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Activated",
"payloadType": "str",
"x": 240,
"y": 160,
"wires": [
[
"a6442178.6c4f3"
]
]
},
{
"id": "6e62b465.82538c",
"type": "ui_template",
"z": "036824da45036a93",
"group": "fe762942.fd8b08",
"name": "Header Status Indicator",
"order": 2,
"width": "0",
"height": "0",
"format": "<style>\n #headerStatus {\n font-weight: bold;\n text-transform: uppercase;\n }\n #headerStatus.Activated {\n color: lime;\n }\n #headerStatus.Deactivated {\n color: red;\n }\n #headerStatus.Idle {\n color: orange;\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",
"x": 350,
"y": 280,
"wires": [
[]
]
},
{
"id": "573573d6.a455fc",
"type": "inject",
"z": "036824da45036a93",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Deactivated",
"payloadType": "str",
"x": 230,
"y": 200,
"wires": [
[
"a6442178.6c4f3"
]
]
},
{
"id": "e1487f2670836f0b",
"type": "inject",
"z": "036824da45036a93",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Idle",
"payloadType": "str",
"x": 250,
"y": 240,
"wires": [
[
"a6442178.6c4f3"
]
]
},
{
"id": "8a47eef2ba18fbc8",
"type": "ui_template",
"z": "036824da45036a93",
"group": "fe762942.fd8b08",
"name": "",
"order": 2,
"width": 0,
"height": 0,
"format": "<script id=\"clockScript1\" type=\"text/javascript\">\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n/*\n //add logo\n var div1 = $('<div/>');\n var logo = new Image();\n\n logo.src = '/wieland_logo.jpeg'\n logo.height = 45;\n div1[0].style.margin = '10px auto';\n\n div1.append(logo);\n*/\n //add clock\n //var div2 = $('<div/>');\n //var p = $('<p/>');\n\n //div2.append(p);\n //div2[0].style.margin = '5px';\n \n\n function displayTime() {\n p.text(new Date().toLocaleString());\n }\n \n //clockInterval = setInterval(displayTime, 1000);\n\n // add Text\n var div4 = $('<div/>');\n var t = document.createTextNode(\"System Status\"); // <<<Title Here <<<\n \n div4.append(t)\n div4[0].style.margin = '10px auto';\n div4[0].style.size = '10';\n //div4[0].position: fixed;\n //div4[0].right: 150px;\n \n \n \n // add button\n var div3 = $('<div/>');\n var button = document.createElement(\"BUTTON\");\n var b = document.createTextNode(\"Home\")\n button.appendChild(b);\n //div3.position: fixed;\n //div3.right: 150px;\n //button.ng-click=\"send({payload:'1'})\";\n div3.append(button);\n \n //add to toolbar when it's available\n var addToToolbarTimer;\n \n function addToToolbar() {\n var toolbar = $('.md-toolbar-tools');\n \n if(!toolbar.length) return;\n \n toolbar.append(div4);\n //toolbar.append(div1);\n //toolbar.append(div3);\n toolbar.append(div2)\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n });\n</script>",
"storeOutMessages": true,
"fwdInMessages": true,
"resendOnRefresh": true,
"templateScope": "local",
"x": 400,
"y": 240,
"wires": [
[]
]
},
{
"id": "fe762942.fd8b08",
"type": "ui_group",
"name": "Default",
"tab": "3e55b58e.55d1e2",
"order": 1,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "3e55b58e.55d1e2",
"type": "ui_tab",
"name": "Home",
"icon": "dashboard",
"disabled": false,
"hidden": false
}
]
Thank you very much for your assistance.
