Mon objectif
Mon objectif est de réaliser une animation via un gif animé.
Je pourrai changer de gif en fonction de l’état d’une entité.
Je vais dessiner les deux boules (une rouge une bleue)
Un petit coup de Photoshop ou autre et voici le fichier de base
Je vais créer l’animation dans Canva
Ma version de photoshop étant ancienne, je n’ai pas la fonctionnalité montage à la maison, j’utilise Canva (en ligne).
Pour éviter une marque blanche au détourage, je mets le fond de mon écran HA en fond, le résultat est :
Je vais basculer sur un fond transparent
Je n’ai pas trouvé comment faire cela avec Canva, j’utilise un outil en ligne
Le résultat donne
Je fais deux autres animations
Pour avoir trois états, je génère deux autres fichiers, un plus rapide et un plus lent, donc trois fichiers au total :
J’ajoute un template qui va correspondre à la puissance consommée
Dans mon fichier templates.yaml, j’ajoute
- name: Consommation_vitesse unique_id: sensor.consommation_vitesse state: >- {% if (states('sensor.linky_puissance_apparente')|float) < 400 %} lente {% elif (states('sensor.linky_puissance_apparente')|float) >4000 %} rapide {% else %} moyenne {% endif %}
Sur le dashboard, j’ajoute une carte qui va afficher un des 3 gif animés, cela en fonction de la valeur de sensor.consommation_vitesse.
- type: image entity: sensor.consommation_vitesse tap_action: action: none style: width: 7% top: 91.6% left: 26.7% state_image: lente: /local/maison/Conso/lente.gif moyenne: /local/maison/Conso/moyenne.gif rapide: /local/maison/Conso/rapide.gif