Button icon does not update/refresh automatically

Dashboard
,
1

Hello,

I have set a dashboard button that I just use to display an icon (iconify).

icon and color is sent by msg.ui_control:

var msg2 = {};
if (msg.payload.state == "OFF") {
    msg2.ui_control = { "icon" : "iconify-bi-ev-front 32px", "color" : "grey" }    
} else if ((msg.payload.state == "ON") &&  (msg.payload.power_apparent >1000)) {
    msg2.ui_control = { "icon" : "iconify-bi-ev-front-fill 32px", "color" : "lime" }    
} else {
    msg2.ui_control = { "icon" : "iconify-bi-ev-front 32px", "color" : "green" }    
}
return msg2;

Inside the button settings, I have set:
icon : {{icon}}
color : {{color}}

if I change the icon, the new one is shown only if I refresh the browser (like F5).
if I don't, the button will just keep previous icon.

Did I missed something ? How can I 'force' icon change, without refreshing the whole dashboard ?

2

now I can see "on refresh" for ui_button icon here:

but still I wonder: is there a way for button refresh only ?

3

It was quite of time ago the iconify icons introduced to dashboard 1.0 but I do remember there was a challenge to get them working and it took to have duplicate set of elements and then the switching was possible between those.
Direct replacing was not possible. I don't think that anything is changed since then. So I really doubt it is possible to have dynamic icons with Iconify icons.

4

mm good to know, following your message, I tried with non-iconify icons:

either sending (with a couple of inject buttons) :

msg.ui_control = {'icon' : "thumb_up"};
return msg;

or

msg.ui_control = {'icon' : "thumb_down"};
return msg;

it's same issue: no update except if I refresh the full page (F5).
so it may be not related to iconify ?

Edit : I tried changing only color : same issue

5

Well as the "config-fields" document says - for button there is refresh required. So no support what so ever.
But what I tried to say is that Iconify is much trickier to handle and dynamics with them is hard or impossible to achieve with the dashboard widgets.

You may get some results if you try with the ui_template where you can figure out logic which is aligned with the iconify strategies.

I don't have a computer with DB1 installed nearby so can't even try out.

6

Thank you for your feedback.

Well, I have a possible workaround in this situation as I use the button as a telltale (I don't need the button function, but it was an easy way to show an icon).

For some other stuff, I have use ui_svg which can dynamically change it's svg display.
Good point is that iconify icons are svg, so I can simply use the <svg> code from iconify website to inject in ui_svg node.

Still, it's a bit curious that we can dynamically change icons/colors of dashboard switches, but not button (even non iconify)

7

That was the solution for the switch node

8

didn't tried iconify on switchs, but dynamic change works very well with material icons.
Capture d’écran du 2024-10-01 14-23-20

9

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