TheGui01
(The Gui01)
March 27, 2022, 2:24pm
1
Hello,
I have a switch button to open/close my garage and I would like to change the icon of it on my lovelace card, based on another sensor state which return open / close.
I’m ttying to use a type: custom:button-card and I’m trying to use template for the first time.
I created a template :
button_card_templates:
garage:
icon: >
{% if states("sensor.garage_door_mqtt") == 'close' %}
mdi:home-alert
{%- else -%}
mdi:home
{%- endif %}
views:
....
The condition has been tested into the template dev tool and it returns mdi:home or mdi:home-alert
My lovelace card is configured as below :
entity: switch.relaygaragedoor
template: garage
name: Garage
type: custom:button-card
icon: null
icon: null comes after a refresh. I guess it comes from the template.
Do you have any idea why it does not work ?
Maybe this is not the right way to do that ?
Thanks in advance for any suggestion or help
Guillaume
I’m not a YAML/Jinja expert by a long long way but surprised that works in the template editor - I’d have said it was missing a few dashes.
Try:
{%- if states("sensor.garage_door_mqtt") == 'close' -%}
mdi:home-alert
{%- else -%}
mdi:home
{%- endif -%}
I’ve got similar templates setup for icon (and picture) changes with no issues.
TheGui01
(The Gui01)
March 27, 2022, 2:58pm
3
Thanks for the quick reply.
I honestly don’t see any difference on what you propose except that states is bold.
That’s more my lack of familiarity with some of the markup on this forum.
In your original if/else/endif markup, it wasn’t consistently starting the marker with {%-
and finishing with -%}
.
Character for character there are just 3 extra -
between the two. Might not make a difference (like I said, I’m not a YAML/Jinja expert) but that’s about the only difference I can see between your template and ones I have that work.
Edit: Scratch that - you may also want to use icon_template instead of icon.
TheGui01
(The Gui01)
March 27, 2022, 3:42pm
5
I feel like the problem comes from the Jinja which is not well injected in my template.
If I put in my template :
button_card_templates:
garage:
show_icon: true
icon: "mdi:home"
The icon works.
That’s the icon_template reference I mentioned - when I was trying this before, icon was expecting a straight string rather than emplate. Try:
garage:
icon_template: >
{%- if states("sensor.garage_door_mqtt") == 'close' -%}
mdi:home-alert
{%- else -%}
mdi:home
{%- endif -%}
TheGui01
(The Gui01)
March 27, 2022, 4:13pm
7
I tried this unsuccessfully
TheGui01
(The Gui01)
March 27, 2022, 4:14pm
8
is there something specific to add into lovelace card ?
There is something using the card-mod addon you can do with this in lovelace - albeit CSS related styles rather than icon changes.
I’ve got a couple of sensors setup that show in a glance card with varying icons/colours depending on status.
The icon gets adjusted using the icon_template as I mentioned - this is a direct copy paste from something that works on my setup
icon_template: "{%- if states('sensor.md108_raid') == 'Syncing' -%}mdi:sync-circle{%- elif states('sensor.md108_raid') == 'SyncDelayed' -%}mdi:sync{%- else -%}mdi:nas{%- endif -%}"
Then with-in lovelace, the colour gets amended via cardmod:
- entity: sensor.md108_raid
name: MD108
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == "Active" %}
#4CAF50
{% elif states(config.entity) == "Inactive" %}
#FF5252
{% else %}
orange
{% endif %}
;
}
TheGui01
(The Gui01)
March 28, 2022, 6:13pm
10
Thanks !
Finally I found a workaround by using another custom card to switch card based on a state :
type: custom:state-switch
entity: sensor.garage_door_mqtt
default: close
states:
open:
type: custom:button-card
action: toggle
icon: mdi:garage-open-variant
entity: switch.relaygaragedoor
name: Ouvert
styles:
card:
- height: 60px
- font-size: 10px
- font-weight: bold
icon:
- color: Red
close:
type: custom:button-card
action: toggle
icon: mdi:garage-variant
entity: switch.relaygaragedoor
name: Fermé
styles:
card:
- height: 60px
- font-size: 10px
- font-weight: bold
icon:
- color: Green
1 Like