Couleur entité selon température

Entraide Home Assistant
1

Bonjour à tous,

J’ai mis en place un plan 3D, avec une carte picture-elements, avec mes lumières, mes cameras, mes températures de frigo, congélateur, freezer.
J’ai bien l’affichage de mes températures sur le plan, en blanc.

Par exemple, je voudrais que la couleur des degrés du congélateur en dessous de -20°C soit verte, et que si la température passe au dessus de -20 l’affichage passe en rouge.
j’avais réussi a mettre ca en place sur des badges:

      - entity: sensor.congelateur_3
        name: Congélo
        style: |
          :host {
            {% set state = states('sensor.congelateur_3') %}
            {% if is_number(state) and state | float < -20 %}
             --label-badge-red: green;
             {% else %}
             --label-badge-red: red;
             {% endif %}
          }

Par contre sur la carte picture-elements, je patauge.
Un peu d’aide serait pas de refus.
Merci``

System Information

version core-2023.5.4
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.10.11
os_name Linux
os_version 6.1.29
arch x86_64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.32.1
Stage running
Available Repositories 1303
Downloaded Repositories 48
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 10.2
update_channel stable
supervisor_version supervisor-2023.06.1
agent_version 1.5.1
docker_version 23.0.6
disk_total 97.7 GB
disk_used 12.2 GB
healthy true
supported true
board ova
supervisor_api ok
version_api ok
installed_addons Samba share (10.0.2), Duck DNS (1.15.0), File editor (5.6.0), Samba Backup (5.0.0), MariaDB (2.6.1), eWeLink Smart Home (1.4.3)
Dashboards
dashboards 1
resources 35
views 16
mode storage
Recorder
oldest_recorder_run 5 juin 2023 à 21:50
current_recorder_run 7 juin 2023 à 20:10
estimated_db_size 428.09 MiB
database_engine mysql
database_version 10.6.12
Sonoff
version 3.5.1 (122751c)
cloud_online 5 / 5
local_online 5 / 5
Spotify
api_endpoint_reachable ok
2

Bonjour,

Regarde dans le tuto suivant, il y an beacoup d’examples

  - type: icon
    icon: mdi:car
    style:
      top: 6%
      left: 40%
      color: red

https://community.home-assistant.io/t/styling-elements-in-picture-elements-card-a-small-tutorial/315252/9

Cordialement,

Abel

4

J’ai trouvé si ça peut servir à d’autres


type: picture-elements
style: |
  ha-card {
      {% set state = states('sensor.frigo_3') %}
      {% if is_number(state) and (state | float < 30 and state | float > 10) %}
      --my-state-color: red;
      {% elif is_number(state) and (state | float < 10 and state | float > 0) %}
      --my-state-color: green;
      {% endif %}
    }

  ha-card {
      {% set state = states('sensor.frizzeur_3') %}
      {% if is_number(state) and (state | float < 20 and state | float > -10) %}
      --my-state-color-1: red;
      {% elif is_number(state) and (state | float < -10 and state | float > -30) %}
      --my-state-color-1: green;
      {% endif %}
    }

  ha-card {
      {% set state = states('sensor.congelateur_3') %}
      {% if is_number(state) and (state | float < 20 and state | float > -10) %}
      --my-state-color-2: red;
      {% elif is_number(state) and (state | float < -10 and state | float > -30) %}
      --my-state-color-2: green;
      {% endif %}
    }

  ha-card {
      {% set state = states('sensor.exterieur_temperature') %}
      {% if is_number(state) and (state | float < -20 and state | float > 0) %}
      --my-state-color-3: red;
      {% elif is_number(state) and (state | float < 30 and state | float > 0) %}
      --my-state-color-3: green;
      {% endif %}
    }
elements:

  - type: state-badge
    entity: sensor.exterieur_temperature
    style:
      top: 50%
      left: 5%
      font-size: 8px
      color: transparent
      '--label-badge-text-color': var(--my-state-color-3)
  - type: state-badge
    entity: sensor.congelateur_3
    style:
      top: 90%
      left: 34%
      font-size: 8px
      color: transparent
      '--label-badge-text-color': var(--my-state-color-2)
  - type: state-badge
    entity: sensor.frigo_3
    style:
      top: 45%
      left: 17%
      font-size: 8px
      color: transparent
      '--label-badge-text-color': var(--my-state-color)
  - type: state-badge
    entity: sensor.frizzeur_3
    style:
      top: 45%
      left: 21%
      font-size: 8px
      color: transparent
      '--label-badge-text-color': var(--my-state-color-1)
image: /local/floor/Eteint.png

IMG_8836
IMG_8836912×711 118 KB

1 « J'aime »
5

YEss ça fonctionne !

Merci pour ton code je viens de l’implémenter et n’étant pas à l’aise avec ces p… de cartes Lovelace, j’ai fini par comprendre qu’iil fallait installer la card-mod 3 du gars, ici :

1 « J'aime »
6

Avec cet exemple tu peux également jouer sur l’entourage du badge, le fond etc… et ça permet de comprendre le codage :ok_hand:
https://community.home-assistant.io/t/styling-elements-in-picture-elements-card-a-small-tutorial/315252/11

1 « J'aime »