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

I have not tried it. But it looks like the fab-card might do what you are after.

Floating Action Button (card) - Share your Projects! / Dashboards & Frontend - Home Assistant Community

Yes, you can use wallpanel in combination with [ lovelace-digital-clock](GitHub - wassy92x/lovelace-digital-clock: A custom digital clock card for Home Assistant).
Example wallpanel configuration:

wallpanel:
  enabled: true
  style:
    wallpanel-screensaver-info-box:
      '--wp-card-width': 200px
      transform: scale(2)
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      '--ha-card-border-width': 0px
  info_animation_duration_x: 20
  info_animation_duration_y: 10
  info_animation_timing_function_x: ease-in-out
  info_animation_timing_function_y: ease-in-out
  show_images: false
  cards:
    - type: custom:digital-clock
      dateFormat: " "
      timeFormat:
        hour: 2-digit
        minute: 2-digit

This actually works great! Exactly what I was looking for.

Thanks much!

Question, Is there any way to change the font color of the digital clock in this use case? Even though this screensaver works well, the text is super bright! Would like to use a gray color so it’s less on the eyes at night.

Which option do i have to add for blurring a photo in the background when it’s in portrait mode?

Hi, since update update 4.30 (i believe and yes i know it is more than 6 months ago :slight_smile: ) the configured cards for the Wall Panel add on are not visable anymore. Tonight i’ve finaly made time te check, but with no result. The strange thing is that after tweaking my custom CSS i noticed that only de left 500px is visable and everything above is not. For example the attached screenshot. The date used to be centered.

Does anyone have a clue?

kinds regards,

Thomas

Finally fixed it by adding a css position line to it.

wallpanel:
  enabled: true
  hide_sidebar: true
  image_url: >-
    https://www.thegef.org/sites/default/files/styles/banner_image/public/2022-03/forests-1440x655.jpg?h=4e9a1ef8&itok=etq1Og--
  cards:
    - type: custom:digital-clock
      dateFormat:
        weekday: long
        day: 2-digit
        month: long
      timeFormat:
        hour: 2-digit
        minute: 2-digit
      card_mod:
        style: |
          ha-card {
           text-align: center!important;
           font-weight: 300!important;
           font-size: 50px;
           padding: 0px 0px;
           background: transparent;
           border: 0px;
           color: rgb(255, 255, 255);
           left: 425px;
           top: 250px;
           width: 1000px;
           position: absolute;
          }    
    - type: custom:weather-card
      entity: weather.forecast_thuis
      name: Buckwheat
      card_mod:
        style: |
          ha-card {
          font-size: 13px;
          background: rgb(0, 0, 0, 0.6);
          position: absolute!important;
          left: 1350px;
          top: 850px;
          }

not sure if i’m overruling something faulty in my code, but it works. If anyone has a better suggestion, please let me know there i want my code as clean as possible for future upgrades.

Do I have to run traefik to make this work? I don’t quite understand why I would need traefik of my immich and WallPanel were on the same subnet? Is it because it’s being run in docker?

No but its a common way for many. When you’re using wall panel your browser is connected to an URL, f.ex: www.hainstance.net but then to get the images from immich it needs to contact immich on another URL f.ex www.immich.net, this is a security risk and is blocked by the browser unless cors-headers are setup.

If you only run home-assistant locally (or need the dashboard accessed locally) AND you host both home-assistant and immich on the same server (the same ip/url) you can probably avoid setting up cors (but im not 100% sure if this is the case since the ports will still differ for a basic setup).

Just a heads up, the new core immich integration (HA 2025.6.0 or later) provides a media-source url for your immich albums. This means you can set wallpanel to use your immich albums via media-source. The immich integration can connect to your immich server via local IP, so that means no SSL, no cors, no extra config for wall panel/immich. I’m using it now. Simple and works great. @diode @dmncr

1 Like

Thanks for the explanation. I’ll have to see if the new Immich integration will work for my use case. :grinning:

Did something change with the image_fit? Mine were previously covering the screen, but now I’m seeing the black bars again. I’m using the monitor in portrait mode if that matters.

wallpanel:
  enabled: false
  profiles:
    user.touchscreen:
      enabled: true
      columns: 3
      idle_time: 10
      image_fit: cover
      image_url: media-source://media_source/local/screensaver
      hide_toolbar: true
      hide_sidebar: true
      fullscreen: true
      cards:
        - type: clock
          clock_size: large
          show_seconds: false
          card_mod:
            style: |
              ha-card {
                height: 150px !important;
                min-height: 150px !important;
                max-height: 150px !important;
                background: rgba(255, 255, 255, 0.65) !important;
                backdrop-filter: blur(2px);
                border-radius: 150px !important;
                border: none !important;
                box-shadow: none !important;
                display: flex;
                align-items: center;
                justify-content: center;
              }
              .time-parts {
                font-size: 124px !important;
              }

Use image_fit_landscape and image_fit_portrait instead.

1 Like

Can anyone comment on the real functionality of media_list_max_size ?

  • Introduced configuration option media_list_max_size to define the maximum number of media items retrieved from the media source

I’m using the built-in media functionality, and have about 7500+ images (and growing). So the question is: does media_list_max_size select a randomized (default 500) set of pictures from this list every time the media list is refreshed? Or just the first 500? If its just the first 500 or similar, then I guess I need to set the max list size to 10,000+ to let it be properly randomized?

Hi All,
I want to disable the screensaver slide show so I set an input_boolean… but it always turns back on. I only want the screen to go black… how can I perm disable the slideshow?

thx

I’m not sure if I’m just missing something, but is there a way to prevent cards from stacking vertically in WallPanel for Home Assistant until they’re pushed off-screen?

I’ve tried referencing a view where the cards are arranged nicely, but when I edit the WallPanel config, it ends up squishing all my cards into a single vertical stack. When I try to add another vertical stack, it just nests it inside the existing one instead of placing it side by side.

I’ve attached a screenshot for reference — note all the empty space on the right side that isn’t being used:

anyone know how to disable the slideshow??

change idle_time to zero and it won’t ever go in to screensaver.
idle_time: 0

if you want it to just blank instead, keep your idle time to whatever you want for your blanking time, and set show_images to false
show_images: false

also have a look at the black_screen_after_time and keep_screen_on_time settings to get exactly what you want.

1 Like

If you use Browser Mod, it exposes a Screen switch for each client (browser) that you can turn off to blank the screen…just another option.

Anyone using logic to dynamically adjust the styling of the wallpanel? I want to “dim” the screen after sundown. I am currently using a black overlay at 50% opacity but would like to increase the opacity at night. I can’t seem to get it to compile when I try to use code.

  style:
    wallpanel-screensaver-overlay:
      background: rgba(0,0,0,.5)

replacing the background line with:

background: ${ is_state('sun.sun', 'above_horizon') ? 'rgba(0,0,0,.5)' : 'rgba(0,0,0,.75)'}

does not work.