# Set a logo in the title bar?

**URL:** <https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618>\
**Category:** Dashboard\
**Created:** [5 June 2018 14:20 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618 "2018-06-05T14:20:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [5 June 2018 14:20 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/1 "2018-06-05T14:20:41Z")

</div>

it's possible to set a logo "bnp" for example or " string" in the title bar ? ![Sans%20titre](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/c97d42090ee4c81545484116e6ef312b8b533f32.png)

thank you for your help.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 June 2018 21:23 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/2 "2018-06-05T21:23:43Z")

</div>

From the old google group - here is how to add a clock type widget to the top bar

[https://groups.google.com/forum/#!searchin/node-red/ui\_template$20clock|sort:date/node-red/t4pYcDSJqHQ/faE6dViCAwAJ](https://groups.google.com/forum/#!searchin/node-red/ui_template%2420clock%7Csort:date/node-red/t4pYcDSJqHQ/faE6dViCAwAJ)

It should be easy enough to simplify this back to just a logo.

---

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [6 June 2018 07:41 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/3 "2018-06-06T07:41:13Z")

</div>

yes your are right, i will try to edit the script to set a logo thank you very much. (y)

---

<div class="post-metadata">

**Author:** ![echtelerp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/echtelerp/32/535_2.png) [@echtelerp](https://discourse.nodered.org/u/echtelerp)\
**Post date:** [7 June 2018 18:50 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/4 "2018-06-07T18:50:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [7 June 2018 18:54 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/5 "2018-06-07T18:54:23Z")

</div>

Clock code copied over from old mailing list to here

This node (ui\_template) shows the time in the top bar:

```json
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![echtelerp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/echtelerp/32/535_2.png) [@echtelerp](https://discourse.nodered.org/u/echtelerp)\
**Post date:** [7 June 2018 18:56 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/6 "2018-06-07T18:56:42Z")

</div>

Thanks for the code, I’ll try it out this weekend, and share my result with you 🙂

---

<div class="post-metadata">

**Author:** ![echtelerp](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/echtelerp/32/535_2.png) [@echtelerp](https://discourse.nodered.org/u/echtelerp)\
**Post date:** [12 June 2018 17:31 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/7 "2018-06-12T17:31:00Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [12 June 2018 20:08 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/8 "2018-06-12T20:08:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![liambroughton500](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@liambroughton500](https://discourse.nodered.org/u/liambroughton500)\
**Post date:** [21 June 2018 08:01 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/9 "2018-06-21T08:01:57Z")

</div>

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](https://groups.google.com/forum/#!searchin/node-red/Liam%2420Broughton%7Csort:date/node-red/ZDHAEJIVceM/uJrALFcfAQAJ)

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](https://stackoverflow.com/questions/41807963/node-red-dashboard-include-images)

Hope this helps,

---

<div class="post-metadata">

**Author:** ![YT2310](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/yt2310/32/35255_2.png) [@YT2310](https://discourse.nodered.org/u/YT2310)\
**Post date:** [21 June 2018 08:21 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/10 "2018-06-21T08:21:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![liambroughton500](https://avatars.discourse-cdn.com/v4/letter/l/779978/32.png) [@liambroughton500](https://discourse.nodered.org/u/liambroughton500)\
**Post date:** [21 June 2018 08:53 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/11 "2018-06-21T08:53:45Z")

</div>

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

 ![Untitled](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/6aa68215a40c07bc51f6fbee3c380bac196d1fc1.png)

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [22 June 2018 10:08 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/12 "2018-06-22T10:08:01Z")

</div>

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/";`

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [22 June 2018 11:52 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/13 "2018-06-22T11:52:28Z")

</div>

Can you share the full template you made?

---

<div class="post-metadata">

**Author:** ![imadouino](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/imadouino/32/487_2.png) [@imadouino](https://discourse.nodered.org/u/imadouino)\
**Post date:** [25 June 2018 10:01 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/14 "2018-06-25T10:01:45Z")

</div>

it wooork thank youuu

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [26 June 2018 21:22 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/15 "2018-06-26T21:22:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 June 2018 21:29 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/16 "2018-06-26T21:29:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [26 June 2018 21:35 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/17 "2018-06-26T21:35:01Z")

</div>

@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](https://stackoverflow.com/questions/41807963/node-red-dashboard-include-images) 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.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 June 2018 21:36 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/18 "2018-06-26T21:36:50Z")

</div>

I just used

```auto
logo.src = 'http://localhost/logo.jpg'

```

---

<div class="post-metadata">

**Author:** ![davidcgu](https://avatars.discourse-cdn.com/v4/letter/d/e8c25b/32.png) [@davidcgu](https://discourse.nodered.org/u/davidcgu)\
**Post date:** [26 June 2018 22:14 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/19 "2018-06-26T22:14:38Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/0a9d8bd1b77956ca51baca2b8c91d55a33ea346c.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/c9942c58d3aac6f68b0822795cc20e693bc5ed7a.png)

---

<div class="post-metadata">

**Author:** ![hary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hary/32/12340_2.png) [@hary](https://discourse.nodered.org/u/hary)\
**Post date:** [26 June 2018 22:20 UTC](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/20 "2018-06-26T22:20:22Z")

</div>

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

```auto
[{"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 !

[Next page](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618.md?page=2)