# Image integration in the dashboard
**URL:** https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398
**Category:** Dashboard
**Created:** [10 July 2024 10:07 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398 "2024-07-10T10:07:07Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 10:07 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/1 "2024-07-10T10:07:08Z")
Hello everyone,
I would like some advice on how to integrate a PNG image into my dashboard, here is the main page:
In the white location (to the right of the gate opening/closing buttons) I would like to integrate an image which represents the opening state of the gate:
- Farm
- Partially open
- Open
This image will change depending on the state of the sensors on the portal.
Do you have any nodes that can help me integrate this?
Thanks in advance,
Ludo
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 10:08 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/2 "2024-07-10T10:08:14Z")
Here are the two other photos of the portal.
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [10 July 2024 10:17 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/3 "2024-07-10T10:17:07Z")
> [@Changing a Dashboard Image upon boolean MQTT input](https://discourse.nodered.org/t/changing-a-dashboard-image-upon-boolean-mqtt-input/78874/6):
>
> [open\_close1]
try here...
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [10 July 2024 10:43 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/4 "2024-07-10T10:43:29Z")
```auto
[{"id":"708559a77743b59a","type":"ui_template","z":"5b623fd31ca86a42","group":"869b681d8ee5d352","name":"","order":3,"width":"18","height":"9","format":"\n\n \n \n 
\n \n
\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":670,"y":155,"wires":[[]]},{"id":"2b0f78a849b9af16","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"869b681d8ee5d352","order":9,"width":"4","height":"2","passthru":false,"label":"OPEN","tooltip":"","color":"","bgcolor":"green","className":"","icon":"","payload":"/test/gate_open.gif","payloadType":"str","topic":"topic","topicType":"msg","x":475,"y":125,"wires":[["708559a77743b59a"]]},{"id":"763da2ddced6a323","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"869b681d8ee5d352","order":9,"width":"4","height":"2","passthru":false,"label":"CLOSE","tooltip":"","color":"","bgcolor":"red","className":"","icon":"","payload":"/test/gate_close.gif","payloadType":"str","topic":"topic","topicType":"msg","x":485,"y":200,"wires":[["708559a77743b59a"]]},{"id":"869b681d8ee5d352","type":"ui_group","name":"00","tab":"49ce3da32b7171c0","order":5,"disp":false,"width":"42","collapse":false,"className":""},{"id":"49ce3da32b7171c0","type":"ui_tab","name":"TRENDS","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
```
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 10:55 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/5 "2024-07-10T10:55:19Z")
Thanks for the solutions.
Should images or gifs be stored locally with NodeRed installation?
No need to convert images to Base64?
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [10 July 2024 10:59 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/6 "2024-07-10T10:59:42Z")
> [@Udina](#):
>
> Should images or gifs be stored locally with NodeRed installation?
depends what is your settings file configuration for HTTP Static
> [@Udina](#):
>
> No need to convert images to Base64?
No. You can display any image/gif by pointing it to the file.
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 11:52 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/7 "2024-07-10T11:52:46Z")
For the location of images or Gifs on a RasberryPi5, I will find the location in the "settings.js" file of the NodeRed root ?
That must be it :
Il faut que je décommente les lignes // ?
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [10 July 2024 12:16 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/8 "2024-07-10T12:16:42Z")
> [@Udina](#):
>
> Il faut que je décommente les lignes // ?
yes you need to uncomment the lines, and set the actual path to your static folder.
`'home/nol/node-red-static/'` is an example only.
I am not a pi user, so please wait for some expert advice, if you are in doubt.
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 12:18 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/9 "2024-07-10T12:18:29Z")
Thank you
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 12:27 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/10 "2024-07-10T12:27:32Z")
You can surely help me with another modification of my boutous below :
My open/close button is gray when not touched, when I hover over it it turns blue and I would like it to stay green for 15 seconds when touched and return to gray after. Do you have a template solution for this? thanks in advance
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [10 July 2024 12:39 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/11 "2024-07-10T12:39:27Z")
please share this part of the flow.
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 14:09 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/12 "2024-07-10T14:09:03Z")
Here are the flows of the two buttons which will send an MQTT message to an ESP32 :
```auto
[
{
"id": "2a2b7e0d67f81ea5",
"type": "ui_button",
"z": "a3c2cda0fd0187df",
"g": "fb800b13527218e6",
"name": "Ouverture portail",
"group": "4d8299c5b5c503de",
"order": 1,
"width": 8,
"height": 1,
"passthru": false,
"label": "Ouverture portail",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-power-off",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 290,
"y": 1780,
"wires": [
[
"abc62d0a250499ec"
]
],
"info": ""
},
{
"id": "abc62d0a250499ec",
"type": "mqtt out",
"z": "a3c2cda0fd0187df",
"g": "fb800b13527218e6",
"name": "",
"topic": "Declenchement/portail",
"qos": "",
"retain": "",
"respTopic": "",
"contentType": "",
"userProps": "",
"correl": "",
"expiry": "",
"broker": "7dafbbb552912403",
"x": 580,
"y": 1820,
"wires": []
},
{
"id": "7b6e253a9c5707bc",
"type": "ui_button",
"z": "a3c2cda0fd0187df",
"g": "fb800b13527218e6",
"name": "Fermeture portail",
"group": "4d8299c5b5c503de",
"order": 5,
"width": 8,
"height": 1,
"passthru": false,
"label": "Fermeture portail",
"tooltip": "",
"color": "",
"bgcolor": "",
"className": "",
"icon": "fa-power-off",
"payload": "true",
"payloadType": "bool",
"topic": "topic",
"topicType": "msg",
"x": 290,
"y": 1860,
"wires": [
[
"abc62d0a250499ec"
]
]
},
{
"id": "4d8299c5b5c503de",
"type": "ui_group",
"name": "Ouverture portail",
"tab": "40264fa5a0eade36",
"order": 1,
"disp": true,
"width": 24,
"collapse": false,
"className": ""
},
{
"id": "7dafbbb552912403",
"type": "mqtt-broker",
"name": "",
"broker": "192.168.1.13",
"port": "1883",
"clientid": "",
"autoConnect": true,
"usetls": false,
"protocolVersion": "4",
"keepalive": "60",
"cleansession": true,
"autoUnsubscribe": true,
"birthTopic": "",
"birthQos": "0",
"birthRetain": "false",
"birthPayload": "",
"birthMsg": {},
"closeTopic": "",
"closeQos": "0",
"closeRetain": "false",
"closePayload": "",
"closeMsg": {},
"willTopic": "",
"willQos": "0",
"willRetain": "false",
"willPayload": "",
"willMsg": {},
"userProps": "",
"sessionExpiry": ""
},
{
"id": "40264fa5a0eade36",
"type": "ui_tab",
"name": "Page d'acceuil",
"icon": "dashboard",
"order": 1,
"disabled": false,
"hidden": false
}
]
```
I would like each button to activate for 5 seconds when pressed and for the color to change to green for 15 seconds while the gate opens and return to gray when in rest.
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [10 July 2024 14:16 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/13 "2024-07-10T14:16:11Z")
Here is the template that I have already created to obtain the buttons like in the image :
```auto
/* Boutons de commande */
.fa {
margin-left: -60px;
vertical-align: inherit;
color: #cfee7a;
}
.nr-dashboard-theme .nr-dashboard-button .md-button {
background-color: #aeaeae75;
color: white;
border-radius: 18px;
}
.md-button {
color: currentColor;
font-family: inherit;
font-size: 22px;
text-align: center;
text-transform: inherit;
}
.nr-dashboard-theme .nr-dashboard-button .md-button:hover {
background-color: #00aaed7d;
}
```
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [10 July 2024 15:27 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/14 "2024-07-10T15:27:32Z")
I am sorry, this is way beyond my skillset. but I can try some no-code solution.
if you really want a ui-template solution, please persist here, and some one will definitely pitch in.
```auto
[{"id":"708559a77743b59a","type":"ui_template","z":"5b623fd31ca86a42","group":"5dba1b1e2351399b","name":"","order":2,"width":"18","height":"9","format":"\n\n \n \n \n \n
\n ","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":840,"y":150,"wires":[[]]},{"id":"2b0f78a849b9af16","type":"ui_button","z":"5b623fd31ca86a42","name":"","group":"5dba1b1e2351399b","order":1,"width":"4","height":"2","passthru":false,"label":"{{label}}","tooltip":"","color":"","bgcolor":"{{bc}}","className":"","icon":"","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":300,"y":150,"wires":[["564360172daf21db"]]},{"id":"564360172daf21db","type":"toggle","z":"5b623fd31ca86a42","name":"","onOffTopic":"","onValue":"open","onType":"str","offValue":"close","offType":"str","toggleTopic":"","toggleValue":"","toggleType":"any","passOnOff":"ifChanged","x":390,"y":150,"wires":[["931f00822e377529"]],"l":false},{"id":"c104ef27ac57ee07","type":"change","z":"5b623fd31ca86a42","name":"CLOSE","rules":[{"t":"set","p":"payload","pt":"msg","to":"/test/gate_close.gif","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"close","tot":"str"},{"t":"set","p":"bc","pt":"msg","to":"red","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"closing....","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":660,"y":125,"wires":[["708559a77743b59a","2ed345cc6c358675"]]},{"id":"22116413ca5c4e48","type":"change","z":"5b623fd31ca86a42","name":"OPEN","rules":[{"t":"set","p":"payload","pt":"msg","to":"/test/gate_open.gif","tot":"str"},{"t":"set","p":"topic","pt":"msg","to":"open","tot":"str"},{"t":"set","p":"bc","pt":"msg","to":"green","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"opening...","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":650,"y":175,"wires":[["708559a77743b59a","23a2dae7ea2109ba"]]},{"id":"931f00822e377529","type":"switch","z":"5b623fd31ca86a42","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"open","vt":"str"},{"t":"eq","v":"close","vt":"str"}],"checkall":"true","repair":false,"outputs":2,"x":500,"y":150,"wires":[["c104ef27ac57ee07"],["22116413ca5c4e48"]]},{"id":"e3755fbf3ac6e5fa","type":"link out","z":"5b623fd31ca86a42","name":"link out 303","mode":"link","links":["1232dc5aa44e144b"],"x":1010,"y":150,"wires":[]},{"id":"1232dc5aa44e144b","type":"link in","z":"5b623fd31ca86a42","name":"link in 317","links":["e3755fbf3ac6e5fa"],"x":185,"y":150,"wires":[["2b0f78a849b9af16"]]},{"id":"23a2dae7ea2109ba","type":"trigger","z":"5b623fd31ca86a42","name":"","op1":"","op2":"grey","op1type":"pay","op2type":"str","duration":"2","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":840,"y":225,"wires":[["e3755fbf3ac6e5fa"],["9dcdf75583f39b6b"]]},{"id":"9dcdf75583f39b6b","type":"change","z":"5b623fd31ca86a42","name":"GREY","rules":[{"t":"set","p":"bc","pt":"msg","to":"grey","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"PUSH TO CLOSE","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1025,"y":225,"wires":[["e3755fbf3ac6e5fa"]]},{"id":"2cc17fce0745c18a","type":"change","z":"5b623fd31ca86a42","name":"GREY","rules":[{"t":"set","p":"bc","pt":"msg","to":"grey","tot":"str"},{"t":"set","p":"label","pt":"msg","to":"PUSH TO OPEN","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":1025,"y":100,"wires":[["e3755fbf3ac6e5fa"]]},{"id":"2ed345cc6c358675","type":"trigger","z":"5b623fd31ca86a42","name":"","op1":"","op2":"grey","op1type":"pay","op2type":"str","duration":"2","extend":false,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":2,"x":835,"y":75,"wires":[["e3755fbf3ac6e5fa"],["2cc17fce0745c18a"]]},{"id":"5dba1b1e2351399b","type":"ui_group","name":"Group 2","tab":"fb98fdb9.b193a","order":2,"disp":false,"width":"18","collapse":false,"className":""},{"id":"fb98fdb9.b193a","type":"ui_tab","name":"Home","icon":"dashboard","order":8}]
```
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 09:19 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/15 "2024-07-11T09:19:48Z")
In your template file, you point to the image via the` `.
```auto
```
I tried to replace it with my file path but it doesn't work.
```auto
```
Here is the file path :
J'ai bien activé mon HTTPstatic dans mon settings.js
Vois tu un problème ?
---
### Author:  [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [11 July 2024 11:15 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/16 "2024-07-11T11:15:28Z")
Restarted Node-RED after the httpStatic change??
---
### Author:  [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [11 July 2024 11:18 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/17 "2024-07-11T11:18:21Z")
Instead of `"/home/img/Portailferme.png"` try `"/Portailferme.png"`
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 11:31 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/18 "2024-07-11T11:31:23Z")
what does your node-red startup log say for httpstatic ?
do you see the picture if you type `localhost:1880/`
---
### Author:  [@Udina](https://discourse.nodered.org/u/Udina)
#### Post date: [11 July 2024 11:53 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/19 "2024-07-11T11:53:41Z")
> [@smanjunath211](#):
>
> que dit votre journal de démarrage node-red pour httpstatic ?
What is the command to type?
---
### Author:  [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)
#### Post date: [11 July 2024 11:58 UTC](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398/20 "2024-07-11T11:58:04Z")
how do you start node-red ? it shoud show up in console, sorry i am not a pi user.
[Next page](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398.md?page=2)
