entities:
- type: custom:bar-card
name: Naomi's Mobile
animation:
state: "on"
speed: 2
delay: 0
type: bounce
positions:
name: inside
width: 62%
severity:
- color: Red
from: 0
to: 25
- color: Yellow
from: 26
to: 50
- color: Green
from: 51
to: 100
entities:
- entity: sensor.naomis_iphone_battery_level
card_mod:
style: >
bar-card-name { color: {% if
states('sensor.naomis_iphone_battery_level') | int <= 25.0 %} white; {%
elif states('sensor.naomis_iphone_battery_level') | int <= 50.0 %}
black; {% elif states('sensor.naomis_iphone_battery_level') | int <=
100.0%} white; {% endif %} !important; }
:host {
--card-mod-icon-color: {% if
states('sensor.naomis_iphone_battery_level') | int <= 25.0 %} red; {%
elif states('sensor.naomis_iphone_battery_level') | int <= 50.0 %}
yellow; {% elif states('sensor.naomis_iphone_battery_level') | int <=
100.0%} green; {% endif %} !important; } }
- type: custom:bar-card
name: Rod's Mobile
animation:
state: "on"
speed: 2
delay: 0
type: bounce
positions:
name: inside
width: 62%
severity:
- color: Red
from: 0
to: 25
- color: Yellow
from: 26
to: 50
- color: Green
from: 51
to: 100
entities:
- entity: sensor.sm_s918b_battery_level
card_mod:
style: >
bar-card-name { color: {% if states('sensor.sm_s918b_battery_level') |
int <= 25.0 %} white; {% elif states('sensor.sm_s918b_battery_level') |
int <= 50.0 %} black; {% elif states('sensor.sm_s918b_battery_level')
int <= 100.0%} white; {% endif %} !important; }
:host {
--card-mod-icon-color: {% if states('sensor.sm_s918b_battery_level') |
int <= 25.0 %} red; {% elif states('sensor.sm_s918b_battery_level') |
int <= 50.0 %} yellow; {% elif
states('sensor.sm_s918b_battery_level') | int <= 100.0%} green; {%
endif %} !important; } }
title: Personal Devices
type: entities
state_color: true
show_header_toggle: true
I have the above code which is working well. I have used card mod to change the text colour inside each bar as the battery level changes so it is easier to read when the bar changes colour according to severity. The problem I have is I can get the card-mod to change the colour of the battery based on its charge level, but whern I implement the same code on the second enitity it does not work, so the battery icon stays the same colour. I cant understand why it changes on one entity and not both since the code is identical for each.
Secondly I also want to be able to change the battery icon so that it shows mdi:battery-90, mdi-battery-80 etc depending on the charge level. It will not natively do this within the bar-card. Does anyone have any ideas how to do this?