Image multistate

Entraide Home Assistant
1

Bonjour,

Je vous expose mon problème, j’ai un combiné réfrigérateur/congélateur, sur lequel j’ai installé 2 détecteurs d’ouvertes (1 sur la porte du réfrigérateur et l’autre sur la porte du congélateur). Comment faire pour obtenir ce résultat (sur une seule carte) :

Les 2 portes fermées :
Frigo_PF

La porte du congélateur ouverte :
Frigo_PO1

et enfin la porte du réfrigérateur ouverte :
Frigo_PO2

Ma configuration

Version core-2026.1.3
Type d’installation Home Assistant OS
Développement false
Supervisor true
Docker true
Architecture des conteneurs amd64
Utilisateur root
Environnement virtuel false
Version de Python 3.13.11
Famille du système d’exploitation Linux
Version du système d’exploitation 6.12.63-haos
Architecture du processeur x86_64
Fuseau horaire Europe/Paris
Répertoire de configuration /config

Home Assistant Community Store

GitHub API ok
GitHub Content ok
GitHub Web ok
HACS Data ok
GitHub API Calls Remaining 5000
Installed Version 2.0.5
Stage running
Available Repositories 2674
Downloaded Repositories 52

Home Assistant Cloud

Connecté false
Accéder au serveur de certificats ok
Accéder au serveur d’authentification ok
Accéder à Home Assistant Cloud ok

Home Assistant Supervisor

Système d’exploitation hôte Home Assistant OS 17.0
Canal de mise à jour stable
Version du Supervisor supervisor-2026.01.1
Version de l’agent 1.8.1
Version de Docker 29.1.3
Taille total du disque 28.0 GB
Taille du disque utilisé 7.4 GB
Serveurs de noms 192.168.1.254, fd0f:ee:b0::1
Sain true
Prise en charge true
host_connectivity true
supervisor_connectivity true
ntp_synchronized true
virtualization
Tableau de bord generic-x86-64
API du Supervisor ok
Version de l’API ok
Modules complémentaires installés Get HACS (1.3.1), Node-RED (20.2.4), Z-Wave JS (0.29.1), Simple Scheduler (3.2.2), File editor (5.8.0), Mosquitto broker (6.5.2), Zigbee2MQTT (2.8.0-1), Music Assistant (2.7.6)
2

Bonjour,

Ca peut se faire sans difficulté avec une custom:button-card par exemple.

3

Salut,

C’est natif aussi avec les cartes picture-elements

type: picture-elements
image: /local/floorplan.png
elements:
  - type: image
    entity: light.living_room
    tap_action:
      action: toggle
    image: /local/living_room.png
    state_image:
      "off": /local/living_room_off.png
4

Oui, mais là, il veut une seule carte avec les images qui changent en fonction de l’état des deux capteurs (si j’ai bien compris). Il faut donc dissocier la carte d’un capteur (et ça je sais le faire avec custom:button-card mais pas avec une autre carte, mais bon, je ne me sers pas d’autres cartes :grin:)

5

Oui c’est ce que je comprends aussi et c’est tout à fait ce que fait picture-elements:
1 carte, 2 entités, 3 images (ou 4 si plus basique) et c’est réglé

6

Merci à tous pour votre aide.
Btncrd : oui c’est exactement ça
Pulpy-Luke : je vais essayer avec picture-elements

7

Si tu veux, je te ferai un exemple ce WE, je peux même te faire un exemple avec le panneau « avertissement » qui clignote si l’un ou l’autre des capteurs indique qu’une des portes est ouverte voire un halo rouge autour du combiné réfrigérateur-congélateur qui clignote aussi (au même rythme que le panneau ou en décalé) et ça, @Pulpy-Luke aura plus de mal à le faire avec une carte picture-element :grin:

1 « J'aime »
8

Pas besoin de plus

type: picture-elements
image: /local/frigo_blanc.png
elements:
  - type: image
    entity: sensor.capteur_porte
    style:
      left: 50%
      top: 50%
    image: /local/coche_verte.png
    state_image:
      "on": /local/frigo_porte_ouverte.png
  - type: image
    entity: sensor.capteur_congel
    style:
      left: 50%
      top: 50%
    image: /local/flocon.png
    state_image:
      "on": /local/frigo_congel_ouverte.png

A voir si la porte ouverte est on ou off. Et il faut peut-être découper les images avec les bons morceaux

9

Merci à vous deux btncrd et Pulpy-Luke :+1:
Home assistant, quelle communauté :grinning_face: Encore merci à vous
Super entraide :wink:
Btncrd, si tu as le temps, je suis intéressé par ton code, comme je débute sur HA.
Pulpy-Luke, merci pour ton code, j’ essaye rapidement.

10

Voilà un exemple :
essai

le code :

type: custom:button-card
custom_fields:
  halo:
    card:
      type: custom:button-card
      styles:
        card:
          - width: 110px
          - height: 270px
          - background: red
          - opacity: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                return (fridge || freezer) ? '0.9' : '0';
              ]]]
          - border: none
          - border-radius: 12px
          - box-shadow: 0 0 12px 5px rgba(255,0,0,1.0)
          - animation: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                return (fridge || freezer) ? 'halo 1.5s infinite' : 'none';
              ]]]
      extra_styles: |
        @keyframes blink {
          0% { opacity: 1; }
          50% { opacity: 0.2; }
          100% { opacity: 1; }
        }
        @keyframes halo {
          0% {
            transform: scale(1);
            box-shadow: 0 0 8px 4px rgba(255,0,0,1);
          }
          50% {
            transform: scale(1);
            box-shadow: 0 0 25px 12px rgba(255,0,0,1);
          }
          100% {
            transform: scale(1);
            box-shadow: 0 0 8px 4px rgba(255,0,0,1);
          }
        }
  picture:
    card:
      type: custom:button-card
      icon: |
        [[[
          const fridge = states['input_boolean.fridge']?.state === 'on';
          const freezer = states['input_boolean.freezer']?.state === 'on';
          return (fridge || freezer) ? 'mdi:alert' : 'mdi:checkbox-marked';
        ]]]
      show_icon: true
      styles:
        card:
          - width: 131px
          - height: 315px
          - border: none
          - border-radius: 0px
          - background: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                if (fridge)
                  return 'center / contain no-repeat url("/local/images/fridge_open.png")';
                if (freezer)
                  return 'center / contain no-repeat url("/local/images/freezer_open.png")';
                return 'center / contain no-repeat url("/local/images/fridge_closed.png")';
              ]]]
        icon:
          - color: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                return (fridge || freezer) ? 'yellow' : 'rgba(0,192,0,1.0)';
              ]]]
          - background: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                return (fridge || freezer) ? 'rgba(255,0,0,1.0)' : 'rgba(255,255,255,1.0)';
              ]]]
          - border-radius: 10px
          - animation: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                return (fridge || freezer) ? 'blink 1.5s infinite' : 'none';
              ]]]
          - border: |
              [[[
                const fridge = states['input_boolean.fridge']?.state === 'on';
                const freezer = states['input_boolean.freezer']?.state === 'on';
                return (fridge || freezer) ? '1px solid black' : 'none';
              ]]]
          - width: 70px
          - height: 70px
styles:
  card:
    - width: 180px
    - height: 350px
    - border: none
    - box-shadow: none
    - position: relative
  custom_fields:
    halo:
      - position: absolute
      - top: 50%
      - left: 50%
      - transform: translate(-50%, -50%)
    picture:
      - position: absolute
      - top: 50%
      - left: 50%
      - transform: translate(-50%, -50%)

Si tu as besoin d’explications, n’hésite pas :wink:

11

Merci btncrd pour ton aide et le temps passé.
C’est super :+1:
J’essaye demain :wink:

12

Il faudra remplacer les input_boolean.fridge et input_boolean.freezer par tes détecteurs d’ouverture. Pour les images, j’ai fait ça :

fridge_closed
fridge_closed262×631 2.29 KB

freezer_open
freezer_open262×631 3.9 KB

fridge_open
fridge_open262×631 6.97 KB

Les images sont à retravailler avec un logiciel type Gimp pour les remettre en .png avec activation de la transparence.
EDIT : à priori celle ci est conservée si tu fais un copié depuis ce message.

13

btncrd : Merci ça fonctionne super bien. J’ai utilisé des images, nickel. Encore un grand merci. :+1: :wink:
Pulpy-luke : merci également pour ton aide, mais il fallait faire un choix entre les 2 solutions proposées :wink:

Frigo2
Frigo2599×675 34.2 KB

Frigo1
Frigo1703×704 48.7 KB

14

Super :wink:
Passe ton sujet en résolu si c’est bon pour toi.
Au niveau graphisme, @Pulpy-Luke ne pouvait pas lutter avec les cartes de bases mais en revanche, en terme de facilité de mise en oeuvre sa solution était bien plus rapide à faire.
Tu as gagné des images en plus avec ma solution :grin:

15

Bonjour @Gerald,
ca serais plutôt le post de @btncrd Image multistate - #10 par btncrd qu’il faudrais mettre en solution et pas le tiens.
il a quand même fais tout le boulot et t’as donné une solution a ton sujet.

16

On peut faire strictement pareil.. Animation comprise. Après c’est une question de choix, ajouter le js au jinja2 et yaml ça fait juste beaucoup trop à apprendre je trouve

17

Merci à tous.
Vous avez passés du temps pour m’aider, j’en suis très reconnaissant.
J’ espère n’ avoir blessé personne.
Encore un grand merci à vous. :wink: :+1:

2 « J'aime »