No also no result in the topBar, I try it later again with a chrome browser
sorry - but working here as well...
Also in chrome browser no result, what could it be? I have Node-RED installed on the Raspberry Pi and the latest version of Node-RED
Well, it works very well in my Raspberry Pi as well, and it seems browser independent as well
One thing I would just double-check is that the template still is connected with the correct group and tab in the dashboard
If still no go, I suggest you select template node and make an export -> and put it here in a response so we can help you further
Many thanks for the help, it works now. 
the problem was i had the template as "Added to site section"
the upper error message is from a function node and the lower from the ui_control here is the flow
> [{"id":"8dcae8af.116fc","type":"ui_template","z":"4ba05176.92ace8","group":"6f3b634d.7e841c","name":"Logo / Clock","order":10,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var param = 'Home';\n var theScope = scope;\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(\"TRAINING\"); // hier den Title eingeben\n div4.append(t)\n div4[0].style.margin = '40px auto';\n div4[0].style.size = '40';\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 button.addEventListener(\"click\", doIT.bind(null, param));\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 function doIT(m){\n theScope.send(m);\n }\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":40,"wires":[["e556322d.c718b"]]},{"id":"e556322d.c718b","type":"function","z":"4ba05176.92ace8","name":"Language setting","func":"msg.payload=\"Home\";\nreturn msg;","outputs":1,"noerr":0,"x":370,"y":220,"wires":[["3084ba76.818e06","2772f311.62dc1c"]]},{"id":"2772f311.62dc1c","type":"ui_ui_control","z":"4ba05176.92ace8","name":"","x":640,"y":80,"wires":[["d35bf062.029c6"]]},{"id":"3084ba76.818e06","type":"debug","z":"4ba05176.92ace8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":630,"y":200,"wires":[]},{"id":"d35bf062.029c6","type":"debug","z":"4ba05176.92ace8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":810,"y":120,"wires":[]},{"id":"6f3b634d.7e841c","type":"ui_group","z":"","name":"Buttons","tab":"fc129880.475208","order":1,"disp":false,"width":"6","collapse":false},{"id":"fc129880.475208","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]
how can I add a payload ?
You wanna send a payload to the ui_template and change something for the button? Or do you want the ui_template to send out a payload (this is already working I assume)?
I want the ui_template to send out a payload. At the moment in the ui_template send out a msg: string[], but for the ui_template I need msg.payload
krambriw's example sent a payload... I thought you copied that ?
yes i copied the example from krambriw´s, but it sends for me a msg not a msg.payload. if it was msg.payload the ui_controll would not output an error message or?
[{"id":"8dcae8af.116fc","type":"ui_template","z":"4ba05176.92ace8","group":"6f3b634d.7e841c","name":"Logo / Clock","order":10,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var param = 'Home';\n var theScope = scope;\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(\"TRAINING\"); // hier den Title eingeben\n div4.append(t)\n div4[0].style.margin = '40px auto';\n div4[0].style.size = '40';\n \n // add button\n var div3 = $('<div/>');\n var button = document.createElement(\"BUTTON\");\n var b = document.createTextNode(\"Home\")\n var logo = new Image();\n //logo.src='/wieland_logo.jpeg';\n //logo.height=45;\n //button.appendChild(logo);\n //button.height=45;\n //button.left=50; \n //button.appendChild(b);\n button.addEventListener(\"click\", doIT.bind(null, param));\n div3.append(button);\n \n //var div5 =$('<div/>');\n //var taster = document.createElement(\"Button\");\n //var pic = new Image();\n //pic.src = \"/wieland_logo.jpeg\";\n //pic.height=45;\n //taster.appendChild(pic);\n //pic.addEventListener(\"click\", doIT.bind(null,param));\n //div5.append(taster);\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 //toolbar.append(div5);\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 function doIT(m){\n theScope.send(m);\n }\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":330,"y":40,"wires":[["d35bf062.029c6","2772f311.62dc1c"]]},{"id":"2772f311.62dc1c","type":"ui_ui_control","z":"4ba05176.92ace8","name":"","x":620,"y":120,"wires":[[]]},{"id":"d35bf062.029c6","type":"debug","z":"4ba05176.92ace8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","x":790,"y":80,"wires":[]},{"id":"6f3b634d.7e841c","type":"ui_group","z":"","name":"Buttons","tab":"fc129880.475208","order":1,"disp":false,"width":"6","collapse":false},{"id":"fc129880.475208","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]
Alright, you can do like this:
Create param as a new object, then set the payload to whatever (in this example 'test'
var param = new Object();
param.payload = 'test';
Now when you click the button, it will work
Thanks for your support 
the button in TopBar works well. I want to hide the side-nav too, but both doesn´t work together so either I hide the side-nav or I show the button in TopBar. Any reason for this?
In the flow are both ui_templates
`
[{"id":"d13e291a.c98c5","type":"ui_template","z":"920bd247.0b5318","group":"79d56da6.863e74","name":"Sidebar verstecken","order":11,"width":0,"height":0,"format":"\n<script>\n $(\"md-sidenav\").hide();\n $(\"md-toolbar button\").hide(); \n</script>\n","storeOutMessages":true,"fwdInMessages":true,"templateScope":"global","x":550,"y":340,"wires":[[]]},{"id":"5861b889.53e738","type":"ui_template","z":"920bd247.0b5318","group":"24f6ffb4.136468","name":"TopBar","order":1,"width":0,"height":0,"format":"<script id=\"clockScript1\" type=\"text/javascript\">\n var home = new Object();\n home.payload = 'Home';\n var language= new Object();\n language.payload = 'change';\n var theScope = scope;\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(\"TRAINING\"); // hier den Title eingeben\n div4.append(t)\n div4[0].style.margin = '40px auto';\n div4[0].style.size = '40';\n \n // add button\n var div3 = $('<div/>');\n var button = document.createElement(\"BUTTON\");\n var b = document.createTextNode(\"Home\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button.height=45;\n //button.left=50; \n button.appendChild(b);\n button.addEventListener(\"click\", doIT.bind(null, home));\n div3.append(button);\n \n //var div5 =$('<div/>');\n //var taster = document.createElement(\"Button\");\n //var pic = new Image();\n //pic.src = \"/home.png\";\n //pic.height=45;\n //taster.appendChild(pic);\n //pic.addEventListener(\"click\", doThis.bind(null,language));\n //div5.append(taster);\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 //toolbar.append(div5);\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 function doIT(m){\n theScope.send(m);\n }\n \n function doThis(m){\n theScope.send(m);\n }\n });\n \n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":380,"y":340,"wires":[[]]},{"id":"79d56da6.863e74","type":"ui_group","z":"","name":"Buttons","tab":"aea44e8c.a6024","order":1,"disp":true,"width":"6","collapse":false},{"id":"24f6ffb4.136468","type":"ui_group","z":"","name":"TopBar","tab":"8e0f7752.ff481","order":13,"disp":false,"width":"1","collapse":false},{"id":"aea44e8c.a6024","type":"ui_tab","z":"","name":"Ausgänge","icon":"<i class=\"fa fa-lightbulb-o\" aria-hidden=\"true\"></i>","order":13},{"id":"8e0f7752.ff481","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]
`
2 Likes
Sorry, this I do not know. I assume the code for this is in the dashboard nodes but I might be wrong on this
Ok, another question, is there a posibillity to fix the position?
For the groups you do it with position: fixed; top: 11px; left 22px;
Is that possible for the Topbar?
Sorry, I do not have such knowledge
ok,
if you want to display the buttons and hide the navigation menu, you have to implement both code parts in a template, then it works
Nothing meaningful to add.
Just wanted to appreciate @Tobi for great idea and reasonable implementation of what I tried to do some time ago. Thank you!
Hi,
I slightly modded @Tobi's flow to get following:
- Previous and Next tab buttons.
- Head title click returns to the main tab.
- Date/time in custom format (kinda european).
- Merge side bar hide into top-bar controls.
My question is:
The ui_template node can be a part of of page or a widget in a group. Why the script works when it's widget in a group and doesn't work when it's part of of page?
[
{
"id": "bf7f52f8.7764b",
"type": "ui_template",
"z": "9f3346aa.d4fc48",
"group": "721fb8ce.3dc1d8",
"name": "TopBar",
"order": 1,
"width": "1",
"height": "1",
"format": "<script>\n $(\"md-sidenav\").hide();\n $(\"md-toolbar button\").hide(); \n</script>\n<script id=\"clockScript1\" type=\"text/javascript\">\n var home = new Object();\n home.payload = 0;\n var prev = new Object();\n prev.payload = '-1';\n var next = new Object();\n next.payload = '+1';\n var language= new Object();\n language.payload = 'change';\n var theScope = scope;\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 divDate = $('<div/>');\n var p = $('<p/>');\n\n divDate.append(p);\n divDate[0].style.margin = '5px';\n \n\n function displayTime() {\n var options = {weekday: 'short', year: '2-digit', month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit'};\n p.text(new Date().toLocaleString(\"en-GB\", options));\n }\n \n clockInterval = setInterval(displayTime, 1000);\n\n // add Text\n var divTitle = $('<div title=\"Go to Main Screen\"/>');\n var t = document.createTextNode(\"Smart Home\"); // hier den Title eingeben\n divTitle.append(t)\n divTitle[0].style.margin = '40px auto';\n divTitle[0].style.size = '40';\n divTitle[0].addEventListener(\"click\", doIT.bind(null, home));\n \n // add button\n var divPrev = $('<div/>');\n var button1 = document.createElement(\"BUTTON\");\n var lab1 = document.createTextNode(\"Prev\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button1.height=45;\n //button.left=50; \n button1.appendChild(lab1);\n button1.addEventListener(\"click\", doIT.bind(null, prev));\n divPrev.append(button1);\n \n var divNext = $('<div/>');\n var button2 = document.createElement(\"BUTTON\");\n var lab2 = document.createTextNode(\"Next\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button2.height=45;\n //button.left=50; \n button2.appendChild(lab2);\n button2.addEventListener(\"click\", doIT.bind(null, next));\n divNext.append(button2);\n\n var div6 = $('<div/>');\n var button3 = document.createElement(\"BUTTON\");\n var lab3 = document.createTextNode(\"Main\")\n //var logo = new Image();\n //logo.src='/sprache.png';\n //logo.height=45;\n //button.appendChild(logo);\n button3.height=45;\n //button.left=50; \n button3.appendChild(lab3);\n button3.addEventListener(\"click\", doIT.bind(null, home));\n div6.append(button3);\n \n //var divNext =$('<div/>');\n //var taster = document.createElement(\"Button\");\n //var pic = new Image();\n //pic.src = \"/home.png\";\n //pic.height=45;\n //taster.appendChild(pic);\n //pic.addEventListener(\"click\", doThis.bind(null,language));\n //divNext.append(taster);\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 //toolbar.append(divNext);\n toolbar.append(divPrev);\n // toolbar.append(div6);\n toolbar.append(divTitle);\n //toolbar.append(div1);\n toolbar.append(divNext);\n toolbar.append(divDate)\n clearInterval(addToToolbarTimer);\n }\n addToToolbarTimer = setInterval(addToToolbar, 100);\n \n function doIT(m){\n theScope.send(m);\n }\n \n // function doThis(m){\n // theScope.send(m);\n // }\n });\n \n</script>",
"storeOutMessages": true,
"fwdInMessages": false,
"templateScope": "local",
"x": 440,
"y": 1140,
"wires": [
[
"4136bbf3.510a14",
"f585c34a.1165c"
]
]
},
{
"id": "4136bbf3.510a14",
"type": "debug",
"z": "9f3346aa.d4fc48",
"name": "topbar",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"x": 630,
"y": 1140,
"wires": []
},
{
"id": "f585c34a.1165c",
"type": "ui_ui_control",
"z": "9f3346aa.d4fc48",
"name": "Control tabs",
"x": 650,
"y": 1220,
"wires": [
[]
]
},
{
"id": "721fb8ce.3dc1d8",
"type": "ui_group",
"z": "",
"name": "Living room",
"tab": "531ef1f0.9a426",
"order": 3,
"disp": true,
"width": "6",
"collapse": false
},
{
"id": "531ef1f0.9a426",
"type": "ui_tab",
"z": "",
"name": "MyDashboard",
"icon": "home",
"order": 1
}
]If I understand the question, your <script> works inside a group, but not when inserted in the <head> of the page? I would expect that, since the scripts loaded into the head of the dashboard do not have access to the Angular scope, in the same way that the other widgets do... there may be some trick to grab the Angular scope, but I'm not sure how to do that.
