Hey everyone,
I’m trying to configure the mushroom-chips-card to dynamically change the icon and icon color based on the value of a sensor, but I’m having some trouble getting it to work properly.
The idea is to have the icon and color change based on the battery level sensor, but with this config, the icon isn’t showing up at all. I’d like to achieve this directly in the card config without creating a separate sensor if possible.
Here’s the code snippet I’m using:
- type: entity
entity: sensor.iphone_de_martin_battery_level
icon: >-
{% if states('sensor.iphone_de_martin_battery_level')|int > 80 %}
mdi:battery
{% elif states('sensor.iphone_de_martin_battery_level')|int > 50 %}
mdi:battery-70
{% elif states('sensor.iphone_de_martin_battery_level')|int > 20 %}
mdi:battery-30
{% else %}
mdi:battery-alert
{% endif %}
icon_color: >-
{% if states('sensor.iphone_de_martin_battery_level')|int > 99 %}
green
{% if states('sensor.iphone_de_martin_battery_level')|int > 80 %}
black
{% elif states('sensor.iphone_de_martin_battery_level')|int > 30 %}
orange
{% elif states('sensor.iphone_de_martin_battery_level')|int > 20 %}
red
{% else %}
black
{% endif %}
Any ideas on what I’m doing wrong or how to fix this?
Thanks in advance for your help!
Frosty
May 11, 2024, 12:28am
3
you can’t use templates in an entity card.
type: custom:mushroom-template-card
icon: >-
{% set battery = states('sensor.simonsphone_battery_level') |
int %}
{% if battery < 30 %}
mdi:battery-30
{% elif battery < 50 %}
mdi:battery-50
{% elif battery < 70 %}
mdi:battery-70
{% else %}
mdi:battery
{% endif %}
icon_color: >-
{% set battery = states('sensor.simonsphone_battery_level') |
int %}
{% if battery < 35 %}
red
{% elif battery < 50 %}
orange
{% elif battery < 70 %}
yellow
{% else %}
green
{% endif %}
1 Like
Frosty
May 11, 2024, 12:15pm
4
I should have been clearer sorry, you can use templates in an entity card if you use card_mod.@LiQuid_cOOled
type: custom:mushroom-entity-card
entity: light.bed_lights
card_mod:
style: |
ha-state-icon {
--card-mod-icon: {{ 'mdi:mushroom;' if is_state(config.entity, 'on') else 'mdi:home' }}
Hi @Frosty , thank you for your help. Here is the full code for the card:
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.martin
icon_type: entity-picture
primary_info: state
secondary_info: last-updated
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.iphone_de_martin_battery_level
icon: >-
{% if states('sensor.iphone_de_martin_battery_level')|int > 80 %}
mdi:battery
{% elif states('sensor.iphone_de_martin_battery_level')|int > 50 %}
mdi:battery-70
{% elif states('sensor.iphone_de_martin_battery_level')|int > 20 %}
mdi:battery-30
{% else %}
mdi:battery-alert
{% endif %}
icon_color: >-
{% if states('sensor.iphone_de_martin_battery_level')|int > 99 %}
green
{% if states('sensor.iphone_de_martin_battery_level')|int > 80 %}
black
{% elif states('sensor.iphone_de_martin_battery_level')|int > 30 %}
orange
{% elif states('sensor.iphone_de_martin_battery_level')|int > 20 %}
red
{% else %}
black
{% endif %}
- type: conditional
conditions:
- entity: person.martin
state: away
chip:
type: entity
entity: sensor.maison_direction_du_deplacement_de_martin
icon_color: purple
icon: mdi:map-legend
card_mod:
style: |
ha-card {
border: none;
}
alignment: left
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.celine
icon_type: entity-picture
primary_info: state
secondary_info: last-updated
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.iphone_de_celine_battery_level
condition: numeric_state
below: 20
chip:
type: entity
entity: sensor.iphone_de_celine_battery_level
icon: mdi:battery-low
icon_color: red
card_mod:
style: |
ha-card {
border: none
}
- type: conditional
conditions:
- entity: person.celine
state: away
chip:
type: entity
entity: sensor.maison_direction_du_deplacement_de_celine
icon_color: purple
icon: mdi:map-legend
card_mod:
style: |
ha-card {
border: none;
}
alignment: left
Of course, the goal is to have the same behavior for Martin and Céline.
TBH, my initial intention was to only show the battery level when it’s below 20% (as I did on Celine’s card). It works great, but the problem is that my card is cropped when no condition is met (i.e., my battery level is above 20%, and I’m at home).
Since that wasn’t working as intended, I thought of this solution to always display the battery level but with different icons and colors to add some visual interest.
OK can you try this.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
entity: person.simon_benson
icon_type: entity-picture
primary_info: state
secondary_info: last-updated
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.simonsphone_battery_level
condition: numeric_state
below: 100
chip:
type: template
content: >-
{{states('sensor.simonsphone_battery_level')}}%
entity: sensor.simonsphone_battery_level
icon: >-
{% set battery = states('sensor.simonsphone_battery_level') | int %}
{% if battery < 30 %}
mdi:battery-30
{% elif battery < 50 %}
mdi:battery-50
{% elif battery < 70 %}
mdi:battery-70
{% else %}
mdi:battery
{% endif %}
icon_color: >-
{% set battery = states('sensor.simonsphone_battery_level') | int %}
{% if battery < 35 %}
red
{% elif battery < 50 %}
orange
{% elif battery < 70 %}
yellow
{% else %}
green
{% endif %}
card_mod:
style: |
ha-card {
border: none
}
- type: conditional
conditions:
- entity: person.simon_benson
state: away
chip:
type: entity
entity: sensor.home_simonsphone_direction_of_travel
icon_color: purple
icon: mdi:map-legend
card_mod:
style: |
ha-card {
border: none;
}
alignment: left
you can edit the {% elif battery < 70 %} to add more steps if you need to but you get the picture
It works like a charm! Thank you @Frosty !
Do you have an idea about this ?
TBH, my initial intention was to only show the battery level when it’s below 20% (as I did on Celine’s card). It works great, but the problem is that my card is cropped when no condition is met (i.e., my battery level is above 20%, and I’m at home).
Frosty
May 12, 2024, 11:28am
8
oh so you only wanted to show the battery <20 when your home.
my card is cropped when no condition is met
not sure on that one. hopefully someone else can help you with that problem
