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 :

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 :

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 !!!