WallPanel: Home Assistant Screensaver for your wall-mounted control panel

Today we introduce a simple frontend module for wall-mounted dashboards: WallPanel. WallPanel is a simple screensaver addon capable of displaying beautiful images when you are not using your wall tablet, developed by j-a-n. It has the capability of hiding the toolbar and sidebar, scrape images from any URL (web or local) and so much more! Let’s install it and see what it can do.

Installation

HACS

• Search for WallPanel in the Frontend repository list
• Click on the repository card
• Click on Install this repository in HACS
• Select the latest version
• Click on Download

Manual

• Download wallpanel.js and place it into the folder config/www.
• Open Configuration => Lovelace Dashboards => Resources and add /local/wallpanel.js (Resource type: JavaScript module).

Configuration Variables

WallPanel offers quite a few configuration options for such a simple addon. These are used to fine-tune the screensaver, when it appears, how long it stays on, fade-in and fade-out duration, image sources, additional cards to show and much more.

Usage

We are going to showcase the usage for the WallPanel addon through examples and provide the YAML code for each, so you can copy-paste to your dashboard directly.

In order to activate the WallPanel screensaver for a particular dashboard, we need to add the configuration above anything else in the raw configuration editor. If you use YAML mode, you need to add the code the same way using your file editor (Studio Code Server, File Editor etc.).

For example:

#Basic configuration and code placement
wallpanel:
  enabled: true
  fullscreen: true
title: Home
views:
  - title: Living Room
.....

Example 1: Basic Configuration

Let’s say we want a screensaver for our wall-mounted dashboard. We want it to start after 15seconds idle time, hide the toolbar and sidebar and go full screen:

#Basic Configuration
wallpanel:
  enabled: true
  hide_sidebar: true
  hide_toolbar: true
  fullscreen: true
  idle_time: 15

When the 15 seconds expire, you will be greeted with a fullscreen background and a weather entity card which is set by default.

Example 2: Tweaking Timings

To fine-tune the screensaver slideshow, we can configure several variables which will allow us to change fade-in time, image display time etc.

For example:

#Tweaking Timings
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 15
  fade_in_time: 5
  crossfade_time: 2
  display_time: 20
  black_screen_after_time: 180
  control_reactivation_time: 0.5
  keep_screen_on_time: 0

• idle_time: Defines the time in seconds after which the screensaver will start. Default: 15.0
• fade_in_time: Time in seconds to transition from dashboard to scrensaver. Default: 3.0
• crossfade_time: Crossfade time between images. Default: 3.0
• display_time: Duration in seconds of each image shown. Default: 15.0
• black_screen_after_time: A black screen will be shown after set time, to conserve energy. Default: 0 (disabled)
• control_reactivation_time: Delay in seconds after which the dashboard will be usable again after screensaver deactivation. Default: 1.0
• keep_screen_on_time: Time in seconds for how long to prevent screen to dimm or lock. Default 0 (disabled)

Example 3: Setting image sources

We can set the WallPanel addon to fetch images from various sources. You can upload your own images to the media folder or set a specific URL. We suggest creating a subfolder in the media directory, to better organize your photos. For example:

#Local media folder images
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  image_url: /media #or /media/pets, /media/birthday_party etc.

To fetch images from a web URL, we can use a page such as unsplash.com. We can configure the height, width and timestamp for our wanted URL. We can add a search query in the URL as well, which will deliver images based on our keyword. As an example:

#Web URL images
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  image_url: https://source.unsplash.com/random/${1920}x${1080}?dogs

You can add multiple search queries after the ? which will return randomized images based on your search query.

https://source.unsplash.com/random/${1920}x${1080}?dogs,cats,nature

Example 4: Adding additional elements

Once the screensaver starts, a default weather entity card is displayed. We can add any card to be displayed and a user badge. Let’s add a custom:weather-card and a custom:sun-card nested within a vertical stack

#Adding additional elements: custom cards
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true 
  idle_time: 15
  image_url: https://source.unsplash.com/random/${1920}x${1080}?weather
  cards:
    - type: vertical-stack
      cards:
        - type: custom:weather-card
          details: true
          forecast: true
          hourly_forecast: false
          name: Weather
          entity: weather.home
          current: true
          number_of_forecasts: '6'
        - type: custom:sun-card
          darkMode: true
          showAzimuth: true
          showElevation: true

You can add any card you wish here. You can arrange them using vertical and horizontal stacks or scatter them around. We can also insert a user badge as a header:

#Adding additional elements: badges
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true 
  idle_time: 15
  image_url: https://source.unsplash.com/random/${1920}x${1080}?weather
  badges:
    - entity: sun.sun
    - entity: person.smarthomescenecom

Example 5: Styling and animation

To make a more dynamic screensaver, we can add some animation to the elements and make them move through the screen. The additional elements are called an ‘info box’. We can configure the following:

• info_animation_duration_x: Animation duration in seconds for the movement of the info box in x-direction (0 = no animation).
• info_animation_duration_y: Animation duration in seconds for the movement of the info box in y-direction (0 = no animation).
• info_animation_timing_function_x: The CSS timing-function to use for the animation of the info box movement in x-direction. Default: ease
• info_animation_timing_function_y: The CSS timing-function to use for the animation of the info box movement in y-direction. Default: ease
• info_random_move_interval: Interval of random movement of the info box in seconds (0 = no random movement).
• info_random_move_fade_duration: Duration of the fade-in and fade-out animation of the info box in case of random movement. (0 = no animation).

For example, we can make the info box move smoothly from one end to the other horizontally:

#Styling and animation: horizontal animation
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true 
  idle_time: 15
  image_url: https://source.unsplash.com/random/${1920}x${1080}?weather
  info_animation_duration_x: 30
  badges:
    - entity: sun.sun
    - entity: person.smarthomescenecom

To also move vertically, we need to set the y animation variable:

#Styling and animation: vertical animation
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true 
  idle_time: 15
  image_url: https://source.unsplash.com/random/${1920}x${1080}?weather
  info_animation_duration_x: 30
  info_animation_duration_y: 30
  badges:
    - entity: sun.sun
    - entity: person.smarthomescenecom

We could also set the info_random_move_interval of the info box. This will make sure the cards move at a set inverval. The CSS timing function parameter (info_animation_timing_function_x) will give you different info box movements. The default is ease, while the other possible parameters are:

• linear The animation has the same speed from start to end         
• ease Default value. The animation has a slow start, then fast, before it ends slowly           
• ease-in The animation has a slow start  
• ease-out The animation has a slow end 
• ease-in-out The animation has both a slow start and a slow end

The end result:

We could also some styling to the additional elements of the screensaver, such as cards and badges. For example, we can make the cards transparent:

#Transparent Cards
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 15
  image_url: https://source.unsplash.com/random/${1920}x${1080}?gaming
  style:
    wallpanel-screensaver-info-box:
      '--wp-card-width': 450px
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      text-shadow: -0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17), -0.5px 0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
      '--primary-text-color': '#ffffff'
      '--secondary-text-color': '#dddddd'

Or we can apply a Light or Dark Mode:

#Light Mode
style:
  wallpanel-screensaver-container:
    background-color: '#333333dd'
  wallpanel-screensaver-info-box:
    '--wp-card-width': 450px
    background-color: '#ffffff99'
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--primary-background-color': '#fafafa'
    '--secondary-background-color': '#e5e5e5'
    '--primary-text-color': '#212121'
    '--secondary-text-color': '#727272'

#Dark Mode
style:
  wallpanel-screensaver-info-box:
    '--wp-card-width': 450px
    background-color: '#00000099'
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
  wallpanel-screensaver-info-box-content:
    '--ha-card-background': none
    '--ha-card-box-shadow': none
    '--primary-background-color': '#111111'
    '--secondary-background-color': '#202020'
    '--primary-text-color': '#e1e1e1'
    '--secondary-text-color': '#9b9b9b'

Example 6: Profiles

WallPanel also offers the possibility to create profiles. Profiles are much like templates, you can predefine any variable or setting and change them dynamically. In order to utilize WallPanel profiles, we must create an input_select helper in Home Assistant.

Navigate to Settings, Devices & Services and click Helpers in the top tab group.
Create new Dropdown Helper (input_select) and add your desired options (night, day, black etc)

#input_select YAML code
wallpanel:
  name: wallpanel_screensaver
  icon: mdi:monitor-shimmer
  options:
    - day
    - night
  initial: day

This will create a new entity, which will contain your Profiles names as a simple list. The state of the entity is the profile name, which you must match exactly when configuring the WallPanel variables:

#Defining Profiles
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true 
  idle_time: 15
  image_url: https://source.unsplash.com/random/${1920}x${1080}?weather
  profile_entity: input_select.wallpanel
  profiles:
    day:
      image_url: https://source.unsplash.com/random/${1920}x${1080}?day,sun
    night:
      image_url: https://source.unsplash.com/random/${1920}x${1080}?moon,dark

Under the profiles variable, we can define different animations, styles and image_urls. Anything above profiles, will be overwritten once a specific profile has been activated. For example, we can add different styles for light & dark mode:

#Adding styles to profiles
wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 15
  profile_entity: input_select.wallpanel
  profiles:
    day:
      image_url: https://source.unsplash.com/random/${1920}x${1080}?day,sun
      style: #Light mode
        wallpanel-screensaver-container:
          background-color: '#333333dd'
        wallpanel-screensaver-info-box:
          '--wp-card-width': 450px
          background-color: '#ffffff99'
          box-shadow: >-
            0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
            0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
        wallpanel-screensaver-info-box-content:
          '--ha-card-background': none
          '--ha-card-box-shadow': none
          '--primary-background-color': '#fafafa'
          '--secondary-background-color': '#e5e5e5'
          '--primary-text-color': '#212121'
          '--secondary-text-color': '#727272'
    night: 
      image_url: https://source.unsplash.com/random/${1920}x${1080}?moon,dark
      style: #Dark mode
        wallpanel-screensaver-info-box:
          '--wp-card-width': 450px
          background-color: '#00000099'
          box-shadow: >-
            0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
            0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
        wallpanel-screensaver-info-box-content:
          '--ha-card-background': none
          '--ha-card-box-shadow': none
          '--primary-background-color': '#111111'
          '--secondary-background-color': '#202020'
          '--primary-text-color': '#e1e1e1'
          '--secondary-text-color': '#9b9b9b'

We can use our newly created input_select helper entity to change our style whenever we want. Or we can simply create a sun-based automation: when the sun sets, select night profile, when the sun rises select day profile:

#Automatic profile selection
alias: Wallpanel Sunrise Profile
description: "Select Day Profile On Sunrise"
mode: single
trigger:
  - platform: sun
    event: sunrise
    offset: 0
action:
  - service: input_select.select_option
    data:
      option: day
    target:
      entity_id: input_select.wallpanel

This module is a nice and easy way to add a custom screensaver to your home control panels. It does not really have a use case for a mobile phone for example, but for a wall-mounted dashboard it’s very much in character. All credit goes to dev j-a-n for creating this awesome module.