Switch - inject colour

Dashboard
1

How can I inject the color to the switch

[{"id":"f3234e1e.0871","type":"ui_button","z":"5f148060.7dc86","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"true","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":220,"y":260,"wires":[["caee36d1.987028"]]},{"id":"bbfb8d0c.49fa1","type":"ui_button","z":"5f148060.7dc86","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"false","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"topic","topicType":"msg","x":210,"y":340,"wires":[["6cbc2d4d.52eea4"]]},{"id":"65bff327.5f871c","type":"ui_switch","z":"5f148060.7dc86","name":"","label":"switch","tooltip":"","group":"b648849d.e9ced8","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-2x fa-spin","oncolor":"{{msg.colour}}","offvalue":"false","offvalueType":"bool","officon":"fa-refresh fa-2x","offcolor":"{{msg.colour}}","animate":false,"className":"","x":690,"y":300,"wires":[]},{"id":"caee36d1.987028","type":"function","z":"5f148060.7dc86","name":"","func":"msg.colour = 'red';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":260,"wires":[["65bff327.5f871c"]]},{"id":"6cbc2d4d.52eea4","type":"function","z":"5f148060.7dc86","name":"","func":"msg.colour = 'green';\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":340,"wires":[["65bff327.5f871c"]]},{"id":"b648849d.e9ced8","type":"ui_group","name":"Default","tab":"ed4b4ded.00d09","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ed4b4ded.00d09","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

2

Hi!
With reference to the code of ui-switch.js: There's no logic implemented to support something like {{msg.color}}. You need to provide a valid color definition to make it work.

There's one opportunity though given in the node's description:

If a Class is specified, it will be added to the parent card. This way you can style the card and the elements inside it with custom CSS. The Class can be set at runtime by setting a msg.className string property.

3

I'm an amateur
please write more or
website where it is described

4

Instead of "{{msg.colour}}" put "red" or "green" in the switch configuration. You don't need the function nodes.

Untitled 1
Untitled 1800×484 32.6 KB

The suggestion from @ralphwetzel gives more flexibility but seems unneeded in this case.

5

I need
I want to change color with load - dynamically

6 
[{"id":"f3234e1e.0871","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Red","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"red","topicType":"str","x":210,"y":100,"wires":[["4581c503380f1b71"]]},{"id":"65bff327.5f871c","type":"ui_switch","z":"f77cbf8b5446a20e","name":"","label":"switch","tooltip":"","group":"b648849d.e9ced8","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"fa-refresh fa-2x fa-spin","oncolor":"{{msg.colour}}","offvalue":"false","offvalueType":"bool","officon":"fa-refresh fa-2x","offcolor":"{{msg.colour}}","animate":false,"className":"","x":570,"y":160,"wires":[[]]},{"id":"0c8d34a2f81c45c2","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Yellow","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"true","payloadType":"bool","topic":"yellow","topicType":"str","x":210,"y":140,"wires":[["4581c503380f1b71"]]},{"id":"05bf18c08d3b03b6","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Green","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"green","topicType":"str","x":210,"y":180,"wires":[["4581c503380f1b71"]]},{"id":"0e692ae72ea48dc3","type":"ui_button","z":"f77cbf8b5446a20e","name":"","group":"b648849d.e9ced8","order":0,"width":0,"height":0,"passthru":false,"label":"Blue","tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"false","payloadType":"bool","topic":"blue","topicType":"str","x":210,"y":220,"wires":[["4581c503380f1b71"]]},{"id":"4581c503380f1b71","type":"change","z":"f77cbf8b5446a20e","name":"","rules":[{"t":"set","p":"className","pt":"msg","to":"topic","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":390,"y":160,"wires":[["65bff327.5f871c"]]},{"id":"f588f5038d33e5b1","type":"ui_template","z":"f77cbf8b5446a20e","group":"b648849d.e9ced8","name":"CSS","order":8,"width":0,"height":0,"format":"<style>\n.red i{\n    color: red;  /* HTML color name */\n}\n.yellow i{\ncolor: rgb(255, 165, 0); /* red green blue */\n}\n.green i{\ncolor: #00ff00;\n}\n.blue i{\ncolor: hsl(240, 100%, 50%);  /* hue saturation lightness */\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":570,"y":200,"wires":[[]]},{"id":"b648849d.e9ced8","type":"ui_group","name":"Default","tab":"ed4b4ded.00d09","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"ed4b4ded.00d09","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
7

THX
it's ok - work - super

8

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