# Image selection by comparison

**URL:** <https://discourse.nodered.org/t/image-selection-by-comparison/91043>\
**Category:** Dashboard\
**Created:** [17 September 2024 11:56 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043 "2024-09-17T11:56:35Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [17 September 2024 11:56 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/1 "2024-09-17T11:56:35Z")

</div>

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 return an integer value to me via my ESP32.  
Here are the images I made:

 ![portail fermé](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/7263cd04f8b81cd60b0249dcb0a8a11b67f27a5a.jpeg)

 ![portail entre ouvert](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f7d4d39eacb9db2c4e3541329e81699914fcf9f.jpeg)

 ![portail ouvert](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/fa1199299e08ab633a7c5fca7c9e22de7f5f25bd.jpeg)

My two sensors return the following value to me when the gate is open:

- Open sensor: 0
- Closed sensor: 1

My two sensors return the following value to me when the gate is closed:

- Open sensor: 1
- Sensor closed: 0

My two sensors return the following value to me when the gate is partially open:

- Open sensor: 1
- Closed sensor: 1
- 

I created a Template which shows me the image correctly in my feed :

```auto
<table>
    <tr>
        <!-- Row 2 -->
        <td style="text-align: center"><img src="/ferme.png" id='p32'/></td>
    </tr>
</table>
<style>
#p32{
width: 1200px;
height: 650px;
}
    </style>

<table>
    <tr>
        <!-- Row 2 -->
        <td style="text-align: center"><img src="/portillon.png" id='p32'/></td>
    </tr>
</table>
<style>
    #p32 {
        width: 1200px;
        height: 650px;
    }
</style>

<table>
    <tr>
        <!-- Row 2 -->
        <td style="text-align: center"><img src="/ouvert.png" id='p32'/></td>
    </tr>
</table>
<style>
    #p32 {
        width: 1200px;
        height: 650px;
    }
</style>

```

I have no idea how to select the image to display according to the comparisons above.  
Can you help me with examples?

Thank you in advance

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 September 2024 12:54 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/2 "2024-09-17T12:54:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [17 September 2024 15:20 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/3 "2024-09-17T15:20:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 September 2024 19:40 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/4 "2024-09-17T19:40:11Z")

</div>

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 into a ui template node. You might even be able to ask a follow-up question and get ChatGPT to do the Node-RED flow for you as well.

It doesn't always get everything right so you might have to mess around a bit but you could probably look things up more normally once you have the basic framework.

---

<div class="post-metadata">

**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:** [18 September 2024 09:39 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/5 "2024-09-18T09:39:19Z")

</div>

> [@Image integration in the dashboard](https://discourse.nodered.org/t/image-integration-in-the-dashboard/89398):
>
> 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, Lu…

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

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [18 September 2024 09:55 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/6 "2024-09-18T09:55:56Z")

</div>

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 :

```auto
function Fermer() {
    var imageJavaScriptPortailFerme = document.createElement("img")
    imageJavaScriptPortailFerme.src = "/ferme.png"
    div.appendChild(imageJavaScriptPortailFerme)
}

function portillon() {
    var imageJavaScriptPortailEntreOuvert = document.createElement("img")
    imageJavaScriptPortailEntreOuvert.src = "/ferme.png"
    div.appendChild(imageJavaScriptPortailEntreOuvert)
}

function Ouvert() {
    var imageJavaScriptPortailOuvert = document.createElement("img")
    imageJavaScriptPortailOuvert.src = "/ouvert.png"
    div.appendChild(imageJavaScriptPortailOuvert)
}

```

---

<div class="post-metadata">

**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:** [18 September 2024 11:01 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/7 "2024-09-18T11:01:49Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed9c1fff351fdb314b14ed176a1b5f6067eb9e44.gif)

```auto
[{"id":"aa4055d2e729e0fa","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-1","payloadType":"str","x":215,"y":250,"wires":[["7da39ba5a703ba6a"]]},{"id":"7da39ba5a703ba6a","type":"switch","z":"5a5b50a5e5a3beba","name":"","property":"payload","propertyType":"msg","rules":[{"t":"eq","v":"BUTTON-1","vt":"str"},{"t":"eq","v":"BUTTON-2","vt":"str"},{"t":"eq","v":"BUTTON-3","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":525,"y":300,"wires":[["63337c154a6d26b2"],["ee4d0d06294c7dd4"],["bd04340505552b4a"]]},{"id":"602aa9bfc152b5e6","type":"ui_template","z":"5a5b50a5e5a3beba","group":"5b5ee9f169c93ecf","name":"Logo","order":1,"width":"10","height":"10","format":"","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":1000,"y":300,"wires":[[]]},{"id":"ee4d0d06294c7dd4","type":"change","z":"5a5b50a5e5a3beba","name":"","rules":[{"t":"set","p":"img","pt":"msg","to":"\\test\\hc.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":300,"wires":[["0d4d75c8fa027d3f"]]},{"id":"0d4d75c8fa027d3f","type":"template","z":"5a5b50a5e5a3beba","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n<img src={{img}} width=\"350\" height=\"290\" style= \"margin: 5px 5px 5px 5px\"; >\n</div>","output":"str","x":860,"y":300,"wires":[["602aa9bfc152b5e6"]]},{"id":"63337c154a6d26b2","type":"change","z":"5a5b50a5e5a3beba","name":"","rules":[{"t":"set","p":"img","pt":"msg","to":"\\test\\o.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":250,"wires":[["0d4d75c8fa027d3f"]]},{"id":"bd04340505552b4a","type":"change","z":"5a5b50a5e5a3beba","name":"","rules":[{"t":"set","p":"img","pt":"msg","to":"\\test\\c.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":670,"y":350,"wires":[["0d4d75c8fa027d3f"]]},{"id":"70cc0622dba92e7c","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-2","payloadType":"str","x":215,"y":300,"wires":[["7da39ba5a703ba6a"]]},{"id":"86230ce4d0e6efc3","type":"inject","z":"5a5b50a5e5a3beba","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"BUTTON-3","payloadType":"str","x":215,"y":350,"wires":[["7da39ba5a703ba6a"]]},{"id":"bcda6816b7ef2d86","type":"ui_button","z":"5a5b50a5e5a3beba","name":"","group":"5b5ee9f169c93ecf","order":7,"width":"3","height":"2","passthru":false,"label":"Open","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"BUTTON-1","payloadType":"str","topic":"topic","topicType":"msg","x":350,"y":375,"wires":[["7da39ba5a703ba6a"]]},{"id":"ccd4e14e7104e502","type":"ui_button","z":"5a5b50a5e5a3beba","name":"","group":"5b5ee9f169c93ecf","order":7,"width":"3","height":"2","passthru":false,"label":"half Open","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"BUTTON-2","payloadType":"str","topic":"topic","topicType":"msg","x":340,"y":425,"wires":[["7da39ba5a703ba6a"]]},{"id":"3ca2654bebea95f3","type":"ui_button","z":"5a5b50a5e5a3beba","name":"","group":"5b5ee9f169c93ecf","order":7,"width":"3","height":"2","passthru":false,"label":"Close","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"BUTTON-3","payloadType":"str","topic":"topic","topicType":"msg","x":350,"y":475,"wires":[["7da39ba5a703ba6a"]]},{"id":"5b5ee9f169c93ecf","type":"ui_group","name":"demo","tab":"195948bb680041dd","order":1,"disp":false,"width":"32","collapse":false,"className":""},{"id":"195948bb680041dd","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [18 September 2024 11:13 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/8 "2024-09-18T11:13:09Z")

</div>

Here is the function I just did but it doesn't work :

```auto
[
    {
        "id": "5ddab18dbde51940",
        "type": "ui_template",
        "z": "bf19831ff82cf14d",
        "group": "4d8299c5b5c503de",
        "name": "Img portail fermé",
        "order": 8,
        "width": 0,
        "height": 0,
        "format": "<style>\n \nwidth: 1200px;\nheight: 650px;\n \n </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 970,
        "y": 180,
        "wires": [
            []
        ]
    },
    {
        "id": "c61d4baed2d104e2",
        "type": "mqtt in",
        "z": "bf19831ff82cf14d",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 390,
        "y": 120,
        "wires": [
            [
                "3ada3f3d0e5d214a"
            ]
        ]
    },
    {
        "id": "5dc15c12aa54b06a",
        "type": "mqtt in",
        "z": "bf19831ff82cf14d",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 390,
        "y": 240,
        "wires": [
            [
                "3ada3f3d0e5d214a"
            ]
        ]
    },
    {
        "id": "13e16236ab3903b7",
        "type": "mqtt in",
        "z": "bf19831ff82cf14d",
        "name": "",
        "topic": "Etat/capteur/portillon",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 400,
        "y": 180,
        "wires": [
            [
                "3ada3f3d0e5d214a"
            ]
        ]
    },
    {
        "id": "3ada3f3d0e5d214a",
        "type": "function",
        "z": "bf19831ff82cf14d",
        "name": "Triage des images du portail",
        "func": "let capteurFerme = msg.payload;\nlet capteurOuvert = msg.payload;\n\nif (msg.topic === \"Etat/capteur/portail/ferme\" && capteurFerme === 0 && capteurOuvert === 1) {\n Fermer();\n} else {\n\n}\n\nif (msg.topic === \"Etat/capteur/portillon\" && capteurFerme === 1 && capteurOuvert === 1) {\n portillon();\n} else {\n\n}\n\nif (msg.topic === \"Etat/capteur/portail/ouvert\" && capteurFerme === 1 && capteurOuvert === 0) {\n Ouvert();\n} else {\n\n}\nreturn, msg;\n\nfunction Fermer() {\n var imageJavaScriptPortailFerme = document.createElement(\"img\")\n imageJavaScriptPortailFerme.src = \"/ferme.png\"\n div.appendChild(imageJavaScriptPortailFerme)\n}\n\nfunction portillon() {\n var imageJavaScriptPortailEntreOuvert = document.createElement(\"img\")\n imageJavaScriptPortailEntreOuvert.src = \"/ferme.png\"\n div.appendChild(imageJavaScriptPortailEntreOuvert)\n}\n\nfunction Ouvert() {\n var imageJavaScriptPortailOuvert = document.createElement(\"img\")\n imageJavaScriptPortailOuvert.src = \"/ouvert.png\"\n div.appendChild(imageJavaScriptPortailOuvert)\n }\n",
        "outputs": 1,
        "timeout": 0,
        "noerr": 7,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 700,
        "y": 180,
        "wires": [
            [
                "5ddab18dbde51940"
            ]
        ]
    },
    {
        "id": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b690438f99f8231b",
        "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": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**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:** [18 September 2024 11:20 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/9 "2024-09-18T11:20:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 September 2024 11:29 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/10 "2024-09-18T11:29:53Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/706806464178135ef8edb38c07e8ab6560a9a0cb.png)

You should adapt @smanjunath211 demo flow to your needs.

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [18 September 2024 14:00 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/11 "2024-09-18T14:00:47Z")

</div>

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.

```auto
[
    {
        "id": "09e5e1ac552c0874",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "if sensor 1",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 590,
        "y": 180,
        "wires": [
            [
                "8f541e3084094d66"
            ],
            [
                "8f541e3084094d66"
            ]
        ]
    },
    {
        "id": "994632044c883441",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "if sensor 2",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 590,
        "y": 260,
        "wires": [
            [
                "8f541e3084094d66"
            ],
            [
                "8f541e3084094d66"
            ]
        ]
    },
    {
        "id": "648665c874665363",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 350,
        "y": 180,
        "wires": [
            [
                "09e5e1ac552c0874"
            ]
        ]
    },
    {
        "id": "ac6ccddf39f5c42b",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 350,
        "y": 260,
        "wires": [
            [
                "994632044c883441"
            ]
        ]
    },
    {
        "id": "8f541e3084094d66",
        "type": "function",
        "z": "725edb971072c7d0",
        "name": "selection of msg.payload in relation to topics",
        "func": "",
        "outputs": 3,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 890,
        "y": 220,
        "wires": [
            [
                "a14365b3420d45f7"
            ],
            [
                "5bf51c67f5ff8889"
            ],
            [
                "5753aa23a32e12a8"
            ]
        ]
    },
    {
        "id": "a14365b3420d45f7",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1230,
        "y": 140,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5bf51c67f5ff8889",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1190,
        "y": 220,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5753aa23a32e12a8",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1230,
        "y": 300,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "9fc75c0fa1751f0b",
        "type": "template",
        "z": "725edb971072c7d0",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "This is the payload: {{payload}} !",
        "output": "str",
        "x": 1380,
        "y": 220,
        "wires": [
            [
                "c5a6acd9137035a6"
            ]
        ]
    },
    {
        "id": "c5a6acd9137035a6",
        "type": "ui_template",
        "z": "725edb971072c7d0",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "format": "<div ng-bind-html=\"msg.payload\"></div>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1440,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "b690438f99f8231b",
        "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": ""
    }
]

```

How can I make a comparison in the function node with two topics to check?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 September 2024 14:15 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/12 "2024-09-18T14:15:54Z")

</div>

> [@Udina](#):
>
> How can I make a comparison in the function node with two topics to check?

Use a join node to get all properties into the same message

See [this article in the cookbook](https://cookbook.nodered.org/basic/join-streams) for an example of how to join messages into one object.

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [18 September 2024 16:21 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/13 "2024-09-18T16:21:49Z")

</div>

I tried to make a flow to my mining but it doesn't work, there may be a poorly configured node :

```auto
[
    {
        "id": "09e5e1ac552c0874",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "Capteur ouvert",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 600,
        "y": 180,
        "wires": [
            [
                "18563fbd6e58b618",
                "8b2ea8fbbd3b11e7"
            ],
            [
                "5cc752376ce8fcfa"
            ]
        ]
    },
    {
        "id": "994632044c883441",
        "type": "switch",
        "z": "725edb971072c7d0",
        "name": "Capteur fermé",
        "property": "payload",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "1",
                "vt": "num"
            },
            {
                "t": "eq",
                "v": "0",
                "vt": "num"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 2,
        "x": 600,
        "y": 260,
        "wires": [
            [
                "5cc752376ce8fcfa",
                "8b2ea8fbbd3b11e7"
            ],
            [
                "18563fbd6e58b618"
            ]
        ]
    },
    {
        "id": "648665c874665363",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ouvert",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 370,
        "y": 180,
        "wires": [
            [
                "09e5e1ac552c0874"
            ]
        ]
    },
    {
        "id": "ac6ccddf39f5c42b",
        "type": "mqtt in",
        "z": "725edb971072c7d0",
        "name": "",
        "topic": "Etat/capteur/portail/ferme",
        "qos": "2",
        "datatype": "auto-detect",
        "broker": "b690438f99f8231b",
        "nl": false,
        "rap": true,
        "rh": 0,
        "inputs": 0,
        "x": 370,
        "y": 260,
        "wires": [
            [
                "994632044c883441"
            ]
        ]
    },
    {
        "id": "a14365b3420d45f7",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "/ferme.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1150,
        "y": 120,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5bf51c67f5ff8889",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/portillon.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1140,
        "y": 220,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "5753aa23a32e12a8",
        "type": "change",
        "z": "725edb971072c7d0",
        "name": "",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ouvert.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1140,
        "y": 320,
        "wires": [
            [
                "9fc75c0fa1751f0b"
            ]
        ]
    },
    {
        "id": "9fc75c0fa1751f0b",
        "type": "template",
        "z": "725edb971072c7d0",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<div>\n<img src={{img}} width=\"1200px\" height=\"650px\" style= \"margin: 5px 5px 5px 5px\"; >\n</div>\n",
        "output": "str",
        "x": 1340,
        "y": 220,
        "wires": [
            [
                "be6473c4d103ba20"
            ]
        ]
    },
    {
        "id": "18563fbd6e58b618",
        "type": "join",
        "z": "725edb971072c7d0",
        "name": "Etat fermé du portail",
        "mode": "custom",
        "build": "object",
        "property": "topic",
        "propertyType": "msg",
        "key": "payload",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 860,
        "y": 120,
        "wires": [
            [
                "3a58d00a463f7b30",
                "a14365b3420d45f7"
            ]
        ]
    },
    {
        "id": "3a58d00a463f7b30",
        "type": "debug",
        "z": "725edb971072c7d0",
        "name": "portail fermé",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 80,
        "wires": []
    },
    {
        "id": "5cc752376ce8fcfa",
        "type": "join",
        "z": "725edb971072c7d0",
        "name": "Etat ouvert du portail",
        "mode": "custom",
        "build": "object",
        "property": "topic",
        "propertyType": "msg",
        "key": "payload",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "2",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "",
        "reduceFixup": "",
        "x": 870,
        "y": 320,
        "wires": [
            [
                "c5669ac45bd374c3",
                "5753aa23a32e12a8"
            ]
        ]
    },
    {
        "id": "8b2ea8fbbd3b11e7",
        "type": "join",
        "z": "725edb971072c7d0",
        "name": "Etat entre ouvert du portail",
        "mode": "custom",
        "build": "object",
        "property": "topic",
        "propertyType": "msg",
        "key": "payload",
        "joiner": "\\n",
        "joinerType": "str",
        "accumulate": false,
        "timeout": "1",
        "count": "",
        "reduceRight": false,
        "reduceExp": "",
        "reduceInit": "",
        "reduceInitType": "num",
        "reduceFixup": "",
        "x": 880,
        "y": 220,
        "wires": [
            [
                "7f760c0fe769c977",
                "5bf51c67f5ff8889"
            ]
        ]
    },
    {
        "id": "7f760c0fe769c977",
        "type": "debug",
        "z": "725edb971072c7d0",
        "name": "portail entre ouvert",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 890,
        "y": 180,
        "wires": []
    },
    {
        "id": "c5669ac45bd374c3",
        "type": "debug",
        "z": "725edb971072c7d0",
        "name": "portail ouvert",
        "active": false,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 280,
        "wires": []
    },
    {
        "id": "be6473c4d103ba20",
        "type": "ui_template",
        "z": "725edb971072c7d0",
        "group": "4d8299c5b5c503de",
        "name": "",
        "order": 7,
        "width": 0,
        "height": 0,
        "format": "",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1360,
        "y": 280,
        "wires": [
            []
        ]
    },
    {
        "id": "b690438f99f8231b",
        "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": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**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:** [19 September 2024 02:31 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/14 "2024-09-19T02:31:03Z")

</div>

Try this. Please ensure that correct img reference is put in the change nodes before template node.

```auto
[{"id":"94e04e1250c9ced6","type":"group","z":"5a5b50a5e5a3beba","name":"","style":{"stroke":"#0070c0","fill":"#7fb7df","label":true},"nodes":["2f97bcf85d342764","c927bc7b220519c5","2a45ecfe85f1a2f0","80f12069ca3c11b4","1d6d3c3bc88a9a20","3aa625a28c6d4b18","67998388fd033959","690717b327e9c24d","cce9ee5c18f8627e","3609ad8d6cc1a7fa","005c9cb87751320d","d6f109aeda62055f","50c545146384375d","ae4352de98646b0b","31ca3099e671229f","88fc79f13ea3eae6"],"x":154,"y":921.5,"w":1247,"h":257},{"id":"2f97bcf85d342764","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"open","payload":"0","payloadType":"num","x":250,"y":962.5,"wires":[["1d6d3c3bc88a9a20","d6f109aeda62055f"]]},{"id":"c927bc7b220519c5","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"open","payload":"1","payloadType":"num","x":250,"y":1006.25,"wires":[["1d6d3c3bc88a9a20","d6f109aeda62055f"]]},{"id":"2a45ecfe85f1a2f0","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"close","payload":"0","payloadType":"num","x":250,"y":1093.75,"wires":[["1d6d3c3bc88a9a20","50c545146384375d"]]},{"id":"80f12069ca3c11b4","type":"inject","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"close","payload":"1","payloadType":"num","x":250,"y":1137.5,"wires":[["1d6d3c3bc88a9a20","50c545146384375d"]]},{"id":"1d6d3c3bc88a9a20","type":"join","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","mode":"custom","build":"object","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":425,"y":1050,"wires":[["3aa625a28c6d4b18"]]},{"id":"3aa625a28c6d4b18","type":"switch","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open","property":"payload.open","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":575,"y":1050,"wires":[["690717b327e9c24d"],["67998388fd033959"]]},{"id":"67998388fd033959","type":"switch","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Close","property":"payload.close","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":725,"y":1075,"wires":[["005c9cb87751320d"],["3609ad8d6cc1a7fa"]]},{"id":"690717b327e9c24d","type":"switch","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Close","property":"payload.close","propertyType":"msg","rules":[{"t":"eq","v":"0","vt":"num"},{"t":"eq","v":"1","vt":"num"}],"checkall":"true","repair":false,"outputs":2,"x":725,"y":1000,"wires":[[],["cce9ee5c18f8627e"]]},{"id":"cce9ee5c18f8627e","type":"change","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open:0 Close-1 \\n OPEN","rules":[{"t":"set","p":"img","pt":"msg","to":"/ouvert.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":930,"y":975,"wires":[["88fc79f13ea3eae6","ae4352de98646b0b"]]},{"id":"3609ad8d6cc1a7fa","type":"change","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open:1 Close:1 \\n PARTIALLY OPEN","rules":[{"t":"set","p":"img","pt":"msg","to":"/portillon.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":940,"y":1125,"wires":[["88fc79f13ea3eae6","ae4352de98646b0b"]]},{"id":"005c9cb87751320d","type":"change","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open:1 Close:0 \\n CLOSED","rules":[{"t":"set","p":"img","pt":"msg","to":"/ferme.png","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":930,"y":1050,"wires":[["88fc79f13ea3eae6","ae4352de98646b0b"]]},{"id":"d6f109aeda62055f","type":"debug","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Open","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":435,"y":975,"wires":[]},{"id":"50c545146384375d","type":"debug","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Close","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":450,"y":1125,"wires":[]},{"id":"ae4352de98646b0b","type":"template","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"<div>\n<img src={{img}} width=\"1200px\" height=\"650px\" style= \"margin: 5px 5px 5px 5px\"; >\n</div>\n","output":"str","x":1140,"y":1050,"wires":[["31ca3099e671229f"]]},{"id":"31ca3099e671229f","type":"ui_template","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","group":"4d8299c5b5c503de","name":"","order":7,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1315,"y":1050,"wires":[[]]},{"id":"88fc79f13ea3eae6","type":"debug","z":"5a5b50a5e5a3beba","g":"94e04e1250c9ced6","name":"Output","active":true,"tosidebar":false,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":1150,"y":975,"wires":[]},{"id":"4d8299c5b5c503de","type":"ui_group","name":"Ouverture du portail exterieur","tab":"40264fa5a0eade36","order":1,"disp":true,"width":"25","collapse":false,"className":""},{"id":"40264fa5a0eade36","type":"ui_tab","name":"Gestion des portails ","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

![opnclose1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21903212766b47451b223d4e51b193df69337a30.gif)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [19 September 2024 08:25 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/15 "2024-09-19T08:25:04Z")

</div>

Thanks for the demonstration !  
Everything works fine for sorting the states but I don't have any image to display on my dashboard. However, they are in my HTTPstatic folder.

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [19 September 2024 11:02 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/16 "2024-09-19T11:02:02Z")

</div>

Here is the code template that allows me to display as below :

```auto
[
    {
        "id": "ae200bc21f5b9809",
        "type": "ui_template",
        "z": "a3c2cda0fd0187df",
        "g": "fb800b13527218e6",
        "group": "4d8299c5b5c503de",
        "name": "TEST",
        "order": 6,
        "width": 25,
        "height": 8,
        "format": " \n<table>\n <tr>\n <!-- Row 2 -->\n <td style=\"text-align: center\"><img src=\"/ferme.png\" width=\"800px\" height=\"400px\"/></td>\n </tr>\n</table>\n\n<style>\n \n \n \n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1330,
        "y": 760,
        "wires": [
            []
        ]
    },
    {
        "id": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

 ![Capture d’écran 2024-09-19 125440](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/4/94812f004f12824ac7be4146aa015835d2eae7df.jpeg)

Here's how I set up the knots:

```auto
[
    {
        "id": "b74cde8a3ee4763f",
        "type": "change",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Open:0 Close-1 \\n OPEN",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ouvert.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 850,
        "y": 212.5,
        "wires": [
            [
                "446bcbac18986f21",
                "1c34574a073528de"
            ]
        ]
    },
    {
        "id": "fa8748b37bb9f4e9",
        "type": "change",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Open:1 Close:1 \\n PARTIALLY OPEN",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/portillon.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 860,
        "y": 362.5,
        "wires": [
            [
                "446bcbac18986f21",
                "1c34574a073528de"
            ]
        ]
    },
    {
        "id": "b324cbae81af7ae0",
        "type": "change",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Open:1 Close:0 \\n CLOSED",
        "rules": [
            {
                "t": "set",
                "p": "img",
                "pt": "msg",
                "to": "/ferme.png",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 850,
        "y": 287.5,
        "wires": [
            [
                "446bcbac18986f21",
                "1c34574a073528de"
            ]
        ]
    },
    {
        "id": "1c34574a073528de",
        "type": "template",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "",
        "field": "payload",
        "fieldType": "msg",
        "format": "handlebars",
        "syntax": "mustache",
        "template": "<table>\n <tr>\n <!-- Row 2 -->\n <td style=\"text-align: center\"><img src={{img}} width=\"800px\" height=\"400px\"/></td>\n </tr>\n</table>\n\n\n",
        "output": "str",
        "x": 1060,
        "y": 287.5,
        "wires": [
            [
                "673c2607b7d0519a"
            ]
        ]
    },
    {
        "id": "673c2607b7d0519a",
        "type": "ui_template",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "group": "4d8299c5b5c503de",
        "name": "Image portail new",
        "order": 10,
        "width": 15,
        "height": 5,
        "format": "<style>\n </style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 1250,
        "y": 300,
        "wires": [
            []
        ]
    },
    {
        "id": "446bcbac18986f21",
        "type": "debug",
        "z": "bf19831ff82cf14d",
        "g": "9640e4a32ec9aa86",
        "name": "Output",
        "active": true,
        "tosidebar": false,
        "console": false,
        "tostatus": true,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 1070,
        "y": 212.5,
        "wires": []
    },
    {
        "id": "4d8299c5b5c503de",
        "type": "ui_group",
        "name": "Ouverture du portail exterieur",
        "tab": "40264fa5a0eade36",
        "order": 1,
        "disp": true,
        "width": "25",
        "collapse": false,
        "className": ""
    },
    {
        "id": "40264fa5a0eade36",
        "type": "ui_tab",
        "name": "Gestion des portails ",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

Do you have any idea why the images are not displayed by the {{img}} system?

---

<div class="post-metadata">

**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:** [19 September 2024 11:16 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/17 "2024-09-19T11:16:38Z")

</div>

```auto
<div ng-bind-html="msg.payload"></div>

```

try putting above code in the template node (blue template)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f20e9726ec309ffb4f7db79203ff9a06f519166c.png)

OR

name the property as `msg.template` instead of msg.payload

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/4/d45d980bf5e5caa173e73aad7f8d015b392902ec.png)

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [19 September 2024 15:57 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/18 "2024-09-19T15:57:12Z")

</div>

Thank you very much for the information, everything works perfectly, I will study the flow to fully understand how the node works " join "

Normally I'm done with this portal project 😅

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [19 September 2024 19:21 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/19 "2024-09-19T19:21:22Z")

</div>

Well, everything worked fine with the inject nodes but no longer works with my two MQTT nodes. Here is the debug window for topics + payload received.

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/79cc1bce81043b32af565e1f4144c6aa3364c4b7.png)

I can't set the node join so that my message gets to the end.  
Any idea?

---

<div class="post-metadata">

**Author:** ![Udina](https://avatars.discourse-cdn.com/v4/letter/u/a3d4f5/32.png) [@Udina](https://discourse.nodered.org/u/Udina)\
**Post date:** [19 September 2024 19:47 UTC](https://discourse.nodered.org/t/image-selection-by-comparison/91043/20 "2024-09-19T19:47:22Z")

</div>

I found, I added two change nodes to change the topic and it works very well. I'm starting to get the hang of it.

 ![Capture](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/4/c4462b89cd60badce46a384dc40c4c329d9078e1.png)

thank you for your help which helps me progress

[Next page](https://discourse.nodered.org/t/image-selection-by-comparison/91043.md?page=2)