it's possible to set a logo "bnp" for example or " string" in the title bar ?
thank you for your help.
From the old google group - here is how to add a clock type widget to the top bar
It should be easy enough to simplify this back to just a logo.
1 Like
yes your are right, i will try to edit the script to set a logo thank you very much. (y)
Hi imadouino,
since I have a similar topic, Could you share your template node code? I somehow can not access the old group topic from my phone.
Thanks a lot
Greetings from Germany
Clock code copied over from old mailing list to here
This node (ui_template) shows the time in the top bar:
[{"id":"91670c03.c29ad","type":"ui_template","z":"96082429.7476f8","group":"951f63e6.78df","name":"Clock Toolbar","order":6,"width":"0","height":"0","format":"<script id=\"titleScript\" type=\"text/javascript\">\n $('#clock').remove();\n var toolbar = $('.md-toolbar-tools');\n var div = $('<div/>');\n var p = $('<p/ id=\"clock\">');\n \n $('#titleScript').parent().hide();\n div.append(p);\n div[0].style.margin = '5px 5px 5px auto';\n toolbar.append(div);\n\n function displayTitle(lh) {\n p.text(lh); \n }\n \n function upTime() {\n var d = new Date();\n p.text(d.toLocaleTimeString('de-AT'));\n }\n\n \n\n // Watch the payload and update the title\n (function(scope) {\n scope.$watch('msg.payload', function(data) {\n displayTitle(data);\n });\n setInterval(upTime,1000);\n })(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":843,"y":167,"wires":[[]]},{"id":"951f63e6.78df","type":"ui_group","z":"","name":"Garage","tab":"83822f15.889e6","order":2,"disp":false,"width":"10"},{"id":"83822f15.889e6","type":"ui_tab","z":"","name":"Garage","icon":"fa-car","order":1}]
3 Likes
Thanks for the code, I’ll try it out this weekend, and share my result with you 
hi imadouino,
have you found a way to place your logo in the top bar?
my skillset is not sufficient enough to do it my self.
could you share your node contents if so?
hi echtelerp.
No I’m sorry, I couldn’t do it
i will try again tomorow and if I succeed i will shared the solution with you.
Hi all,
Did any of you manage to do this? If not, I have some code which could help you out. Please have a look at this flow:
[{"id":"42b8d6d1.fc68e8","type":"ui_template","z":"7e61871d.8d71a8","group":"feabd600.f71b28","name":"Logo / Clock","order":0,"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 = '/logo.png'\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 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,"templateScope":"global","x":610,"y":220,"wires":[[]]},{"id":"feabd600.f71b28","type":"ui_group","z":"","name":"Default","tab":"fb98fdb9.b193a","order":1,"disp":false,"width":"24","collapse":false},{"id":"fb98fdb9.b193a","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
You have to have the image you are wanting to display on the toolbar, on your local machine. Please refer to this page in the google group for some more info on this. It is about changing the htttp static in the settings.js file.
Please refer to where Guilherme replies to myself.
And then use this link for some help with the http static part I was talking about: httpstatic
Hope this helps,
6 Likes
as an example how this comlete flow could Looks like, here is mine:
(with the template node from @liambroughton500)
Flow
[{"id":"865d0b99.b9a138","type":"file in","z":"2dc3accd.d747cc","name":"Picture Selector","filename":"/home/pi/test.jpeg","format":"","sendError":true,"x":560,"y":1460,"wires":[["ceb9ba8b.116ab8"]]},{"id":"6494ee41.b0cb7","type":"function","z":"2dc3accd.d747cc","name":"","func":"msg.filename=\"/home/pi/Schreibtisch/regen.jpeg\";\nreturn msg;","outputs":1,"noerr":0,"x":410,"y":1460,"wires":[["865d0b99.b9a138"]]},{"id":"ee9a261a.ce2cb8","type":"inject","z":"2dc3accd.d747cc","name":"","topic":"","payload":"0","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":"","x":230,"y":1400,"wires":[["6494ee41.b0cb7","5e87c3cc.f6607c"]]},{"id":"5e87c3cc.f6607c","type":"function","z":"2dc3accd.d747cc","name":"Adding File Name","func":"msg.payload=Number(msg.payload)\nif(msg.payload===0){\n msg.filename=\"/home/pi/test.jpeg\";\n return msg;\n}\nreturn msg.filename;","outputs":1,"noerr":0,"x":570,"y":1380,"wires":[[]]},{"id":"625986a9.f27f58","type":"http in","z":"2dc3accd.d747cc","name":"","url":"/test","method":"get","upload":false,"swaggerDoc":"","x":220,"y":1460,"wires":[["6494ee41.b0cb7"]]},{"id":"db7aa5c6.fefde","type":"http response","z":"2dc3accd.d747cc","name":"","statusCode":"","headers":{},"x":1010,"y":1460,"wires":[]},{"id":"ceb9ba8b.116ab8","type":"function","z":"2dc3accd.d747cc","name":"Set Content-Type header","func":"msg.headers = { \"Content-Type\":\"image/jpeg\"};\nreturn msg;","outputs":1,"noerr":0,"x":790,"y":1460,"wires":[["db7aa5c6.fefde"]]},{"id":"875ba213.947bb8","type":"ui_template","z":"2dc3accd.d747cc","group":"dabc5db0.16344","name":"Logo / Clock","order":0,"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 = '/test'\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 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,"templateScope":"global","x":1070,"y":1340,"wires":[[]]},{"id":"dabc5db0.16344","type":"ui_group","z":"","name":"Default","tab":"6c93e7d1.ae7f18","order":1,"disp":false,"width":"24","collapse":false},{"id":"6c93e7d1.ae7f18","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]
And for what it is worth, I have a number of live cameras around the house so now I can populate the title bar with small miniatures showing live video, and it works nicely!
Just insert the url to the camera, as example (based on the example flow above)
logo.src = "http://192.168.10.238:8082/";
1 Like
Can you share the full template you made?
it wooork thank youuu
@liambroughton500
Changing the logo.src to a .png full path file name I have on my computer, i can’t get the logo in the top bar ! I only get the time !
@YT2310 - please edit your post and put three backticks before and after your flow to remove the smart quotes. Otherwise it can not be imported.
@hary - works for me. Why not provide the code from your template so someone can review it?
@hary when you say you’ve used a full path filename for something on your local computer, do you mean you’ve done something like c:\My Documents\image.png or /home/pi/images/image.png ?
If so, that isn’t going to work.
Follow the answer to this stack overflow question that describes how to use the httpStatic property in your settings.js file to get Node-RED to make a directory of content available to serve up to a browser.
I just used
logo.src = 'http://localhost/logo.jpg'
Yes Zenofmud I discovered and actually using it however I see a problem when using different kind of devices with different screen sizes, the logo is not properly aligned, for better understanding...
This is how it's actually shwon on my laptop now after use the phone:
And now after refreshing the tab on my laptop again (chorme)
@knolleary
So, in ~/.node-red/settings.js, I’ve changed
//httpStatic: ‘/home/nol/node-red-static/’,
to
httpStatic: ‘/home/harold/Images/’,
then in the node :
logo.src = ‘/myImage.png’
and last I needed to stop and restart node-red for the changes to be taken into effect !
[{"id":"ff28f78e.f7d758","type":"ui_template","z":"5be7c8bb.14ff5","group":"c519da4c.f6bf9","name":"Logo / Clock","order":0,"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 = '/myImage.png'\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 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,"templateScope":"global","x":585,"y":50,"wires":[[]]},{"id":"c519da4c.f6bf9","type":"ui_group","z":"","name":"Default","tab":"c63bab3.e433ad8","order":1,"disp":false,"width":"24","collapse":false},{"id":"c63bab3.e433ad8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]@zenofmud
Is this another way to do it working ? not sure too understand all !
