šŸ–¼ļø WallPanel Addon - Wall panel mode for your Home Assistant Dashboards

I think I found the issue, if you never set a URL for your default-tab (first tab), it gets set to empty string, which in actuality makes your url be 0. The code uses activeTab here lovelace-wallpanel/wallpanel.js at 1cfbf705afd20c0796e9922e7892143340e3342b Ā· j-a-n/lovelace-wallpanel Ā· GitHub which is set from tab which is pulled from the URL here lovelace-wallpanel/wallpanel.js at 1cfbf705afd20c0796e9922e7892143340e3342b Ā· j-a-n/lovelace-wallpanel Ā· GitHub. So essentially, the URL sets the active tab. So enabled_on_tabs needs to match whatever your URL is, not necessarily your tab name.

Canā€™t get wallpanel to show my google photos. Is something wrong with my YAML?

Right now all it shows is random images from a random source and no matter what I do, I canā€™t get my photos to appear, even after granting access to the Google Photos API. I also canā€™t get wallpanel working on just one device, via browser mod, unless I enable it from the top, for some reason. Any help will be greatly appreciated.

           wallpanel:
          enabled: true
          profiles:
            device.idnumberhere:
              enabled: true
              hide_toolbar: true
              hide_sidebar: true
              fullscreen: true
              image_fit: cover
              display_time: 15
              image_url: media-entity://camera.google_photos_album_namehere_media

@j-a-n
Thanks for an excellent addon! I started using it yesterday on my main tablet, because using Fotoo as a screensaver made the tablet refresh all my cards when switching back to Home Assistant as the foreground app. Thanks to your addon, I can now stay entirely in Home Assistant. :slight_smile:

However, one of the nice features of Fotoo is that it can make the background ā€œbokehā€, based on the actual displayed image. I tried to replicate that effect by using the image_url_entity helper and then using that image as a background for a card also on the dashboard. However, for some reason it seems to not reflect the currently used imageā€¦ and it is a bit of a hack. Please see my code below.

Do you think itā€™d be possible for you to include the option to use the currently displayed image with a blur effect as a background? That way, vertical/portrait images will look a million times better on a horizontal display. Thank you. If you arenā€™t planning on including that option, can you then guide me on how to use the actual displayed image?

wallpanel:
  enabled: true
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: false
  idle_time: 0.1
  image_url: media-source://media_source/local/nuc
  image_fit: contain
  image_order: random
  display_time: 60
  image_url_entity: input_text.image_url_entity
  cards: []
  style:
    wallpanel-screensaver-container:
      background-color: '#00000000'
views:
  - title: Wallpanel
    sections:
      - type: grid
        cards:
          - type: custom:button-card
            styles:
              card:
                - width: 110vw
                - height: 110vh
                - margin: 0
                - padding: 0
                - position: fixed
                - top: '-5vh'
                - left: '-5vw'
                - z-index: 1
                - overflow: hidden
            tap_action:
              action: none
            hold_action:
              action: none
            card_mod:
              style: |
                ha-card {
                  background-image: url('http://homeassistant:8123/local/images/googlephotos/{{ states('input_text.image_url_entity').split('/')[-1] }}');
                  background-color: black!important;
                  background-size: cover;
                  background-position: left;
                  filter: blur(50px) brightness(100%) saturate(1); 
                }

@j-a-n Dā€™OH! Never mind ā€“ found out I could just use the ā€œimage_backgroundā€ thatā€™s already included. :smiley: Thanks again for all your work on this!

However, I have another question. How does the camera motion work? Canā€™t get it to work on my tablet (permissions allowed, tried both through Fully Kiosk, native HA app and Chrome. Of course I activated camera_motion_detection_enabled. How do I specify which camera it should use?

@j-a-n

Thanks for this. Can you guide me on the creating the helper please for the query?

I have already created one for the Day and Night profiles called ā€œinput_select.wallpanel_screensaverā€

has anyone been able to arrange multiple views in a grid pattern on the screensaver?

I can arrange individual card by using wp_style but it does not seem to work for views

  cards:
    - type: custom:simple-clock-card
      use_military: true
      hide_seconds: false
      bold_clock: false
      wp_style:
        grid-row: 1 / 1
        grid-column: 2 / 2
        align-self: start

this is the code i use for views that does not work:

  views:
    - title: View1
      wp_style:
        grid-row: 1
        grid-column: 1
        align-self: start

First, thanks @j-a-n for the great work, and the rest of you for the lively discussion!

I stumbled across this strange behavior thatā€™s been driving me crazy for a week now. When screensaver is based on a view, it always seems to append a Weather forecast Card at the end of the referenced view, always configured to use entity ā€œweather.homeā€ and ā€œShow current weather onlyā€.

**Update: I have finally found an explanation here: šŸ–¼ļø WallPanel Addon - Wall panel mode for your Home Assistant Dashboards - #414 by jeffcrum **
In short: if there is no ā€œcards:ā€ the addon automatically adds the Weather Forecast card, I guess for a demo effect. ā€œcards:ā€ must be present even if screensaver is to use a view. Adding an empty ā€œcards:ā€ to the config removes the demo weather card.

If the view is empty, it will only show the Weather Forecast card that is obviously not part of the dashboard yaml.

This phantom Weather Forecast card always refers to an entity ā€œweather.homeā€, which I didnā€™t even have among my entities, resulting in an ā€œEntity not available ā€˜weather.homeā€™ā€ error. As soon as I renamed one of my weather provider entities to ā€œweather.homeā€, the error got replaced by a functioning weather card. Which is not what I want.

If I use Cards: instead of Views: for the screensaver, the Weather card is not there and everything works fine.

This looks much like a bug to me. Several other users seem to have stumbled across this in the past, but I didnā€™t find an explanation or a solution yet.

Here is an example of a minimal dashboard that shows this behaviour. Note that there is no mention of ā€œweather.homeā€ in it, and yet the entity is required, and if it exists, it gets shown in the screensaver (see screenshot).

wallpanel:
  enabled: true
  debug: false
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: true
  idle_time: 5
  views:
    - title: Screensaver
views:
  - theme: Backend-selected
    title: Home
    icon: mdi:home
    layout: {}
    type: sections
    sections:
      - type: grid
        cards:
          - type: heading
            heading: New section
  - type: masonry
    title: Screensaver
    sections: []
    subview: false
    cards:
      - type: heading
        icon: mdi:fridge
        heading: Screen saver
        heading_style: title
    badges: []

@j-a-n Small feature request: would it be possible to add the idke_time as an input text helper entity (or similar) as well?

That way, you would be able to disable or change the idle time if for instance music is playing etc.

Thanks for your work on this again ā€“ really feature rich!

Can you post an exemple with WallPanel that not showing any cards ?

Iā€™m playing with this to see if it suits my use case. I started with the basic example. Issue I am experiencing is that once it is enabled, the sidebard disappears and I canā€™t find a way to get it back. I am testing this using an edge browser to start with then I intend to use it in my Android wall tablet once I am certain that I have configured things correctly.

Also the top menu bar disappears. I cannot find a way to take it back and cannot edit the dashboard.

Having an empty ā€œcards:ā€ or ā€œcards: nullā€ does the trick for me.

wallpanel:
  enabled: true
  debug: false
  hide_toolbar: false
  hide_sidebar: true
  fullscreen: true
  idle_time: 5
  cards: null
1 Like

You can use entities everywhere in the wallpanel config.
i.e.:

wallpanel:
  idle_time: '${entity:input_text.wallpanel_idle_time}'

See the README for details.

1 Like

An empty list would work also:

wallpanel:
  cards: []

Hi!

First of, Wallpanel is such a nice thingy to setup and use as a tablet dashboard display, great work!

Iā€™m struggling a bit with one thing tho, I use the coverart of a media player as the image and would like to blur it - and Iā€™m been able to do it but it changes back and forth between the blurred and unblurred versions every 10s or something. This is part of the config I run right now:

  image_url: ${entity:sensor.dashboard_samsung_screensaver_image_url}
  image_fit: cover
  style:
    wallpanel-screensaver-image-one:
      filter: 'blur(30px)'
      opacity: 0.4

And the blur + opacity works for 10s, then it turns off for 10s, then it turns on again etc :slight_smile: Any ideas of how I can get this to stick? Iā€™ve tried with styling: wallpanel-screensaver-image-one-background, wallpanel-screensaver-image-one-container and wallpanel-screensaver-image-one all with the same result.


I am using my NAS Synology to display pics for a screen saver.
2 questions here

Can I assign more than one folder to the line image_url: ?

Is there a way to create some kind of schedule and assign a dedicated folder based on a day / time or period of the year without having to make the change manually every time.

I have tried different options but nothing seems to work.

Is there a way to activate and deactivate the wallpanel mode based on a toggle (helper) linked to a button on the dashboard?

Hi is it possible to use Image entity as Background instead of camera entity?

I have troubles to Set Up immich as Background Service.
My Work around is to use a hacs Integration which will create image.immich_Xxx. this works and my Pictures are shown in Home assistant

Pictures are shown but im unable to use ā€œimage_url: media-entity://ā€ function.

Edit: Also tried media-source://Image but also results in a blackscreenā€¦

Maybe a dumb question but here goes. If I use Wall Panel settings for my dashboard I am using for my wall mounted tablets, do I need the app to keep the tablet from going to sleep, canā€™t remember the name at the moment, dang old age!!

There are two images between which the system automatically switches. Therefore you should set the same style on wallpanel-screensaver-image-two too.

Thanks, that worked beautifully!