Ich füge meinem HA-Dashboard ein transparentes animiertes GIF hinzu

Mein Ziel

Mein Ziel ist es, eine Animation über ein animiertes GIF zu erstellen.

Je nach Zustand eines Unternehmens kann ich das GIF ändern.

Ich zeichne beide Kugeln (eine rote eine blaue)

Ein kleiner Schuss Photoshop oder was auch immer und hier ist die Basisdatei

Ich werde die Animation in Canva erstellen

Da meine Photoshop-Version älter ist, habe ich keine Home-Mount-Funktionalität, sondern verwende Canva (online).

Um eine weiße Markierung beim Beschneiden zu vermeiden, lege ich den Hintergrund meines HA-Bildschirms in den Hintergrund, das Ergebnis ist:

Ich werde auf einen transparenten Hintergrund kippen

Ich habe nicht herausgefunden, wie ich das mit Canva machen soll, ich nutze ein Online-Tool

Das Ergebnis ergibt 

Ich mache zwei weitere Animationen.

Um drei Zustände zu haben, erzeuge ich zwei weitere Dateien, eine schnellere und eine langsamere, also insgesamt drei Dateien:

Ich füge ein Template hinzu, das der verbrauchten Leistung entspricht. 

In meiner Datei templates.yaml füge ich Folgendes hinzu:

- name: Verbrauch_Einmalgeschwindigkeit_id: sensor.consumation_Geschwindigkeit state: >- {% if (states('sensor.linky_macht_apparente')|float) < 400 %} langsam {% elif (states('sensor.linky_macht_apparente')|float) >4000 %} schnell {% else %} Durchschnitt {% endif %}

Auf dem Dashboard füge ich eine Karte hinzu, die je nach dem Wert von sensor.consumation_speed eines der 3 animierten GIFs anzeigt.

- Typ: Bild entity: sensor.consumation_Geschwindigkeit tap_action: Maßnahme: none Stil: width: 7% top: 91.6% left: 26.7% state_image: Langsam: /local/home/Conso/lente.gif Durchschnitt: /local/home/Conso/mittel.gif schnell: /local/home/Conso/schnell.gif