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:
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
try here...
[{"id":"708559a77743b59a","type":"ui_template","z":"5b623fd31ca86a42","group":"869b681d8ee5d352","name":"","order":3,"width":"18","height":"9","format":"<body>\n\n <p>\n <a href=\"/a\" target=\"_blank\">\n <img border=\"0\" alt=\"Close\" src={{msg.payload}} width=\"530\" height=\"225\">\n </a>\n </p>\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}]
Thanks for the solutions.
Should images or gifs be stored locally with NodeRed installation?
No need to convert images to Base64?
depends what is your settings file configuration for HTTP Static
No. You can display any image/gif by pointing it to the file.
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 // ?
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.
Thank you
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
please share this part of the flow.
Here are the flows of the two buttons which will send an MQTT message to an ESP32 :
[
{
"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": "<i class=\"fa fa-power-off\" aria-hidden=\"true\"></i>"
},
{
"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.
Here is the template that I have already created to obtain the buttons like in the image :
/* 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;
}
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.
[{"id":"708559a77743b59a","type":"ui_template","z":"5b623fd31ca86a42","group":"5dba1b1e2351399b","name":"","order":2,"width":"18","height":"9","format":"<body>\n\n <p>\n <a href=\"/a\" target=\"_blank\">\n <img border=\"0\" alt=\"Close\" src={{msg.payload}} width=\"400\" height=\"150\">\n </a>\n </p>\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}]
In your template file, you point to the image via the <a> </a>.
<body>
<p>
<a href="/a" target="_blank">
<img border="0" alt="Close" src={{msg.payload}} width="400" height="150">
</a>
</p>
I tried to replace it with my file path but it doesn't work.
<body>
<p>
<a href="/home/img/Portailferme.png">
<img border="0" alt="Close" src={{msg.payload}} width="530" height="225">
</a>
</p>
Here is the file path :
J'ai bien activé mon HTTPstatic dans mon settings.js
Vois tu un problème ?
Restarted Node-RED after the httpStatic change??
Instead of "/home/img/Portailferme.png" try "/Portailferme.png"
what does your node-red startup log say for httpstatic ?
do you see the picture if you type localhost:1880/<your filepath and image.png>
how do you start node-red ? it shoud show up in console, sorry i am not a pi user.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
