Hello everyone, I would like some advice on how to integrate a PNG image into my dashboard, here is the main page: [Mon dashboard.PNG] 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 [Portail fermé PNG] 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

[image] I may be wrong, but do check if the changes you made for httpstatic in the settings file is the same file shown above?

Here are the two other photos of the portal. [Portail ouvert PNG] [Portail en portillon PNG]

[image] Changing a Dashboard Image upon boolean MQTT input Dashboard [open_close1] try here...

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

Thanks for the solutions. Should images or gifs be stored locally with NodeRed installation? No need to convert images to Base64?

[image] Udina: Should images or gifs be stored locally with NodeRed installation? depends what is your settings file configuration for HTTP Static [image] [image] Udina: No need to convert images to Base64? 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 : [image] Il faut que je décommente les lignes // ?

[image] 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.

You can surely help me with another modification of my boutous below : [Capture] 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.

Node-RED

Node-RED Forum

Image integration in the dashboard

Dashboard

smanjunath211 10 July 2024 10:17 3

try here...

Topic		Replies	Views
Image selection by comparison Dashboard	37	842	3 October 2024
Getting image in dashboard Dashboard	50	52234	17 February 2019
Show Camera Image on Dashboard Dashboard	26	24614	28 April 2020
Dashboard button node Icon Property to show jpg image Dashboard	8	2272	10 March 2021
House blueprint with graphic interactions dashboard Dashboard	32	5539	16 November 2019

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.

Image integration in the dashboard

Related topics