Skip to content
Animated backgrounds for lovelace
Branch: master
Clone or download
Villhellm Merge pull request #3 from jr-k/patch-1
Lowercase all usernames to be sure
Latest commit 6459f66 Oct 18, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Lowercase all usernames to be sure Oct 17, 2019
README.md Update README.md Aug 16, 2019

README.md

Animated Lovelace Background

This module is for Lovelace on Home Assistant

Create animated backgrounds based on the state of one of your entities. Originally designed for changing with the weather, à la VideoBackground-Card, you can now choose any entity in home assistant and create an animated background for each of its states.

A big thanks to CCH and VideoBackground-Card for the inspiration. All example animation files used in this repo are originally from the VideoBackground-Card repo.

Example: Example

Installation Method 1: Manual

Step 1

Install animated-background by copying animated-background.js from this repo to <config directory>/www/animated-background.js on your Home Assistant instance. This repo also includes a handful of default animation pages to use if you would like.

Step 2

Add the custom element in the root of your ui-lovelace.yaml, not in a view or card. Ex:

resources:
  - url: /local/animated-background.js
    type: module
animated_background:
  default_url: /local/animated-background/background-animations/sunny.html
  included_users:
    - Villhellm
  entity: "weather.dark_sky"
  state_url:
      'sunny': /local/animated-background/background-animations/sunny.html
      'partlycloudy': /local/animated-background/background-animations/cloudy.html
      'cloudy': /local/animated-background/background-animations/cloudy.html
      'mostlycloudy': /local/animated-background/background-animations/mostlycloudy.html
      'clear-night': /local/animated-background/background-animations/night.html
      'fog': /local/animated-background/background-animations/fog.html

Installation Method 2: HACS

Step 1

Make sure you have HACS installed, and proceed with the instructions for adding a custom repository

Step 2

Add the custom element in the root of your ui-lovelace.yaml, not in a view or card. Ex:

resources:
  - url: /community_plugin/lovelace-animated-background/animated-background.js
    type: module
animated_background:
  default_url: /community_plugin/lovelace-animated-background/background-animations/sunny.html
  included_users:
    - Villhellm
  entity: "weather.dark_sky"
  state_url:
      'sunny': /community_plugin/lovelace-animated-background/background-animations/sunny.html
      'partlycloudy': /community_plugin/lovelace-animated-background/background-animations/cloudy.html
      'cloudy': /community_plugin/lovelace-animated-background/background-animations/cloudy.html
      'mostlycloudy': /community_plugin/lovelace-animated-background/background-animations/mostlycloudy.html
      'clear-night': /community_plugin/lovelace-animated-background/background-animations/night.html
      'fog': /community_plugin/lovelace-animated-background/background-animations/fog.html

Configuration

Configuration for Animated Background goes into the root of your Lovelace config.

Options

Name Type Requirement Description
default_url string Optional If no matching state is found, this is the fallback url
entity string Optional Entity to check for state changes
state_url map Optional Map of states and urls. Required if entity is defined
included_users list Optional List of users that will display animated background. If this option is set any users not included in this list will be excluded.
included_devices list Optional List of devices that will display animated background. If this option is set any devices not included in this list will be excluded.
excluded_users list Optional Users to be excluded
excluded_devices list Optional Devices to be excluded

While all entries are optional, it is recommended to at least set default_url or entity with state_url. Without one of those set you would never know this plugin was installed.

Troubleshooting

You can’t perform that action at this time.