Dans le tableau de bord de Home Assistant, il est possible de configurer une carte pour que son icône soit différente selon l'état de l'entité.
Les icônes seront choisies dans la bibliothèque Material Design.
Dans cette fiche :
La carte de type Markdown permet de spécifier des conditions à l'aide d'un modèle.
Dans sa forme la plus simple, le modèle fera afficher un texte différent selon l'état. C'est déjà mieux que le texte « Activé » ou « Désactivé ».
Pour afficher une icône, ou mieux, une icône suivie d'un texte, entrez plutôt ceci :
{% if is_state('input_boolean.porte_virtuelle', 'on') %}
<ha-icon icon="mdi:door-open"></ha-icon> Ouverte
{% else %}
<ha-icon icon="mdi:door-closed"></ha-icon> Fermée
{% endif %}
La carte prendra désormais cette apparence sur le tableau de bord.
L'intégration Template, installée par défaut dans Home Assistant, est une autre solution pour créer une entité dont l'icône pourra être différente selon l'état d'un capteur.
L'utilisation de cette intégration se fait en ajoutant une entrée dans le fichier configuration.yaml avec la mention platform: template.
La technique consiste à ajouter une couche par-dessus un capteur. Dans le tableau de bord, on ajoutera une carte qui travaille avec cette couche plutôt que directement avec le capteur.
Dans l'exemple qui suit, les couleurs permettent de faire des liens entre les différentes parties du code.
La valeur de l'entité provient d'un capteur virtuel de type input_boolean. Il s'agira du mot Activé ou Désactivé.
L'icône de l'entité est définie par un modèle qui réagit à l'état de ce même capteur virtuel.
sensor:
- platform: template
sensors:
porte_virtuelle:
friendly_name: Porte virtuelle
value_template: "{{ states('input_boolean.porte_virtuelle') }}"
icon_template: >-
{% if is_state('input_boolean.porte_virtuelle', 'on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
Il est possible de modifier la valeur pour utiliser un texte plus significatif.
sensor:
- platform: template
sensors:
porte_virtuelle:
friendly_name: Porte virtuelle
value_template: >-
{% if is_state('input_boolean.porte_virtuelle', 'on') %}
Ouverte
{% else %}
Fermée
{% endif %}
icon_template: >-
{% if is_state('input_boolean.porte_virtuelle', 'on') %}
mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
Après avoir rechargé les configurations, il est possible d'ajouter une carte dans le tableau de bord pour représenter cette nouvelle entité.
Dans l'exemple précédent, l'entité s'appelle porte_virtuelle et elle prend sa valeur d'une autre entité qui s'appelle elle aussi porte_virtuelle.
Lors de la configuration de la carte, il faut prendre soin de choisir l'entité dont le domaine est sensor puisque c'est pour elle que l'icône personnalisée a été définie.
Voici la carte d'entité dont l'icône et la valeurs proviennent de l'entité sensor.porte_virtuelle.
En comparaison, voici ce qu'on aurait obtenu avec une carte d'entité associée à l'entité input_boolean.porte_virtuelle.
Un résultat encore plus intéressant peut être obtenu à l'aide d'une carte de type Bouton.
Ici aussi, il faut associer la carte à l'entité sensor.porte_virtuelle, soit celle pour laquelle l'icône change selon l'état.
Un clic sur la carte modifiera l'état de l'entité input_boolean.porte_virtuelle, ce qui affectera automatiquement la valeur et l'icône de l'autre.
Et voilà le résultat!
Dans les exemples précédents, on avait toujours le choix entre deux états. Un if et un else étaient suffisants.
Je vous montre ici comment faire si on doit choisir parmi trois états différents.
icon_template: >-
{% if is_state('input_select.etat_general', 'Excellent') %}
mdi:rocket-launch
{% elif is_state('input_select.etat_general', 'Moyen') %}
mdi:scale-balance
{% else %}
mdi:alert
{% endif %}
▼Publicité
