Avoir ce type d'interface pour Netatmo

[WarC0zes]

@Xris

            .icon {
              {if (states['sensor.netatmo_salon_co2'].state >= '2000')}
                color: rgb(255,64,56);
              {if (states['sensor.netatmo_salon_co2'].state >= '1000')}
                color: rgb(253,199,5);
              {if (states['sensor.netatmo_salon_co2'].state >= '0')}
                color: rgb(45,209,96);
              {% else %}
                color: Black;
              {% endif %}
            }

faut mettre des {% et %} et un if suivi de elif. En tout cas chez moi ca fonctionne que comme ca:

            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '2000') %}
                color: rgb(255,64,56);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '0') %}
                color: rgb(45,209,96);
              {% else %}
                color: Black;
              {% endif %}
            }

[WarC0zes]

Pour rajouter un peu de piquant
J’ai eu des idées pour le texte de la gauge. J’ai fais un teste avec un input_text, puis j’ai penser a faire un template sensor qui ferait le travail. On en reparle.

exemple du template sensor:

template:
  - sensor:
      - name: "Netatmo Salon co2 texte"
        unique_id: "netatmo_salon_co2_texte"
        state: >
          {% if states('sensor.netatmo_salon_co2')|int(0) >= 2000 %}
            Mauvais
          {% elif states('sensor.netatmo_salon_co2')|int(0) >= 1000 %}
            Moyen
          {% elif states('sensor.netatmo_salon_co2')|int(0) >= 600 %}
            Excellent
          {% else %}
            Bon
          {% endif %}
        availability: "{{ is_number(states('sensor.netatmo_salon_co2')) }}"

Documentation du template:

Template

Depuis peu, on peu faire des templates directement du UI. Dans paramètres / Appareils et services / Entrée. Puis céer un entitée et template.

code complet de la carte flex-horse-card avec le texte, la feuille et la gauge qui change de couleur.

  - type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.netatmo_salon_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
          - entity: sensor.netatmo_salon_co2_texte
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 1
              entity_index: 1
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3em;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
        horseshoe_scale:
          min: 1
          max: 1400
        color_stops:
          '0': DodgerBlue
          '800': rgb(51,204,102)
          '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 >= '2000') %}
                color: rgb(255,64,56);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '0') %}
                color: rgb(45,209,96);
              {% else %}
                color: Black;
              {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_salon_co2_texte','Mauvais') %} 
                fill: Crimson !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Excellent') %}
                fill: DarkOrange !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Moyen') %}
                fill: gold !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Bon') %}
                fill: rgb(51,204,102) !important;
              {% else %}
                fill: DodgerBlue !important;
              {% endif %}
            }

[Xris]

Trop bien, je regarde ça ce soir

[Xris]

Je dois y être presque :

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
            - font-weight: bold
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }  
      - type: custom:button-card
        entity: sensor.netatmo_jardin_temperature
        name: Température Réelle
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - font-weight: bold
            - 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
            - font-weight: bold
            - 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é
          - entity: sensor.netatmo_salon_co2_texte
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 1
              entity_index: 1
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3em;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
        horseshoe_scale:
          min: 1
          max: 2300
          color: rgb(240,240,240)
        color_stops:
          '0': rgb(45,209,96)
          '1000': rgb(253,199,5)
          '2000': rgb(255,64,56)
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '2000') %}
                color: rgb(255,64,56);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '0') %}
                color: rgb(45,209,96);
              {% else %}
                color: Black;
              {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_salon_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Moyen') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }
      - type: custom:button-card
        entity: sensor.netatmo_salon_temperature
        layout: icon_state
        aspect_ratio: 1.55/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: rgb(68,76,99)
            - font-size: 50px
            - font-weight: bold
            - margin-left: '-10px'
            - justify-self: start
            - white-space: normal
          icon:
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 7) return 'rgb(255,64,56)';
                  if (entity.state >= 7 && entity.state < 16) return 'rgb(253,199,5)';
                  if (entity.state >= 16 && entity.state < 24) return 'rgb(45,209,96)';
                  if (entity.state >= 24 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 60) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 1000) return 'rgb(45,209,96)';
                  if (entity.state >= 1000 && entity.state < 2000) return 'rgb(253,199,5)';
                  if (entity.state >= 2000 && entity.state < 3000) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]         
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 55) return 'rgb(45,209,96)';
                  if (entity.state >= 55 && entity.state < 65) return 'rgb(253,199,5)';
                  if (entity.state >= 65 && entity.state < 120) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]          
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 15) return 'rgb(255,64,56)';
                  if (entity.state >= 15 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 65) return 'rgb(45,209,96)';
                  if (entity.state >= 65 && entity.state < 75) return 'rgb(253,199,5)';
                  if (entity.state >= 75 && entity.state < 100) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
card_mod:
  style: |
    ha-card {
      background: Snow;
    }

[WarC0zes]

@Xris

            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '2000') %}
                color: rgb(255,64,56);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '0') %}
                color: rgb(45,209,96);
              {% else %}
                color: Black;
              {% endif %}
            }

Salut,
je vois pas d’erreur. Chez pas trop quoi te dire.
Peu être diminuer les écarts et pas finir a 0.

[Xris]

est-ce que ça pourrait être dans le template que j’ai créé, je n’ai mis que ça pour coller au visuel que tu avais partagé :

{% if states('sensor.netatmo_salon_co2')|int(0) >= 2000 %}
            Mauvais
          {% elif states('sensor.netatmo_salon_co2')|int(0) >= 1000 %}
            Moyen
          {% elif states('sensor.netatmo_salon_co2')|int(0) >= 600 %}
            Excellent
          {% else %}
            Bon
          {% endif %}

[WarC0zes]

Non, c’est pas le soucis.

[Xris]

Réduire les écarts ?

Est-ce que tu pourrais me partager le code de celui que tu as qui marche ci-dessus jaune, que je le place seul dans une carte pour voir si ça marche pour moi

[WarC0zes]

@Xris

Réduire les écarts ?

oui faire >= 2000 >=1900 >=1800 >=1700, tu met les mêmes couleurs pas grave voir si c’est mieux.

chez moi, j’ai ce code, qui a l’air de fonctionner. Je suis a 1021 hpa et c’est bien en gold. le code bloque pas au premier test.

            .icon {
              {% if (states['sensor.saint_frichoux_pressure'].state >= '1200') %}
                color: Crimson;
              {% elif (states['sensor.saint_frichoux_pressure'].state >= '1100') %}
                color: DarkOrange;
              {% elif (states['sensor.saint_frichoux_pressure'].state >= '1000') %}
                color: gold;
              {% elif (states['sensor.saint_frichoux_pressure'].state >= '600') %}
                color: rgb(51,204,102);
              {% else %}
                color: DodgerBlue;
              {% endif %}
            }

[Xris]

Ok je vais tester ça et je te montrerai le code

[Xris]

Je crois que j’ai fais ce qu’il faut mais pas de différence, par contre je n’arrive pas à trouver d’où vient le rouge, c’est lui qui semble s’imposer :

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
            - font-weight: bold
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }  
      - type: custom:button-card
        entity: sensor.netatmo_jardin_temperature
        name: Température Réelle
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - font-weight: bold
            - 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
            - font-weight: bold
            - 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é
          - entity: sensor.netatmo_salon_co2_texte
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 1
              entity_index: 1
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3em;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
        horseshoe_scale:
          min: 1
          max: 2300
          color: rgb(240,240,240)
        color_stops:
          '0': rgb(45,209,96)
          '1000': rgb(253,199,5)
          '2000': rgb(255,64,56)
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              {% if (states['sensor.netatmo_salon_co2'].state >= '2000') %}
                color: rgb(255,64,56);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1800') %}
                color: rgb(255,64,56);  
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1600') %}
                color: rgb(255,64,56);  
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1400') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1200') %}
                color: rgb(253,199,5);  
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '800') %}
                color: rgb(45,209,96);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '600') %}
                color: rgb(45,209,96);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '400') %}
                color: rgb(45,209,96);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '200') %}
                color: rgb(45,209,96);  
              {% elif (states['sensor.netatmo_salon_co2'].state >= '0') %}
                color: rgb(45,209,96);
              {% else %}
                color: Black;
              {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_salon_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Moyen') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }
      - type: custom:button-card
        entity: sensor.netatmo_salon_temperature
        layout: icon_state
        aspect_ratio: 1.55/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: rgb(68,76,99)
            - font-size: 50px
            - font-weight: bold
            - margin-left: '-10px'
            - justify-self: start
            - white-space: normal
          icon:
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 7) return 'rgb(255,64,56)';
                  if (entity.state >= 7 && entity.state < 16) return 'rgb(253,199,5)';
                  if (entity.state >= 16 && entity.state < 24) return 'rgb(45,209,96)';
                  if (entity.state >= 24 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 60) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 1000) return 'rgb(45,209,96)';
                  if (entity.state >= 1000 && entity.state < 2000) return 'rgb(253,199,5)';
                  if (entity.state >= 2000 && entity.state < 3000) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]         
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 55) return 'rgb(45,209,96)';
                  if (entity.state >= 55 && entity.state < 65) return 'rgb(253,199,5)';
                  if (entity.state >= 65 && entity.state < 120) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]          
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 15) return 'rgb(255,64,56)';
                  if (entity.state >= 15 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 65) return 'rgb(45,209,96)';
                  if (entity.state >= 65 && entity.state < 75) return 'rgb(253,199,5)';
                  if (entity.state >= 75 && entity.state < 100) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
card_mod:
  style: |
    ha-card {
      background: Snow;
    }

[WarC0zes]

@Xris

rgb(255,64,56)

c’est le rouge en rgb.

[Xris]

Ah oui donc le if ne doit pas fonctionner
Je ferait des tests en changeant la couleur pour essayer de comprendre. Là je ne peux plus pour l’instant.

[Xris]

Je me demandais si une autre solution ne serait pas d’afficher une image à la place dans laquelle il y aurait le mot et la feuille de la bonne couleur ? Un png par exemple. Une image différente comme pour le mot mais qui viendrai couvrir les deux, la feuille et le mot

[MichelJ]

Une autre façon de contrôler les couleurs de l’icône dans une carte button-card.

      - 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
        state:
          -  operator: '<'
             value: 50
             styles:
               icon:
                 - color: 'blue'
          -  operator: '<'
             value: 60
             styles:
               icon:
                 - color: 'green'
          -  operator: '<'
             value: 70
             styles:
               icon:
                 - color: 'gold'
          -  operator: '<'
             value: 90
             styles:
               icon:
                 - color: 'orange'
          -  operator: '>='
             value: 90
             styles:
               icon:
                 - color: 'red'
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: grey
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 12px
            - color: Teal

[WarC0zes]

Bonjour @Xris,
Nouveau code pour les couleurs de la feuille, fonctionne chez moi. Test le

            .icon {
              color: 
                {% if states('sensor.netatmo_salon_co2') | int(0) >= 2000 %}
                  rgb(255,64,56);
                {% elif states('sensor.netatmo_salon_co2') | int(0) >= 1000 %}
                  rgb(253,199,5);
                {% elif states('sensor.netatmo_salon_co2') | int(0) >= 1 %}
                  rgb(45,209,96);
                {% else %}
                  black;
                {% endif %}
            }

Ca passe bien le if, vu que je suis en jaune avec 1021hpa

                {% elif states('sensor.netatmo_salon_co2') | int(0) >= 1000 %}
                  rgb(253,199,5);

(carte de test, te fie pas au nom.)

[Xris]

Je teste ça dès que possible, certainement ce soir.

[Xris]

Ok il va falloir que je teste ça aussi

[Xris]

Je pense que tu as réussi :

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
            - font-weight: bold
            - white-space: normal
        card_mod:
          style: |
            ha-card {
              border: none;
            }  
      - type: custom:button-card
        entity: sensor.netatmo_jardin_temperature
        name: Température Réelle
        show_icon: false
        show_state: true
        styles:
          card:
            - background: SteelBlue
            - border-radius: 0
          name:
            - font-size: 14px
          state:
            - font-size: 20px
            - font-weight: bold
            - 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
            - font-weight: bold
            - 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é
          - entity: sensor.netatmo_salon_co2_texte
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 1
              entity_index: 1
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3em;
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
        horseshoe_scale:
          min: 1
          max: 2300
          color: rgb(240,240,240)
        color_stops:
          '0': rgb(45,209,96)
          '1000': rgb(253,199,5)
          '2000': rgb(255,64,56)
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              color: 
                {% if states('sensor.netatmo_salon_co2') | int(0) >= 2000 %}
                  rgb(255,64,56);
                {% elif states('sensor.netatmo_salon_co2') | int(0) >= 1000 %}
                  rgb(253,199,5);
                {% elif states('sensor.netatmo_salon_co2') | int(0) >= 1 %}
                  rgb(45,209,96);
                {% else %}
                  black;
                {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_salon_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Moyen') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }
      - type: custom:button-card
        entity: sensor.netatmo_salon_temperature
        layout: icon_state
        aspect_ratio: 1.55/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: rgb(68,76,99)
            - font-size: 50px
            - font-weight: bold
            - margin-left: '-10px'
            - justify-self: start
            - white-space: normal
          icon:
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 7) return 'rgb(255,64,56)';
                  if (entity.state >= 7 && entity.state < 16) return 'rgb(253,199,5)';
                  if (entity.state >= 16 && entity.state < 24) return 'rgb(45,209,96)';
                  if (entity.state >= 24 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 60) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 1000) return 'rgb(45,209,96)';
                  if (entity.state >= 1000 && entity.state < 2000) return 'rgb(253,199,5)';
                  if (entity.state >= 2000 && entity.state < 3000) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]         
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 55) return 'rgb(45,209,96)';
                  if (entity.state >= 55 && entity.state < 65) return 'rgb(253,199,5)';
                  if (entity.state >= 65 && entity.state < 120) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]          
        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: rgb(68,76,99)
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 15) return 'rgb(255,64,56)';
                  if (entity.state >= 15 && entity.state < 30) return 'rgb(253,199,5)';
                  if (entity.state >= 30 && entity.state < 65) return 'rgb(45,209,96)';
                  if (entity.state >= 65 && entity.state < 75) return 'rgb(253,199,5)';
                  if (entity.state >= 75 && entity.state < 100) return 'rgb(255,64,56)';
                  else return 'Black';
                ]]]             
        card_mod:
          style: |
            ha-card {
              border: none;
            }            
card_mod:
  style: |
    ha-card {
      background: Snow;
    }

C’est trop bien

Je vais pouvoir avancer sur tout cela avec mes différentes jauges etc et ensuite je passe à mon google nest pour lequel j’aimerais aussi refaire une interface, j’ai trouvé déjà des choses mais je ferai sans doute appel à ton talent.

Et je vais tester aussi l’astuce de MichelJ

Merci beaucoup

[WarC0zes]

Enfin
Oui, ta la solution de @MichelJ pour button-card.