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

Hi,

Wondering if somebody can help me.
I would like to change font size in custom-clock card in wallpanel.
No matter what I do, I can’t figure out how to enlarge text…

wallpanel:
  enabled: false
  image_order: random
  image_fit: fit
  profiles:
    device.dba07333_c1bdc1dd:
      image_url: /local/Wallpaper/
      enabled: true
  fullscreen: false
  debug: false
  idle_time: 0
  hide_toolbar: false
  hide_sidebar: false
  black_screen_after_time: 130
  keep_screen_on_time: 120
  screensaver_entity: input_boolean.m11screensaver
  style:
    wallpanel-screensaver-info-box-content:
      font_size: 6vh
      font_weight: 600
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      '--ha-card-border-width': 0px
      '--primary-text-color': '#ffffff'
      '--secondary-text-color': '#dddddd'
      filter: >-
        drop-shadow(0px 0px 3px rgb(17, 17, 17)) drop-shadow(0px 0px 8px rgb(30,
        30, 30))
  cards:
    - type: custom:vertical-stack-in-card
      cards:
        - type: custom:digital-clock
          dateFormat:
            weekday: long
            day: 2-digit
            month: short
          timeFormat:
            hour: 2-digit
            minute: 2-digit

Everything else is working without any problem… Thank you for all suggestions.
BTW: tried with cardmod, styles for wall panel, …

    - 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: right!important;
           font-weight: 300!important;
           padding: 8px 0px;
           background: transparent;
           border: 0px;
           color: rgb(255, 255, 255);
           position: absolute;
           right: 30px;
           bottom: 15px;
           z-index: 200;
          }
          .first-line {
            font-size: 7em!important;
            font-weight: 900;
            }
          .second-line {
            font-size: 1.1em!important;
            }

Is there a way to style the badges?
I tried ‘label-badge-color’ and ‘label-bade-background’ but that didn’t work.

  style:
    wallpanel-screensaver-container:
      background-color: '#333333dd'
    wallpanel-screensaver-info-box:
      '--wp-card-width': 500px
      margin-left: 350px
      margin-top: 50px
      background-color: rgba(255, 255, 255, 0.4)
      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:
      '--label-badge-background-color': '#000000'
      '--label-badge-text-color': '#ffffff#'
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      '--ha-card-border-width': 0px
      '--primary-background-color': '#fafafa'
      '--secondary-background-color': '#e5e5e5'
      '--primary-text-color': '#ffffff'
      '--secondary-text-color': '#dddddd'
      filter: >-
        drop-shadow(0px 0px 3px rgb(17, 17, 17)) drop-shadow(0px 0px 8px rgb(30,
        30, 30))
  badges:
    - type: entity
      show_name: false
      show_state: true
      show_icon: true
      entity: sensor.XXX
      show_entity_picture: true
      state_content: state

is it possible to have a 3 column grid layout with views? I tried the code below but all three views are stacked on the left hand side

wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  card_interaction: true
  screensaver_entity: input_boolean.wallpanel_screensaver
  style:
    wallpanel-screensaver-container:
      background-color: '#333333dd'
    wallpanel-screensaver-info-box:
      '--wp-card-width': 550px
    wallpanel-screensaver-info-box-content:
      '--primary-background-color': '#fafafa'
      '--secondary-background-color': '#e5e5e5'
      '--primary-text-color': '#212121'
      '--secondary-text-color': '#727272'
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      '--ha-card-border-width': 0px
      width: calc(100vw - 100px)
      justify-content: space-between
  cards: []
  views:
    - title: View 1
      wp_style:
        grid-row: 1 / 1
        grid-column: 1 / 1
    - title: View 2
      wp_style:
        grid-row: 1 / 1
        grid-column: 2 / 2
    - title: View 3
      wp_style:
        grid-row: 1 / 1
        grid-column: 3 / 3

Hello everyone, how can i set a single image as background, without having the fade/ken_burns effect? ​​I have the image in local

I looked for 'Wallpanel ’ in HACS, but I could not find it.
Updat: the search did not provide, but I found it by scrolling down.
Thanx.

If I’m trying to use my local Immich server which is on the same LAN and subnet, do I need to stand up a local instance of Traefik or nginx? When trying to use use the API without either of these, the screen saver just shows a black screen and fails to load any photos.

Hi hiddevanbrussel, which card do you use for your rooms?

Hi,

I just set this up for Traefik 2.9.10.

I have a setup like this:
https://immich.my-domain.com
https://hass.my-domain.com

With immich running in docker with the following CORS labels for traefik:

  - "traefik.http.middlewares.immich-cors.headers.accesscontrolallowmethods=GET,POST,OPTIONS"
  - "traefik.http.middlewares.immich-cors.headers.accesscontrolalloworiginlist=https://hass.my-domain.com"
  - "traefik.http.middlewares.immich-cors.headers.accesscontrolallowheaders=*"
  - "traefik.http.middlewares.immich-cors.headers.accesscontrolmaxage=100"
  - "traefik.http.middlewares.immich-cors.headers.addvaryheader=true"
  - "traefik.http.routers.MYIMMICHROUTER.middlewares=immich-cors"

Make sure to update the domain and MYIMMICHROUTER, then restart both immich and traefik afterwards.
This should work (and dont setup CORS with * as origin (most examples shows this)).

Custom button-card. With some own magic

Decluttering Card

Custom:Decluttering-card

I have several tablets that are dedicated to being dashboards around the house. I inititally used the Fully Kiosk screensaver functionality with Fotoo being the screensaver. WallPanel is heads and should above that solution! WallPanel allows me to put the tablets on my no Internet access subnet, since everything is coming from the Home Assistant server. Here is my question:

As stated, I have several tablets. The WallPanel settings are mostly the same, but I am still working on tweaking them. I would like to create a master profile for all devices and allow minor changes like media folder and battery level. Also, I want to be able to flip to other custom setting, such as when the doorbell rings (my panels show the front door camera for 2 minutes). Is this possible with WallPanel profiles? I assume it would be set up in the config file, if it is possible.

thanks. I’ll try it.

Hi,

has a similar issue with the images on the HA drive. Fixed ist by changing the image_list_update_interval to 10 sec. Your image list is updating after 24 hours.

Walter

Hi,
Great addon :slight_smile: :raised_hands:
I just spent hours to sort out enabled_on_tabs setting. I put some clarifications here to help others (and hopefully educate chatGPT to avoid wrong advise !!). Update the doc ?

When using enabled_on_tabs setting (which really is enabled_on_views) it is mandatory to set a path on the desired views.
enabled_on_tabs requires the list of desired views path, not title.

By default, Home Assistant does not set a path to views and uses /0 and /1 to access the first and second view of a dashboard.

Below is a full working test dashboard example with two views, Wallpanel enabled on the first only.
Hope it helps,

wallpanel:
  enabled: true
  enabled_on_tabs:
    - clock
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: false
  idle_time: 5
views:
  - type: sections
    title: Clock
    path: clock
    max_columns: 1
    icon: mdi:home-clock-outline
    sections:
      - type: grid
        cards:
          - type: heading
            heading_style: title
          - type: clock
  - type: sections
    title: Sun
    max_columns: 1
    icon: mdi:sun-clock
    sections:
      - type: grid
        cards:
          - type: heading
            heading_style: title
          - type: entity
            entity: sun.sun

absolutely love wallpanel thank you @j-a-n for this work
i have been using it for a while now on 2 Nspanel pro in my house showing photo of my family no cards clock etc etc only photos i just encountered a strange issue until yestarday my photos would show on full screen from this morning my photos varies from landscape, half screen etc. i use a standard confg
wallpanel:
enabled: true
hide_toolbar: false
hide_sidebar: false
fullscreen: true
idle_time: 15
display_time: 70
image_animation_ken_burns: false
image_url: /local/zoe/
style:
wallpanel-screensaver-container:
background-color: ‘#00000099
wallpanel-screensaver-info-box:
‘–wp-card-width’: 430px
‘–wp-card-margin’: 1px
‘–wp-card-padding’: 0px
‘–wp-card-backdrop-filter’: none
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,
cards:
i also tried image_fit_portrait /landscape but no luck
i have not changed anything so i just wanted to know if someone else encountered same issue maybe due an update ?
Thanks guys

Update: it started working… no idea why :slight_smile:

wallpanel:
  enabled: true
  enabled_on_tabs:
    - wallpanel
  debug: false
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 10
  fade_in_time: 3
  crossfade_time: 2
  display_time: 20
  black_screen_after_time: 90
  control_reactivation_time: 0.5
  keep_screen_on_time: 0
  screensaver_stop_navigation_path: /dashboard-wallpanel
  image_url: media-source://synology_dsm/1980QXRRECDJ1/26Hfq7ydY
  image_fit: cover
  image_animation_ken_burns: true
  image_list_update_interval: 3600
  image_order: sorted
  image_excludes: []
  show_exif_info: false
  fetch_address_data: true
  exif_info_template: >-
    ${address.town|address.city!prefix=!suffix= //
    }${DateTimeOriginal!options=year:numeric,month:long}
  screensaver_entity: input_boolean.kitchentabletscreensaver
  info_animation_duration_x: 30
  info_animation_duration_y: 11
  info_animation_timing_function_x: ease-in-out
  info_animation_timing_function_y: ease-in-out
  info_move_pattern: random
  info_move_interval: 0
  info_move_fade_duration: 2
  cards:
    - type: vertical-stack
      cards:
        - type: weather-forecast
          entity: weather.forecast_home
          show_current: true
          show_forecast: true
          forecast_type: daily
          forecast_slots: 5
          secondary_info_attribute: humidity

I just thought I’d help everyone. If you have folders in your media and you want specific folders for specific views, here’s exactly what you have to put.

This took a lot of trial and effort to get right. This is profiles using specific views and each have unique folders to pull from. Don’t add a / to the path or anything.

So if you open media and you have a folder there you want to use, put /local/folder to show /media/folder as the background. Pretty annoying if you ask me.

wallpanel:
enabled: true
hide_toolbar: false
hide_sidebar: false
fullscreen: false
idle_time: 1
debug: false
profiles:
number1profile:
cards:
image_url: /local/number1
views:
- title: number1view
style:
wallpanel-screensaver-info-box-views:
width: 100vw
number2profile:
cards:
image_url: /local/number2
views:
- title: number2view
style:
wallpanel-screensaver-info-box-views:
width: 100vw
number3profile:
cards:
image_url: /local/number3
views:
- title: number3view
style:
wallpanel-screensaver-info-box-views:
width: 100vw

Can you share your yaml for the fusion dashboard?

Anyone else notice the top Toolbar indicator (white underline, in my case) never moves to the View that you are on, its always under the first (left most) view in the Toolbar list?

I only have this issue on the dashboard using WallPanel.

Question, is it possible to leverage this add-on to display just a simple black screen saver with moving clock (and date?) similar this this?