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.

ConfigDescriptionDefault
enabledEnable WallPanel?
You will need to set this to true to activate the wall panel for the dashboard.
false
debugShow debug output?false
hide_toolbarHide the upper panel toolbar?false
hide_sidebarHide the navigation sidebar?false
fullscreenSet browser window to fullscreen?
Due to browser restrictions you will need to interact with the screen once to activate fullscreen mode after loading the dashboard page.
false
idle_timeTime in seconds after which the screensaver will start (0 = screensaver disabled).15
fade_in_timeScreensaver fade-in time in seconds.3.0
crossfade_timeCrossfade duration in seconds for screensaver images.3.0
display_timeDuration in seconds after which the next screensaver image will be shown.15.0
keep_screen_on_timeTime in seconds for how long to prevent screen to dimm or lock (0 = disabled).0
black_screen_after_timeTime in seconds after which the screensaver will show just a black screen (0 = disabled).0
control_reactivation_timeTime in seconds for which interaction with the dashboard is disabled after the screensaver is stopped.1.0
screensaver_stop_navigation_pathPath to navigate to (e.g., /lovelace/default_view) when screensaver ist stopped.
screensaver_entityAn entity of type ‘input_boolean’ to reflect and change the screensaver state (on = started, off = stopped).
image_urlFetch screensaver images from this URL. See below for details.See below
image_excludesList of regular expressions for excluding files and directories from local media sources. See below for details.[]
image_fitValue to be used for the CSS-property ‘object-fit’ of the images (possible values are: cover / contain / fill / …).cover
image_list_update_intervalWhen using a local media source, the image list is updated at this interval.3600
image_orderThe order in which the images are displayed (possible values are: sorted / random).sorted
show_exif_infoShow exif info on top of image? Only available for local jpeg images.false
fetch_address_dataFetch address data for EXIF GPS coordinates from nominatim.openstreetmap.org?false
exif_info_templateFormat of EXIF image info display (HTML). ${EXIF-tag-name} will be replaced with the corresponding EXIF tag value.${DateTimeOriginal}
info_animation_duration_xAnimation duration in seconds for the movement of the info box in x-direction (0 = no animation).0
info_animation_duration_yAnimation duration in seconds for the movement of the info box in y-direction (0 = no animation).0
info_animation_timing_function_xThe CSS timing-function to use for the animation of the info box movement in x-direction.ease
info_animation_timing_function_yThe CSS timing-function to use for the animation of the info box movement in y-direction.ease
info_random_move_intervalInterval of random movement of the info box in seconds (0 = no random movement).0
info_random_move_fade_durationDuration of the fade-in and fade-out animation of the info box in case of random movement. (0 = no animation).2.0
styleAdditional CSS styles for wallpanel elements.{}
badgesBadges to display in info box. See below for details.[]
cardsCards to display in info box. See below for details.See below
profilesConfiguration profiles. See below for details.{}
profileConfiguration profile to activate.
profile_entityAn entity of type ‘input_text’ used for dynamic activation of profiles.

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 .....
Code language: YAML (yaml)

Advertisement Advertisement

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
Code language: YAML (yaml)

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
Code language: YAML (yaml)
  • 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.
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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).

Advertisement Advertisement

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
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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'
Code language: YAML (yaml)

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'
Code language: YAML (yaml)
#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'
Code language: YAML (yaml)

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
Code language: YAML (yaml)

Advertisement Advertisement

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
Code language: YAML (yaml)

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'
Code language: YAML (yaml)

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
Code language: YAML (yaml)

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.


You can support this blog by buying us a coffee!

Leave a Comment

Your email address will not be published.

DISCLOSURE
SmartHomeScene.com is a participant in the Amazon Services LLC Associates Program and AliExpress Portals Affiliate Program. These programs are designed to provide means for websites to earn revenue by linking affiliate products through their content. We are compensated for referring traffic and business to these websites.
SmartHomeScene.com

Scroll to Top