I love this but was curious on where to get more backgrounds and also running into issues with it not changing based on the weather. I’m not using Darksky but was under the assumption that it should work with any weather integration.
It will work with the state changes of any entity you give it, it doesn’t have to be a weather entity. Check the entity state in the dev states tool to see if the state is actually changing when you expect.
As for where to get backgrounds I can’t help you there. That’s beyond the scope of what this project is. The included files are just examples.
Hello, how do I edit the html file to display a static image on my local computer???
I put in the path to the local picture under var cinemagraphs = [ but nothing shows.
You can’t put still images in a <video> tag. You would need to change it to <image>
Is it possible to only have the animated video on page?
Could anybody help me? I am unable to get this running 
Installed it via HACS, have tried reinstalling. I dont get any error in the logs, but no animated wallpaper is being displayed
My config in the raw editor:
resources:
- type: module
url: /community_plugin/mini-media-player/mini-media-player-bundle.js
- type: module
url: /community_plugin/simple-thermostat/simple-thermostat.js
- type: module
url: /local/slider-entity-row.js
- type: module
url: /community_plugin/lovelace-slider-entity-row/slider-entity-row.js
- type: module
url: /community_plugin/weather-card/weather-card.js
- type: module
url: /community_plugin/lovelace-animated-background/animated-background.js
animated_background:
default_url: >-
/community_plugin/lovelace-animated-background/background-animations/night.html
entity: weather.wetter_darksky
state_url:
clear-night: >-
/community_plugin/lovelace-animated-background/background-animations/night.html
cloudy: >-
/community_plugin/lovelace-animated-background/background-animations/cloudy.html
fog: >-
/community_plugin/lovelace-animated-background/background-animations/fog.html
mostlycloudy: >-
/community_plugin/lovelace-animated-background/background-animations/mostlycloudy.html
partlycloudy: >-
/community_plugin/lovelace-animated-background/background-animations/cloudy.html
sunny: >-
/community_plugin/lovelace-animated-background/background-animations/sunny.html
title: FaserF's Smart Home
path: default_view
views:
- cards:
- entities:
ETC....
When I am installing it manually I get: /local/animated-background.js:70:60 Uncaught TypeError: Cannot read property ‘state’ of undefined
Fixed it, something went wrong with alle the paths.
Uhm i think i have the same problem as you… how you solved it? I can’t figure out…
Same here can’t get it to work.
Did you get it to work?
@Villhellm I hope you can help me.
I’m trying to set this up and nothing shows up.
I’ve installed via HACS.
My lovelace resources are set in configuration.yaml:
lovelace:
mode: yaml
resources:
- url: /hacsfiles/lovelace-animated-background/animated-background.js
type: module
animated_background:
default_url: /hacsfiles/lovelace-animated-background/background-animations/night.html
excluded_users:
- Fire7
entity: "sun.sun"
state_url:
'above_horizon': /hacsfiles/lovelace-animated-background/background-animations/sunny.html
'below_horizon': /hacsfiles/lovelace-animated-background/background-animations/night.html
This however returns an error:
Invalid config for [lovelace]: [animated_background] is an invalid option for [lovelace]. Check: lovelace->lovelace->animated_background. (See /config/configuration.yaml, line 163).
If I move the URL resource and the animated_background part to my ui-lovelace.yaml, I get no errors anymore but nothing shows up either. And under Lovelace Dashboards > Resources I do not see the animated_background entry
The only way to have the animated_background show under Lovelace Dashboards > Resources without errors is to place the url entry under resources in configuration.yaml and the animated_background entry in my ui-lovelace.yaml. yet I still don’t see the animated background.
I do however see an error in the logs:
Log Details (ERROR)
Logger: frontend.js.latest.202004072
Source: components/system_log/__init__.py:209
First occurred: 11:28:25 AM (3 occurrences)
Last logged: 11:30:17 AM
https://homeassistant.lolorpi.com/hacsfiles/lovelace-animated-background/animated-background.js:11:23 Uncaught TypeError: Cannot read property 'lovelace' of null
Any idea?
[edit]
Just figured out that the primary-background-color was not set to transparent. All is well in the world again 
Thanks for this outstanding workd
Got this setup yesterday (DrZz’s featured it his livestream yesterday) It works but I get some strange behaviour;
I’ve set up different views in the config;
animated_background:
views:
- path: main
config:
entity: sun.sun
default_url: /local/backgrounds-animated/sunny.html
state_url:
above_horizon: /local/backgrounds-animated/sunny.html
below_horizon: /local/backgrounds-animated/night.html
- path: temperatuur
config:
default_url: /local/backgrounds-animated/abstract.html
With this I expected it to use the sunny and night animations for the main view (which it does) and then swap to the abstract animation when I change to the ‘temperatuur’ view.
But this doesn’t work, when change to the ’ temperatuur’ view, the animated background doesn’t change, but keep showing the one that was shown on the ‘main’ view. It only changes to the abstract animation when I also refresh the page. Is there a way to avoid that and change the background when the view changes?
- Is it possible to set this up for specific views only? I’d like to have this on my ‘main’ & ‘temperatuur’ views only, and keep static backgrounds for other views.
- I can get this to work on the iPhone companion app, but not on the iPad app. Is that a known issue with the iPad app?
It works on my IPad app.
How come it doesn’t work on android companion app?
I just fixed the bug that was causing your issue. The logic for views was only functional if an entity was defined, now it will work with just default_url (as it should have from the beginning, sorry). As for not working on an ipad, it works on mine so I’m not sure what’s going on with your setup. The app is the same for iphone and ipad so I’m not even sure how it could work on one and not the other.
NOTE TO EVERYONE:
Please submit a bug report on github if you need help. I rarely check the forum so I may not respond here for weeks at a time.
1 Like
After resetting the ipad app that works for me too. (As you said, its the same app so there shouldn’t be a difference when compared to a iPhone.
And as a workaround for showing an animated background on specific views only I’m now using a 2nd dashboard… Still would be cool to have selected views too.
Hi V,
Apologize for the delay. The following is my raw config. I see ‘fog.html’ in both view backgrounds. I would expect (but may be wrong) to see ‘fog.html’ in one, and ‘sun.html’ in the other. In console I see
Error handling response: TypeError: Cannot read property ‘enumerateDevices’ of undefined fog.html:1
at get_devices (chrome-extension://gfhcppdamigjkficnjnhmnljljhagaha/content.js:119:25)
at chrome-extension://gfhcppdamigjkficnjnhmnljljhagaha/content.js:100:5
In console selecting fog.html:1 gives TypeError: Cannot read property ‘requestContent’ of undefined
If I remove animated_background I get a enumerateDevices error which is now associated with the first view tab. This indicates that the problem doesn’t have anything to do with your code …
animated_background:
default_url: /local/community/lovelace-animated-background/background-animations/fog.html
views:
- config:
default_url: >-
/local/community/lovelace-animated-background/background-animations/sunny.html
path: test
views:
- badges: []
path: new
title: new
- badges: []
cards: []
path: test
title: test
I think the instructions may need updating. The HACS store instructions talk about adding config to your configuration.yaml and the github ones just to your ui-lovelace.yaml.
There is nothing about configuration.yaml in the README. If you’re referring to the HACS instructions at the bottom of the page that I have no control over then you’d have to take it up with the HACS dev.
Edit: If you’re talking about adding the resource itself then I guess I can add a link to the home assistant lovelace docs, I just assumed if one had gotten that far they would know how to add a resource.
1 Like
Hi, I would like to be able to make an input selection so that I can manually change the wallpaper quickly. Do you think it’s possible? If so, would you be willing to help me? Thank you so much.
I have been searching for this for years. This is not possible. You can however create multiple themes. Copy the same theme but only change the background. That way you have a wallpaper selector (sort of). It is also user specific which can be useful.
ok great thanks, I’ve already done this for static images but does it also work for animated images?
Thanks for your help.