Lovelace: Animated Background based on entity state

Regardless what I do with this I cannot seem to get it to activate. I’ve installed via HACS and manually, and even after raw editing the dashboard UI… nothing happens.

Any advice is really appreciated. I’ve smashed my face into my keyboard for too long now.

Take a look Here, this is a fix to get it working for now.

Hi,
I followed the HACS installation, put on the top of my configuguration.yaml the code below

animated_background:
  default_url: https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4
  entity: weather.forecast_home
  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/f0w23bd0enxur5ff0bxz.hd.mp4
title: Vilsberg
views:
  - path: default_view
    title: Home
....

but no backgrounds , and with F12 of chrome I can see
Animated Background: Starting animated-background.js:28
Animated Background: No configuration found animated-background.js:28

can you help me ?

Did you put this in the raw config ? main page > click the three dots at the top > click one more time > enter raw config > put the code at the top in that menu.


Logger: frontend.js.latest.202305033
Source: components/system_log/init.py:257
First occurred: May 9, 2023 at 7:29:43 PM (3 occurrences)
Last logged: May 9, 2023 at 7:40:29 PM

/hacsfiles/lovelace-animated-background/animated-background.js?hacstag=202743061050:598:17 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.

can anyone tell me whats wrong here backgrounds aren’t working

I loaded using HACS but nothing is working when I use chrome F12 it says
Animated Background: Starting
Animated Background: No configuration found
this message is generated in the main code if(!Loaded)

Ok my animated background stopped working after the last update and it took me a while to find the fix, after trying the ones suggested they did not work to no avail.

Then i found this thread (i used google translate) and realised while reading in the comments section i was using the wrong repository in HACs, so i deleted the one suggested in HACs rebooted my server, and added this alternative repository to HACs,

Go to the three dots at the top of HACs > custom repositories > add this link “/hacsfiles/lovelace-animated-background/animated-background.js” > Category - Lovelace.

i followed the instructions but there was not much too change as it is the same files ish, and voila all is back to how it was, this worked for me and hope it does for you.

1 Like

I just made my own solution. https://github.com/dreimer1986/yourname_card_mod/blob/adcd81bc549b781c7b350c0b13a611c0b4f10404/README-script.md

Works fine and because of the way it works it can even change the backgrounds of stuff like settings menu etc. (until you push F5 in there) AND what is not possible anymore, even on the addin with a fix… Sidebar!
Because of the location where I inject it will be very hard to break it with any kind of update.
The solution needs some editing on your theme though. I decided against any strange hackery that sometimes works and sometimes fails in bad side effects, so you need to change some things to transparent background.

I made a fork of the above repo and added many more animated backgrounds.

I’m using local jpgs for my backgrounds. All of them are really zoomed in. Is there a way to adjust the scaling?

Using animated background

Using pic from theme.yaml file

I am trying to get this working, but no luck.
I am purely using the example on the git page.

Had to do a manual install because I could not find it in HACS, so not sure if I did something wrong. I get no errors, everything loads, config checks out, but nothing shows us, not even the default mp4. I checked my weather entity for the state, and it is clear-night.

Is there anything I am missing to get this to show up on one of my views?
I have this in my resource file:

- url: /hacsfiles/animated-background/animated-background.js
  type: js

Is this still working ? Ive been fighting for 2 days and no luck. Browser console shows
Animated Background: Starting
animated-background.js?hacstag=621661705070:28 Animated Background: No configuration found

1 Like

Well, mine does work, that for sure.

Same problem, does not work anymore, about a week ago

Anyone having problems with Animated Backgrounds, please go to this repository. Fixed from kernel-2024.5.0. Everything works fine on kernel-2024.5.1

Hello all,

I can’t get it to work anymore, can someone please help me?

I have this info in Dashbroad:

animated_background:
default_url: /local/weather_video/default/default.mp4
transparent_panel: true/false
opacity: 80
entity: weather.forecast_home
state_url:
clear:
- /local/weather_video/sunny/1.mp4

etc

but it doesn’t work
I also have HotFix background for Home Assistant 2024.5.1
installed.
I copied animated-background.js into /homeassistant/www/community/lovelace-animated-background/animated-background.js

but also without success.

I have sometimes done something wrong.

Thank you in advance for your information

Greetings
Henk

can no one help me?

Has anyone actually got this working at the moment? I’ve been through all the instructions (with the updated forks too) and I can’t seem to get this running.