Well, those colors were relevant to the card (state) and it worked as I’d hoped, at least until my requirements changed earlier today. At this point I’m not sure how to accomplish the card-color-change based on sonos_group.
No, the order isn’t important, but putting the value of state first is more logical for me than color. In the original code, I wanted to change the card color and not the icon.
EDIT: The corrected code in your last post does something different from mine; mine may (?) be bad form, but the icon changes in form as intended, and the card changes in color as intended. Your corrected code changes the icon color instead of the card, and the card turns black instead of whatever color it was before. That’s not what I was looking to do when I put these buttons together sometime last year.
Ah well. I’m still playing with it and not finding any way to do it, so maybe it’s not possible with the button card.
EDIT: In the end… I accomplished what I wanted to do with a few template sensors and conditional cards. The button backgrounds change according to whether the speakers are grouped or not, playing or not, etc. As a bonus, I can call the join & unjoin services directly instead of using scripts. My only remaining gripe is that using conditional cards in this way–showing one button or the other, arranged in a horizontal stack–results in a slight horizontal offset; i.e., things don’t line up as nicely. Oh well.
Is it possible to use a variable to define another variable?
This code returns an error “Cannot read properties of undefined (reading ‘LEVEL_CRITICAL’)”:
variables:
LEVEL_CRITICAL: "300"
LEVEL_WARNING: "1000"
STATE_COLOR: >-
[[[
var STATE = entity.state;
if (parseFloat(STATE) < parseFloat(variables.LEVEL_CRITICAL))
return 'red';
else if (parseFloat(STATE) < parseFloat(variables.LEVEL_WARNING))
return 'orange';
else
return 'green';
]]]
This code works:
...
if (parseFloat(STATE) < parseFloat(100))
return 'red';
else if (parseFloat(STATE) < parseFloat(300))
...
Do not bother about hard-coded values for LEVEL_CRITICAL & LEVEL_WARNING variables - I was going to override these values by templates in “posterity” buttons.
I do my first experiments with nested buttons, to have a general switch for AdGuard but also a button in the top right to just pause it for 30 mins.
The functionality meanwhile works great, but I am not able to hide the borders of the nested card in the top right. I have searched through the whole thread and found some questions and feature requests on hiding the borders, but no answers.
Even if I explicitly use a white border, I still see this box shadow as you see here, how can I get this away?
I want to use the sensor.ha_uptime on a card.
While in a lovelace entity card the output is then something like “5 days ago”, the actual state of the entity and therefore what is displayed on the button card is “2022-01-22T18:50:12+00:00”.
So I would like to convert this.
This thread (Uptime in days hours and minutes - #53 by petro) seems to have the simple answer:
but that gives a “bad indentation of a mapping entry” error about the minus sign. I am sure this is just a minor thing, can some JS expert tell me how to get this working?
Indeed also a good idea. But do you know how I refer to the “last_changed” in a grid and the styles section? It actually does not consider that under this name if I want to format that on the button card, and I would like to prevent nesting another card, when I basically just want to have this in another line below other custom fields:
Indeed it refers to the label, good hint, thanks.
Just not sure how I can then also place a label or some words in front of that without making a more complex grid or whatever, basically the aim was to return Icon, text and state like for the update information above in the card.
what I do in those cases is use state_display: and show_last_changed: true. that way you can template all you like for the state_display, and still have it show the last_changed in the correct format, without having to try and fiddle that in JS templates
Hi, I’m trying to use a variable inside a styles of a custom field like below. But it’s not working, if i replace the [[[ return variables.muziek ]]] part it does work. Can somebody tell me what i’m doing wrong? Thanks
Hi folks, this is all amazing work.
I’ve really enjoyed seeing what everyone’s been sharing in this thread.
I’ve tried seeing if I can see if this has been posted before, but its 6228 posts long, so I may well have missed it somewhere!
What’s the best way of handling HA’s systemwide Light / Dark mode when using Button Card mod?
In HA Themes, you can use the format below, but I don’t see a way of specifying similar using the Button Card mod.
I have some elements I’d like to change away from the system default, but those changes appear the same whether HA is in light mode, or dark mode - I’d like to specify both separately.
Hello,
I am struggling with the JS.
My yeelight lamp has a night light, which is a true/false attribute of the lamp. So I would like to have a switch that can turn the night light on/off (works with a script), and color the icon depending on this attribute state.
But that simply does not do anything, neither yellow nor red, the icon remains black (if i just put color: red it turns red, so it is not an error with indention or so).
The attribute I ask is generally also correct, the states… statement returns true/false as expected in the template section of the developer tools.
Can someone tell me what is wrong with this statement and what needs to be changed?
That does not change anything. At least the if clause should have returned false then even before, leading to red. But also with your line the icon just stays black.
My full code:
