I‘m not a coding hero, but using
(states['binary_sensor.xyz'].state == 'on')
always is working.
That worked, thank you, cant understand why its been working as I had it for the last few months.
You don’t have an entity, that would update the card. You need to set an entity, at least to trigger the update of the card.
See here (especially the option triggers_update): GitHub - custom-cards/button-card: ❇️ Lovelace button-card for home assistant
Ahr, ok Patrick thank you.
I’ve put together a nice functional fan card that works, but I cannot figure out how to have the three small buttons on the bottom row show a status. What I’ve been trying to do is; if speed 1 is selected, have only that button lit up, then if speed 2 is selected, only that button lit up, etc.
I’ve tried so many variations, but I cannot figure out how to get the state to show in the speed select buttons, I’m hoping someone will be able to help me out.
Here are the attributes for my fan from developer tools:
speed_list:
- 'off'
- low
- medium
- high
preset_modes: []
speed: high
percentage: 100
percentage_step: 1.0101010101010102
preset_mode: null
friendly_name: Living Room Fan
supported_features: 1
And here’s the code for the button:
type: vertical-stack
cards:
- card:
- height: 5px
- width: 30px
entity: fan.living_room
name: Living Room Fan
show_state: true
size: 35%
state:
- color: null
icon: 'mdi:fan-off'
value: 'off'
- color: green
icon: 'mdi:fan'
value: 'on'
styles: null
tap_action:
action: call-service
service: fan.toggle
service_data:
entity_id: fan.living_room
type: 'custom:button-card'
- type: horizontal-stack
cards:
- type: 'custom:button-card'
color_type: null
color: null
show_state: true
size: 30%
icon: 'mdi:fan-speed-1'
tap_action:
action: call-service
service: fan.set_percentage
service_data:
entity_id: fan.living_room
percentage: 25
- type: 'custom:button-card'
color_type: null
color: null
show_state: true
size: 30%
icon: 'mdi:fan-speed-2'
tap_action:
action: call-service
service: fan.set_percentage
service_data:
entity_id: fan.living_room
percentage: 50
- type: 'custom:button-card'
color_type: null
color: null
show_state: true
size: 30%
icon: 'mdi:fan-speed-3'
tap_action:
action: call-service
service: fan.set_percentage
service_data:
entity_id: fan.living_room
percentage: 100
And for funsies, what the card looks like:
2 Likes
I don’t quite understand it yet. What is meant by ‘only one button lit up’? What should the other buttons look like? Greyed or so?
Or did you mean something like this:
styles:
icon:
- color: |
[[[
if (states['fan.living_room'].attributes.speed == 'low') return 'yellow'; return 'black';
]]]
2 Likes
After a while I’m back for some questions.
I want to change a color of an attribute by referring to the last_changed attribute. It seems very tedious to do since the usual output is really awfull. Since button-card already has the output I want I wondered if I can re-use this.
So what I want to do is something like, if last_changed > 5 minutes return green else red, but I can’t seem to find how to do this without creating a custom sensor. Does anyone know?
Hey there folks,
Is there a way to set the box-shadow in sync color as the yeelight bulb?
SOLVED:
- box-shadow: 0px 0px 5px 0px var(--button-card-light-color)Hey guys, any idea what is wrong with my syntax here:
state:
- color: >
[[[
if (sensor.shellyem_5e26f6_channel_1_power > -500 && sensor.shellyem_5e26f6_channel_1_power < 0) return 'orange';
if (sensor.shellyem_5e26f6_channel_1_power < -500) return 'green';
else return 'red';
]]]
Nothing is happening when my values are in those ranges.
I want color to be orange if between -500 and 0, green if it is over -500, and red if over 0
Try
states['sensor.shellyem_5e26f6_channel_1_power'].state
instead of
sensor.shellyem_5e26f6_channel_1_power
P.S.: If you are using sensor.shellyem_5e26f6_channel_1_power as entity in your button, you can replace it in the template with entity.state . I cannot explain it better, so have a look at my card:
type: 'custom:button-card'
template:
- button_sensor_warnung
entity: sensor.bewegungsmelder_flur
styles:
card:
- background-color: |
[[[
if (entity.state < 27) return 'rgba(0,179,0,0.9)';
if (entity.state >= 27 && entity.state <= 34) return 'rgba(255,166,64,0.9)';
else return 'rgb(219,23,9,0.9)';
]]]
Hmm tried both states[‘sensor.shellyem_5e26f6_channel_1_power’].state and entity.state and no joy, color doesn’t change.
Here’s the full card in case I’m doing something else wrong:
color: auto
color_type: card
entity: sensor.shellyem_5e26f6_channel_1_power
name: Current Energy
show_label: false
show_icon: false
custom_fields:
notification: |
[[[ return states['sensor.shellyem_5e26f6_channel_1_power'].state ]]]
state:
- color: >
[[[
if (states['sensor.shellyem_5e26f6_channel_1_power'].state >= 1000) return 'orange';
else return 'red';
]]]
styles:
card:
- height: 45px
- width: 232px
name:
- position: absolute
- left: 3%
- top: 5%
custom_fields:
notification:
- position: absolute
- left: 63%
- top: 5%
grid:
- position: relative
type: 'custom:button-card'
Put it in the styles: section.
Yup that did the trick, thanks 
Hi Guys,
Im still having issues to let this work:
Seems it won’t work for a sensor entity
type: 'custom:button-card'
template: buttons-test
entity: sensor.holiday
show_state: true
show_name: true
state:
- value: |
[[[
if (states['sensor.holiday'].state == 'Nothing') return 'on';
else return 'off';
]]]
spin: true
color: 'rgba(3,157,252,1)'
styles:
state: 'on'
card:
- box-shadow: '0px 0px 2px 2px rgba(3, 157, 252,1)'
- operator: default
spin: false
color: 'rgba(150,150,150,1)'
button_card_templates:
buttons-test:
show_icon: true
size: 15%
tap_action:
action: toggle
styles:
card:
- font-size: 14px
- height: 80px
try:
state: &spin # anchor to reuse elsewhere below in this file ;-)
- operator: template
id: state-on #needed if you want to merge states in your template and the button config
value: >
[[[ return entity.state == 'on'; ]]]
spin: true
btw, you seem to test for state == ‘on’ twice, once for the spin, and once below that in the styles.
styles:
state: 'on'
card:
You should take that out, since it all is below the template value ‘on’ in this case.
First part in template and second part take out the card part?
type: 'custom:button-card'
template: buttons-test
entity: sensor.holiday
show_state: true
show_name: true
state:
- value: |
[[[
if (states["sensor.holiday"].state == "Nothing") return "on";
else return "off";
]]]
spin: true
color: 'rgba(3,157,252,1)'
- operator: default
spin: false
color: 'rgba(150,150,150,1)'
button_card_templates:
buttons-test:
show_icon: true
size: 15%
tap_action:
action: toggle
styles:
card:
- font-size: 14px
- height: 80px
state:
- operator: template
id: state-on
value: |
[[[ return entity.state == 'on'; ]]]
spin: true
-wait, didnt spot your second line, rereading now
but first: what does this do:
- value: |
[[[
if (states["sensor.holiday"].state == "Nothing") return "on";
else return "off";
]]]
- value: |
[[[
if (states['sensor.holiday'].state == 'Nothing') return 'on';
else return 'off';
]]]
The sensor.holiday have state: Nothing
If there is a birthday, holiday, or something else then it that is the state.
For now I try if sensor is Nothing than the value must be ‘on’
otherwise give value ‘off’
the - value: can’t work with Nothing right?
in the operator: template, you write a template to return True. In which case everything that follows will be set.
So, if you want that to be ‘Nothing’ use that in your template.
- operator: template
id: state-on #needed if you want to merge states in your template and the button config
value: >
[[[ return entity.state == 'Nothing'; ]]]
spin: true