Animated Background – 2023 – Neu – lokal gespeichert

Inhaltsverzeichnis

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

  1. Manfred

    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👍👌

  2. Stiffler

    Ich kapier das mit den Gruppen pro Dashboard nicht. Wo wird denn bitte der Gruppenname bei den Dashboards definiert?

  3. Gagik

    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

  4. Bobcelso

    kann ich den animated-background auch zeitbasiert ändern?
    z.b 07:00 , 16:00 , 20:00
    leider finde ich keine funktionierende lösung.

    mfg

  5. Act One

    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.

  6. Dieter

    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

  7. René

    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é

    1. Maxx

      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

  8. Dieter

    Super. Danke für die schnelle Antwort. Werde ich sofort probieren.
    Gruß Dieter

  9. 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

    1. Maxx

      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

  10. Thomas M

    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.

  11. PostgreSQL

    I every time spent my half an hour to read this webpage’s articles every day along
    with a mug of coffee.

  12. Changes

    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!

  13. Daisy

    Thanks for finally writing about > Animated Background – 2023 – Neu – lokal gespeichert – Smart Home Bastler < Loved it!

  14. Michael

    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

    1. Maxx

      Nochmals Danke für deine Frage. Ich habe die Beschreibung in diesem Beitrag diesbezüglich erweitert.
      Grüße, Maxx

Kommentare sind geschlossen.