🖼️ WallPanel Addon - Wall panel mode for your Home Assistant Dashboards

I got excited when I found this thread and bought an Android tablet for this use case. After a day of struggling I finally got it working - and it’s fantastic!! Can’t wait to print a wall mount and watch my wife’s reaction when I’ve added the wedding photos (which up until now have just been collecting digital dust…). 10/10, Thank you @j-a-n !! :smiley:

Any chance this add-on also can support .mp4 (or other video format) in the future as well?

// Chris

Got this working. I would say one of the best add-ons!! Is there a way to use OneDrive as image source?

Registered here to thank you. The cards: null finally resolved the issue

Thanks Chris!
Video support is now available.

Hi @j-a-n , amazing plugin!

Since a few weeks ago my google photos screensaver background has stopped transitioning between images.

The Google Photos album entity continues to update itself with a new image of the ~190 images in the album every 30 secs as normal.

Do you have any tips for me?

wallpanel:
  enabled_on_tabs:
    - wall-panel
  enabled: true
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: false
  idle_time: 0.5
  fade_in_time: 1
  image_order: random
  image_list_update_interval: 86400
  image_fit: cover
  image_info: true
  image_url: media-entity://camera.google_photos_dashboard_media
  display_time: 30
  crossfade_time: 1
  info_move_pattern: corners
  info_move_interval: 600
  info_animation_timing_function_x: steps(2, end)
  info_animation_timing_function_y: steps(2, end)
  style:
    wallpanel-screensaver-container:
      background-color: '#00000088'
    wallpanel-screensaver-info-box:
      '--wp-card-width': 350px
      background-color: '#24232cBF'
      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
      '--ha-card-border-width': 0px
      '--primary-background-color': '##24232c11'
      '--secondary-background-color': '#24232c11'
      '--primary-text-color': '#dddddd'
      '--secondary-text-color': '#dddddd'

Thanks in advance,

Kit

Hi @j-a-n firstly I wanted to say amazing work on this project. I use it daily for a tablet in our kitchen and it works just beautifully. My level of appreciate for you work cannot be described with words! Gushing aside, I wanted to reach out and ask for some advice/tips.

I am currently enabling the wallpanel on the tablet (running fully kiosk) but setting the fully kiosk URL to http://192.168.1.4:8123/lovelace?wp_enabled=true

However, I want to turn-off and disable the wallpanel/screensaver if I navigate away to a different tab. I understand from the document that I can turn-off the screensave by toggling off this input_boolean I set for the screensaver_entity. This seems to dismiss the screensaver, however, it eventually returns after the idle_time.

I’ve seen in your documentation that there is a enabled_on_tabs: setting however I’m not sure what tab names I should use here. In your example yaml you have set it to default_view. What else can I put here? If I have a navigation path like /lovelace/bedroom would the tab name be bedroom? or the full navigation path? or is it something else?

Some more guidance on the best way to dismiss and disable the wallpanel screensaver using a script would be great! Thanks so much

Hi Jonas, nice setup! May I ask how you did the music / album display? Perhaps some yaml? :blush:

Hi @lennon101 ,
glad you like wallpanel!

When the full path is /lovelace/bedroom, then bedroom is the name of the tab/view, which you can use in enabled_on_tabs.

Thanks :slight_smile: Wallpanel is a really great addon and very flexible in what you can create! This is the config I run right now (excluding the cards). The sensor.dashboard_samsung_screensaver_image_url has the entity_picture of my main media player as state. I’ve got an automation which sets it everytime a new song is playing.

wallpanel:
  enabled: false
  enabled_on_tabs:
    - nedreplan
    - ovreplan
    - music
  profiles:
    device.dashboard_samsung:
      enabled: true
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: true
  idle_time: 10
  screensaver_entity: input_boolean.${browser_id}_screensaver
  image_url: ${entity:sensor.dashboard_samsung_screensaver_image_url}
  image_fit: cover
  image_animation_ken_burns: false
  show_images: true
  card_interaction: true
  stop_screensaver_on_mouse_move: false
  stop_screensaver_on_mouse_click: true
  touch_zone_size_previous_image: 0
  touch_zone_size_next_image: 0
  screensaver_stop_navigation_path: /hem-v4/nedreplan
  camera_motion_detection_enabled: false
  style:
    wallpanel-screensaver-image-one:
      filter: blur(30px) saturate(100%)
      opacity: '0.4'
    wallpanel-screensaver-image-two:
      filter: blur(30px) saturate(100%)
      opacity: '0.4'
    wallpanel-screensaver-info-container:
      padding: 0
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      '--ha-card-border-width': 0px
      '--primary-background-color': '#111111'
      '--secondary-background-color': '#202020'
      '--primary-text-color': '#e1e1e1'
      '--secondary-text-color': '#9b9b9b'
      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)

I’ve read this entire thread and can’t seem to figure out wtf I’m doing wrong so hopefully someone can help me out.

I have a panel touchscreen on a wall. Here is what I’m hoping to do…

  • No weather card (can that be removed altogether? I hate javing that there and if I remove my local forecast, I get the damn error).
  • Start screensaver after X seconds (for testing I’ve been using 10)
  • Make sure the screensaver is dimmed (the wall panel is in a room that I want to be nearly completely dark but I want the images to display…just dimmed)

Here is what I have tried (and miserably failed at)…

wallpanel:
  enabled: true
  idle_time: 5
  info_animation_duration_x: 20
  info_animation_duration_y: 20
  views: []
  cards:
    - type: weather-forecast
      entity: weather.MYLOCATION_forecast
      forecast_type: daily
  style: null
  wallpanel-screensaver-overlay:
    background: '#0000bb'

Nothing changes. The screensaver is still 100% brightness.

I then tried to just black out the screen using the black_screen_after_time set to 10 seconds but that miserably fails as well.

Can someone point me to where I am screwing up?

Also, curiously, everytime I save the code, it adds the “null” text next to the style. Is that expected? It doesn’t matter what I do, “null” is always there.

Try that:

wallpanel:
  enabled: true
  idle_time: 5
  info_animation_duration_x: 20
  info_animation_duration_y: 20
  views: []
  cards: []
  style:
    wallpanel-screensaver-overlay:
      background: '#000000bb'

Probably not for this thread but just in case anyone would know. I’m trying to display the content ${UserComment} EXIF tag but it is showing numbers (first row in screenshot). The date tag is fine.

Anyone know if any addtional config/coding has to be done to display the text properly?

Nice! Looks great! But, I actually meant the media player card :wink:

You are a rock star! Thank you for this. Worked flawlessly