J’ai réussi grâce à ton code à avoir ça 
:
Est-ce qu’on pourrait avoir sous la feuille un mot ou une image avec le mot comme sur l’appli genre Excellent, Très bon, Acceptable etc. en fonction de la valeur CO2 et une couleur en conséquence)
Faut que je regarde comment gérer l’espace pour plus avoir les coupures de mots
Mais j’ai déjà une bonne base grâce à toi.
Merci
Voilà mon code si utile :
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: true
outer_padding: false
cards:
- type: custom:meteofrance-weather-card
entity: weather.forecast_maison
number_of_forecasts: '5'
current: true
details: false
alert_forecast: false
animated_icons: true
wind_forecast_icons: false
forecast: false
one_hour_forecast: false
card_mod:
style: |
ha-card {
background: SteelBlue;
border-radius: 0;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.netatmo_salon_pressure
name: Pression
units: mbar
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 22px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_jardin_temperature
name: Ressentie
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 22px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_jardin_humidity
name: Humidité
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 22px
card_mod:
style: |
ha-card {
border: none;
}
- type: vertical-stack
cards:
- type: custom:meteofrance-weather-card
entity: weather.forecast_maison
number_of_forecasts: '5'
current: false
alert_forecast: false
one_hour_forecast: false
forecast: true
wind_forecast_icons: false
details: false
card_mod:
style: |
ha-card {
background: SteelBlue;
border-radius: 0;
border: none;
}
.forecast ul.day .lowTemp {
color: WhiteSmoke !important;
}
- type: custom:mushroom-title-card
title: Netatmo Salon
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
--primary-text-color: black;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.netatmo_salon_co2
attribute: temperature
icon: mdi:leaf
decimals: 0
area: qualité
show:
horseshoe_style: lineargradient
layout:
states:
- id: 0
entity_index: 0
xpos: 47
ypos: 67
styles:
- font-size: 3.3em;
- fill: SeaGreen;
icons:
- id: 0
entity_index: 0
xpos: 56
ypos: 40
align: end
styles:
- font-size: 1.1em;
- color: SeaGreen;
horseshoe_scale:
min: -10
max: 40
color_stops:
'10': SeaGreen
'18': SeaGreen
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
border:none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_temperature
layout: icon_state
aspect_ratio: 1.045/1
icon: mdi:circle
color: SeaGreen
size: 20px
show_icon: true
show_state: true
show_name: false
units: °
styles:
card:
- background: Snow
- border-radius: 0
state:
- color: Teal
- font-size: 45px
- margin-left: '-30px'
- justify-self: start
- white-space: normal
card_mod:
style: |
ha-card {
border: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.netatmo_salon_co2
layout: icon_name_state2nd
name: CO2
icon: mdi:circle
color: SeaGreen
size: 15px
units: ppm
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-20px'
state:
- font-size: 23px
- color: Teal
icon:
- left: 20px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_noise
name: Silencieux
icon: mdi:circle
color: SeaGreen
size: 15px
units: dB
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-20px'
state:
- font-size: 23px
- color: Teal
icon:
- left: 20px
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_humidity
name: Humidité
icon: mdi:circle
color: SeaGreen
size: 15px
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-20px'
state:
- font-size: 23px
- color: Teal
icon:
- left: 20px
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
background: Snow;
}
Bonjour,
j’ai modifier la carte par rapport a ta capture, ou les icones sont manger et le texte couper. J’ai diminuer la police et je t’es rajouter de la couleur aux icones et gauge suivant sont leurs états ( encadrer en rouge sur la carte ). J’ai agrandir l’icone feuille dans la gauge.
A partir de la carte flex-horseshoe-card, sa sera pas possible.
Résultat:
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: true
outer_padding: false
cards:
- type: custom:meteofrance-weather-card
entity: weather.forecast_maison
number_of_forecasts: '5'
current: true
details: false
alert_forecast: false
animated_icons: true
wind_forecast_icons: false
forecast: false
one_hour_forecast: false
card_mod:
style: |
ha-card {
background: SteelBlue;
border-radius: 0;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.netatmo_salon_pressure
name: Pression
units: mbar
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 20px
- white-space: normal
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_jardin_temperature
name: Ressentie
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 20px
- white-space: normal
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_jardin_humidity
name: Humidité
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 20px
- white-space: normal
- letter-spacing: 0px
card_mod:
style: |
ha-card {
border: none;
}
- type: vertical-stack
cards:
- type: custom:meteofrance-weather-card
entity: weather.forecast_maison
number_of_forecasts: '5'
current: false
alert_forecast: false
one_hour_forecast: false
forecast: true
wind_forecast_icons: false
details: false
card_mod:
style: |
ha-card {
background: SteelBlue;
border-radius: 0;
border: none;
}
.forecast ul.day .lowTemp {
color: WhiteSmoke !important;
}
- type: custom:mushroom-title-card
title: Netatmo Salon
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
--primary-text-color: black;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.netatmo_salon_co2
icon: mdi:leaf
decimals: 0
area: qualité
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 67
styles:
- font-size: 3.3em;
- fill: Teal;
icons:
- id: 0
entity_index: 0
xpos: 50
ypos: 40
icon_size: 5
styles:
- color: Teal;
horseshoe_scale:
min: 1
max: 1400
color_stops:
'0': DodgerBlue
'800': SeaGreen
'1000': Gold
'1100': DarkOrange
'1200': red
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
border:none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_temperature
layout: icon_state
aspect_ratio: 1.045/1
icon: mdi:circle
color: SeaGreen
size: 25%
show_icon: true
show_state: true
show_name: false
units: °
styles:
card:
- background: Snow
- border-radius: 0
state:
- color: Teal
- font-size: 45px
- margin-left: '-20px'
- justify-self: start
- white-space: normal
icon:
- color: |
[[[
if (states['sensor.netatmo_salon_temperature'].state >= '19') return "SeaGreen";
if (states['sensor.netatmo_salon_temperature'].state >= '23') return "gold";
if (states['sensor.netatmo_salon_temperature'].state >= '25') return "DarkOrange";
if (states['sensor.netatmo_salon_temperature'].state >= '27') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.netatmo_salon_co2
layout: icon_name_state2nd
name: CO2
icon: mdi:circle
color: SeaGreen
size: 25%
units: ppm
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
icon:
- left: 10px
- color: |
[[[
if (states['sensor.netatmo_salon_co2'].state >= '800') return "SeaGreen";
if (states['sensor.netatmo_salon_co2'].state >= '1000') return "gold";
if (states['sensor.netatmo_salon_co2'].state >= '1100') return "DarkOrange";
if (states['sensor.netatmo_salon_co2'].state >= '1200') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_noise
name: Silencieux
icon: mdi:circle
color: SeaGreen
size: 25%
units: dB
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
- white-space: normal
icon:
- left: 10px
- color: |
[[[
if (states['sensor.netatmo_salon_noise'].state >= '40') return "SeaGreen";
if (states['sensor.netatmo_salon_noise'].state >= '50') return "gold";
if (states['sensor.netatmo_salon_noise'].state >= '60') return "DarkOrange";
if (states['sensor.netatmo_salon_noise'].state >= '70') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_humidity
name: Humidité
icon: mdi:circle
color: SeaGreen
size: 25%
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
- white-space: normal
icon:
- left: 10px
- color: |
[[[
if (states['sensor.netatmo_salon_humidity'].state >= '50') return "SeaGreen";
if (states['sensor.netatmo_salon_humidity'].state >= '60') return "gold";
if (states['sensor.netatmo_salon_humidity'].state >= '70') return "DarkOrange";
if (states['sensor.netatmo_salon_humidity'].state >= '80') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
background: Snow;
}
Pour modifier l’état et la couleur des icones, c’est dans c’est partir de chaque carte button-card:
- color: |
[[[
if (states['sensor.netatmo_salon_noise'].state >= '40') return "SeaGreen";
if (states['sensor.netatmo_salon_noise'].state >= '50') return "gold";
if (states['sensor.netatmo_salon_noise'].state >= '60') return "DarkOrange";
if (states['sensor.netatmo_salon_noise'].state >= '70') return "Crimson";
else return "DodgerBlue";
]]]
exemple: état= 40 couleur=SeaGreen
Adapte les valeurs et couleur que tu veut, c’est du bricolage.
Pour la taille de la police, font_size dans les carte button-card:
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
- white-space: normal
Pour les couleurs de la gauge si tu veut modifier, pour la carte flex-horseshoe-card:
color_stops:
'0': DodgerBlue
'800': SeaGreen
'1000': Gold
'1100': DarkOrange
'1200': red
Franchement c’est trop bien, merci de partager tes connaissances avec moi, j’avais réussi en regardant ton code à déplacer les icônes vertes sinon petite question, je vois que les couleurs sont des « mots » moi je connais en RGB mais du coup est-ce que tu utilises un site qui te permet de connaître le nom en fonction d’une couleur que tu aimes ? Par exemple SeaGreen tu l’as mis comment parce-que ça correspond à quelque chose en RGB ? Et est-ce qu’on peut rajouter du gras à certaines polices avec un paramètre (je profite pour apprendre un peu du code) Merci beaucoup.
Bonjour,
Tu as celui-ci par exemple :
Après, tu peux travailler directement avec les couleurs RGB ou RGBA (avec transparence).
- color: |
[[[
if (states['sensor.netatmo_salon_noise'].state >= '40') return "SeaGreen";
if (states['sensor.netatmo_salon_noise'].state >= '50') return "gold";
if (states['sensor.netatmo_salon_noise'].state >= '60') return "DarkOrange";
if (states['sensor.netatmo_salon_noise'].state >= '70') return "Crimson";
else return "DodgerBlue";
]]]
Tu peux remplacer DarkOrange par rgb(255,140,0) par exemple ou par rgba(255,140,0,0.5) pour définir une opacité de 50%
Pour les couleurs, ta le choix entre nom, rgb ou rgba. Ta plein de site qui propose le nom des couleurs, j’ai mis des noms pour la facilité. A toi de mettre ce que tu veut, nom, rgb ou rgba.
je vais ici Color Names — HTML Color Codes
C’est du CSS, toutes options fonctionnent avec button-card.
Pour en gras faut rajouter font-weight: bold
exemple pour button-card:
name:
- font-weight: bold
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
Après, toutes les cartes ne permette pas de modifier directement le CSS. A ce moment la faut passer par card-mod, qui applique du CSS sur n’importe quel carte.
Ta un sujet dessus Personnaliser ses cartes avec Card-mod
Génial, merci. Je ne vais pas pouvoir regarder ce weekend mais je sais déjà que je vais m’occuper ensuite 
Merci, j’avais essayé hier mais j’avais pas le bonne écriture trop bien
Bonjour,
Enfin de retour 
Je tente :
if (states[‹ sensor.netatmo_salon_temperature ›].state >= ‹ 19 ›) return rgb(45,209,96);
mais ça ne fonctionne pas, ça m’indique :
ButtonCardJSTemplateError: ReferenceError: rgb is not defined in 'if (states[‹ sensor.netatmo_salon_temperature ›].state >= ‹ 19 ›) return rgb(45,209,96);
Une idée
Bonjour,
il manque des guillemets .
if (states['sensor.netatmo_salon_temperature '].state >= '19') return "rgb(45,209,96)";
Quand tu met du code , pense a utiliser la balise texte préformaté.
merci je teste ça, pour le code ok, je viens de voir ce que c’est Texte préformaté
Je tente de faire changer la couleur de la feuille en même temps que la gauge mais ça ne semble pas fonctionner pour moi, je ne place pas comme il faut ?
icons:
- id: 0
entity_index: 0
xpos: 50
ypos: 40
icon_size: 5
styles:
- color: |
[[[
if (states['sensor.netatmo_salon_co2'].state >= '600') return "rgb(51,204,102)";
if (states['sensor.netatmo_salon_co2'].state >= '1000') return "gold";
if (states['sensor.netatmo_salon_co2'].state >= '1100') return "DarkOrange";
if (states['sensor.netatmo_salon_co2'].state >= '1200') return "Crimson";
else return "DodgerBlue";
]]]
Ca fonctionne pas avec la carte flex-horseshoe-card.
Ah d’accord, merci de tous tes conseils c’est génial de découvrir avec quelqu’un qui maîtrise.
Attends, j’ai trouvé une solution avec card-mod. Je fini les teste et te montre ca.
J’ai une solution avec card-mod. Faut rajouter le bout de code dans la carte flex-horseshoe-card.
.icon {
{% if (states['sensor.netatmo_salon_co2'].state >= '600') %}
color: rgb(51,204,102);
{% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
color: gold;
{% elif (states['sensor.netatmo_salon_co2'].state >= '1100') %}
color: DarkOrange;
{% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
color: Crimson;
{% else %}
color: DodgerBlue;
{% endif %}
}
code de la carte flex-horseshoe-card final, avec le bout de code du dessus rajouter dans la partie card-mod en dessous de ha-card
- type: horizontal-stack
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.netatmo_salon_co2
icon: mdi:leaf
decimals: 0
area: qualité
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 67
styles:
- font-size: 3.3em;
- fill: Teal;
icons:
- id: 0
entity_index: 0
xpos: 50
ypos: 40
icon_size: 5
styles:
- color: Teal;
horseshoe_scale:
min: 1
max: 1400
color_stops:
'0': DodgerBlue
'800': SeaGreen
'1000': Gold
'1100': DarkOrange
'1200': red
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
border:none;
}
.icon {
{% if (states['sensor.netatmo_salon_co2'].state >= '600') %}
color: rgb(51,204,102);
{% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
color: gold;
{% elif (states['sensor.netatmo_salon_co2'].state >= '1100') %}
color: DarkOrange;
{% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
color: Crimson;
{% else %}
color: DodgerBlue;
{% endif %}
}
Test et dit moi si c’est bon ?
Je regarde ça de suite c’est marrant moi je n’ai pas la barre noire
Ta un thème claire je pense, moi c’est un thème sombre.
EDIT:
dans le code de flex-horseshoe-card, l’option horseshoe_scale: rajoute color: black.
horseshoe_scale:
min: 1
max: 1400
color: black
Je crois que j’ai pas placé comme il faut, je n’est pas le résultat du précédent :
type: custom:stack-in-card
mode: vertical
keep:
box_shadow: false
margin: false
border_radius: false
background: true
outer_padding: false
cards:
- type: custom:meteofrance-weather-card
entity: weather.forecast_maison
number_of_forecasts: '5'
current: true
details: false
alert_forecast: false
animated_icons: true
wind_forecast_icons: false
forecast: false
one_hour_forecast: false
card_mod:
style: |
ha-card {
background: SteelBlue;
border-radius: 0;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.netatmo_salon_pressure
name: Pression
units: mbar
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 20px
- white-space: normal
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_jardin_temperature
name: Ressentie
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 20px
- white-space: normal
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_jardin_humidity
name: Humidité
show_icon: false
show_state: true
styles:
card:
- background: SteelBlue
- border-radius: 0
name:
- font-size: 14px
state:
- font-size: 20px
- white-space: normal
- letter-spacing: 0px
card_mod:
style: |
ha-card {
border: none;
}
- type: vertical-stack
cards:
- type: custom:meteofrance-weather-card
entity: weather.forecast_maison
number_of_forecasts: '5'
current: false
alert_forecast: false
one_hour_forecast: false
forecast: true
wind_forecast_icons: false
details: false
card_mod:
style: |
ha-card {
background: SteelBlue;
border-radius: 0;
border: none;
}
.forecast ul.day .lowTemp {
color: WhiteSmoke !important;
}
- type: custom:mushroom-title-card
title: Netatmo Salon
alignment: center
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
--primary-text-color: black;
border: none;
}
- type: horizontal-stack
cards:
- type: custom:flex-horseshoe-card
entities:
- entity: sensor.netatmo_salon_co2
icon: mdi:leaf
decimals: 0
area: qualité
show:
horseshoe_style: colorstop
layout:
states:
- id: 0
entity_index: 0
xpos: 50
ypos: 67
styles:
- font-size: 3.3em;
- fill: Teal;
icons:
- id: 0
entity_index: 0
xpos: 50
ypos: 40
icon_size: 5
styles:
- color: Teal
horseshoe_scale:
min: 1
max: 1400
color: black
color_stops:
'0': DodgerBlue
'800': SeaGreen
'1000': Gold
'1100': DarkOrange
'1200': red
card_mod:
style: |
ha-card {
background: Snow;
border-radius: 0;
border:none;
}
.icon {
{% if (states['sensor.netatmo_salon_co2'].state >= '600') %}
color: rgb(51,204,102);
{% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
color: gold;
{% elif (states['sensor.netatmo_salon_co2'].state >= '1100') %}
color: DarkOrange;
{% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
color: Crimson;
{% else %}
color: DodgerBlue;
{% endif %}
}
- type: custom:button-card
entity: sensor.netatmo_salon_temperature
layout: icon_state
aspect_ratio: 1.045/1
icon: mdi:circle
color: SeaGreen
size: 25%
show_icon: true
show_state: true
show_name: false
units: °
styles:
card:
- background: Snow
- border-radius: 0
state:
- color: Black
- font-size: 57px
- margin-left: '-20px'
- justify-self: start
- white-space: normal
icon:
- color: null
card_mod:
style: |
ha-card {
border: none;
}
- type: horizontal-stack
cards:
- type: custom:button-card
entity: sensor.netatmo_salon_co2
layout: icon_name_state2nd
name: CO2
icon: mdi:circle
color: SeaGreen
size: 25%
units: ppm
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
icon:
- left: 10px
- color: |
[[[
if (states['sensor.netatmo_salon_co2'].state >= '600') return "rgb(51,51,204)";
if (states['sensor.netatmo_salon_co2'].state >= '1000') return "gold";
if (states['sensor.netatmo_salon_co2'].state >= '1100') return "DarkOrange";
if (states['sensor.netatmo_salon_co2'].state >= '1200') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_noise
name: Silencieux
icon: mdi:circle
color: SeaGreen
size: 25%
units: dB
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
- white-space: normal
icon:
- left: 10px
- color: |
[[[
if (states['sensor.netatmo_salon_noise'].state >= '40') return "SeaGreen";
if (states['sensor.netatmo_salon_noise'].state >= '50') return "gold";
if (states['sensor.netatmo_salon_noise'].state >= '60') return "DarkOrange";
if (states['sensor.netatmo_salon_noise'].state >= '70') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
entity: sensor.netatmo_salon_humidity
name: Humidité
icon: mdi:circle
color: SeaGreen
size: 25%
layout: icon_name_state2nd
show_icon: true
show_state: true
styles:
card:
- background: Snow
- border-radius: 0
name:
- font-size: 14px
- color: grey
- margin-left: '-10px'
- white-space: normal
state:
- font-size: 14px
- color: Teal
- white-space: normal
icon:
- left: 10px
- color: |
[[[
if (states['sensor.netatmo_salon_humidity'].state >= '50') return "SeaGreen";
if (states['sensor.netatmo_salon_humidity'].state >= '60') return "gold";
if (states['sensor.netatmo_salon_humidity'].state >= '70') return "DarkOrange";
if (states['sensor.netatmo_salon_humidity'].state >= '80') return "Crimson";
else return "DodgerBlue";
]]]
card_mod:
style: |
ha-card {
border: none;
}
card_mod:
style: |
ha-card {
background: Snow;
}
Pourtant c’est bon, c’est bien caller.
Ton entité sensor.netatmo_salon_co2 a des décimales?