Avoir ce type d'interface pour Netatmo

[Xris]

Mince j’essaie de le faire pour le capteur etage, il me semble avoir bien modifié partout mais j’ai ça

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-title-card
        title: Netatmo étage
        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_etage_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
          - entity: sensor.netatmo_etage_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_etage_co2') | int(0) >= 2000 %}
                  rgb(255,64,56);
                {% elif states('sensor.netatmo_etage_co2') | int(0) >= 1000 %}
                  rgb(253,199,5);
                {% elif states('sensor.netatmo_etage_co2') | int(0) >= 1 %}
                  rgb(45,209,96);
                {% else %}
                  black;
                {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_etage_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Moyen') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }
      - type: custom:button-card
        entity: sensor.netatmo_etage_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_etage_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_etage_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;
    }

J’avais bien la gauge avant pourtant, tu vois où j’aurais oublié quelque-chose, je suis en train de relire, ligne à ligne ?

[Xris]

je viens de créer ça

car je me suis dit que c’était là le problème
et ça semble être bon

[WarC0zes]

Ah beh oui, va falloir créer un template différent pour le texte.

[Xris]

Coucou,

J’ai remarqué une petite différence ce matin,

j’ai certainement changé quelque chose quand je faisais les tests

mais je ne vois pas où cela pourrait être, dans le template, je ne pense pas, dans le code ?

Les deux devraient être en excellent

[Xris]

Eh bien si en fait c’est dans le template que j’avais changé quelque chose :

j’avais changé :

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

en

{% 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 %}
            Bon
          {% else %}
            Excellent
          {% endif %}

Il faudrait que je teste pour ajouter le « Bon » en intermédiaire entre 600 et 1000 car là je vois que pour 920 ppm à l’étage ça indique toujours excellent alors que ça serait mieux « Bon »

je vois que là on indique >= pour supérieur ou égal je suppose, est-ce que <= serait valable pour inférieur ou égale ?

[WarC0zes]

Fait attention au code, surtout si tu fait des tests avant.

[Xris]

Oui, je regarde bien les templates et le code des cartes pour voir comment ça interagit.

merci beaucoup

[Xris]

Pour les personnes que ça intéresse, voici les valeurs que j’ai trouvée sur le site netatmo :

Du coup le template est :

{% if states('sensor.netatmo_etage_co2')|int(0) >= 1600 %}
  Malsain
{% elif states('sensor.netatmo_etage_co2')|int(0) >= 1400 %}
  Mauvais
{% elif states('sensor.netatmo_etage_co2')|int(0) >= 1150 %}
  Acceptable
{% elif states('sensor.netatmo_etage_co2')|int(0) >= 900 %}
  Bon
{% elif states('sensor.netatmo_etage_co2')|int(0) >= 1 %}
  Excellent
{% else %}
  Black
{% endif %}

et le code

- type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.netatmo_etage_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
          - entity: sensor.netatmo_etage_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)
          '1150': rgb(253,199,5)
          '1400': rgb(255,64,56)
        card_mod:
          style: |
            ha-card {
              background: Snow;
              border-radius: 0;
              border:none;
            }
            .icon {
              color: 
                {% if states('sensor.netatmo_etage_co2') | int(0) >= 1400 %}
                  rgb(255,64,56);
                {% elif states('sensor.netatmo_etage_co2') | int(0) >= 1150 %}
                  rgb(253,199,5);
                {% elif states('sensor.netatmo_etage_co2') | int(0) >= 1 %}
                  rgb(45,209,96);
                {% else %}
                  black;
                {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_etage_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Malsain') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Acceptable') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_etage_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }

[MilesTEG1]

Bonjour,
Cet affichage me plait beaucoup.
Mais j’ai du mal à comprendre quelle(s) partie(s) de code utiliser pour avoir comme dans la dernière capture du précédent message.
Car en lisant le code, je ne vois pas de mention à la température ni à l’humidité.
Quelqu’un aurait-il la bonté de m’expliquer où je me fourvoie, ou bien donner le code complet de la carte ?
Merci d’avance

[WarC0zes]

Bonjour,
la carte complète [Résolu] Avoir ce type d'interface pour Netatmo - #79 par Xris

et un correctif a changer dans le code da la carte complète [Résolu] Avoir ce type d'interface pour Netatmo - #88 par Xris

@Xris n’as pas mis le code complet fonctionnelle sur son dernier message.

[MilesTEG1]

Ok merci bien pour l’explication
J’ai l’impression d’être nul avec ces lignes de codes
Pourtant j’ai un peu d’expérience en programmation diverses (bash , powershell, c) mais là j’ai l’impression de ne rien savoir faire.
Existe-t-il une doc complète sur le language ? Je n’ai pas réussi à trouver sur le site de HomeAssistant un endroit où sont données toutes les possibilités…

[MilesTEG1]

Bonsoir,
Alors, voilà mon rendu après quelques ajustements (°C au lieu de ° , et taille de texte, alignement, etc…) :
Sur mon MBA 13’ :

Sur mon iPhone 7 (petit écran) :

Il me reste à valider mes modifications pour un fort taux de CO2.

Mon seul souci, c’est le 2 en indice qui ne passe pas très bien sur mon iPhone…

Le code yaml :

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_garage_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_garage_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)
          '1150': rgb(253,199,5)
          '1400': 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) >= 1400 %}
                  rgb(255,64,56);
                {% elif states('sensor.netatmo_salon_co2') | int(0) >= 1150 %}
                  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','Malsain') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Acceptable') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_salon_co2_texte','Excellent') %}
                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: °C
        styles:
          card:
            - background: Snow
            - border-radius: 0
            - margin-left: 0px
          state:
            - color: rgb(68,76,99)
            - font-size: 30px
            - font-weight: bold
            - margin-left: '-15px'
            - 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;
              margin-top: 30px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.netatmo_salon_co2
        layout: icon_name_state2nd
        name: CO₂
        icon: mdi:circle
        color: SeaGreen
        size: 35%
        units: ppm
        show_icon: true
        show_state: true
        styles:
          card:
            - background: Snow
            - border-radius: 0
          name:
            - font-size: 14px
            - color: rgb(68,76,99)
            - white-space: normal
            - margin-left: '-35px'
            - justify-self: center
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - margin-left: '-35px'
            - justify-self: center
          icon:
            - left: 0px
            - 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: Bruit
        icon: mdi:circle
        color: SeaGreen
        size: 35%
        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)
            - white-space: normal
            - margin-left: '-45px'
            - justify-self: center
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
            - margin-left: '-45px'
            - justify-self: center
          icon:
            - left: 0px
            - 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: 35%
        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: '-35px'
            - white-space: normal
            - justify-self: center
          state:
            - font-size: 14px
            - font-weight: bold
            - color: rgb(68,76,99)
            - white-space: normal
            - margin-left: '-35px'
            - justify-self: center
          icon:
            - left: 0px
            - 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;
    }

[MilesTEG1]

Est-il possible de faire une version qui combine les possibilités de thème sombre ou clair ?

[Yoshi]

Pour avoir une version qui s’adapte à ton thème, claire ou sombre, tu as juste à commenter ou supprimer les lignes :

background: Snow;

Exemple :

[MilesTEG1]

Merci @Yoshi

Sympa ta version de la carte. Comment as tu fait pour avoir l’humidité au dessous de la température ?
Tu voudrais bien partager le code de cette carte s’il te plaît ?

Édit : je viens de d’essayer de commenter les lignes background , et le résultat n’est pas super

[Yoshi]

Pour ajouter l’humidité sous la température il faut comprendre un peu ce qui a été fait dans cette carte, perso elle m’a permis de comprendre un peu mieux le yaml, merci @WarC0zes

Elle est composée comme ça :
stack-in-card vertical pour les 2 lignes : qualité+température et CO2+bruit+humidité
horizontal-stack pour chacune des 2 lignes :

J’ai juste ajouté un vertical-stack dans la partie température pour la séparer en deux :

Pour la bande noir en haut de ta carte, il semble que tu ai supprimer le texte mais pas la partie qui le contenait, du coup l’espace est vide mais s’affiche quand même.

Voila mon code, il est certainement pas parfait mais il fonctionne

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.smart_home_weather_station_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
          - entity: sensor.smart_home_weather_station_co2_texte
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 1
              entity_index: 1
              xpos: 50
              ypos: 67
              styles:
                - font-size: 2em;
          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.smart_home_weather_station_co2') | int(0) >= 1400 %}
                  rgb(255,64,56);
                {% elif states('sensor.smart_home_weather_station_co2') | int(0) >= 1150 %}
                  rgb(253,199,5);
                {% elif states('sensor.smart_home_weather_station_co2') | int(0) >= 1 %}
                  rgb(45,209,96);
                {% else %}
                  black;
                {% endif %}
            }
            .state__value {
              {% if is_state('sensor.smart_home_weather_station_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.smart_home_weather_station_co2_texte','Malsain') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.smart_home_weather_station_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.smart_home_weather_station_co2_texte','Acceptable') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.smart_home_weather_station_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }
            }
      - type: vertical-stack
        cards:
          - type: custom:button-card
            entity: sensor.smart_home_weather_station_temperature
            layout: icon_state
            aspect_ratio: 1.8/1
            color: SeaGreen
            show_icon: true
            show_state: true
            show_name: false
            styles:
              card:
                - border-radius: 0
              state:
                - font-size: 40px
                - 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: custom:button-card
            entity: sensor.smart_home_weather_station_humidity
            name: Humidité
            layout: icon_state
            color: SeaGreen
            show_icon: true
            show_state: true
            show_name: false
            styles:
              card:
                - border-radius: 0
              name:
                - font-size: 20px
                - margin-left: '-50px'
                - white-space: normal
              state:
                - font-size: 25px
                - margin-left: '-40px'
                - font-weight: bold
                - white-space: normal
              icon:
                - left: 30px
                - 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;
                }   
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.smart_home_weather_station_co2
        layout: icon_name_state2nd
        name: CO2
        color: SeaGreen
        show_icon: true
        show_state: true
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
          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.smart_home_weather_station_noise
        name: Sonomètre
        color: SeaGreen
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - 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.smart_home_weather_station_pressure
        name: Pression
        color: SeaGreen
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - white-space: normal
          icon:
            - left: 10px
            - color: rgb(45,209,96)
        card_mod:
          style: |
            ha-card {
              border: none;
            }
card_mod:
  style: |
    ha-card {
      #background: Snow;
    }

J’ai adapté aussi une mini carte pour les données extérieures si intéressé :
NB : Je n’ai pas encore les capteurs de pluie et de vent et les couleurs de luminosité sont a améliorer, mais c’est un début

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.smart_outdoor_module_temperature
        layout: icon_name_state2nd
        name: Température
        color: SeaGreen
        show_icon: true
        show_state: true
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 0) return 'Purple';
                  if (entity.state >= 0 && entity.state < 7) return 'rgb(0, 50, 255)';
                  if (entity.state >= 7 && entity.state < 16) return 'rgb(0, 225, 255)';
                   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: custom:button-card
        entity: sensor.smart_outdoor_module_humidity
        name: Humidité
        color: SeaGreen
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - 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;
            }  
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sensor.capteur_de_luminosite_luminance
        name: Luminosité
        color: SeaGreen
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state == 50) return 'rgb(0,0,0)';
                  if (entity.state >= 51 && entity.state < 200) return 'rgb(253,199,5)';
                  if (entity.state >= 200 && entity.state < 500) return 'rgb(253,199,5)';
                  if (entity.state >= 500 && entity.state < 1000) return 'rgb(253,199,5)';
                  if (entity.state >= 1000 && entity.state < 3000) return 'rgb(249,114,46)';
                  if (entity.state >= 3000 && entity.state < 5000) return 'rgb(255,170,87)';
                  if (entity.state >= 5000 && entity.state < 10000) return 'rgb(254,203,112)';
                  if (entity.state >= 10000 && entity.state < 100000) return 'rgb(254,203,112)';
                  else return 'Purple';
                ]]] 
        card_mod:
          style: |
            ha-card {
              border: none;
            }  
      - type: custom:button-card
        entity: sensor.smart_outdoor_module_temperature
        layout: icon_name_state2nd
        name: Pluie
        icon: mdi:weather-pouring
        color: SeaGreen
        show_icon: true
        show_state: true
        units: mm
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state < 50) return 'Purple';
                  if (entity.state >= 0 && entity.state < 7) return 'rgb(0, 50, 255)';
                  if (entity.state >= 7 && entity.state < 16) return 'rgb(0, 225, 255)';
                   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: custom:button-card
        entity: sensor.smart_outdoor_module_temperature
        name: Vent
        icon: mdi:weather-windy
        color: SeaGreen
        layout: icon_name_state2nd
        show_icon: true
        show_state: true
        units: km/h
        styles:
          card:
            - border-radius: 0
          name:
            - font-size: 14px
            - margin-left: '-10px'
            - white-space: normal
          state:
            - font-size: 14px
            - font-weight: bold
            - white-space: normal
          icon:
            - left: 10px
            - color: |
                [[[
                  if (entity.state = 50) return 'Purple';
                  if (entity.state > 50 && entity.state < 200) return 'rgb(255,64,56)';
                  if (entity.state >= 200 && entity.state < 500) return 'rgb(253,199,5)';
                  if (entity.state >= 5000 && entity.state < 5000) return 'rgb(249,114,46)';
                  if (entity.state >= 5000 && entity.state < 10000) return 'rgb(255,170,87)';
                  if (entity.state >= 10000 && entity.state < 100000) return 'rgb(254,203,112)';
                  else return 'Purple';
                ]]] 
        card_mod:
          style: |
            ha-card {
              border: none;
            }   
card_mod:
  style: |
    ha-card {
      #background: Snow;
    }

En parlant de données extérieures, j’ai vu que Netatmo proposait aussi cette carte sur l’appli :

Les données semblent venir de la localisation car il ne me semble pas que la station dispose de ce genre de capteurs.

Savez-vous s’il est possible de récupérer ces données via une API ou autre ?

[MilesTEG1]

Merci pour le code de la carte
J’ai essayé d’ajouter un titre, mais c’est pas terrible : il n’est pas centré, il y a un petit espace entre lui et le reste.

C’est possible de centrer le titre ? ou bien d’ajouter un texte centré ?

[Xris]

Salut à tous, désolé je vois seulement vos message. Je croyais avoir mis le code complet, je vois que vous améliorez la carte, c’est cool. Je mettrai le code. J’ai essayé depuis mon smartphone mais il ne prend pas tout.

Bonne année

[MilesTEG1]

Bonjour,
J’essaye de compacter un peu l’affichage des modules supplémentaires de ma netatmo.

Voilà le rendu actuel (code après) :

Déjà je n’ai pas su faire pour réduire la taille du « fer à cheval », mais bon, au pire si j’arrive à mettre le niveau de CO2 dans la même colonne que la température et l’humidité

par contre, déjà j’ai un espace trop important entre la température et l’humidité.
Comment le réduire au minimum ? Je ne connais pas de manière d’ajuster l’espacement vertical… (vertical_padding ne fonctionne pas )

Ensuite, pour le niveau de CO2 chiffré, je ne comprends pas pourquoi la valeur n’est pas sur la même ligne que l’icone…

Et enfin, comment faire pour que ces 3 objets tiennent dans l’empâtement vertical du fer-à-cheval de gauche ?

Voilà le code :

type: custom:stack-in-card
mode: vertical
keep:
  box_shadow: false
  margin: false
  border_radius: false
  background: true
  outer_padding: false
cards:
  - type: horizontal-stack
    title: Chambre
    cards:
      - type: custom:flex-horseshoe-card
        entities:
          - entity: sensor.netatmo_chambre_co2
            icon: mdi:leaf
            decimals: 0
            area: qualité
          - entity: sensor.netatmo_chambre_co2_texte
            decimals: 0
            area: qualité
        show:
          horseshoe_style: colorstop
        layout:
          states:
            - id: 1
              entity_index: 1
              xpos: 50
              ypos: 67
              styles:
                - font-size: 2em;
          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_chambre_co2') | int(0) >= 1400 %}
                  rgb(255,64,56);
                {% elif states('sensor.netatmo_chambre_co2') | int(0) >= 1150 %}
                  rgb(253,199,5);
                {% elif states('sensor.netatmo_chambre_co2') | int(0) >= 1 %}
                  rgb(45,209,96);
                {% else %}
                  black;
                {% endif %}
            }
            .state__value {
              {% if is_state('sensor.netatmo_chambre_co2_texte','Mauvais') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_chambre_co2_texte','Malsain') %} 
                fill: rgb(255,64,56) !important;
              {% elif is_state('sensor.netatmo_chambre_co2_texte','Bon') %}
                fill: rgb(45,209,96) !important;
              {% elif is_state('sensor.netatmo_chambre_co2_texte','Acceptable') %}
                fill: rgb(253,199,5) !important;
              {% elif is_state('sensor.netatmo_chambre_co2_texte','Excellent') %}
                fill: rgb(45,209,96) !important;
              {% else %}
                fill: Black !important;
              {% endif %}
            }
      - type: vertical-stack
        cards:
          - type: custom:button-card
            entity: sensor.netatmo_chambre_temperature
            layout: icon_state
            aspect_ratio: 1.8/1
            color: SeaGreen
            show_icon: true
            show_state: true
            show_name: false
            styles:
              card:
                - border-radius: 0
              state:
                - font-size: 35px
                - font-weight: bold
                - margin-left: '-20px'
                - justify-self: start
                - white-space: normal
              icon:
                - left: 20px
                - 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: custom:button-card
            entity: sensor.netatmo_chambre_humidity
            name: Humidité
            layout: icon_state
            color: SeaGreen
            show_icon: true
            show_state: true
            show_name: false
            styles:
              card:
                - border-radius: 0
              name:
                - font-size: 20px
                - margin-left: '-50px'
                - white-space: normal
              state:
                - font-size: 25px
                - margin-left: '-60px'
                - font-weight: bold
                - white-space: normal
              icon:
                - left: 20px
                - 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;
                }
          - type: custom:button-card
            entity: sensor.netatmo_chambre_co2
            layout: icon_name
            name: CO2
            color: SeaGreen
            show_icon: true
            show_state: true
            show_name: false
            styles:
              card:
                - border-radius: 0
              name:
                - font-size: 14px
                - margin-left: '-10px'
                - white-space: normal
              state:
                - font-size: 14px
                - margin-left: '-10px'
                - font-weight: bold
                - white-space: normal
              icon:
                - left: 0px
                - 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;
                }

[anon41081891]

Salut, tu passes par un stack-in-card puis un horizontal-stack puis un vertical-stack avec des button-card, une flex-horseshoe-card et du card-mod pour compliquer encore tout ça… Tu pouvais faire beaucoup plus simple avec une seule button-card et des custom_fields (dont un avec ta flex-horseshoe-card) qui te permettrait de gérer les positionnements au pixel près.

Un exemple de button-card avec de multiples custom_fields dont l’emplacement sur la carte peut être réglé au pixel près :

et le code :

type: custom:button-card
aspect_ratio: 4/3.5
custom_fields:
  fond:
    card:
      type: custom:button-card
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  ncarte:
    card:
      type: custom:button-card
      name: Salon
      styles:
        name:
          - font-size: 1.4em
          - font-weight: bold
          - justify-self: start
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  eclairage:
    card:
      type: custom:button-card
      name: 'Éclairage :'
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
  nplafonnier:
    card:
      type: custom:button-card
      name: Plafonnier
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  plafonnier:
    card:
      type: custom:button-card
      size: 80%
      entity: light.salon_plafonnier
      icon: phu:ceiling-fugato-three
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nlampadaire:
    card:
      type: custom:button-card
      name: Lampadaire
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  lampadaire:
    card:
      type: custom:button-card
      size: 85%
      entity: light.salon_lampadaire
      icon: mdi:floor-lamp-torchiere
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nlampe_poele:
    card:
      type: custom:button-card
      name: Lampe<br/>(poële)
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  lampe_poele:
    card:
      type: custom:button-card
      size: 85%
      entity: light.salon_lampe_poele
      icon: mdi:lamp
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  nlampe_biblio:
    card:
      type: custom:button-card
      name: Lampe<br/>(bibliothèque)
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  lampe_biblio:
    card:
      type: custom:button-card
      size: 85%
      entity: light.salon_lampe_bibliotheque
      icon: mdi:lamp
      show_name: false
      state:
        - value: 'off'
          styles:
            icon:
              - color: dimgray
            card:
              - box-shadow: none
              - border-radius: 50%
              - background-color: rgba(242,242,242,0.7)
              - width: 48px
              - height: 48px
        - value: 'on'
          styles:
            icon:
              - color: rgb(255,255,128)
            card:
              - border-radius: 50%
              - box-shadow: 0px 0px 6px 3px rgba(255,255,128,0.8)
              - background-color: rgba(0,0,0,0.5)
              - width: 48px
              - height: 48px
  temp_value:
    card:
      type: custom:button-card
      entity: sensor.echo_salon_temperature
      show_name: false
      show_icon: false
      show_state: true
      tap_action: none
      styles:
        state:
          - font-size: 0.82em
          - font-weight: bold
          - color: dimgray
          - justify-self: end
          - padding-right: 3%
        card:
          - background-color: rgba(255,255,255,0.5)
  temp:
    card:
      type: custom:button-card
      aspect_ratio: 1/1
      show_name: false
      show_icon: false
      styles:
        card:
          - opacity: 1
          - background-image: url(/local/images/icones/temperature.png)
          - background-size: cover
          - background-position: center
          - background-color: rgba(0,0,0,0.0)
          - border: none
  ambiances:
    card:
      type: custom:button-card
      name: 'Ambiances :'
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border: none
  ndiner:
    card:
      type: custom:button-card
      name: Dîner<br/>salon
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  diner:
    card:
      type: custom:button-card
      size: 80%
      icon: mdi:silverware-clean
      show_name: false
      styles:
        icon:
          - color: dimgray
        card:
          - box-shadow: none
          - border-radius: 50%
          - background-color: rgba(242,242,242,0.7)
          - width: 48px
          - height: 48px
      tap_action:
        action: call-service
        service: script.diner_salon
  ntv:
    card:
      type: custom:button-card
      name: Regarder la<br/>télévision
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  tv:
    card:
      type: custom:button-card
      size: 80%
      icon: mdi:television-shimmer
      show_name: false
      styles:
        icon:
          - color: dimgray
        card:
          - box-shadow: none
          - border-radius: 50%
          - background-color: rgba(242,242,242,0.7)
          - width: 48px
          - height: 48px
      tap_action:
        action: call-service
        service: script.ambiance_television
  neteindre:
    card:
      type: custom:button-card
      name: Tout<br/>éteindre
      styles:
        name:
          - font-size: 0.7em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  eteindre:
    card:
      type: custom:button-card
      size: 70%
      icon: mdi:lightbulb-group-off
      show_name: false
      styles:
        icon:
          - color: dimgray
        card:
          - box-shadow: none
          - border-radius: 50%
          - background-color: rgba(242,242,242,0.7)
          - width: 48px
          - height: 48px
      tap_action:
        action: call-service
        service: script.eteindre_salon
  volet_canape:
    card:
      type: custom:button-card
      name: 'Volet canapé :'
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  vcup:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_ouvrir.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.ouvrir_volet_canape
  vcstop:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_stopper.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.stopper_volet_canape
  vcdown:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_fermer.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.fermer_volet_canape
  volet_biblio:
    card:
      type: custom:button-card
      name: 'Volet bibliothèque :'
      styles:
        name:
          - font-size: 1.0em
          - font-weight: bold
          - color: rgba(0,0,0,0.6)
          - justify-self: start
        card:
          - background-color: rgba(255,255,255,0.0)
          - border-radius: 0%
          - border: none
      tap_action:
        action: none
      hold_action:
        action: none
  vbup:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_ouvrir.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.ouvrir_volet_bibliotheque
  vbstop:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_stopper.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.stopper_volet_biblioteque
  vbdown:
    card:
      type: custom:button-card
      show_name: false
      styles:
        card:
          - background-color: rgba(255,255,255,0.0)
          - background-image: url(/local/images/icones/volet_fermer.png)
          - background-size: cover
          - height: 48px
          - width: 48px
          - border: none
      tap_action:
        action: call-service
        service: script.fermer_volet_bibliotheque
styles:
  custom_fields:
    fond:
      - background-image: url(/local/images/salon.png)
      - position: absolute
      - left: 0
      - top: 0
      - width: 100%
      - height: 100%
      - background-size: cover
      - background-position: center
      - opacity: 0.5
    ncarte:
      - position: absolute
      - left: 10px
      - top: '-3px'
    eclairage:
      - position: absolute
      - left: 11%
      - top: 20%
    nplafonnier:
      - position: absolute
      - left: 32%
      - top: 6%
    plafonnier:
      - position: absolute
      - left: 33%
      - top: 17%
    nlampadaire:
      - position: absolute
      - left: 45%
      - top: 11%
    lampadaire:
      - position: absolute
      - left: 47%
      - top: 17%
    nlampe_poele:
      - position: absolute
      - left: 65%
      - top: 6%
    lampe_poele:
      - position: absolute
      - left: 64%
      - top: 17%
    nlampe_biblio:
      - position: absolute
      - left: 78%
      - top: 6%
    lampe_biblio:
      - position: absolute
      - left: 80%
      - top: 17%
    temp_value:
      - width: 19%
      - position: absolute
      - left: 11%
      - top: 35%
    temp:
      - width: 40px
      - height: 40px
      - position: absolute
      - left: 5%
      - top: 32%
    ambiances:
      - position: absolute
      - left: 11%
      - top: 48%
    ndiner:
      - position: absolute
      - left: 43%
      - top: 34%
    diner:
      - position: absolute
      - left: 41%
      - top: 45%
    ntv:
      - position: absolute
      - left: 59%
      - top: 34%
    tv:
      - position: absolute
      - left: 61%
      - top: 45%
    neteindre:
      - position: absolute
      - left: 80%
      - top: 34%
    eteindre:
      - position: absolute
      - left: 79%
      - top: 45%
    volet_canape:
      - position: absolute
      - left: 11%
      - top: 68%
    vcup:
      - position: absolute
      - left: 42%
      - top: 65%
    vcstop:
      - position: absolute
      - left: 57%
      - top: 65%
    vcdown:
      - position: absolute
      - left: 72%
      - top: 65%
    volet_biblio:
      - position: absolute
      - left: 11%
      - top: 85%
    vbup:
      - position: absolute
      - left: 53%
      - top: 82%
    vbstop:
      - position: absolute
      - left: 68%
      - top: 82%
    vbdown:
      - position: absolute
      - left: 83%
      - top: 82%

Un autre exemple avec un custom_field basé sur une carte autre qu’une button-card (bar-card) :

type: custom:stack-in-card
mode: vertical
background: true
card_mod:
  style: |
    ha-card {
      border: none;
      background-color: rgba(75,75,76,1.0);
    }
cards:
  - type: custom:button-card
    aspect_ratio: 1/0.7
    tap_action:
      action: none
    hold_action:
      action: none
    custom_fields:
      ncarte:
        card:
          type: custom:button-card
          name: Voiture
          tap_action:
            action: none
          hold_action:
            action: none
          lock:
            enabled: true
            exemptions: []
          styles:
            card:
              - border-radius: 0%
              - border: none
              - background-color: rgba(75,75,76,1.0)
              - height: 40px
            lock:
              - opacity: 0
            name:
              - font-size: 1.4em
              - font-weight: bold
              - justify-self: start
              - padding-left: 10px
              - color: rgba(0,0,0,0.6)
      nkilometrage:
        card:
          type: custom:button-card
          name: 'Kilométrage total :'
          styles:
            card:
              - background-color: rgba(75,75,76,0.0)
              - border-radius: 0%
              - border: none
              - height: 40px
            name:
              - font-size: 0.8em
              - font-weight: bold
              - color: lightgray
              - justify-self: end
              - padding-right: 5px
      kilometrage:
        card:
          type: custom:button-card
          entity: sensor.sensor.lsjwhxxxxxxxxxx_mileage
          show_name: false
          show_icon: false
          show_state: true
          tap_action:
            action: none
          hold_action:
            action: none
          lock:
            enabled: true
            exemptions: []
          styles:
            card:
              - border-radius: 0%
              - border: none
              - background-color: rgba(75,75,76,0.0)
              - height: 40px
            lock:
              - opacity: 0
            state:
              - font-size: 1.1em
              - font-weight: bold
              - color: lightgray
              - justify-self: end
      mgicon:
        card:
          type: custom:button-card
          icon: phu:mg
          show_icon: true
          styles:
            card:
              - border-radius: 0%
              - border: none
              - background-color: rgba(75,75,76,0.0)
              - height: 40px
            icon:
              - color: lightgray
              - padding-left: 10px
      fond:
        card:
          type: custom:button-card
          tap_action:
            action: none
          hold_action:
            action: none
          styles:
            card:
              - border-radius: 0%
              - border: none
              - background-color: rgba(75,75,76,0.0)
              - aspect-ratio: 2/1
      ncharge:
        card:
          type: custom:button-card
          name: 'Niveau de charge :'
          styles:
            card:
              - border-radius: 0%
              - border: none
              - background-color: rgba(75,75,76,1.0)
              - height: 40px
            name:
              - font-size: 0.8em
              - font-weight: bold
              - color: lightgray
              - justify-self: start
              - align-self: end
              - padding-left: 20px
              - padding-top: 12px
      charge_en_cours:
        card:
          type: custom:button-card
          entity: binary_sensor.sensor.lsjwhxxxxxxxxxx_battery_charging
          name: Charge en cours
          show_state: false
          show_icon: false
          tap_action:
            action: none
          hold_action:
            action: none
          state:
            - value: 'off'
              styles:
                name:
                  - color: rgba(0,0,0,0.0)
            - value: 'on'
              styles:
                name:
                  - animation: colorswap 5s linear infinite
          styles:
            card:
              - border: none
              - background-color: rgba(75,75,76,1.0)
            name:
              - font-size: 1.0em
              - font-weight: bold
              - justify-self: start
              - align-self: end
              - padding-top: 7px
          extra_styles: |
            @keyframes colorswap {
              0% {
                color: rgba(0,0,0,0.0);
              }
              25% {
                color: rgba(0,0,0,0.3);
              }
              50% {
                color: rgba(0,0,0,0.0);
              }
              75% {
                color: rgba(0,0,0,0.3);
              }
              100% {
                color: rgba(0,0,0,0.0);
              }
            }
      icone_charge_en_cours:
        card:
          type: custom:button-card
          entity: binary_sensor.sensor.lsjwhxxxxxxxxxx_battery_charging
          show_icon: false
          show_name: false
          show_state: false
          aspect_ratio: 1/1
          tap_action:
            action: none
          hold_action:
            action: none
          state:
            - value: 'off'
              styles:
                card:
                  - background-color: rgba(75,75,76,0.0)
                  - border: none
            - value: 'on'
              styles:
                card:
                  - animation: pictureswap 3s linear infinite
                  - background-size: cover
                  - background-color: rgba(75,75,76,0.0)
                  - border: none
          extra_styles: |
            @keyframes pictureswap {
              0% {
                background-image: url("/local/images/icones/charge_1.png");
              }
              25% {
                background-image: url("/local/images/icones/charge_2.png");
              }
              50% {
                background-image: url("/local/images/icones/charge_3.png");
              }
              75% {
                background-image: url("/local/images/icones/charge_4.png");
              }
              100% {
                background-image: url("/local/images/icones/charge_5.png");
              }
            }
      bouton_config:
        card:
          type: custom:button-card
          styles:
            card:
              - background-color: rgba(211,211,211,1.0)
              - background-image: url(/local/images/icones/MG_config.png)
              - background-size: cover
              - border-radius: 50%
              - height: 48px
              - width: 48px
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
              - border: 2px rgba(211,211,211,1.0) outset
      bouton_info:
        card:
          type: custom:button-card
          styles:
            card:
              - background-color: rgba(211,211,211,1.0)
              - background-image: url(/local/images/icones/MG_info.png)
              - background-size: cover
              - border-radius: 50%
              - width: 48px
              - height: 48px
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
              - border: 2px rgba(211,211,211,1.0) outset
      bouton_charge:
        card:
          type: custom:button-card
          entity: binary_sensor.sensor.lsjwhxxxxxxxxxx_charger_connected
          show_name: false
          show_icon: false
          state:
            - value: 'off'
              styles:
                card:
                  - height: 0px
                  - width: 0px
                  - border: none
            - value: 'on'
              styles:
                card:
                  - height: 48px
                  - width: 48px
                  - border: 2px rgba(211,211,211,1.0) outset
          styles:
            card:
              - background-color: rgba(211,211,211,1.0)
              - background-image: url(/local/images/icones/MG_charge.png)
              - background-size: cover
              - border-radius: 50%
              - box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5)
    styles:
      card:
        - border: none
      custom_fields:
        ncarte:
          - position: absolute
          - left: 0px
          - top: 0px
          - width: 100%
        nkilometrage:
          - position: absolute
          - left: 22%
          - top: 0px
          - width: 38%
        kilometrage:
          - position: absolute
          - left: 60%
          - top: 0px
          - width: 25%
        mgicon:
          - position: absolute
          - left: 85%
          - top: 0px
          - width: 15%
        fond:
          - background-image: url(/local/images/voiture.png)
          - position: absolute
          - left: 0
          - top: 40px
          - width: 100%
          - background-size: cover
          - background-position: center
          - opacity: 1
        ncharge:
          - position: absolute
          - width: 100%
          - left: 0%
          - top: 227px
        charge_en_cours:
          - position: absolute
          - width: 35%
          - left: 42%
          - top: 225px
        icone_charge_en_cours:
          - position: absolute
          - left: 80%
          - top: 217px
          - width: 60px
        bouton_config:
          - position: absolute
          - left: 85%
          - top: 50px
        bouton_info:
          - position: absolute
          - left: 85%
          - top: 110px
        bouton_charge:
          - position: absolute
          - left: 85%
          - top: 170px
  - type: custom:bar-card
    entities:
      - entity: sensor.sensor.lsjwhxxxxxxxxxx_soc
    height: 30px
    positions:
      icon: 'off'
      indicator: 'off'
      name: 'off'
    severity:
      - color: Red
        from: 0
        to: 25
      - color: Orange
        from: 25.1
        to: 50
      - color: DeepSkyBlue
        from: 50.1
        to: 100
    decimal: 1
    unit_of_measurement: '%'
    card_mod:
      style: |-
        bar-card-currentbar, bar-card-backgroundbar {
          border-radius: 10px;
          box-shadow: 2px 2px 4px 0px rgba(32,32,32,0.5);
          border: 2px rgba(211,211,211,1.0) outset;
        }
        bar-card-value {
          margin: auto;
          font-size: 16px;
          font-weight: bold;
          color: White;
        }
        bar-card-card {
          margin-top: -10px;
          margin-bottom: 0px;
        }
        ha-card {
          box-shadow: none;
          border: none;
          margin: -5px;
          background-color: rgb(250,250,250);
          --ha-card-header-font-size: 18px;
        }
  - type: custom:button-card
    custom_fields:
      autonomie:
        card:
          type: custom:button-card
          name: 'Autonomie restante :'
          styles:
            card:
              - border: none
              - border-radius: 0%
              - background-color: rgba(0,0,0,0.0)
            name:
              - font-size: 0.8em
              - font-weight: bold
              - color: lightgray
      valeur_autonomie:
        card:
          type: custom:button-card
          entity: sensor.lsjwhxxxxxxxxxx_range
          numeric_precision: 0
          show_icon: false
          show_name: false
          show_state: true
          styles:
            card:
              - border: none
              - border-radius: 0%
              - background-color: rgba(0,0,0,0.0)
            state:
              - font-size: 1.1em
              - font-weight: bold
              - color: lightgray
    styles:
      card:
        - border: none
        - height: 30px
        - margin-top: '-10px'
      custom_fields:
        autonomie:
          - position: absolute
          - top: 4px
          - left: 160px
        valeur_autonomie:
          - position: absolute
          - top: 3px
          - left: 300px