Set a logo in the title bar?

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 :slight_smile:

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.

Adding images to the ui

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"}]

Here is also an example of what the toolbar can look like once this has been implemented.

3 Likes

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 !:disappointed_relieved:

@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:

image

And now after refreshing the tab on my laptop again (chorme)

image

@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 !

Hello hary, whereever you put the image/logo or any other related info required, you can set the folder whereever you wanted just need to set this on your static on settings.js, if the file is directly on the main three then will be /name_of_file if is inside another folder then /folder/name_of_file then you will have to put this on a template as example as zenofmud told:

logo.src = ‘http://localhost/logo.jpg

Regards

1 Like

I have not been able to get the logo to show up. I used the flow @liambroughton500 posted, and changed the image name, Test.jpg. Then as instructed I changed the http static to the root of this image: '/home/pi/Desktop/Dashboard' and removed the slashes in front. Lastly I rebooted node-red. When this didn't work I changed the logo.src to 'http://localhost/Test.jpg', but still no luck. Am I missing something?

Have you configured properly the address of your static folder on node red setting file?