I have some holiday lighting and am trying to figure out how to get a dashboard to indicate an on/off state for lights that have more than just a switch feature. Specifically some twinkly light strings.
I was wondering why their icon wouldn’t change between black/yellow when off/on and then it dawned on me that it’s due to them having other lighting features. The other ones that work (their icon toggles black/yellow) are just switch devices.
How can I get a dashboard icon to change to yellow regardless of what “on state” the light happens to be in? Off works, it shows the black mid:string-lights icon.
So I’m a little puzzled why the card doesn’t draw the icon black/yellow tracking the state?
It’ll show the icon in black, when off, just not in yellow when on, like the others.
Because if I use the mdi:pillar icon on another device type, that DOES track the state with color:
This is the code behind that card:
Is there something else that should be here in the card helping it understand how to display the icon?
I know just enough to be dangerous with the UI parts of all this, so pardon my ignorance if I’m missing something here.
I’m all in favor of using additional integrations when necessary, but I’m not sure if the simple card like this justifies wandering down a whole other set of rabbit holes.
I’m trying to base my implementations on as ‘default’ an installation as possible. I find this is important, especially during the ‘learning phase’ of anything.
Learn how the base config is “supposed to work” before bolting on extras. Because those extras sometimes bring more trouble later on.
As with many complex integration solutions it’s sometimes difficult during on learning curve to tell the difference between
what the product can or can’t do
what’s a bug because it doesn’t work as expected
or what requires added steps to configure that might be non-obvious
I’m naively thinking this should be simple, but totally willing to accept I’ve missed something!
it’s strange that your icon doesn’t show when it’s on, there seems no reason for it to be happening.
have you tried clearing your cache in your browser?
what happens if you set state_color to false? is the state color the same color as your background maybe? (white?)
if the issue stays the same, maybe you could check in (for example) Chrome browser to inspect the element. (but that’s another step not to easy inside hass)
I know, right? It seems strange. The same icon toggles fine on a different type of device.
When I look at the devices that aren’t showing it I notice they have various color values. One of which is “rgb_color: 255, 255, 255”
I wonder, is the icon THERE on the page, just set to ALL WHITE?
OMFG, that’s what it is!
It is drawing the icon. It’s just drawing it using white… on a WHITE BACKGROUND.
So, yeah, the card logic is “doing what it’s told” and showing the color of the object. The fact that it’s a white object on a white background is outside the scope of the icon handling, apparently.
So now the question is how best to solve this particular situation. Just toggle the icon, like all the others, between black and yellow. Though, tangentially, where is “yellow” being determined as the ‘on’ color for things that don’t have color?
Is there a way on the card to ‘dummy up’ how it determines how to show the icon of a color-capable device?
I had this pesky problem too and the only solution was to use card-mod. I opted to use the active icon colour (yellow, in the default theme) when the RGB light has a near-white colour and otherwise their current colour. Of course, YMMV with the 2022.12 release with all the UI and color changes. I haven’t upgraded yet. Just note that the CSS variables have changed. I’m off to bed, but if you’re interested in my config, search the card-mod thread for my username (or maybe it was a separate post). Otherwise, look at my Gihub repo (ui-lovelace.yaml and main.yaml).
I don’t want to lose status color changing (the black/yellow). Which is what adding ‘state_color: false’ does. It keeps the ‘off’ state icon visible (the black color).
I’d like to know if it’s possible to have it use the default card color for ‘state’ not extrapolate it from the device itself.
As for themes, sure, but there’s still the chance of color conflicts, albeit less so for on-state color values if it was using a dark-mode these. I’d like to get a handle on the underpinnings on this before switching themes around.
Yes, this is what I’m talking about. I’m just wondering if there’s an ‘override’ point between where the code that creates the button, and extracts the RGB from the device, could be told to ignore that and use the existing “card default” for the on state. This way I wouldn’t have to go back and edit this again if I changed the theme.
Though, truth be told, for an icon color I don’t really see myself ever needing a tiny icon to be set to match a device’s current RGB values. But then I’m relatively new to dashboard and there could be a good use-case for it.
I think this would also be worth addressing at the Twinkly integration point, as the illumination on a string of these lights isn’t really ever going to be in just one color. So choosing ‘white’ is arguably a worse idea that defaulting to a plain switch on/off color state. Most of the time these are going to be in a running playlist mode, with a multi-color pattern. I’ll have to see if there’s a thread on the Twinkly integration to raise this…
I really hate that I’m falling down the rabbit hole of CSS debugging. But I have managed to find where in the HTML the issue arises.
A regular button uses this on the badge icon:
The ones for a Twinkly device are using this:
So whatever code is driving the creation of this is taking the current value of the device and hard-coding it here, instead of using the page’s own variable rgb-state-light-color.
Though that just tells me what has happened (and answers my initial question) but it doesn’t get me much closer to getting to my solution.
It’s checking the state of the device, if it’s on or anything else (which assumes off) and then using the page variables of rgb-state-switch-color for the on icon color, and state-icon-color for off. Note, the text in the variable rgb-state-switch-color is a triplet, thus the rgb() wrapper. The text in state-icon-color is a #hex color and thus needs no wrapper to convert it.
My question now is are these the ‘correct’ variables to be using here? Or are there some other variables set as part of the theme used to create the page?
My next question is should this be configured via some sort of template? Right now I’ve just got the added card_mod: style text added to each -entity. But since it’s unchanging between them (using each entity’s ‘is_state()’ function), is there a ‘better way’ to use this as a macro or something?
And bear with me if I’m not using the right terminology here, I’d welcome correction/clarification.
