Avoir ce type d'interface pour Netatmo

Entraide Home Assistant
41

pour les button-card, essaye ce code pour la coeleur.

exemple pour l’humidité et faut bien les ':

    - color: |
        [[[
          if (states['sensor.netatmo_salon_humidity'].state >= '50') return "blue";             
          else if (states['sensor.netatmo_salon_humidity'].state >= '60') return "gold";
          else if (states['sensor.netatmo_salon_humidity'].state >= '70') return "DarkOrange";
          else if (states['sensor.netatmo_salon_humidity'].state >= '80') return "Crimson";
          else return "DodgerBlue";
1 « J'aime »
42

ça ne semble pas fonctionner :

- color: |
                [[[
                  if (states['sensor.netatmo_salon_humidity'].state >= '40') return "yellow";             
                  else if (states['sensor.netatmo_salon_humidity'].state >= '55') return "gold";
                  else if (states['sensor.netatmo_salon_humidity'].state >= '70') return "purple";
                  else if (states['sensor.netatmo_salon_humidity'].state >= '80') return "red";
                  else return "DodgerBlue";
                ]]]

Quand je tente de changer les valeurs pour tester, là ça devrait passer en gold mais non

image

43

Je pense que c’est la bonne.

    - color: |
        [[[
          if (entity.state < 40) return 'DodgerBlue';
          if (entity.state >= 40 && entity.state < 50) return 'orange';
          if (entity.state >= 50 && entity.state < 70) return 'gold';
          if (entity.state >= 70 && entity.state < 80) return 'DarkOrange';
          else return 'red';
        ]]]
44

Je viens de faire cela pour le Co2 et je pense en effet que ça va fonctionner, j’ai changé les valeurs pour voir et ça changeait bien la couleur :

- 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';
                ]]]

image

Je vais regarder pour les autres points et la feuille, merci

1 « J'aime »
45

ça semble plutôt bien marcher sauf sur la feuille, j’ai peut-être mal écrit sur la feuille ?

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: 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
            - 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: rgb(68,76,99);
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles:
              - 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';
                  ]]]      
        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;
            }
      - 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: 57px
            - margin-left: '-20px'
            - 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
            - 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
            - 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
            - 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;
    }

image
image492×713 26.2 KB

46

Pour la feuille, c’est avec card-mod c’est différent. Faut changer le entity.state, qui fonctionne pour button-card mais pour card-mod c’est le nom de l’entité en entier.

47

Ce code est bon aussi, mais il faut juste inverser les valeurs. Commencer le premier if avec la plus grande et finir avec plus petite, Soit, 80,70, 60 et 50.

1 « J'aime »
48

Bon à savoir, merci du tuyau.

49

c’est à dire avec ça :

.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 %}
            }

J’ai essayé en effet j’avais un résultat mais je ne parvenais pas à le faire varier pour voir son fonctionnement.

50

Pareille pour celui là @MichelJ ?

51

Voilà ce que j’avais fait en card-mod :

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é
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3.3em;
                - fill: rgb(68,76,99);
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles: null
              color: Red
        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 >= '0') %}
                color: rgb(45,209,96);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '1000') %}
                color: rgb(253,199,5);
              {% elif (states['sensor.netatmo_salon_co2'].state >= '2000') %}
                color: rgb(255,64,56);
              {% else %}
                color: Black;
              {% 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: 55px
            - font-weight: bold
            - margin-left: '-20px'
            - 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;
    }

image
image527×710 26.1 KB

52

Oui, c’est la même chose si vous commencer par tester la plus petite valeur et que vous spécifiez plus grand ou égal, ça va toujours être le premier if qui va dire vrai et toujours utiliser la même couleur.

53

Ah, de manière à ce que le code vérifie toujours ce qu’il y a en dessous d’une certaine manière ?

54

Dans un if, la première vérification qui retourne vrais, arrête la vérification. Donc, dans votre code, si l’humidité est plus élevé ou égal à 50, ça vas donner vrais et il ne vérifiera pas le reste.

55

Super merci, grâce à cela je vais donc essayer d’inventer le code pour la colorisation de la feuille :slight_smile: avec cette info et tout ce que m’a enseigné WarC0zes

56

Merci pour la carte, pour moi la partie Météo France, n’est pas utile, mais j’ai utilisé la partie Netatmo. :grinning:

IMG_7833
IMG_78332058×1501 767 KB

2 « J'aime »
57

Est-ce que ceci vous semblerait bon pour la feuille ?

.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 %}
            }

Merci beaucoup

58

Non malheureusement quand je le place, ça ne semble pas fonctionner

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é
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 67
              styles:
                - font-size: 3.3em;
                - fill: rgb(68,76,99);
          icons:
            - id: 0
              entity_index: 0
              xpos: 50
              ypos: 40
              icon_size: 5
              styles: null
              color: Red
        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);
              {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 %}
            }
      - 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: 55px
            - font-weight: bold
            - margin-left: '-20px'
            - 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;
    }

image
image508×730 26.2 KB

59

Une feuille récalcitrante. :rofl:. Le code est bon, mais il s’agis de savoir si c’est possible d’utiliser card-mod pour l’icône dans la carte custom:flex-horseshoe-card.

60

Oui c’est le dernier détail de cette super carte grâce à WarC0zes