state_display display doesn’t exist in the state object, it’s a main configuration parameter.
I forgot to bump the version in the code, my fault
That should be now better since 3.3.0, no ?
But yes, button-card is quite compute intensive with all the options it has now, so if your device is not very fast, you’ll definitely feel it…
Yes, mostly everything is possible with this card, but please read the documentation. There is a lot of examples there. Especially the second one here with icons.
Hello @Luxor73, do you have this templates working?
I am trying to put a custom button inside another custom button using custom fields (like for example you put custom_field “bt_set” inside button template “light_room_classic”). For me, the button inside looks well but it doesn’t allow me to use tap_action nor hold_action.
I have begun to replace my tiles cards with this card and it has been a steep learning curve but I have nearly everything sorted except for two things.
I would have expected the label template below to display the brightness (when on) or Off. Instead it displays the brightness or nothing. Any idea how to get it to do what I want?
label: >
[[[ var bri = Math.round(entity.attributes.brightness / 2.55); if
(entity.state === 'on') return (bri ? (bri+"%") : 'Off') ]]]
Is it possible to specify the card/button width as a percentage of the column width? This would allow me to display the buttons on my pc, iphone, and the problem child of an ipad pro that has far narrower columns. If I specify a width in px that works well on the narrow columns of the ipad there is a lot of wasted space on the other displays. If I specify it to fit my pc or phone the buttons overrun and are clipped by the columns.
I figured it out a different way, because I also wanted to style the separate elements of the label, so I used a custom_field stateDisplay (which now has been adopted in core button, but I didnt change to that yet)
I guess I could also specify the label as ‘off’ using the button card states options.
That’s no longer my issue.
Obtaining consistent button sizes with varying numbers of buttons in a horizontal stack is now the main roadblock to using this card.
If I specify a fixed width it causes issues with varying column widths on different displays. If I use aspect_ratio the buttons end up different sizes when there are different numbers of buttons in the horizontal stack.
So how do I get a button/card width as a percentage of the home assistant column width?
EDIT: never mind. An invisible spacer button template is how it’s done.
As you see on the right the pictures get cut off at the top and bottom if i make them to small. Whats causing this problem and how can i solve it?
Info: the original pictures are squared.
I used empty mardown cards to have them on the right side. thats why the code is pretty big, but it worked the best except the pictures are getting cut off.
Best way to test CSS/play with CSS is to use chrome inspect (or FF inspect) and then play with the css values of the elements to see the live result and also highlight your element (you’d have seen that there was a padding).
And then once you’re satisfied, just set the value in the code and you’re good to go.
Hi all, I’m having a problem with the color styling of some of the icons in my cards. I intend for the icon colors to change based on an entity state (e.g. entity on = icon orange), but they frequently – not always – fail to return to the null color option when the entity state changes back to off.
The icons themselves are also set to change based on the same entity_states, but that’s done separately under the custom_fields object of the config. There’s no problem with the icons changing back and forth. So I often end up with the right icon, but the wrong color.
Relevant config is below. As you can see, I’m using decluttering card.
styles:
custom_fields:
icon1:
- color: |
[[[
if (states["[[icon1_ent]]"].state == '[[icon1_state1]]') return "[[icon1_color1]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state2]]') return "[[icon1_color2]]";
if (states["[[icon1_ent]]"].state == '[[icon1_state3]]') return "[[icon1_color3]]";
else return "null";
]]]
(One solution I’ve tried is a template under custom_fields that controls both the icon and its color… but ran into problems, and anyway this allows me to more easily make icon/color combinations based on entity states, so that’s why I’m doing it this way.)
The one below is what I’ve managed so far (aspect ratios in green)
All my other buttons are 4/3 aspect ratio as 1/1 was too tall and the default horizontal stack of 4 buttons without defining a ratio was just a bit too short.
I cant for the life of me work out how to extend a button twice or four times the normal width without messing with the icon height. It disappears altogether on the full width button.
I’m obviously doing something stupid. Can anyone tell me how to keep the icon the same size (28px) while making the button wider but not taller?
