Lovelace: Animated Background based on entity state

monty_burns_007 · January 20, 2023, 12:22pm

did you ever found the solution how to “link” the Enabled property to for example an input_boolean selector of HA ?
I tried :
enabled: input_boolean.animated_backgrounds
but it does not detect as true

rjing001 · February 6, 2023, 3:02am

Is there any syntax to designate a condition for the state_url that it contains a state. i.e. contains ‘cloudy’

Appreciate any help.

winnj1 · April 10, 2023, 5:14pm

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.

BertrumUK · April 10, 2023, 6:01pm

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

nicozozo · April 26, 2023, 5:55am

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 ?

andie_will5 · May 1, 2023, 4:50pm

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.

morrydavis · May 10, 2023, 8:33pm

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

morrydavis · May 10, 2023, 9:49pm

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)

andie_will5 · May 18, 2023, 12:17pm

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.

Daniel_Reimer · August 25, 2023, 7:12am

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.

TRusselo · November 19, 2023, 10:04pm

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

guy0nabuffalo · November 22, 2023, 10:41pm

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

Haze · February 4, 2024, 4:44am

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

fin05 · March 3, 2024, 1:18am

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

Daniel_Reimer · May 3, 2024, 11:53am

Well, mine does work, that for sure.

Raznor · May 3, 2024, 12:49pm

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

alexamig · May 5, 2024, 8:40pm

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

henkie · May 11, 2024, 7:35pm

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

henkie · May 13, 2024, 5:26pm

can no one help me?

Martin_Granger · September 22, 2024, 9:55am

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.