Wenn du den animated Background ab HA Version 2023.4x noch nicht installiert haben solltest, folge bitte den Installationsschritten in diesem Beitrag
Um die Videodateien des animated Background lokal zu speichern, müssen die Videodateien zuerst herunter geladen werden. Dies geht ziemlich einfach, indem man die URL des jewiligen Entität-Videos kopiert, in die Adressleiste des Browsers einfügt, dann mit der rechten Maustaste auf das geöffnete Video klickt und „Video speichern unter“ wählt.
Hier noch zur Ansicht bzw. zum kopieren der einzelnen Video-URL´s der originale Eintrag aus dem RAW-Konfigurationseditor:
Animated Background gestreamte Version:
animated_background: default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4 groups: - name: weather config: entity: sensor.openweathermap_condition state_url: sunny: - https://cdn.flixel.com/flixel/hlhff0h8md4ev0kju5be.hd.mp4 - https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4 - https://cdn.flixel.com/flixel/jvw1avupguhfbo11betq.hd.mp4 - https://cdn.flixel.com/flixel/8cmeusxf3pkanai43djs.hd.mp4 - https://cdn.flixel.com/flixel/guwb10mfddctfvwioaex.hd.mp4 partlycloudy: - https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4 - https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4 - https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4 - https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4 - https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4 - https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4 cloudy: - https://cdn.flixel.com/flixel/13e0s6coh6ayapvdyqnv.hd.mp4 - https://cdn.flixel.com/flixel/aorl3skmssy7udwopk22.hd.mp4 - https://cdn.flixel.com/flixel/qed6wvf2igukiioykg3r.hd.mp4 - https://cdn.flixel.com/flixel/3rd72eezaj6d23ahlo7y.hd.mp4 - https://cdn.flixel.com/flixel/9m11gd43m6qn3y93ntzp.hd.mp4 - https://cdn.flixel.com/flixel/hrkw2m8eofib9sk7t1v2.hd.mp4 mostlycloudy: - https://cdn.flixel.com/flixel/e95h5cqyvhnrk4ytqt4q.hd.mp4 - https://cdn.flixel.com/flixel/l2bjw34wnusyf5q2qq3p.hd.mp4 - https://cdn.flixel.com/flixel/rrgta099ulami3zb9fd2.hd.mp4 clear-night: - https://cdn.flixel.com/flixel/x9dr8caygivq5secll7i.hd.mp4 - https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4 - https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4 - https://cdn.flixel.com/flixel/rosz2gi676xhkiw1ut6i.hd.mp4 fog: - https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4 - https://cdn.flixel.com/flixel/5363uhabodwwrzgnq6vx.hd.mp4 rainy: - https://cdn.flixel.com/flixel/qti3s5st0srowd9krhcw.hd.mp4 - https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4 pouring: - https://cdn.flixel.com/flixel/qti3s5st0srowd9krhcw.hd.mp4 - https://cdn.flixel.com/flixel/f0w23bd0enxur5ff0bxz.hd.mp4 lightning-rainy: - https://cdn.flixel.com/flixel/sbk5sc03j7vay52r3e4o.hd.mp4 - https://cdn.flixel.com/flixel/chrgj6raf5q3s6y2so7z.hd.mp4 snowy: - https://cdn.flixel.com/flixel/on3ysblo5hzdmrhv1kwh.hd.mp4 - https://cdn.flixel.com/flixel/psi1hhbsshcus8eumtr7.hd.mp4 - https://cdn.flixel.com/flixel/ndza6yswd0k6vlboxyhk.hd.mp4 snowy-rainy: - https://cdn.flixel.com/flixel/on3ysblo5hzdmrhv1kwh.hd.mp4 - https://cdn.flixel.com/flixel/psi1hhbsshcus8eumtr7.hd.mp4 - https://cdn.flixel.com/flixel/ndza6yswd0k6vlboxyhk.hd.mp4
Informationen zur ersten Einrichtung des animated Backgrounds findest du hier
Ich habe für mich diese Videodatein nach der jeweiligen Entität und durchnummeriert benannt.
So zum Beispiel: Das erste Video von „sunny“ ist als „sunny_1.mp4“ gespeichert.
Somit ist es einfacher die einzelnen Videos den Entitäten zuzuordnen.
In Home Assistant habe ich für diese Dateien im „www-Ordner“ unter „lovelace“ einen eigenen Ordner mit der Bezeichnung „a_background“ angelegt und in diesen alle Videos abgelegt.
Der Code für den lokal gespeicherten animated Background sieht somit folgendermaßem aus:
Animated Background lokale Version
animated_background: default_url: /local/lovelace/a_background/default.mp4 groups: - name: weather config: entity: sensor.openweathermap_condition state_url: sunny: - /local/lovelace/a_background/sunny_1.mp4 - /local/lovelace/a_background/sunny_2.mp4 - /local/lovelace/a_background/sunny_3.mp4 - /local/lovelace/a_background/sunny_4.mp4 - /local/lovelace/a_background/sunny_5.mp4 partlycloudy: - /local/lovelace/a_background/partlycloudy_1.mp4 - /local/lovelace/a_background/partlycloudy_2.mp4 - /local/lovelace/a_background/partlycloudy_3.mp4 - /local/lovelace/a_background/partlycloudy_4.mp4 - /local/lovelace/a_background/partlycloudy_5.mp4 - /local/lovelace/a_background/partlycloudy_6.mp4 cloudy: - /local/lovelace/a_background/cloudy_1.mp4 - /local/lovelace/a_background/cloudy_2.mp4 - /local/lovelace/a_background/cloudy_3.mp4 - /local/lovelace/a_background/cloudy_4.mp4 - /local/lovelace/a_background/cloudy_5.mp4 - /local/lovelace/a_background/cloudy_6.mp4 mostlycloudy: - /local/lovelace/a_background/mostlycloudy_1.mp4 - /local/lovelace/a_background/mostlycloudy_2.mp4 - /local/lovelace/a_background/mostlycloudy_3.mp4 clear-night: - /local/lovelace/a_background/clear-night_1.mp4 - /local/lovelace/a_background/clear-night_2.mp4 - /local/lovelace/a_background/clear-night_3.mp4 - /local/lovelace/a_background/clear-night_4.mp4 fog: - /local/lovelace/a_background/fog_1.mp4 - /local/lovelace/a_background/fog_2.mp4 rainy: - /local/lovelace/a_background/rainy_1.mp4 - /local/lovelace/a_background/rainy_2.mp4 pouring: - /local/lovelace/a_background/pouring_1.mp4 - /local/lovelace/a_background/pouring_2.mp4 lightning-rainy: - /local/lovelace/a_background/lightning-rainy_1.mp4 - /local/lovelace/a_background/lightning-rainy_2.mp4 snowy: - /local/lovelace/a_background/snowy_1 - /local/lovelace/a_background/snowy_2 - /local/lovelace/a_background/snowy_3 snowy-rainy: - /local/lovelace/a_background/snowy_1 - /local/lovelace/a_background/snowy_2 - /local/lovelace/a_background/snowy_3
Videos von Flixel hinzufügen
Wenn man auf flixel.com in der Gallerie nach Videos seinen persönlichen Geschmack betreffend sucht und auch findet, kann man diese Videos für den Stream in den animated Background einbinden.
Dazu einfach das gewählte Video zweimal anklicken bis in der Browserleiste bei der URL die Video-ID angezeigt wird

In diesem Beispiel handelt es sich um die ID: wk1xpz8kv5jylcyro8bl
Dies ID kopiert man sich und fügt sie anstatt der bestehenden ID in die URL des animated Background in Home Assistant ein.

Nun kann man diese „neue“ URL im Browser öffnen und das Video gegebenfalls wieder lokal speichern


Animated Background als Bildschirmschoner
Um ein Daschboard als Bildschirmschoner einzurichten habe ich mir aus diversesten Quellen Videodateien heruntergeladen und lokal gespeichert. In Home Assistant habe ich zu diesem Zweck einen eigenen Ordner mit der Bezeichnung „a_bildschirmschoner“ angelegt und die Viedeos darin gespeichert.
Diese Videos sind für alle möglichen Anlässe und Stimmungen zur Anzeige am Dashboard gedacht.

Um nun einzelne Videos für den animated Background auszuwählen sind so wir beim Wetter-Hintergrund einzelne Entitäten als Status notwendig. Diese erzeuge ich mit einer Dropdownliste aus den Home Assistant Helfern. Um mir die Sache einfacher zu machen, habe ich die Einträge der Liste genau so benannt wie die zugehörigen Videos.

Nun brauche ich lediglich ein neues Dashboard für den Bildschirmschoner anlegen und den animated Background hierfür in den RAW-Konfigurationseditor eintragen.
animated_background: default_url: /local/lovelace/a_bildschirmschoner/Mountain.mp4 entity: input_select.bildschirmschoner state_url: Feuerstelle: - /local/lovelace/a_bildschirmschoner/Feuerstelle.mp4 Kaminfeuer: - /local/lovelace/a_bildschirmschoner/Kaminfeuer.mp4 Wasserfall-Fluss: - /local/lovelace/a_bildschirmschoner/Wasserfall-Fluss.mp4 Wasserfall-Fluss-2: - /local/lovelace/a_bildschirmschoner/Wasserfall-Fluss-2.mp4 Wasserfall-Wald: - /local/lovelace/a_bildschirmschoner/Wasserfall-Wald.mp4 Wasserfall-Wald-2: - /local/lovelace/a_bildschirmschoner/Wasserfall-Wald-2.mp4 Bergsee: - /local/lovelace/a_bildschirmschoner/Bergsee.mp4 Waldsee: - /local/lovelace/a_bildschirmschoner/Waldsee.mp4 Waldsee-2: - /local/lovelace/a_bildschirmschoner/Waldsee-2.mp4 Waldsee-3: - /local/lovelace/a_bildschirmschoner/Waldsee-3.mp4 Nordlicht: - /local/lovelace/a_bildschirmschoner/Nordlicht.mp4 Winterlandschaft: - /local/lovelace/a_bildschirmschoner/Winterlandschaft.mp4 Advent: - /local/lovelace/a_bildschirmschoner/Advent.mp4 Weihnachten: - /local/lovelace/a_bildschirmschoner/Weihnachten.mp4 Feuerwerk: - /local/lovelace/a_bildschirmschoner/Feuerwerk.mp4
Zu beachten ist, dass der Pfad der Videodateien, die Bezeichnung und natürlich die Entität des animated Background übereinstimmen.
Zum Schluss noch eine Elementekarte mit der Dropdownliste des Bildschirmschoner am Dashboard einfügen und der Bildschirmschoner ist fertig.

Ein Video pro Dashboard Seite
Auf Grund einer Zuseheranfrage habe ich eine Möglichkeit gefunden nur ein fixes Video pro Dashboard-Seite anzeigen zu lassen. Dies funktioniert ebenfalls über die Gruppenfunktion und ist ziemlich einfach einzurichten.
Es ist keine Entität notwendig und sowohl der Gruppenname als auch die „default_url“ der jewiligen Gruppe kann frei gewählt werden. Natürlich ist dies auch mit einer lokalen Videodatei möglich.
animated_background: default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4 groups: - name: eins config: default_url: https://cdn.flixel.com/flixel/chrgj6raf5q3s6y2so7z.hd.mp4 - name: zwei config: default_url: https://cdn.flixel.com/flixel/zjqsoc6ecqhntpl5vacs.hd.mp4 - name: drei config: default_url: https://cdn.flixel.com/flixel/vwqzlk4turo2449be9uf.hd.mp4
Eine Kombination vom Wetter-Background und des Einzelvideos ist ebenfalls kein Problem.
Lediglich bei den Seiteneinstellungen im RAW-Konfigurationseditor ist die Gruppe des animated Background auszuwählen.
views: - theme: Backend-selected title: dein-titel path: dein-pfad animated_background: eins #hier deinen Gruppennamen panel: true type: panel badges: [] cards:
Dieser Beitrag hat 18 Kommentare
Hallo Maxx,
Da ich mich bereits in Pension befinde finde ich nun endlich Zeit mich mit dem Home Assistenten zu beschäftigen: Dank dir und deiner sehr verständlichen Videos auf Youtube und deiner eigenen Homepage konnte ich bereits einige Projekte in HA verwirklichen.
Bitte mache so weiter. Bist eine echte Bereicherung zu diesem Thema.
Danke dir dafür sehr herzlich👍👌
Ich kapier das mit den Gruppen pro Dashboard nicht. Wo wird denn bitte der Gruppenname bei den Dashboards definiert?
Hey ich verfolge dich seit langen auf Youtube, leider kriege ich das nicht hin. Ich habe das so wie bei dir eingestellt,
animated_background:
default_url: /local/lovelace/a_background/default.mp4
groups:
– name: weather
config:
entity: sensor.openweathermap_condition
state_url:
sunny:
– /local/lovelace/a_background/sunny_1.mp4
– /local/lovelace/a_background/sunny_2.mp4
– /local/lovelace/a_background/sunny_3.mp4
– /local/lovelace/a_background/sunny_4.mp4
– /local/lovelace/a_background/sunny_5.mp4
partlycloudy:
– /local/lovelace/a_background/partlycloudy_1.mp4
– /local/lovelace/a_background/partlycloudy_2.mp4
– /local/lovelace/a_background/partlycloudy_3.mp4
– /local/lovelace/a_background/partlycloudy_4.mp4
– /local/lovelace/a_background/partlycloudy_5.mp4
– /local/lovelace/a_background/partlycloudy_6.mp4
cloudy:
– /local/lovelace/a_background/cloudy_1.mp4
– /local/lovelace/a_background/cloudy_2.mp4
– /local/lovelace/a_background/cloudy_3.mp4
– /local/lovelace/a_background/cloudy_4.mp4
– /local/lovelace/a_background/cloudy_5.mp4
– /local/lovelace/a_background/cloudy_6.mp4
mostlycloudy:
– /local/lovelace/a_background/mostlycloudy_1.mp4
– /local/lovelace/a_background/mostlycloudy_2.mp4
– /local/lovelace/a_background/mostlycloudy_3.mp4
clear-night:
– /local/lovelace/a_background/clear-night_1.mp4
– /local/lovelace/a_background/clear-night_2.mp4
– /local/lovelace/a_background/clear-night_3.mp4
– /local/lovelace/a_background/clear-night_4.mp4
fog:
– /local/lovelace/a_background/fog_1.mp4
– /local/lovelace/a_background/fog_2.mp4
rainy:
– /local/lovelace/a_background/rainy_1.mp4
– /local/lovelace/a_background/rainy_2.mp4
pouring:
– /local/lovelace/a_background/pouring_1.mp4
– /local/lovelace/a_background/pouring_2.mp4
lightning-rainy:
– /local/lovelace/a_background/lightning-rainy_1.mp4
– /local/lovelace/a_background/lightning-rainy_2.mp4
snowy:
– /local/lovelace/a_background/snowy_1
– /local/lovelace/a_background/snowy_2
– /local/lovelace/a_background/snowy_3
snowy-rainy:
– /local/lovelace/a_background/snowy_1
– /local/lovelace/a_background/snowy_2
– /local/lovelace/a_background/snowy_3
views:
– title: Panel
path: YouTube-panel
animated_background: weather
panel: true
type: panel
badges: []
– title: Raster
path: youtube-raster
animated_background: weather
badges: []
title: YouTube Test
kann ich den animated-background auch zeitbasiert ändern?
z.b 07:00 , 16:00 , 20:00
leider finde ich keine funktionierende lösung.
mfg
Excellent post. I was checking constantly this blog and
I’m inspired! Extremely useful info specifically the remaining part
🙂 I handle such info much. I was looking for
this certain info for a long time. Thanks and good luck.
Hallo.
Der animated Background in gestreamter Variante funktioniert bei mir sehr gut. Leider bekomme ich die lokale Version nicht ans Laufen.
Habe jede Zeile mit deinem Video verglichen, finde aber den Fehler nicht.
Gibt es vielleicht Unterschiede beim downloaden?
LG Dieter
Hallo ich habe auch beide ausprobiert und beide funktionieren, wobei mir das zweite eine orange Leiste oben zeigt, welche sehr unschön ist.
Die https://github.com/dreimer1986/lovelace-animated-background.git Version zeigt mir ein tolle transparente Leiste oben.
Ich habe nicht gefunden wie man diese Leiste oben ändern kann.
Vielen Dank für diesen Beitrag und deine Videos
Gruß René
Hallo Maxx, Hallo Dieter,
das Repositori oben hat bei mir nicht funktioniert, aber dafür dieses hier:
https://github.com/rbogdanov/lovelace-animated-background.git
Ich bin aber auch schon auf der HA version 2023.4.4.
Beste Grüße
Timmo
Hallo Timmo,
Danke für die Info.
Ich habe beide Repositories getestet und es funktionieren auch beide bei mir.
Den Beitrag habe ich auch schon angepasst.
Beste Grüße, Maxx
Super. Danke für die schnelle Antwort. Werde ich sofort probieren.
Gruß Dieter
Hallo Smart Home Bastler,
ein Dankeschön für Deine vielen Informationen zum Thema Home Assistant.
Ich arbeite seit Juni 22 mit HA. Nach anfänglichen Schwierigkeiten lief es in den letzten Monaten problemlos. Aber seit dem ersten April-Update funktioniert der „animated Background“ nicht mehr.
Kannst Du mir hier behilflich sein? Ich habe keine Ahnung was sich hier geändert hat.
Mit freundlichem Gruß
Dieter
Hallo Dieter.
Ja, dass mit dem „animated Background“ ist nach dem Update auf 2023.4 ein Problem für das es aber eine Lösung gibt.
Du musst lediglich den „Animated Background“ in HACS entfernen, Home Assistant neu starten und dann ein „Benutzerdefiniertes Repository“ mit folgender URL installieren.
https://github.com/dreimer1986/lovelace-animated-background.git
Glücklicherweise hat sich „dreimer1986“ gefunden, welcher diese Repository lt. seinen Angaben „provisorisch“ repariert hat.
Der ursprüngliche Ersteller ist leider 2020 verstorben und daher gab es bisher keine Updates oder dgl.
Ich wünsche dir viel Erfolg!
Beste Grüße, Maxx
I blog quite often and I genuinely appreciate your information.
This great article has really peaked my interest.
I’m going to take a note of your blog and keep checking
for new details about once per week. I opted in for your Feed as well.
I every time spent my half an hour to read this webpage’s articles every day along
with a mug of coffee.
Have you ever considered about including a little bit more than just your
articles? I mean, what you say is important and all.
Nevertheless think of if you added some great photos
or video clips to give your posts more, „pop“!
Your content is excellent but with pics and videos,
this blog could definitely be one of the very best
in its niche. Terrific blog!
Thanks for finally writing about > Animated Background – 2023 – Neu – lokal gespeichert – Smart Home Bastler < Loved it!
Hallo lieber Smart Home Bastler,
also erstes herzlichen Dank für die ausführlichen Videos. Als Anfänger ist man wirklich froh jeden Schritt erklärt zu bekommen.
Jetzt habe ich direkt eine Frage zu dem Animated Background. Das mit der Wetterfunktion hat geklappt.
Jetzt möchte ich aber noch folgendes machen:
1. Ich habe in einem Dashborad mehrere „Reiter“ sitzen. Auf jedem dieser „Reiter“ möchte ich unterschiedliche Animated Backgrounds haben wie stelle ich das an?
2. Ebenso bräuchte ich z.B. für einen „Reiter“ nur einen Animated Background haben ohne Abhänging von einem Sensor. Soll einfach die ganze Zeit das gleich sein, wie stelle ich das an?
Vielen Dank für deine Mühen auch mit den tollen Videos.
Mit freundlichen Grüßen
Michael Haag
Nochmals Danke für deine Frage. Ich habe die Beschreibung in diesem Beitrag diesbezüglich erweitert.
Grüße, Maxx
Kommentare sind geschlossen.