Hello everyone, I plan to control my sliding gate with an ESP32 in MQTT via my nodered dashboard. For the moment, the control part of the portal works but I would like to illustrate with an image integrated into my portal opening page. To do this, I equipped my gate with two limit switches which …

<div ng-bind-html="msg.payload"></div> try putting above code in the template node (blue template) [image] OR name the property as msg.template instead of msg.payload [image]

The standard way to do this is to have all 3 images in the HTML and use classes to hide/show the correct image. Since D2 uses VueJS, you can make the classes dynamic. I wouldn't put them in a table though, that will just make things more complex.

Do you perhaps have any help links to learn this kind of thing?

Well, ChatGPT is now pretty good is you can formulate a reasonable prompt. Maybe something like (not tried): "Using HTML, VueJS, CSS and JavaScript, write a simple web page that contains 3 images but only shows one at a time based on a VueJS data variable." Then you should be able to slot that int…

[image] Image integration in the dashboard Dashboard 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 …

Yes, it's the similar subject but I didn't study the function part that could select the right image to display. I think you need to use a javascript function which will sort the msg.topic by creating a condition if on values msg.payload. Here are the image display functions I started creating : f…

so there are 3 possible conditions and depending on what condition is present at the moment you want 3 different images to show on dashboard. can you just not use a switch node and direct show a defined image ? sorry I may be misreading your requirement. [opnclose] [{"id":"aa4055d2e729e0fa","type…

Here is the function I just did but it doesn't work : [ { "id": "5ddab18dbde51940", "type": "ui_template", "z": "bf19831ff82cf14d", "group": "4d8299c5b5c503de", "name": "Img portail fermé", "order": 8, "width": 0, "height": 0, …

there is some syntactical error in function node. sorry i am no javascript expert. let me know if the no code solution given by me is not good for you.

apart from the random , after return you should be aware that code in a function node runs server side (in the Node-RED runtime) not in the client side (i.e. not in the dashboard). That is why document and div are not available (node runtime is not a web page!) [image] You should adapt @smanjunath…

I will probably choose the no-code solution. On the other hand, how can I make comparisons with switch nodes which have two input topics ? The two switches return the value of 1 or 0 via the MQTT message. [ { "id": "09e5e1ac552c0874", "type": "switch", "z": "725edb97107…

Node-RED

Node-RED Forum

Image selection by comparison

Dashboard

smanjunath211 18 September 2024 09:39 5

Wasn't this similar topic you discussed few months ago ?

Topic		Replies	Views
Image selection by comparison version 2 Dashboard dashboard-2	19	234	24 December 2024
Image integration in the dashboard Dashboard	36	461	26 July 2024
Changing a Dashboard Image upon boolean MQTT input Dashboard node-red-dashboard , ui-widgets , mqtt , dashboard	7	621	5 June 2023
How i can change an image in javascript? Dashboard node-red-dashboard , mqtt	2	279	12 December 2022
Show images from a template Dashboard	23	1706	21 June 2022

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 selection by comparison

Related topics