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".
you can use material design icon or font awesome, there is a link in the ui dashboard help text.
eg.
[{"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}]
Or you can use a switch node, where you can use a custom font symbol:
[{"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
I'm using myself Font awesome icon that can have 3 colors.
Black =Inactive, Orange = Heater on, Yellow = Tap water.
[{"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}]
Thanks. I never checked the fa-icons. Should do that another time.
It works like a charm.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
