Lovelace: Animated Background based on entity state

niconath · May 11, 2020, 2:58pm

no maybe should I remove default url?

Villhellm · May 11, 2020, 2:58pm

After you corrected the entity_id?

niconath · May 11, 2020, 3:02pm

Exactly, I hadn’t been paying attention, thank you so much for your help.

niconath · May 11, 2020, 3:22pm

last question, can we make the background change automatically every 3 hours for example?

Villhellm · May 11, 2020, 3:31pm

Yes, if you make a template sensor that changes every 3 hours based on a time sensor.

niconath · May 11, 2020, 3:33pm

All right, how do we do that? And how do we integrate it into custom-header?

Villhellm · May 11, 2020, 3:35pm

Both of those questions are really beyond the scope of Animated Background. I suggest asking for help in the HA discord or starting a new thread in the forum

niconath · May 11, 2020, 3:37pm

All right, thanks for your help.

oniric · May 16, 2020, 8:04am

truly an awesome add-on. I took the liberty of tweaking a bit the image layout by putting it into a div as a background image…it’s ust I’m used to it that way (may not be compatible with the app I guess)

Villhellm · May 16, 2020, 5:36pm

Were you running into issues with it the way that it was? I don’t understand why that would be necessary

oniric · May 16, 2020, 6:09pm

Oh not at all! I just wanted a more responsive layout for the background image. Here is the before

and the after
in the first case the image does not use the space available in the most efficient way.
But this is really minutia.

davanda · June 2, 2020, 5:12pm

Hello
I’m using animated background with weather control… all ok…great jobs
I have a request:
I would exclude animated background based on the value of an input or variable
How can I do?
I would turn on and off animated background from lovelace
thanks you

Villhellm · June 3, 2020, 2:56pm

It is already possible to control the background based on an entity state change. If you wish to disable based on an input boolean then I suggest making a template sensor that reports the weather state only if the input boolean is on, otherwise report off. Something like
{{ states('weather.home') if states('input_boolean.background') == 'on' else 'off' }}
then you would just add 'off': none to your Animated Background config.

Caustik · July 12, 2020, 7:21pm

Hey guys!
Just wanted to share a cool little config I did, cycling through different videos every 3 minutes.
I used the section on the github about “Combination of entities.”
Since there are multiple videos for each weather state, I figured why not change it up every 3 minutes kind of like a digital photo frame!
All it really takes is an input_boolean helper and an automation that runs every 3 minutes (using trigger > time pattern > minutes “/3”) to trigger the boolean switch. Now Im on the search for even more nature weather videos I can cut and loop for this!
Thanks for all your hard work in creating/maintaining this feature!

Swalls · July 31, 2020, 3:04am

Hi All! Desperately trying to get this to work. Getting the following error in my log:

“http://192.168.1.50:8123/hacsfiles/lovelace-animated-background/animated-background.js:531:21 Uncaught TypeError: Cannot read property ‘background’ of null”

Running the latest version, and I’m using a theme from HACS. Would love any thoughts since I’ve tried uninstalling, and reinstalling several times but have been unable to make it work.

Villhellm · July 31, 2020, 4:14am

It looks like your configuration for Animated Background is incomplete. Post what you have

Swalls · July 31, 2020, 2:02pm

Hi Villhellm,

I followed, the repo instructions, so here’s what I did:

Installed Animated Backgrounds from HACS. When the installation was complete, I validated that the resource had been added by going to “Configure” --> “Lovelace Dashboards” --> “Resources” here it is:

image1193×291 16.5 KB
Added the following to my Lovelace Raw by going to “Overview” --> “Configure UI” --> “Raw Configuration Editor”:

animated_background:
  default_url: 'https://cdn.flixel.com/flixel/ypy8bw9fgw1zv2b4htp2.hd.mp4'
  entity: weather.upstairs
  state_url:
    clear-night: 'https://cdn.flixel.com/flixel/v26zyfd6yf0r33s46vpe.hd.mp4'
    #etc since I can't post more than 2 links as a new user
custom_header:
  chevrons: false
  compact_mode: true
  editor_warnings: false
  voice_hide: true
title: Clan HQ

The earlier error seems to have been replaced by the following:

Log Details (ERROR)

Logger: frontend.js.latest.202007160
Source: components/system_log/init.py:209
First occurred: 9:46:44 AM (39 occurrences)
Last logged: 9:57:40 AM

*/hacsfiles/custom-header/custom-header.js:1:13663 Uncaught TypeError: Cannot read property ‘querySelector’ of null
*/lovelace/downstairs:0:0 Uncaught
*/hacsfiles/lovelace-animated-background/animated-background.js:501:19 Uncaught NoModificationAllowedError: Failed to execute ‘insertAdjacentHTML’ on ‘Element’: The element has no parent.

Thank you again for your help!

Villhellm · July 31, 2020, 2:17pm

Oh whoops, there has been a beta release that fixed that error out for a while. Something to do with non-compliant browsers handling shadow doms incorrectly.

I just pushed a full release with the fix. All you have to do is update.

Swalls · July 31, 2020, 3:46pm

I applied the update, and rebooted. Now getting a different error message:

Log Details (ERROR)

Logger: frontend.js.latest.202007160
Source: components/system_log/init.py:209
First occurred: 11:38:38 AM (73 occurrences)
Last logged: 11:44:01 AM

*/hacsfiles/lovelace-animated-background/animated-background.js:501:19 Uncaught NoModificationAllowedError: Failed to execute ‘insertAdjacentHTML’ on ‘Element’: The element has no parent.
*/lovelace/downstairs:0:0 Uncaught

Villhellm · July 31, 2020, 4:00pm

That’s the same error message. It looks like v0.6.2 was released from the wrong branch. v0.6.3 has the fix