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

• https://onlinegiftools.com/remove-gif-background

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