Dashboard background image that changes with the weather

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

1 Like