# Changing a Dashboard Image upon boolean MQTT input **URL:** \ **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:** 8\ **Page:** 1

**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:** [1 June 2023 16:35 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/1 "2023-06-01T16:35:46Z")

Hi, I'm fairly new to NodeRed, and I've been scratching my head on how to change a picture upon a boolean input. The thing that I want the program to do is display a certain image if the input is true, and display another image in case the input is false. In the picture, the two pictures I want to be alternating are the two with the forklifts in it, where the air vent on the top right is open or closed. ![immagine_2023-06-01_183308942](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/8/684c35e667fda17bf514b446a660aa4329e47a79.jpeg) My question is if this can be done with any kind of boolean input, which for now can be a UI switch, but the final product has to be from the MQTT broker thingy. Thank you! ---

**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:** [1 June 2023 16:36 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/2 "2023-06-01T16:36:59Z")

I might need to specify: the two images have to alternate in the **same space** to simulate an animation of the opening of the air vent. ---

**Author:** ![MecatronicaMADE](https://avatars.discourse-cdn.com/v4/letter/m/ce7236/32.png) [@MecatronicaMADE](https://discourse.nodered.org/u/MecatronicaMADE)\ **Post date:** [2 June 2023 01:27 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/3 "2023-06-02T01:27:41Z")

Hi @aresh Maybe you could use UI\_control node, and use your basic logic, for example: if input is true -\> show this group (image 1). -\> hide this group (image 2). else (if input is false) -\> hide this group (image 1). -\> show this group (image 2). you could use a switch node or function node to describe your logic, and here there are information to how to use ui\_control node: [ui\_control info](https://github.com/node-red/node-red-dashboard#:~:text=UI%2DControl%20%2D%20allows,tabs%20and%20groups.) I hope it can helps you!! ---

**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:** [2 June 2023 08:10 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/4 "2023-06-02T08:10:25Z")

I have no idea on how to write the code, is it C++? Because that's the only language I know lol. If you could show me like an image of the code I should write I would be so grateful, because I have no clue even on how to cite the images in the code. by the way, i'm guessing this is the order of the blocks that have to be in the flow to make it work, correct me if i'm wrong. ![immagine_2023-06-02_100953868](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/f/5f170130c825bdb07c2eaef4b24744c578bcd395.png) thank you! ---

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\ **Post date:** [3 June 2023 01:51 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/5 "2023-06-03T01:51:32Z")

![open_close](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/8/4851fa066c11cd57603b4cf39c5061c016b7b2de.gif) ```auto [{"id":"708559a77743b59a","type":"ui_template","z":"777d1097bd4779da","group":"1067c487a1fd6cfe","name":"","order":3,"width":"9","height":"6","format":"\n\n

\n \n $\"Close\"$ \n \n

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\ **Post date:** [4 June 2023 00:46 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/6 "2023-06-04T00:46:29Z")

> [@smanjunath211](#): > > if you have gif files, you can make the opening closing action smoother. ![open_close1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/2/42f8769a3f2ee9c3cb65ac1aedd28fe12603e99d.gif) ---

**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")

**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":"\n\n

\n \n $\"Close\"$ \n \n

\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. ---

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\ **Post date:** [19 June 2023 17:06 UTC](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/8 "2023-06-19T17:06:49Z")

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.