Change icon in template with if

Dashboard
1

I have a msg.payload returning 1 or 0 from a bigtimer node to a ui template node.
Im trying to show different icon according to 1 and 0.

found a few examples here but either they are way complicated or not complete, and Im new to all this.
so far Im pieced this together but not working.

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

<div ng-if="msg.payload === '1'">
<i class="fa fa-lightbulb-on"></i>    
</div>

<div ng-if="msg.payload === '0'">
<i class="fa fa-lightbulb"></i>
</div>

any help or complete examples is a appreciated

2

First off, Node-RED uses the FontAwsome version 4.7 icons.

Here is one way you could do it using a switch.

[{"id":"b7f64ce5.99d33","type":"inject","z":"e77202b8.289f","name":"1","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":150,"y":280,"wires":[["9ba4c5a1.91243"]]},{"id":"d6bfd886.f36d58","type":"inject","z":"e77202b8.289f","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":150,"y":320,"wires":[["9ba4c5a1.91243"]]},{"id":"9ba4c5a1.91243","type":"ui_switch","z":"e77202b8.289f","name":"","label":"switch","tooltip":"","group":"e2c8d841.7b158","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"1","onvalueType":"num","onicon":"fa-lightbulb-o fa-4x","oncolor":"red","offvalue":"0","offvalueType":"num","officon":"fa-lightbulb-o fa-4x","offcolor":"black","x":330,"y":300,"wires":[[]]},{"id":"e2c8d841.7b158","type":"ui_group","name":"Default","tab":"85c83aff.43db18","order":2,"disp":true,"width":"6","collapse":false},{"id":"85c83aff.43db18","type":"ui_tab","name":"Home","icon":"home","order":1,"disabled":false,"hidden":false}]
3

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