Couleur de l'entité en fonction de la valeur

Mon problème

Bonjour à tous,

J’ai affiché mes entités dans une carte :
image

Je souhaite changer la couleur de la valeur en fonction de cette valeur. Par exemple pour le pH :

  • Si la valeur est inférieur à 6,6 ou supérieure à 8,4 la valeur s’affiche en rouge.
  • Si la valeur est entre 6,6 et 7,2 ou 7,6 et 8,4 en orange.
  • Sinon laisser en noir tel quel.

Voila le code de ma carte :

type: entities
entities:
  - entity: sensor.pool_season
  - entity: sensor.pool_temperature
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    entities:
      - entity: sensor.pool_temperature
        name: Temp.
      - entity: sensor.pool_ph
        name: pH
      - entity: sensor.pool_orp
        name: RedOx
      - entity: sensor.pool_salinity
        name: Sel
  - entity: sensor.pool_pump
    icon: 'mdi:calendar-clock'
  - entity: switch.piscine_filtration
    type: 'custom:multiple-entity-row'
    name: Filtration
    icon: 'mdi:engine'
    toggle: true
    state_color: true
    entities:
      - entity: sensor.pool_pump_hours
        name: Horaire
      - entity: input_text.pool_pump_pivot
        name: Pivot
      - entity: sensor.pool_pump_duration
        name: Durée
title: Piscine

Je n’ai rien trouvé sur comment changer la couleur en fonction de la valeur. Si quelqu’un a des pistes à me donner je suis preneur.

Merci d’avance.

Ma configuration


System Health

version core-2021.3.4
installation_type Home Assistant OS
dev false
hassio true
docker true
virtualenv false
python_version 3.8.7
os_name Linux
os_version 5.4.99
arch x86_64
timezone Europe/Paris
Home Assistant Community Store
GitHub API ok
Github API Calls Remaining 4937
Installed Version 1.11.3
Stage running
Available Repositories 842
Installed Repositories 10
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Hass.io
host_os Home Assistant OS 5.12
update_channel stable
supervisor_version supervisor-2021.03.6
docker_version 19.03.13
disk_total 30.8 GB
disk_used 6.0 GB
healthy true
supported true
board ova
supervisor_api ok
version_api ok
installed_addons Grafana (6.2.0), UniFi Controller (0.20.3), Node-RED (8.2.1), Visual Studio Code (3.3.0), InfluxDB (4.0.3), File editor (5.2.0), Terminal & SSH (9.1.0), Home Assistant Google Drive Backup (0.103.1), Samba share (9.3.1)
Lovelace
dashboards 2
resources 7
views 4
mode storage
___

Voici une piste :

animate

type: entities
entities:
  - entity: input_number.hacf_0_1
  - entity: input_number.hacf_0_1
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    entities:
      - entity: input_number.hacf_0_1
        name: Temp.
      - entity: input_number.hacf_0_1
        name: pH
      - entity: input_number.hacf_0_1
        name: RedOx
      - entity: input_number.hacf_0_1
        name: Sel
    style: |
      hui-generic-entity-row > div > div:nth-child(1) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: blue;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: green;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(2) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: red;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: orange;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(3) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: yellow;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: pink;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(4) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: magenta;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: turquoise;
        {% endif %}
      }

Et en piochant par-ci par-là des animations :

animate

type: entities
entities:
  - entity: input_number.hacf_0_1
  - entity: input_number.hacf_0_1
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    entities:
      - entity: input_number.hacf_0_1
        name: Temp.
      - entity: input_number.hacf_0_1
        name: pH
      - entity: input_number.hacf_0_1
        name: RedOx
      - entity: input_number.hacf_0_1
        name: Sel
    style: |
      hui-generic-entity-row > div > div:nth-child(1) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: blue;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: green;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(2) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: red;
          border-radius: 50%;
          box-shadow: rgb(250 57 57 / 60%) 0px 0px 0px 0px, rgb(250 57 57 / 60%) 0px 0px 0px 6px inset;
          animation: baignade_interdite 1s ease infinite;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: orange;
          animation: baignade_dangereuse 1s ease infinite;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(3) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: yellow;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: pink;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(4) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: magenta;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: turquoise;
        {% endif %}
      }
      @keyframes baignade_interdite {
        25% {
          transform: scale(1.3);

        }  
        100% {
          box-shadow: 0 0 0 10px rgba(128, 0, 128, 0), 0 0 0 99px rgba(128, 0, 128, 0) inset;
          transform: scale(1)
        } 
      }
      @keyframes baignade_dangereuse {
        0%, 50%, 100% {
          transform: scale(1);
        }      
        25%,75% {
          transform: scale(1.2);
        }    
      }

Edit: Et enfin avec le changement de la taille de l’information secondaire :

type: entities
entities:
  - entity: input_number.hacf_0_1
  - entity: input_number.hacf_0_1
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    secondary_info:
      name: false
      entity: input_boolean.hacf
    entities:
      - entity: input_number.hacf_0_1
        name: Temp.
      - entity: input_number.hacf_0_1
        name: pH
      - entity: input_number.hacf_0_1
        name: RedOx
      - entity: input_number.hacf_0_1
        name: Sel
    style:
      hui-generic-entity-row:
        $: |
          .secondary {
            font-size: 10px;
            line-height: initial;
          }
      .: |
        hui-generic-entity-row > div > div:nth-child(1) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: blue;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: green;
          {% endif %}
        }
        hui-generic-entity-row > div > div:nth-child(2) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: red;
            border-radius: 50%;
            box-shadow: rgb(250 57 57 / 60%) 0px 0px 0px 0px, rgb(250 57 57 / 60%) 0px 0px 0px 6px inset;
            animation: baignade_interdite 1s ease infinite;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: orange;
            animation: baignade_dangereuse 1s ease infinite;
          {% endif %}
        }
        hui-generic-entity-row > div > div:nth-child(3) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: yellow;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: pink;
          {% endif %}
        }
        hui-generic-entity-row > div > div:nth-child(4) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: magenta;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: turquoise;
          {% endif %}
        }
        @keyframes baignade_interdite {
          25% {
            transform: scale(1.3);
        
          }  
          100% {
            box-shadow: 0 0 0 10px rgba(128, 0, 128, 0), 0 0 0 99px rgba(128, 0, 128, 0) inset;
            transform: scale(1)
          } 
        }
        @keyframes baignade_dangereuse {
          0%, 50%, 100% {
            transform: scale(1);
          }      
          25%,75% {
            transform: scale(1.2);
          }    
        }

En espérant que ça te plaise :smiling_face_with_three_hearts:

2 « J'aime »

Au top du top @Clemalex comme toujours :champagne:

J’adore l’animation pour le rouge, je l’ai intégré direct. J’ai un peu du mal avec les styles pour comprendre cette histoire de « $ » de « | » ou de « . ». J’ai plus des connaissances basique du CSS :slight_smile: Du coup j’avais bidouillé un truc pour réduire la police du secondary_info qui fonctionne mais sans trop avoir vraiment compris comment cela fonctionnais mais ca empêche ton style de fonctionner quand je l’applique. Voila le code complet :

type: entities
entities:
  - entity: sensor.pool_season
  - entity: sensor.pool_temperature
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    secondary_info:
      entity: sensor.pool_analysed_at
      name: false
    entities:
      - entity: sensor.pool_temperature
        name: Temp.
        unit: false
      - entity: sensor.pool_ph
        name: pH
        unit: false
      - entity: sensor.pool_orp
        name: RedOx
        unit: false
      - entity: sensor.pool_salinity
        name: Sel
        unit: false
    style: |
      hui-generic-entity-row > div > div:nth-child(2) > div {
        {% set ph = states('sensor.pool_ph')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: red;
          border-radius: 50%;
          box-shadow: rgb(250 57 57 / 60%) 0px 0px 0px 0px, rgb(250 57 57 / 60%) 0px 0px 0px 6px inset;
          animation: baignade_interdite 1s ease infinite;
        {% elif (ph >= 6.6 and ph < 7.2) or (ph > 7.4 and ph <= 8.4) %}
          color: orange;
        {% endif %}
      }
      @keyframes baignade_interdite {
        25% {
          transform: scale(1.3);
        }  
        100% {
          box-shadow: 0 0 0 10px rgba(128, 0, 128, 0), 0 0 0 99px rgba(128, 0, 128, 0) inset;
          transform: scale(1)
        }
      }
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .: |
              .secondary {
                font-size: 10px;
                line-height: initial;
  - entity: sensor.pool_pump
    icon: 'mdi:calendar-clock'
  - entity: switch.piscine_filtration
    type: 'custom:multiple-entity-row'
    name: Filtration
    icon: 'mdi:engine'
    toggle: true
    state_color: true
    secondary_info:
      entity: sensor.pool_pump_duration
      name: 'Ajourd''hui : '
      styles:
        font-size: 10px
        line-height: initial
    entities:
      - entity: sensor.pool_pump_hours
        name: Horaire
        styles:
          white-space: nowrap
      - entity: input_text.pool_pump_pivot
        name: Pivot
    card_mod:
      style:
        hui-generic-entity-row:
          $:
            .: |
              .secondary {
                font-size: 10px;
                line-height: initial;
  - entity: sensor.pool_pump_frost
    type: 'custom:multiple-entity-row'
    entities:
      - entity: weather.pomponne
        attribute: temperature
        name: Temp
title: Piscine

Et si j’enlève le card_mod qui réduit la taille du secondary_info, cella fonctionne. Je suis sur que tu as une idée de comment faire fonctionner les deux ensemble :slight_smile:

Un énorme merci pour ta précédente réponse.

2 messages ont été scindés en un nouveau sujet : Relevés piscine

C’est sur une autre entité donc applique le style de card-mod à l’entité concernée (à reproduire pour chaque entité qui ont une information secondaire (secondary_info), c’est pas le mieux en terme de nombre de ligne de code, mais le plus efficace en terme d’apprentissage :wink: ):

type: entities
entities:
  - entity: input_number.hacf_0_1
    secondary_info: entity-id
    style:
      hui-generic-entity-row:
        $:
          .: |
            .secondary {
              font-size: 3px;
              line-height: initial;
            }
  - entity: input_number.hacf_0_1
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    entities:
      - entity: input_number.hacf_0_1
        name: Temp.
      - entity: input_number.hacf_0_1
        name: pH
      - entity: input_number.hacf_0_1
        name: RedOx
      - entity: input_number.hacf_0_1
        name: Sel
    style: |
      span{
        font-size: 20px !important;
      }
      hui-generic-entity-row > div > div:nth-child(1) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: blue;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: green;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(2) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: red;
          border-radius: 50%;
          box-shadow: rgb(250 57 57 / 60%) 0px 0px 0px 0px, rgb(250 57 57 / 60%) 0px 0px 0px 6px inset;
          animation: baignade_interdite 1s ease infinite;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: orange;
          animation: baignade_dangereuse 1s ease infinite;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(3) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: yellow;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: pink;
        {% endif %}
      }
      hui-generic-entity-row > div > div:nth-child(4) > div{
        {% set ph = states('input_number.hacf_0_1')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: magenta;
        {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
          color: turquoise;
        {% endif %}
      }
      @keyframes baignade_interdite {
        25% {
          transform: scale(1.3);

        }  
        100% {
          box-shadow: 0 0 0 10px rgba(128, 0, 128, 0), 0 0 0 99px rgba(128, 0, 128, 0) inset;
          transform: scale(1)
        } 
      }
      @keyframes baignade_dangereuse {
        0%, 50%, 100% {
          transform: scale(1);
        }      
        25%,75% {
          transform: scale(1.2);
        }    
      }
  - entity: input_number.hacf_0_1
    secondary_info: entity-id
    style:
      hui-generic-entity-row:
        $:
          .: |
            .secondary {
              font-size: 3px;
              line-height: initial;
            }
1 « J'aime »

En fait c’est dans la même entité où je veux appliquer le style que tu m’as donné et réduire la taille de l’info secondaire. Là je veux que la date de MAJ ai la même taille que les libellés des entités de la ligne.

Pour appliquer ton style on doit commencer par un pipe mais pour réduire la taille, on doit pas utiliser le pipe. J’ai bien essayé de mettre deux entrées style mais biensur cella ne fonctionne pas :slight_smile:

  - entity: sensor.pool_temperature
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    secondary_info:
      entity: sensor.pool_analysed_at
      name: false
    entities:
      - entity: sensor.pool_temperature
        name: Temp.
        unit: false
      - entity: sensor.pool_ph
        name: pH
        unit: false
      - entity: sensor.pool_orp
        name: RedOx
        unit: false
      - entity: sensor.pool_salinity
        name: Sel
        unit: false
    style: |
      hui-generic-entity-row > div > div:nth-child(2) > div {
        {% set ph = states('sensor.pool_ph')|float  %}
        {% if ph < 6.6 or ph > 8.4 %}
          color: red;
          border-radius: 50%;
          box-shadow: rgb(250 57 57 / 60%) 0px 0px 0px 0px, rgb(250 57 57 / 60%) 0px 0px 0px 6px inset;
          animation: baignade_interdite 1s ease infinite;
        {% elif (ph >= 6.6 and ph < 7.2) or (ph > 7.4 and ph <= 8.4) %}
          color: orange;
        {% endif %}
      }
      @keyframes baignade_interdite {
        25% {
          transform: scale(1.3);
        }  
        100% {
          box-shadow: 0 0 0 10px rgba(128, 0, 128, 0), 0 0 0 99px rgba(128, 0, 128, 0) inset;
          transform: scale(1)
        }
      }
    style:
      hui-generic-entity-row:
        $: |
          .secondary {
            font-size: 10px;
            line-height: initial;
          }

Tu ne peux pas avoir plusieurs clé/propriétés au même niveau en YAML, il ne faut donc pas dupliquer la clé style.

Voici ce que tu demandes :

type: entities
entities:
  - entity: input_number.hacf_0_1
  - entity: input_number.hacf_0_1
    type: 'custom:multiple-entity-row'
    name: Mesures de l'eau
    icon: 'mdi:chart-bell-curve'
    show_state: false
    secondary_info:
      name: false
      entity: input_boolean.hacf
    entities:
      - entity: input_number.hacf_0_1
        name: Temp.
      - entity: input_number.hacf_0_1
        name: pH
      - entity: input_number.hacf_0_1
        name: RedOx
      - entity: input_number.hacf_0_1
        name: Sel
    style:
      hui-generic-entity-row:
        $: |
          .secondary {
            font-size: 10px;
            line-height: initial;
          }
      .: |
        hui-generic-entity-row > div > div:nth-child(1) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: blue;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: green;
          {% endif %}
        }
        hui-generic-entity-row > div > div:nth-child(2) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: red;
            border-radius: 50%;
            box-shadow: rgb(250 57 57 / 60%) 0px 0px 0px 0px, rgb(250 57 57 / 60%) 0px 0px 0px 6px inset;
            animation: baignade_interdite 1s ease infinite;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: orange;
            animation: baignade_dangereuse 1s ease infinite;
          {% endif %}
        }
        hui-generic-entity-row > div > div:nth-child(3) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: yellow;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: pink;
          {% endif %}
        }
        hui-generic-entity-row > div > div:nth-child(4) > div{
          {% set ph = states('input_number.hacf_0_1')|float  %}
          {% if ph < 6.6 or ph > 8.4 %}
            color: magenta;
          {% elif (ph > 6.5 and ph < 7.3) or (ph > 7.5 and ph < 8.5) %}
            color: turquoise;
          {% endif %}
        }
        @keyframes baignade_interdite {
          25% {
            transform: scale(1.3);
        
          }  
          100% {
            box-shadow: 0 0 0 10px rgba(128, 0, 128, 0), 0 0 0 99px rgba(128, 0, 128, 0) inset;
            transform: scale(1)
          } 
        }
        @keyframes baignade_dangereuse {
          0%, 50%, 100% {
            transform: scale(1);
          }      
          25%,75% {
            transform: scale(1.2);
          }    
        }

Merci ca marche à la perfection. Je n’ai plus qu’a écrite toutes mes règles maintenant :slight_smile:
Va falloir que j’améliore mes connaissances en CSS en même temps !!!

Bonjour à tous,
quel doit etre le code pour colorer la valeur de température selon les degrés?
Ex: bleu en dessous de 20°C, ORange entre 20 et 25, et rouge au dessus de 25?

Capture

Personne pour m’aider? Je souhaiterais juste coloré, la temperature mais pas le nom de de l’entité. J’ai reussi cela, mais cela colore aussi le nom de l’entité.

Capture

type: entities
entities:
  - entity: sensor.temperature_abri_piscine
    card_mod:
      style: |
        :host {
          color:
            {% if states(config.entity) | int < 10 %} 
              lightblue
            {% elif states(config.entity) | int < 18 %}
              #5294E2
            {% elif states(config.entity) | int < 20 %}
              #ffdf85
            {% elif states(config.entity) | int < 23 %}
              orange
            {% elif states(config.entity) | int < 50 %}
              red
            {% endif %}
            ;
        }

Tu trouveras toutes tes réponses dans ce post :

https://forum.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447

Bonjour , je shouhaite aussi changer la couleur de l’entité consommation du jour en orange si je depasse le standard , en rouuge si je depasse le maxi
mais cela ne fonctionne pas …
qui peut me donner un coup de main
voila mon ecran
image
voici le texte associé

`type: custom:vertical-stack-in-card
cards:

  • type: entities
    card_mod:
    style: |
    .card-content div {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    }
    entities:
    • entity: sensor.basement_watermeter_liters_hourly
      type: custom:multiple-entity-row
      icon: mdi:water-check
      name: Conso
      show_state: false
      entities:
      • entity: sensor.water_mensuel
        name: Mois
        format: precision0
      • entity: sensor.cout_mensuel_eau
        format: precision2
        name: Cout mensuel
      • entity: input_boolean.notification_envoyee
        name: Notification
    • entity: input_number.consommation_journaliere_standard
      type: custom:multiple-entity-row
      icon: mdi:water-check
      name: Total
      show_state: false
      entities:
      • entity: sensor.basement_watermeter_liters_hourly
        name: Actuel
        format: precision0
      • entity: sensor.water_journalier
        name: Jour
        format: precision0
      • entity: input_number.consommation_journaliere_calculee
        name: Hier
        format: precision0
      • entity: input_number.consommation_journaliere_standard
        name: Std
        format: precision0
      • entity: input_number.consommation_journaliere_max
        name: Maxi
        format: precision0
        style: >
        hui-generic-entity-row > div > div:nth-child(2) > div{ {% set conso =
        states(‹ sensor.water_journalier ›)|float %} {% set consomax =
        states(‹ input_number.consommation_journaliere_max ›)|float %} {% set
        consostd
        =states(‹ input_number.consommation_journaliere_standard ›)|float %} {%
        if conso > maxconso %}
        color: red;
        {% elif (conso > consostd) %}
        color: orange;
        {% endif %} }
  • type: custom:mod-card
    style:
    .: |
    ha-card {
    margin: -4px 10px 0 0px;
    }
    card:
    type: energy-date-selection
  • type: energy-water-graph
    style: |
    ha-card {
    –divider-color: #44739e;
    top: -10px;
    }
    `

voici la copie en image