Hi All,
I thought I’d document how I’ve managed to get my dashboard background image to automatically change with weather conditions. There are a few custom components needed which I’ll list below.
I’m using this on my 43" SamsungTV (UE43BU8000KXXU) in the kitchen. HA is displayed using the TV’s built in Browser. The browsers homepage is set to my HA instance, so loads HA whenever it is launched using media_player.turn_on & media_player.select_source.
This loads up first thing every morning and stays on for 30 minutes before turning off again.
I must point out that I found the info on the backgrounds on the forums, I’ve just modified it for my needs, and thought it could be useful to others.
Original post
All the background images are sourced from the internet, so due to copyright etc, I won’t post them.
Required components:
Layout Card
Lovelace Wallpanel - Only used for making full screen & removing menus etc.
Lovelace Card Mod
Clock Weather Card
Custom button card (for the clock)
First up I created my own theme. One important thing to mention is that where is says ‘horizontal-layout’, this needs to match the ‘view type’ which can be found in the ‘View Configuration’ GUI panel:
mjg-auto-backgrounds-2:
modes:
dark:
sidebar-background-color: '#090e3b'
light:
sidebar-background-color: '#99eeff'
card-mod-view: |
horizontal-layout {
{% set weather_images = {
'clearnight': '/local/backgrounds/weather/clearnight.jpg',
'cloudy': '/local/backgrounds/weather/cloudy.jpg',
'fog': '/local/backgrounds/weather/fog.jpg',
'hail': '/local/backgrounds/weather/hail.jpg',
'lightning': '/local/backgrounds/weather/lightning.jpg',
'lightningrainy': '/local/backgrounds/weather/lightningrainy.jpg',
'partlycloudy': '/local/backgrounds/weather/partlycloudy.jpg',
'pouring': '/local/backgrounds/weather/pouring.jpg',
'rainy': '/local/backgrounds/weather/rainy.jpg',
'snowy': '/local/backgrounds/weather/snowy.jpg',
'snowyrainy': '/local/backgrounds/weather/snowyrainy.jpg',
'sunny': '/local/backgrounds/weather/sunny.jpg',
'windy': '/local/backgrounds/weather/windy.jpg',
'windyvariant': '/local/backgrounds/weather/windyvariant.jpg',
'exceptional': '/local/backgrounds/weather/exceptional.jpg'
} %}
background: center / cover no-repeat fixed url("{{ weather_images.get(states('weather.home'), '/local/slate.png') }}")
card-mod-theme: mjg-auto-backgrounds-2
My dashboard code:
wallpanel:
enabled: true
debug: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 0
keep_screen_on_time: 86400
black_screen_after_time: 7200
control_reactivation_time: 1
views:
- theme: mjg-auto-backgrounds-2
path: home
type: custom:horizontal-layout
cards:
- type: custom:clock-weather-card
entity: weather.openweathermap
title: null
sun_entity: sun.sun
temperature_sensor: sensor.pagoda_temperature
weather_icon_type: fill
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: false
hide_forecast_section: false
show_humidity: false
hide_clock: true
hide_date: true
hourly_forecast: true
use_browser_time: false
show_decimal: false
apparent_sensor: sensor.home_realfeel_temperature
card_mod:
style: |
ha-card {
font-family: comfortaa;
background: rgba(50,50,50,0.7) !important;
}
clock-weather-card-today-right-wrap-top{
font-size: 20px;
line-height: 30px !important;
}
- entity: sensor.time
show_icon: false
show_label: false
show_name: false
show_state: true
theme: yourname
styles:
state:
- font-size: 6em
- font-weight: 900
- justify-self: center
- padding: 60px 0px 60px 20px
card:
- border: 0px solid
- height: 140px
- background-color: rgba(50,50,50,0.7)
type: custom:button-card
card_mod:
style: |
ha-card {
box-shadow: none;
padding:30px;
margin: 0px 0px 0px 0px;
min-height: 100px;
font-family: comfortaa;
}
- type: custom:mushroom-template-card
primary: >
{% set bin_type = states('input_select.bins') %}
{{ (bin_type + ' bin') if bin_type in ["Refuse", "Recycling",
"Garden"] else '' }}
secondary: |
{% set bin_day = states('sensor.bin_day') %}
{{ bin_day if bin_day in ["Tomorrow", "Today!"] else bin_day }}
icon: |-
{% set bin_icons = {
"Refuse": "mdi:trash-can-outline",
"Recycling": "mdi:recycle",
"Garden": "mdi:flower"
} %}
{{ bin_icons.get(states('input_select.bins'), '') }}
layout: horizontal
entity: sensor.bin_day
icon_color: white
fill_container: true
layout_options:
grid_columns: 4
grid_rows: 2
card_mod:
style: |
ha-card {
--icon-size: 90px;
# margin: 10px 0px 0px 0px;
-webkit-border-radius: 20px;
text-align: left;
--card-primary-line-height: 46px !important;
--card-secondary-line-height: 20px !important;
--card-primary-font-size: 20px !important;
--card-primary-font-line-height: 20px !important;
--card-secondary-font-size: 20px;
justify-self: left;
box-shadow: none;
font-family: comfortaa;
}
ha-card {
background-color:
{% if is_state('input_select.bins', 'Recycling') %}
rgba(51, 51, 51, 0.8)
{% elif is_state('input_select.bins', 'Refuse') %}
rgba(33, 91, 16, 0.8)
{% elif is_state('input_select.bins', 'Garden') %}
rgba(91, 50, 16, 0.8)
{% else %}
white # Default color if none of the conditions are met
{% endif %};
}
mushroom-shape-icon {
# --shape-color: rgba(50,50,50,0.8) !important;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.average_house_temperature
hours_to_show: 24
points_per_hour: 2
graph: line
decimals: 0
name: false
unit: °C
show:
fill: true
labels: true
color_thresholds:
- value: 10
color: '#4870d4'
- value: 13
color: '#48d4ba'
- value: 26
color: '#edc811'
- value: 20
color: '#ed6c11'
- value: 23
color: '#e35f36'
- value: 25
color: '#e33648'
- value: 30
color: '#ed1111'
card_mod:
style: |
ha-card {
font-family: comfortaa;
background: rgba(50,50,50,0.7) !important;
}
.graph{
#height: 50px !important;
margin-top:-80px !important;
}
.states{
z-index: 1;
font-size:20px;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 1);
margin-left:30px;
}
- type: custom:atomic-calendar-revive
name: null
enableModeChange: true
entities:
- entity: input_boolean.show_calendar
icon: ''
- entity: calendar.c_s_calendar
name: C's calendar
maxDaysToShow: 4
- entity: calendar.m_s_calendar
name: M's calendar
maxDaysToShow: 4
- entity: calendar.bins
name: Council bins
showDate: true
hideFinishedEvents: true
hideDuplicates: true
showAllDayEvents: true
offsetHeaderDate: true
compactMode: false
allDayBottom: true
showLastCalendarWeek: true
calShowDescription: true
disableCalEventLink: true
disableCalLink: true
disableCalLocationLink: true
showCurrentEventLine: false
showMonth: false
showDescription: false
disableEventLink: true
showProgressBar: true
refreshInterval: 300
card_mod:
style: |
ha-card {
font-family: comfortaa;
background: rgba(50,50,50,0.7) !important;
}
.current-day{
font-size: 20px !important;
line-height:26px;
color:orange !important;
}
.header-date{
font-size: 30px !important;
line-height:30px;
margin-bottom:24px;
}
.hours{
font-size: 16px !important;
margin-bottom:10px;
}
.event-title{
font-size: 18px !important;
}
- type: custom:grocy-chores-card
entity:
- sensor.grocy_chores
- sensor.grocy_tasks
title: Todo
show_quantity: 2
show_assigned: false
show_overflow: false
show_chores_without_due: true
show_tasks_without_due: true
use_icons: true
use_long_date: true
due_in_days_threshold: 2
use_24_hours: true
hide_text_with_no_data: true
visibility:
- condition: state
entity: sensor.chores_check
state: 'True'
card_mod:
style: |
ha-card {
font-family: comfortaa;
background: rgba(50,50,50,0.7) !important;
}
.primary{
font-size:20px !important;
line-height:20px !important;
margin-bottom: 10px
}
.secondary{
font-size:14px !important;
}
- type: grid
cards: []
- type: grid
cards: []
- type: gauge
entity: >-
sensor.octopus_energy_electricity_current_demand
needle: true
min: 0
max: 20000
name: Electricity
severity:
green: 0
yellow: 2000
red: 6000
card_mod:
style: |
ha-card {
font-family: comfortaa;
background: rgba(50,50,50,0.7) !important;
}
- type: grid
cards: []
- type: grid
cards: []
- type: gauge
entity: sensor.tesla/-battery
severity:
green: 70
yellow: 40
red: 10
card_mod:
style: |
ha-card {
font-family: comfortaa;
background: rgba(50,50,50,0.7) !important;
}
layout:
max_cols: 3
title: Home
Hope this is useful to people.
Things I’d like to do:
Change the background images to .mp4 files
There is an old repo that has been forked a couple of times, but I just could not get this to work at all, but maybe other will have more luck:
Lovelace Animated Background