Lovelace: Animated Background based on entity state

Share your Projects!
31

@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 :slight_smile:Thanks for this outstanding workd

32

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?
33

It works on my IPad app.
How come it doesn’t work on android companion app?

34

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
35

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.

36

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
37

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.

38

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
39

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.

40

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.

41

ok great thanks, I’ve already done this for static images but does it also work for animated images?
Thanks for your help.

42

No, however the thread you are in is actually about a component/addon that can do animated wallpapers. I have only tried this once but it didnt fit my needs. Though I think it should be possible with this addon.

43

yes I installed it and it works well in custom header but I would like to be able to integrate it differently to make it easier to change the wallpaper.

44

I have this code to embed my images but I think that to embed a URL the code must not be good this way?

Nico-test-6:
  lovelace-background: center / cover no-repeat url("/local/background/nico6.jpg") fixed
45

You can do this with the Animated Background plugin. Follow the install instructions and change the entity to your input select. Define a video (or videos) for each state and it should change the background when you change the selection.

46

The newest Animated Background release allows images as well as videos. You will now be able to use an input select to change your background image.

47

That is really cool, I do wonder how it will look on a phone though. Awesome work anyways, I am going to try this again!

48

Hello, thank you for your answer on the other hand how to create a selection and insert the links of the images, I have a little trouble with the code, could you please help me?

Thank you in advance

49

Quick Q: I’m trying to use locally saved videos.
I’ve set it this way, but the videos never load:

  entity: "input_boolean.theme_dark"
  state_url:
    'off':
      - "/config/www/River.mp4"

I know the path is correct. Is this my mistake or a limitation of the component?

50

That is not the correct path. The correct path would be "/local/River.mp4"