Hi all,
when I use the solution from @hotNipi in my Dashboard (see link below), the color of the icon is changing only after refreshing the Dashboard page.
Is that normal?
What do I have to do if I want to change the color of the icon immediately without refreshing the Dashboard?
Thanks!
Thomas
Continuing the discussion from Change icon color without changing text color on button?:
The ui_template node with the styles should be targeted to the site head.
You mean: Select entry "Added to ..." from drop down menu of template node?
If I do so, nothing happens (don't remember how it was set before when also nothing happens).
For some reason it does not work here...
Strange. Share that part of the flow ...
Well, it's a copy of yours:
[{"id":"2e1d71bd03cf9513","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"197439ee7ec8da1c","type":"ui_button","z":"2e1d71bd03cf9513","name":"","group":"110f893b.a0f1d7","order":0,"width":0,"height":0,"passthru":false,"label":"home button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{msg.icon}}","payload":"","payloadType":"str","topic":"","topicType":"str","x":530,"y":220,"wires":[[]]},{"id":"927ad427911e06d1","type":"inject","z":"2e1d71bd03cf9513","name":"red icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon red","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":340,"y":200,"wires":[["197439ee7ec8da1c"]]},{"id":"91e8ce7cf19887a4","type":"ui_template","z":"2e1d71bd03cf9513","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":520,"y":160,"wires":[[]]},{"id":"e3389cdb9cd24f47","type":"inject","z":"2e1d71bd03cf9513","name":"blue icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":340,"y":260,"wires":[["197439ee7ec8da1c"]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"Default","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false},{"id":"7179c13.0628d4","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
Well in the flow you shared it is still set to "Widget in group". That's need to be changed.
OK also change the button configuration to be like this
The last hint was the right one {{icon}}! Thank you very much, now it works!
My copy of code was for sure also wrong, but only because I forgot to change before copying to this thread..
Thank you and have a nice day!
@hotNipi Sorry for disturbing again..
Based on your code I have done this, but it works not "stable".
The text is in general always toggling as expected, but the color of the icon does not.
Sometimes the color is toggling correctly.
Sometimes the color changes to the correct value if I switch to another Tab and back to Tab ToggleButton.
Sometimes it works if template node - Template type is set to "Added to site..".
Sometimes it works if template node - Template type is set to "Widget in group".
Sometimes it takes a long time until something happens...
I have no clue why this happens!
Can you or anybody else help me?
[{"id":"927ad427911e06d1","type":"inject","z":"2e1d71bd03cf9513","name":"red icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon red","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","x":100,"y":680,"wires":[["9af5b2c6.42c3d"]]},{"id":"91e8ce7cf19887a4","type":"ui_template","z":"2e1d71bd03cf9513","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":900,"y":420,"wires":[[]]},{"id":"e3389cdb9cd24f47","type":"inject","z":"2e1d71bd03cf9513","name":"blue icon","props":[{"p":"ui_control.icon","v":"fa-home fa-2x coloredIcon blue","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":100,"y":720,"wires":[["9af5b2c6.42c3d"]]},{"id":"29e7d45f.dea00c","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":480,"wires":[["38a5d91c.0be77e"]]},{"id":"1b6fe3d1.5580a4","type":"switch","z":"2e1d71bd03cf9513","name":"","property":"toggle-me","propertyType":"flow","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":400,"y":700,"wires":[["8991bf63.f4d578"],["5fec9b00.abd0d4"]]},{"id":"8cddecf3.4a24f","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":800,"wires":[["38a5d91c.0be77e"]]},{"id":"1e692860.33a6d","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"toggle-me","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":870,"y":540,"wires":[["38a5d91c.0be77e"]]},{"id":"dc371121.720208","type":"inject","z":"2e1d71bd03cf9513","name":"","repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"false","payloadType":"bool","x":90,"y":480,"wires":[["29e7d45f.dea00c"]]},{"id":"5fec9b00.abd0d4","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":820,"wires":[["8cddecf3.4a24f","9af5b2c6.42c3d","629ab238496a40fa","c21e502359438c40"]]},{"id":"8991bf63.f4d578","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":600,"wires":[["1e692860.33a6d","9af5b2c6.42c3d","629ab238496a40fa","c21e502359438c40"]]},{"id":"38a5d91c.0be77e","type":"ui_text_input","z":"2e1d71bd03cf9513","name":"","label":"","tooltip":"","group":"110f893b.a0f1d7","order":3,"width":0,"height":0,"passthru":true,"mode":"text","delay":300,"topic":"","sendOnBlur":true,"className":"","topicType":"str","x":1240,"y":700,"wires":[[]]},{"id":"9af5b2c6.42c3d","type":"ui_button","z":"2e1d71bd03cf9513","name":"","group":"110f893b.a0f1d7","order":1,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{icon}}","payload":"true","payloadType":"bool","topic":"","topicType":"str","x":270,"y":700,"wires":[["1b6fe3d1.5580a4"]]},{"id":"f40c5c0.c964128","type":"comment","z":"2e1d71bd03cf9513","name":"At startup set default value (false)","info":"","x":160,"y":440,"wires":[]},{"id":"e62c42b2.ed0408","type":"comment","z":"2e1d71bd03cf9513","name":"if flow.state is true set it to false, if flow.state is false set it to true","info":"","x":720,"y":700,"wires":[]},{"id":"629ab238496a40fa","type":"debug","z":"2e1d71bd03cf9513","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":950,"y":660,"wires":[]},{"id":"c21e502359438c40","type":"debug","z":"2e1d71bd03cf9513","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"ui_control","targetType":"msg","statusVal":"","statusType":"auto","x":940,"y":740,"wires":[]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"ToggleButton","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false,"className":""},{"id":"7179c13.0628d4","type":"ui_tab","name":"ToggleButton","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
If the flow variable does not exist then the switch will never change color. It should be set when NR starts or you do a deploy, but if it it is deleted it, the button push will not change the color since you test the flow variable.
Try this, change the switch node to this:
Also how have you set persistent storage? If you don't know, stop and start node-red and copy and past the start up log to a reply.
@zenofmud Hi Paul,
thank you for your answer. But it still does not work as let's say wanted:
If in template node 'Template type = Added to site ..."
then after deploying it only works if Tab 'ToggleButton' is already active in the dashboard.
If I change to another Tab and back to Tab 'ToggleButton' only the text is toggling although in the debug the content of msg.ui_control is correct...
Regarding persistant storage:
I do not know how to start and stop node-red and to copy the start up log. But I will try to find out...
Thx.
Funny!
I tried with this in the meanwhile.
It's working perfect, but only directly after deploying as long as I do not change the Tab.
After changing the Tab it is still toggling, but the icon in the button does not change anymore...
?
[{"id":"91e8ce7cf19887a4","type":"ui_template","z":"2e1d71bd03cf9513","group":"110f893b.a0f1d7","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":520,"y":220,"wires":[[]]},{"id":"bcd9e2a053e660be","type":"toggle","z":"2e1d71bd03cf9513","name":"","onOffTopic":"switch","onValue":"true","onType":"bool","offValue":"false","offType":"bool","toggleTopic":"toggle","toggleValue":"1","toggleType":"num","passOnOff":"","x":490,"y":340,"wires":[["9dbec8b1c66d12f8"]]},{"id":"5738ccda20fa04eb","type":"debug","z":"2e1d71bd03cf9513","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":990,"y":340,"wires":[]},{"id":"4fd441ed768e6c73","type":"function","z":"2e1d71bd03cf9513","name":"","func":"msg.topic = \"toggle\";\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":360,"y":340,"wires":[["bcd9e2a053e660be"]]},{"id":"ac7a79d06cdf6fdc","type":"ui_button","z":"2e1d71bd03cf9513","name":"","group":"110f893b.a0f1d7","order":3,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{icon}}","payload":"true","payloadType":"bool","topic":"topic","topicType":"msg","x":230,"y":340,"wires":[["4fd441ed768e6c73"]]},{"id":"9dbec8b1c66d12f8","type":"switch","z":"2e1d71bd03cf9513","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":610,"y":340,"wires":[["7696ec6e47e99416"],["268e2d27bf90fd3a"]]},{"id":"7696ec6e47e99416","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":260,"wires":[["5738ccda20fa04eb","b51488dab21dd7ef"]]},{"id":"268e2d27bf90fd3a","type":"change","z":"2e1d71bd03cf9513","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":760,"y":420,"wires":[["5738ccda20fa04eb","1d07e4a6bd3635ab"]]},{"id":"b51488dab21dd7ef","type":"delay","z":"2e1d71bd03cf9513","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":970,"y":260,"wires":[["ac7a79d06cdf6fdc"]]},{"id":"1d07e4a6bd3635ab","type":"delay","z":"2e1d71bd03cf9513","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":970,"y":420,"wires":[["ac7a79d06cdf6fdc"]]},{"id":"110f893b.a0f1d7","type":"ui_group","name":"ToggleButton","tab":"7179c13.0628d4","order":13,"disp":true,"width":"6","collapse":false,"className":""},{"id":"7179c13.0628d4","type":"ui_tab","name":"ToggleButton","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
The msg.ui_control is also toggling correct, but the color fo the button does not change anymore after switching the Tabs.
I think it has something to do with the template node:
Styles if added to site head affect for all tabs. Otherwise they work only for tab they are set.
The dashboard widgets are dummy. They have no states, no memory so to say. Every time you change the tab or do refresh of dashboard page, the widgets are created from scratch. Having no memory they are rendered to the default - that is how they are configured.
On top of that - there is replayMessage system - if server side recognizes that dashboard connects, it sends last known message to all widgets.
last known message may help if it contains something you need to have to tell to the widget to represent the state. But if not, the widget can just do it's default.
So it is up to the logic you create on server side to make dashboard widgets to have proper state in all conditions mentioned above.
There is ui_control node.
Using this you can catch events when dashboard connects or changes tabs. Using those events as trigger you can send relevant state messages to all dashboard widgets. This way you can hold all your (dynamic) widgets up to state. How the server side knows the state and retrieve it is up to you.
Thank you! A huge amount of information.
I will sleep on it for a night or two or some more ...
And then I will try to use it and solve the issue.
Thank you!
Do search here in forum about ui_control node (do not mix up with msg.ui_control which is totally different thing) and you'll find some examples for sure. Known it is hard to explain with few words so best to do is to examine examples and try to use it.
By the way, in your latest flow, you do not need the function node, just change the button node to set the topic to the string toggle:
Also in the two change nodes, you set msg.payload to true in both change nodes.
@nosered1966
Thomas,
Here is a working version of your flow. The ICON colorr will change and it you go to another tab and come back the color will show on the icon. Hopefully this is what you want.
[{"id":"72057b62.1ab02c","type":"tab","label":"Icon color change","disabled":false,"info":""},{"id":"402cb325.dc78ac","type":"ui_template","z":"72057b62.1ab02c","group":"a85cfd76.f4b748","name":"","order":1,"width":0,"height":0,"format":"<style>\n .coloredIcon.red{\n color :red;\n }\n .coloredIcon.blue{\n color :blue;\n }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":940,"y":160,"wires":[[]]},{"id":"7da063b5.49c9d4","type":"toggle","z":"72057b62.1ab02c","name":"","onOffTopic":"switch","onValue":"true","onType":"bool","offValue":"false","offType":"bool","toggleTopic":"toggle","toggleValue":"1","toggleType":"num","passOnOff":"","x":250,"y":220,"wires":[["9f2fc6f0.65616"]]},{"id":"f8bd3e7a.07d1a","type":"debug","z":"72057b62.1ab02c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":140,"wires":[]},{"id":"4f75d03d.c9df5","type":"ui_button","z":"72057b62.1ab02c","name":"","group":"a85cfd76.f4b748","order":3,"width":0,"height":0,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","className":"","icon":"{{icon}}","payload":"true","payloadType":"bool","topic":"toggle","topicType":"str","x":110,"y":220,"wires":[["7da063b5.49c9d4"]]},{"id":"9f2fc6f0.65616","type":"switch","z":"72057b62.1ab02c","name":"","property":"payload","propertyType":"msg","rules":[{"t":"true"},{"t":"false"}],"checkall":"true","repair":false,"outputs":2,"x":390,"y":220,"wires":[["6c248e59.f05ee"],["4b5a4387.f875ec"]]},{"id":"6c248e59.f05ee","type":"change","z":"72057b62.1ab02c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"false","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon red","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":140,"wires":[["f8bd3e7a.07d1a","4f75d03d.c9df5","c93611c.5dbdef"]]},{"id":"4b5a4387.f875ec","type":"change","z":"72057b62.1ab02c","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"true","tot":"bool"},{"t":"set","p":"ui_control.icon","pt":"msg","to":"fa-home fa-2x coloredIcon blue","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":540,"y":300,"wires":[["4f75d03d.c9df5","1e8fe1e9.b2bd9e","c93611c.5dbdef"]]},{"id":"c93611c.5dbdef","type":"change","z":"72057b62.1ab02c","name":"Retresh the tab","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"tab\":\"\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":740,"y":220,"wires":[["dd6020dbd29b09cd"]]},{"id":"1e8fe1e9.b2bd9e","type":"debug","z":"72057b62.1ab02c","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":730,"y":300,"wires":[]},{"id":"dd6020dbd29b09cd","type":"ui_ui_control","z":"72057b62.1ab02c","name":"","events":"all","x":940,"y":220,"wires":[[]]},{"id":"5564b44674ce3c7f","type":"inject","z":"72057b62.1ab02c","name":"initilise the icon","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"toggle","payload":"true","payloadType":"bool","x":160,"y":140,"wires":[["7da063b5.49c9d4"]]},{"id":"a85cfd76.f4b748","type":"ui_group","name":"ToggleButton","tab":"a85229e2.1e1148","order":13,"disp":true,"width":"6","collapse":false,"className":""},{"id":"a85229e2.1e1148","type":"ui_tab","name":"Icon Color Change","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
Hello Paul,
right now I think this is EXACTLY what I was looking for.
Thank you so much for your concrete help and for modifying the flow!
Many thanks also to all the others who have helped me to work with Node-RED so far.
What I like most about this forum is that you get concrete help and not just vague hints or other stupid remarks.
Hi Paul,
I already suspected it when I have written "right now I think..."
When using your code in my flow, it happens that the whole tab is refreshed when clicking the button, not only the icon in the button This is acceptable but not as expected.
Do you know if this can be changed?
Thank you!
Thomas
No it can’t be changed or yes it can but then the icon color will not change. You could keep the icon color neutral and change the background red or green
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy