Good morning,
I’m French, sorry for my English
I have a little problem with the color of icons in (flex-horseshoe-card)
I am able to change the color of the humidity icon in relation to its humidity level…
But on the other hand it also changes the color of the battery icon…
I would like to be able to also have the color of the battery in relation to its battery %…
would you have a solution?
THANKS
type: custom:flex-horseshoe-card
entities:
- entity: sensor.salon_salon_salon_exterieur_temperature
decimals: 1
icon: mdi:weather-cloudy
name: extérieur
area: Température
- entity: sensor.temperature_exterieur_mini
decimals: 1
name: Mini
- entity: sensor.temperature_exterieur_max
decimals: 1
name: Max
- entity: sensor.salon_salon_salon_exterieur_humidity
icon: mdi:water-percent
area: Humidité
decimals: 0
- entity: sensor.salon_salon_salon_exterieur_battery_percent
icon: mdi:battery
area: Batterie
decimals: 0
show:
horseshoe_style: colorstop
layout:
hlines:
- id: 0
xpos: 50
ypos: 58
length: 40
styles:
- stroke: silver; /* ligne horizontal */
- stroke-width: 2;
- opacity: 0.3;
- stroke-linecap: round;
vlines:
- id: 0
xpos: 50
ypos: 60
length: 36
styles:
- stroke: silver;
- opacity: 0.3;
- stroke-width: 2;
- stroke-linecap: round;
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 30
styles:
- font-size: 3em;
- opacity: 1;
- id: 1
entity_index: 1
xpos: 46
ypos: 49
styles:
- font-size: 1.5em;
- opacity: 0.7;
- text-anchor: end;
- id: 2
entity_index: 2
xpos: 54
ypos: 49
styles:
- font-size: 1.5em;
- opacity: 0.7;
- text-anchor: start;
- id: 3
entity_index: 3
xpos: 32
ypos: 78
styles:
- font-size: 1.5em;
- text-anchor: start;
- id: 4
entity_index: 4
xpos: 62
ypos: 78
styles:
- font-size: 1.5em;
- text-anchor: start;
names:
- id: 0
entity_index: 0
xpos: 50
ypos: 91
styles:
- font-family: Kalam;
- font-weight: bold;
- font-style: oblique;
- font-size: 18px;
- color: silver
- id: 1
entity_index: 1
xpos: 46
ypos: 55
styles:
- font-size: 0.7em;
- text-anchor: end;
- opacity: 0.5;
- id: 2
entity_index: 2
xpos: 65
ypos: 55
styles:
- font-size: 0.7em;
- text-anchor: end;
- opacity: 0.5;
areas:
- id: 0
entity_index: 0
xpos: 50
ypos: 38
styles:
- font-size: 0.7em;
- id: 0
entity_index: 3
xpos: 35
ypos: 67
styles:
- font-size: 0.7em;
- id: 0
entity_index: 4
xpos: 65
ypos: 67
styles:
- font-size: 0.7em;
icons:
- id: 0
entity_index: 0
xpos: 57.4
ypos: 15
align: end
styles:
- color: silver;
- opacity: 0.6;
- font-size: 7px
- id: 0
entity_index: 3
xpos: 33
ypos: 77
align: end
size: 1,3
- id: 0
entity_index: 4
xpos: 65
ypos: 77.5
align: end
styles:
- font-size: 9px
horseshoe_state:
width: 7
horseshoe_scale:
min: 0
max: 30
width: 6
color: transparent
color_stops:
'0': darkblue
'10': blue
'13': royalblue
'14': dodgerblue
'16': dodgerblue
'20': green
'21': limegreen
'22': limegreen
'23': greeno
'24': red
'25': red
'-1': red
card_mod:
style: |
ha-card
.icon {
color:
{% if states('sensor.salon_salon_salon_exterieur_humidity') | int(0) >= 70 %}
red;
{% elif states('sensor.salon_salon_salon_exterieur_humidity') | int(0) >= 60 %}
darkorange;
{% elif states('sensor.salon_salon_salon_exterieur_humidity') | int(0) >= 40 %}
limeGreen;
{% elif states('sensor.salon_salon_salon_exterieur_humidity') | int(0) >= 10 %}
Gold;
{% endif %}
}