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:
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.
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.htmlMake sure you have HACS installed, and proceed with the instructions for adding a custom repository
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.htmlConfiguration for Animated Background goes into the root of your Lovelace config.
| 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.