Lovelace: Animated Background based on entity state

Share your Projects!
1

https://i.imgur.com/0AHjzeF.jpg(image larger than 3072KB)

After using this card for a while, I decided it was a bit too hacky for my taste and it made formatting a card layout a nightmare. I took the concept and merged it with ideas from compact-custom-header to make their lovechild that you see here today.

This module allows you to update your lovelace background with animated backgrounds based on an entity’s state. If you don’t want to update based on an entity’s state you can just set default_url for an unchanging animated background.

All instructions for installation can be found in the repository, though I recommend installing it through HACS so you stay up to date with bug fixes and feature updates.

A huge thanks to both CCH and VideoBackground-Card for the inspiration (and in some cases blatant theft of their code)

16 Likes
2

Awesome! and thanks for this lovechild!

1 Like
3

It looks very cool!
Just one question. How to make a little transparency for a weather card or other cards so that the background image is visible?

4

Looks great!
I have one feature request. I would like to display a different background on a per user login. How would I do that? Something like this.

animated_background:
  - conditions:
    included_users: 
      - pcTablet
      - me
      - me2
      default_url: /community_plugin/lovelace-animated-background/background-animations/sunny.html
      entity: weather.dark_sky
      state_url:
        clear-night: /community_plugin/lovelace-animated-background/background-animations/clear-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/partlycloudy.html
        sunny: /community_plugin/lovelace-animated-background/background-animations/sunny.html
    user: md3
      default_url: /community_plugin/lovelace-animated-background/background-animations/Clock.html
5

Anyone have hints for the cleanest way to load a local .mp4 file (in my case, www/backgrounds/matrix.mp4)? I tried the most obvious method below, but Chrome Developer tool console says 404 Not Found when I replace the remote URL src with a local path.

<!DOCTYPE html>
<html>
  <head>
    <title>Cloudy</title>

    <style type="text/css">
      body{
        min-height:100vh;
        min-width:100vw;
        max-height:100%;
        max-width:100%;
        overflow:hidden;
        margin:0;
        position:relative;
      }

      video{
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    </style>

  </head>
  <body >
    <video autoplay="" loop="" preload="" playsinline="" muted="" poster="">
      <source src="backgrounds/matrix.mp4" type="video/mp4">
    </video>
  </body>
</html>
6

give it the http(s) url then, ie http(s)://yourhaaddress:8123/backgrounds/matrix.mp4

7

Really beautiful card. I belieave we all spend quite a bit of time looking at this screen and your background just makes it much, much better.
Thank you.

8

Unfortunately doesn’t seem to work either. Does that work for you?

Separately, when using an external URL to pull the mp4 (like for the night image included in the package), it looks like the html file is repeatedly reloaded, causing browser memory to continuously rise and cpu to peg, making the interface mostly unusable.

9

Card background transparency in the example image is being set with the theme. You can also use other lovelace plugins to change the transparency of individual cards (such as card-mod https://github.com/thomasloven/lovelace-card-mod)

10

Unable to make it work. In FF console i see these errors:

Loading module from “http://192.168.1.204:8123/community/lovelace-animated-background/animated-background.js” was blocked because of a disallowed MIME type (“text/plain”).
default_view
Loading failed for the module with source “http://192.168.1.204:8123/community/lovelace-animated-background/animated-background.js”. default_view:1:1
uncaught exception: http://192.168.1.204:8123/community/lovelace-animated-background/animated-background.js

Can you please advise

HA version 0.98.5

11

Never mind, my mistake. Fixed now

12

Thanks for the tip!

13

This looks really cool, however I have a question. Would this work with static images? Because you have built exactly what I was looking for but I need it for static wallpapers.

Anyways this is really cool and I might use this in the future.

14

Yes, it can work with static images. Just replace the video tag with an image tag in one of the example html files.

However there are easier ways to just use an image as your background. Check the docs for specifics https://www.home-assistant.io/lovelace/views/#background

15

I know, but this will not allow me to switch background on a single theme and I will either have to hardcode the images into the theme or into lovelace.

What I wish to do is to use an input_select to select a wallpaper. This way I will need a single theme. I already have this for my border radius and it works really great. Anyways thanks for replying.

16

Ah yes, that’s true. Well let me know if you need help editing the html for a static image.

17

I will try when I get home, but it sounds fairly simple. If it works your custom card will be in my next release :rofl::+1:. Thanks again.

18

Hi,

thanks for module its really great.

@ mrand:
Iam using this to play a local file

  <video autoplay muted loop>
    <source src="file.mp4" type="video/mp4">
  </video>

and disabled the script part. The file.mp4 is at www/background-animations.

@ Villhellm
I have a question and hope you can help me. The videos are looking great on my full hd screen but on my iPad mini its zoomed in. Is it possible to also see the full video on small devices and big screens?
Thanks in advance.

19

You can play around with the height/width in the body/video elements, but I haven’t experimented very much with mobile devices.

20

Thanks, but I had to switch back to gifs, the UI was not usable anymore :smile: