# Display image if value true

**URL:** <https://discourse.nodered.org/t/display-image-if-value-true/38824>\
**Category:** General\
**Created:** [9 January 2021 08:05 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824 "2021-01-09T08:05:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![warnert](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/warnert/32/108132_2.png) [@warnert](https://discourse.nodered.org/u/warnert)\
**Post date:** [9 January 2021 08:05 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824/1 "2021-01-09T08:05:01Z")

</div>

I have build a thermostat and I would like to display a little flame on the dashboard if the heater is on.I now have used node-red-contribute-led that displays a green led when the flame is on, but it would be nicer if it was a little picture of a flame. I have been looking in manage palette but I cannot find anything that might do the job. Am I missing something or do I search for the wrong item. I tried image and gif and jp(e)g.  
I get through mqtt a string with "1" if the burner is on and "0" if it's off and I want to show the flame if it's "1".

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [9 January 2021 09:01 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824/2 "2021-01-09T09:01:06Z")

</div>

you can use material design icon or font awesome, there is a link in the ui dashboard help text.  
eg.

```auto
[{"id":"8a069626.50a548","type":"inject","z":"8d22ae29.7df6d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":110,"y":3020,"wires":[["ca2b4171.07a988"]]},{"id":"fa8e08eb.b25e98","type":"inject","z":"8d22ae29.7df6d","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":90,"y":3060,"wires":[["ca2b4171.07a988"]]},{"id":"1ede2ded.d1696a","type":"ui_text","z":"8d22ae29.7df6d","group":"165e1e1a.e752fa","order":4,"width":0,"height":0,"name":"","label":"text","format":"{{msg.payload}}","layout":"row-spread","x":460,"y":3040,"wires":[]},{"id":"ca2b4171.07a988","type":"change","z":"8d22ae29.7df6d","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload = 1 ? 'Burner on <i class=\"fa fa-fire\" aria-hiden=\"true\"></i>' : 'Burner off <i class=\"fa fa-circle-o\" aria-hidden=\"true\"></i>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":290,"y":3020,"wires":[["1ede2ded.d1696a"]]},{"id":"165e1e1a.e752fa","type":"ui_group","z":"","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![stefan24](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/stefan24/32/23075_2.png) [@stefan24](https://discourse.nodered.org/u/stefan24)\
**Post date:** [9 January 2021 09:10 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824/3 "2021-01-09T09:10:50Z")

</div>

Or you can use a switch node, where you can use a custom font symbol:

```auto
[{"id":"8a069626.50a548","type":"inject","z":"fe737cce.7e5868","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":390,"y":320,"wires":[["aa2f7d86.979138"]]},{"id":"fa8e08eb.b25e98","type":"inject","z":"fe737cce.7e5868","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":390,"y":360,"wires":[["aa2f7d86.979138"]]},{"id":"6c52de07.9fbe08","type":"ui_switch","z":"fe737cce.7e5868","name":"","label":"switch","tooltip":"","group":"165e1e1a.e752fa","order":0,"width":0,"height":0,"passthru":false,"decouple":"true","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-fire fa-2x","oncolor":"orange","offvalue":"false","offvalueType":"bool","officon":"fa-fire fa-lg","offcolor":"grey","x":790,"y":340,"wires":[[]]},{"id":"aa2f7d86.979138","type":"change","z":"fe737cce.7e5868","name":"","rules":[{"t":"change","p":"payload","pt":"msg","from":"1","fromt":"num","to":"true","tot":"bool"},{"t":"change","p":"payload","pt":"msg","from":"0","fromt":"num","to":"false","tot":"bool"}],"action":"","property":"","from":"","to":"","reg":false,"x":610,"y":340,"wires":[["6c52de07.9fbe08"]]},{"id":"165e1e1a.e752fa","type":"ui_group","name":"Default","tab":"f9b58883.fa613","order":1,"disp":true,"width":"12","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

Since you already have 0 and 1, I have to use a change node to change them to true and false.  
See the `fa-lg` and `fa-2x` to enlarge the symbols. You could also rotate or flip the symbols. Look at the examples at [Font Awesome Examples](https://fontawesome.com/v4.7.0/examples/)

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [9 January 2021 10:17 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824/4 "2021-01-09T10:17:20Z")

</div>

I'm using myself Font awesome icon that can have 3 colors.  
Black =Inactive, Orange = Heater on, Yellow = Tap water.

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

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

```auto
[{"id":"b1894b2a.ba7c3","type":"ui_text","z":"55e959fa.db8a18","group":"68df9665.0c5c7","order":0,"width":"0","height":"0","name":"Burner","label":"Burner","format":"<font color={{msg.color}}><i class=\"{{msg.icon}}\" style= \"font-size:12px;\"></i></font>","layout":"row-spread","x":490,"y":1200,"wires":[]},{"id":"7411d8dc.80aad8","type":"switch","z":"55e959fa.db8a18","name":"Burner on/off","property":"payload.burnerInfo","propertyType":"msg","rules":[{"t":"eq","v":"1","vt":"str"},{"t":"eq","v":"0","vt":"str"},{"t":"eq","v":"2","vt":"str"}],"checkall":"true","repair":false,"outputs":3,"x":150,"y":1200,"wires":[["484b430f.b3f95c"],["2e377ae.a451e86"],["40e796d0.b88238"]]},{"id":"484b430f.b3f95c","type":"change","z":"55e959fa.db8a18","name":"Orange","rules":[{"t":"set","p":"color","pt":"msg","to":"orange","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"fa fa-fire fa-2x","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":340,"y":1160,"wires":[["b1894b2a.ba7c3"]]},{"id":"2e377ae.a451e86","type":"change","z":"55e959fa.db8a18","name":"Black","rules":[{"t":"set","p":"color","pt":"msg","to":"black","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"fa fa-fire fa-2x","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":1200,"wires":[["b1894b2a.ba7c3"]]},{"id":"40e796d0.b88238","type":"change","z":"55e959fa.db8a18","name":"Tap","rules":[{"t":"set","p":"color","pt":"msg","to":"Yellow","tot":"str"},{"t":"set","p":"icon","pt":"msg","to":"fa fa-tint fa-2x","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":330,"y":1240,"wires":[["b1894b2a.ba7c3"]]},{"id":"68df9665.0c5c7","type":"ui_group","name":"Toon","tab":"2f2447.bd4babba","order":1,"disp":true,"width":"6"},{"id":"2f2447.bd4babba","type":"ui_tab","name":"Toon","icon":"fa-thermometer-full","order":23}]

```

---

<div class="post-metadata">

**Author:** ![warnert](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/warnert/32/108132_2.png) [@warnert](https://discourse.nodered.org/u/warnert)\
**Post date:** [9 January 2021 22:25 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824/5 "2021-01-09T22:25:25Z")

</div>

Thanks. I never checked the fa-icons. Should do that another time.  
It works like a charm.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [10 March 2021 22:25 UTC](https://discourse.nodered.org/t/display-image-if-value-true/38824/6 "2021-03-10T22:25:27Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.