Try with what I’ve said here:
It’s not a bug, it’s just CSS. You just have to learn it and inspect the styles in chrome or Firefox to help you.
I’ve got an issue with background pictures since the latest version. The picture flashes up but then disappears. Is this something to do with the triggers?
This is the top of the view including all the stacking in case it’s relevant.
- type: custom:layout-card
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: device_tracker.me_composite
show_states: false
show_name: false
show_icon: false
aspect_ratio: 1/1
styles:
card:
- background-image: >
[[[
if (entity.state == 'home')
return 'url("/local/pictures/me_home.png")';
else
return 'url("/local/pictures/me_away.png")';
]]]
- background-repeat: no-repeat
- background-size: 100%
- background-position: center
Hi all
I’ve jsut updated to 3.3.2 from 3.2.x and I noticed that if the entity does not exist I get an error like this:
ButtonCardJSTemplateError: TypeError: Cannot read property 'state' of undefined in 'if (entity.state < 15)
With previous version, the button card just didn’t show up and this was ok for me (I know maybe it’s not correct, but at least I didn’t get any error in the dashboard).
This entity is an RFLink entity and sometimes it does not show up.
Any suggestion?
Thanks
Test if the entity exists or not:
if (!entity) return;
2 Likes
You might need to play around with the keep object in custom:stack-in-card, especially the settings around keeping the background on stacked cards.
1 Like
That’s it, thanks!
You don’t even need to use macros. You can do this with !includes using the lovelace_gen and passed properties.
Thank you @RomRider, I did not understand that the solution was for me.
It did the trick!! Now it looks like I want 
1 Like
What would be the best approach to having a button that changes its state on different parts depending on the type of entity. Example:
Front Door Light
Front Door Sensor
I would want the button card background to change color if the light was on / off
I would want the icon for the Door to be closed when Door Sensor is closed and Open when Door Sensor is open.
Is that doable? If so any pointers?
Use the state object for that:
With some examples:
Thanks, doesnt that relate to the entity of the card though?
I have used template in the icon field like so:
icon: |
[[[
var sensor_state = (states['binary_sensor.door_sensor'].state);
if (sensor_state == "on")
return "mdi:door-open";
else
return "mdi:door"
]]]
Is there a way to do this without the var? i know the card supports global variables but i havent managed to get them to work. I.e. i would want to put the entity name of my sensor in a variable then call that in different parts of the card code.
Your initial question was not very clear
variables:
other_entity: binary_sensor.door_sensor
icon: |
[[[
var sensor_state = (states[variables.other_entity].state);
if (sensor_state == "on")
return "mdi:door-open";
else
return "mdi:door"
]]]
Keep in mind that by doing this you’ll have to add binary_sensor.door_sensor to triggers_update or set the value of triggers_update to all
1 Like
Cheers. Sorry I thought it was clear but reading back it’s not. I think I’ve got it though with this setup template on the icon. Now to make all my buttons to match and line up nicely.
Hi i need some quick help. I want the icon to be moved to the left, so its begins right above the text. I have some trouble with css. I read the readme but i wont get it right.
Maybe someone can help please, and I must admit I didn’t read all 3700 posts, as I’m not sure what to search for.
I want to toggle my A/C’s turbo mode, by calling this service:
If you call it with {turbo: “off”} you turn turbo mode off. For turning it on you need to send “on” - most obviously.
I made this button card:
type: button
tap_action:
action: call-service
service: tasmota_irhvac.set_turbo
service_data:
turbo: 'off'
entity_id: climate.daikineg
show_icon: true
show_name: true
entity: climate.daikineg
name: Turbo on/off
My question:
How do I add the ON toggle value, and how can tell it that I want it to change from blue to yellow when turned on?
Is there a way to integrate input_select.myselection as a popup in this card, that would be really great?
I think this might be accomplished via:
styles:
img_cell:
- align-self: start
This should align the grid item along the horizontal axis at the start (left) of the available space in the grid cell.
First, you’re not using button-card, but the core button so that needs to change:
type: button → type: custom:button-card
Regarding toggling the turbo, you should create a script in home-assistant that does the toggle for you and then call that script from the button.
Regarding the color, you’ll have to find an attribute that gives you the turbo status and then use javascript templates to change the color of the element you want.
You can use browser_mod to display a popup. Input_select (to display a list) is not supported on button-card.
Thanks for all the great work on this card!
Quick question…I have 4 button cards in a horizontal stack. They are all the way to the left, is there any way to make the button cards centered in the horizontal stack card?
Thanks!
If they are not centered, it’s probably because you’re defining the width of the card (bad idea because it won’t fix every screen size). In this case you can add:
- type: custom:button-card
color_type: blank-card
at the beginning and the end of your horizontal-stack.
However, better use aspect_ratio instead of specifying a width as they resize themselves automatically.