# Changing a Dashboard Image upon boolean MQTT input

**URL:** <https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874>\
**Category:** Dashboard\
**Tags:** node-red-dashboard, ui-widgets, mqtt, dashboard\
**Created:** [1 June 2023 16:35 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874 "2023-06-01T16:35:46Z")\
**Posts on this page:** 1\
**Showing post:** 7

<div class="post-metadata">

**Author:** ![aresh](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aresh/32/80284_2.png) [@aresh](https://discourse.nodered.org/u/aresh)\
**Post date:** [5 June 2023 17:06 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/7 "2023-06-05T17:06:27Z")

</div>

**huge thanks to @smanjunath211 for helping me through discord!**  
for those who are on my level- so don't know anything on what they should do, **here's a list:**

1 - create a **temp folder** on your OS disk, **in this case** i decided to call it simply "temp", and inside it put the files that you want to be displayed. let's call them "myphoto.png"  
and "theotherphoto.png" **for this example.**  
2 - **find the settings.js file!** this might be tricky for the newbies, **but its directory can be found while booting nodered on the node.js terminal:**  
 ![immagine_2023-06-05_184308591](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/5/d57086639be3ddec9ff0c620011422991fac1a6d.png)

3 - before editing the settings.js file, **create a backup, just to be sure.**  
4 - now we edit the file, which can be opened with notepad: **search for the first "httpStatic:" line,** and _ **delete the two backslashes before the line.** _ (tip! if you can't find it, use the 'find' tool, which can be summoned by pressing CTRL+F)

 ![immagine_2023-06-05_184701860](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/c/2ca5c4dbc1149d90de53a284184a3d43bfe7554f.png)

5 - **this one IS IMPORTANT!!** delete the directory between the '' brackets and **write the name of the folder** you named before: in my case: '/temp'  
6 - now we can save the file and reboot NodeRed. if everything has been done correctly, **you should see that a new line in the terminal has appeared, and it's the httpStatic directory!**

![immagine_2023-06-05_185022201](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5ee0be7211c321bae5e9b3b42c57c84aeb4ba66e.png)

7 - we can now test if the image got uploaded correctly, and that is by **writing on the search bar the directory of the file,** which in this case is going to be **"localhost:1880/myphoto.png"**. if the photo is displayed, we can continue, if the website replies with "Cannot GET /myphoto.png" check if the name of the photo is written properly, and if it is, check the previous steps shown before, from the beginning possibly.

8 - now we can go in the flow of NodeRed: import the flow from @smanjunath211

```auto
[{"id":"708559a77743b59a","type":"ui_template","z":"777d1097bd4779da","group":"1067c487a1fd6cfe","name":"","order":3,"width":"9","height":"6","format":"<body>\n\n <p>\n <a href=\"/test/close_vent.png\" target=\"_blank\">\n <img border=\"0\" alt=\"Close\" src={{msg.payload}} width=\"400\" height=\"290\">\n </a>\n </p>\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":580,"y":180,"wires":[[]]},{"id":"77d105fa02f477fe","type":"ui_button","z":"777d1097bd4779da","name":"","group":"1067c487a1fd6cfe","order":4,"width":"3","height":"1","passthru":false,"label":"CLOSE","tooltip":"","color":"","bgcolor":"red","className":"","icon":"","payload":"/test/close_vent.png","payloadType":"str","topic":"topic","topicType":"msg","x":390,"y":180,"wires":[["708559a77743b59a"]]},{"id":"f30bf600e43529c0","type":"ui_button","z":"777d1097bd4779da","name":"","group":"1067c487a1fd6cfe","order":4,"width":"3","height":"1","passthru":false,"label":"OPEN","tooltip":"","color":"","bgcolor":"green","className":"","icon":"","payload":"/test/open_vent.png","payloadType":"str","topic":"topic","topicType":"msg","x":380,"y":270,"wires":[["708559a77743b59a"]]},{"id":"1067c487a1fd6cfe","type":"ui_group","name":"Dashboard","tab":"85b1ab4efdea8f73","order":1,"disp":false,"width":"24","collapse":false,"className":""},{"id":"85b1ab4efdea8f73","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

```

and make sure you have two buttons and one template function. forgot to tell you, but **you absolutely NEED the ui\_media palette!** check if you have it, if not, it ain't gonna work out.  
(if you don't know how to import a file, that's fine, i didn't know either 3 hours before writing this guide, haha. just go in the nodered flow and press CTRL+i. a small window might pop up, and in the bigger text box you're gonna paste the whole flow code written before, then.. just import.)

9 - open one of the two buttons and **edit the playload image name:** in this case, we are gonna write **'/myphoto.png'.**  **remember the slash** before "myphoto.png" because **you need it!!**  
also, check the little box under the topic text box.

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

10 - now everything should be good to go! if you press one of the two buttons, one of the two images should display.

---

_[View the full topic](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874)._