I seem to have a problem when defining states in templates. I basically want a button to have the same state styles set via the template but then change the icon state on the card itself as each button is unique.
For example, this all lights button will have my standard template state colours for on/off but the icon i would like to change based on the state which has been defined on the card itself. This would allow me to have multiple quick toggles with different state icons but the look/feel remains the same.
It seems these dont merge like styles do.
Card:
entity: light.all_lights
state:
- icon: 'mdi:lightbulb-off'
value: 'off'
- icon: 'mdi:lightbulb-on'
value: 'on'
template: quick_toggle_btn
type: 'custom:button-card'
Template:
quick_toggle_btn:
aspect_ratio: 2/1
show_name: false
state:
- styles:
card: null
icon:
- filter: grayscale(100%)
- filter: opacity(30%)
label:
- filter: opacity(30%)
name:
- filter: opacity(30%)
state:
- filter: opacity(30%)
value: 'off'
- styles:
card:
- background-color: '#0DD58C'
icon:
- color: white
label:
- color: white
name:
- color: white
state:
- color: white
value: 'on'
You have to use the “merge state by id”
I thought as much, i read the docs but i dont get it the syntax to be honest. Ill try and figure it out. Thanks.
Like this:
entity: light.all_lights
state:
- icon: 'mdi:lightbulb-off'
id: id_off
- icon: 'mdi:lightbulb-on'
id: id_on
template: quick_toggle_btn
type: 'custom:button-card'
quick_toggle_btn:
aspect_ratio: 2/1
show_name: false
state:
- styles:
card: null
icon:
- filter: grayscale(100%)
- filter: opacity(30%)
label:
- filter: opacity(30%)
name:
- filter: opacity(30%)
state:
- filter: opacity(30%)
value: 'off'
id: id_off
- styles:
card:
- background-color: '#0DD58C'
icon:
- color: white
label:
- color: white
name:
- color: white
state:
- color: white
value: 'on'
id: id_on
2 Likes
This looks amazing! Could you please share the yaml for the irrigation card? I’d like to see how you did the inputs and days of week selector.
tom_l
May 15, 2020, 4:56am
3914
Tagged you in the appropriate topic .
Setting aspect ratio to 1.6/1 shows buttons at correct size now BUT the icons are too small and setting the size is ignored. (again this is 0.110)
Interestingly, the left 2 that have the icons correct size are the core button card and the rest are all custom-button. Even the Start Addons button is custom but it’s using an image…
EDIT: just checked my mobile and that aspect ratio still makes the buttons too small. Looks like we need a fix or advice from Romrider.
I think maybe I found a small bug, on the mobile app if I have something like this:
aspect_ratio: 1/1
color: 'rgb(28, 128, 199)'
double_tap_action:
action: more-info
entity: switch.officefan_switch
icon: 'mdi:air-humidifier'
name: Humidifier
show_state: true
state:
- color: var(--disabled-text-color)
value: 'off'
- color: 'rgb(253, 216, 53)'
value: 'on'
lock:
enabled: true
type: 'custom:button-card'
with lock: enabled: true the button in the Home Assistant mobile app actually shows feedback when you push it, but without the lock: enabled: true I get no feedback when pushing the button.
Thanks @RomRider . I do appreciate the help. This is clearer to understand and I try and adapt this with my animated icons also.
Cheers.
Ok I removed the decluttering card templates and now use only button card templates. That eliminates a possible source. My issue persists though, with some cards randomly not being colored green as they should. Inconsistent results and I cannot fingure out why. Screenshot & Code below.
background: center / cover no-repeat url("/local/background-15.gif") fixed
style: &buttonCardStyle |
ha-card {
background-image: url("/local/cardbackK.png");
background-color: rgba(50,50,50,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
color: '#999999';
border-radius: 0;
}
style: &headerStyle |
ha-card {
background-color: rgba(66, 134, 244, 1);
background-image: url("/local/cardbackK.png");
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: 20pt;
text-align: center;
}
button_card_templates:
zigbee_status_glance:
## BASE TEMPLATE
style: *buttonCardStyle
type: custom:button-card
tap_action:
action: none
show_label: true
show_name: true
show_icon: false
show_state: false
color_type: card
color: rgba(0, 128, 20, 1) # Green
styles:
name:
- font-size: 12px
- color: white
label:
- font-size: 18px
- color: white
- font-weight: bold
zigbee_linkquality_glance:
## 2nd Template Applied After Base Template
label: '[[[ return entity.attributes.linkquality + "%" ]]]'
state:
- operator: template
value: '[[[ return entity.attributes.linkquality < 50 ]]]'
color: rgba(200, 200, 0, 1) # Yellow
- operator: template
value: '[[[ return entity.attributes.linkquality < 30 ]]]'
color: rgba(200, 0, 0, 1) # Red
zigbee_battery_glance:
## 2nd Template Applied After Base Template
label: '[[[ return entity.attributes.battery + "%" ]]]'
state:
- operator: template
value: '[[[ return entity.attributes.battery < 30 ]]]'
color: rgba(200, 200, 0, 1) # Yellow
- operator: template
value: '[[[ return entity.attributes.battery < 20 ]]]'
color: rgba(200, 0, 0, 1) # Red
views:
- title: System
path: System
badges: []
cards:
- type: markdown
title:
content: Zigbee Link Quality
style: *headerStyle
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: binary_sensor.master_bedroom_motion
name: MBR Motion
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: sensor.nursery_therm_temperature
name: Nursery Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: sensor.living_room_therm_temperature
name: Living Rm Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_linkquality_glance
entity: binary_sensor.nursery_motion
name: Nursery Motion
- type: custom:gap-card
- type: markdown
title:
content: Zigbee Battery
style: *headerStyle
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: binary_sensor.master_bedroom_motion
name: MBR Motion
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: sensor.nursery_therm_temperature
name: Nursery Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: sensor.living_room_therm_temperature
name: Living Rm Therm
- type: custom:button-card
template:
- zigbee_status_glance
- zigbee_battery_glance
entity: binary_sensor.nursery_motion
name: Nursery Motion
When you compare a state of a sensor with a number, it’s better to force the conversion to a number. For eg:return Number(entity.attributes.linkquality) < 50
This is probably why you have inconsistent results (it tries to compare a string with a number)
Edit:< 30 and then < 20, it will stop at the < 30 because < 20 is also < 30. You’ll have to swap them
1 Like
tom_l
May 16, 2020, 6:03am
3920
Is it possible to use tap_action: navigate to move between dashboards?
I don’t see why not… I have one that loads the Supervisor and one that loads HACS… so as long as you have the dashboard address it should work… the dashboard selection just loads a different URL after all.
tom_l
May 16, 2020, 7:30am
3922
Ok I’ll give it another go. I could not get it working before and thought it might be limited to paths in the current dashboard.
Ugh. tap_action, not tap action.
1 Like
I see… You’re also mixing card-mod and button-card styles… that will have some undefined results…
style: &buttonCardStyle |
ha-card {
background-image: url("/local/cardbackK.png");
background-color: rgba(50,50,50,0.3);
background-repeat: no-repeat;
background-size: 100% 100%;
color: '#999999';
border-radius: 0;
}
can be done with:
styles:
card:
- background-image: url("/local/cardbackK.png")
# - background-color: rgba(50,50,50,0.3) # I've removed this line as it's already defined through the color property color: rgba(0, 128, 20, 1) # Green
- background-repeat: no-repeat
- background-size: 100% 100%
- color: '#999999'
- border-radius: 0
Also don’t forget to remove the style: *buttonCardStyle line.
huiz13
May 17, 2020, 7:16pm
3925
Can someone share Button with Dimmer template. I having a hard time with mine.
I think I found a bug. The styles are not applied based on the entity id domain . In this case, binary_sensor.* does not act the same as sensor.*
I’ve whittled the config down to the bare bones.
background: center / cover no-repeat url("/local/background-15.gif") fixed
button_card_templates:
zigbee_status_glance:
## BASE TEMPLATE
#style: *buttonCardStyle
type: custom:button-card
tap_action:
action: none
show_label: true
show_name: true
show_icon: false
show_state: false
color_type: card
color: rgb(0, 128, 20)
styles:
name:
- font-size: 12px
- color: white
label:
- font-size: 18px
- color: white
- font-weight: bold
views:
- title: System
path: System
badges: []
cards:
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.master_bedroom_motion
name: MBR Motion
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.nursery_therm_temperature
name: Nursery Therm
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.nursery_motion
name: Nursery Motion
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.living_room_therm_temperature
name: Living Rm Therm
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.greenhouse_therm_temperature
name: Greenhouse Therm
- type: custom:button-card
template:
- zigbee_status_glance
entity: sensor.laundry_room_button_click
name: Laundry Rm Button
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.laundry_rm_water_leak
name: Laundry Rm Water
- type: custom:button-card
template:
- zigbee_status_glance
entity: binary_sensor.washing_machine_door_contact
name: Washing Machine Door
- type: custom:gap-card
SeanM
May 17, 2020, 8:38pm
3928
Thanks for the quick fix! Just updated and everything’s back to normal again here.
2 Likes
I’m missing the animation on long press of the button.
1 Like
