Icon qui change selon l'état du capteur dans un custom fields

Bonjour à tous,

je voudrais pouvoir mettre un icon (mdi:door_open ou door-closed) en fonction de l’état dans lequel se trouve ma porte de cuisine.

J’ai pu le faire avec le sensor. lock_porte_cuisine qui se trouve en entité proncipale de la custom button-card (icon lock-closed et lock-open) et qui me donne l’état Verrouillée ou Déverrouillée de la porte

J’arrive avec les custom fields à obtenir l’état verbal de ma porte (Ouverte ou Fermée) mais je ne trouve pas comment faire pour y ajouter l’icon qui va avec. La seule option que j’ai vu c’est avec l’icon qui reste fixe (Ce qui est donné en exemple dans le github des cutom button card.

Je précise que je souhaite pouvoir poser cette icon où je le souhaite sur ma carte comme mes autres custom fields.

Merci par avance pour votre aide.

Ci-dessous le code utilisé pour l’état cerbal de la porte

      custom_fields:
        info_Etat_Porte:
          - top: 20px
          - justify-self: center
          - font-size: 11px
          - position: absolute
          - width: null
          - color: |
              [[[
                if (states['binary_sensor.porte_cuisine'].state === 'off')
                  return "grey"; return "orange";
              ]]]
    custom_fields:
      info_Etat_Porte: |
        [[[
          if (states['binary_sensor.porte_cuisine'].state === "off")
            return "Fermée" ; return "Ouverte";
        ]]]   

Salut à tous,
Mon soucis avance. j’arrive à afficher l’icon mais celui-ci ne chage pas lorsque ma porte est ouverte.

Voici le code que j’ai mis pour cela :

infoEtatPorte: |
        [[[
          return `<ha-icon
          if (states['binary_sensor.ring_capteur_porte_cuisine'].state === "off")
            icon="mdi:door-closed" ; else icon="mdi:door-open";
            >`
        ]]]

J’avoue que je n’e trouve pas comment faire.

Bonjour,

un exemple avec changement d’icone et couleur suivant l’état:

        custom_fields:
          statut: >
            [[[ if (states['input_text.poubelle_verte_statut'].state == "Vider")
            return '<ha-icon icon="mdi:delete" style="width: 30px; height: 30px;
            color: green;"></ha-icon>'; else return '<ha-icon
            icon="mdi:delete-alert" style="width: 30px; height: 30px; color:
            red"></ha-icon>' ]]]   

tu peu tester ce code:

infoEtatPorte: |
  [[[ if (states['binary_sensor.ring_capteur_porte_cuisine'].state == "off")
  return '<ha-icon icon="mdi:door-closed" style="width: 30px; height: 30px;
  color: green;"></ha-icon>'; else return '<ha-icon
  icon="mdi:door-open" style="width: 30px; height: 30px; color:
  orange"></ha-icon>' ]]]   

Salut,

Merci pour ton code cela fonctionne parfaitement

1 « J'aime »