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:
