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

Share your Projects!
,
1

Hi all,

recently I made a major revision to a project I’ve been working on for a while.

It is an HA frontend plugin intended for wall mounted Smart Home Control Panels.

Features:

  • Photo slideshow screensaver with images from HTTP or local HA media sources

  • Show dashboard cards and badges of your choice on top of the images

  • Smoothly animated movement of the cards / badges using CSS

  • Screen wake lock

  • Fullscreen view

  • Ability to hide side and top bar

  • Customizable style

Here is a screenshot of the screensaver:

light-style
light-style1260×810 154 KB

Link to the repository:

Also available as HACS default repository.

I am happy to receive your feedback!

22 Likes
2

Hello
I don’t know if this is the right way to ask a question, but I don’t know where else to do it so I’ll take my chances and hope for the best.
The first thing I wonder is how do I change the appearance of the “wallpanel-screensaver-info-box”? I’ve found information and code samples on the github page, but I don’t know where to put it to make this happen. I think I’ve tried so many ways without success, so now I’m trying to get help with this here. How do I make the background transparent, for example?
Regards, Peter

3

Hello again
I managed to solve it myself in the end.
Peter

4

Can someone share their project? :smiley: i need inspo!

5

I’m using this in combination with fully-kiosk to get a hall-mounted tablet to play a lovelace card when someone walks up to it. It works great and was easy to setup. I simply installed it and added the following to my lovelace config yaml:

wallpanel:
  enabled: false
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 0

My only wish was that this would support wake on motion from the tablet, but I understand that that’s harder to do.

1 Like
6

You can use an boolean input entity to turn the screensaver on and off via an automation.
See screensaver_entity:

All you need in addition is some kind of motion sensor.
Maybe you can try using the motion sensor from Fully Kiosk Browser.

8

I am experimenting with this and so far like it. By default it is showing the weather forecast, I’d like to add a clock as well. My code is below but the clock is not showing, any help appreciated.

wallpanel:
  enabled: true
  fullscreen: true
  hide_sidebar: true
  hide_toolbar: true
  image_url: http://picsum.photos/${width}/${height}?random=${timestamp}
  image_fit: cover
  image_list_update_interval: 3600
  image_order: sorted
  screensaver_stop_navigation_path: /fire10-beta/stacks
  idle_time: 10
  cards:
    - type: custom:digital-clock
9

uhg, a reboot fixed it. Sorry to bother.

10

Not sure if this is possible, as it is not stated in the documentation, but is it also possible to use another local folder aside from /media to use in the image_url?

I have the images in the config/www/chromecast/ so I can use them in image cards elsewhere in Home Assistant. I’m not sure though how to format the YAML such that wallpanel uses the images in this folder too.

My current dashboard configuration (the wallpanel section) looks like this:

wallpanel:
  enabled: true
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: false
  idle_time: 10
  keep_screen_on_time: 6000
  image_url: 'media-source://config/www/chromecast'
  image_list_update_interval: 3600

Edit:
I’ve managed to solve this. After mounting the chromecast folder as a volume in my docker-compose.yml I was able to declare it as a media_dirs in configuration.yaml. Since it now shows up in the media browser, wallpanel is able to use the pictures from this folder :slight_smile:

11

Has anyone been able to reduce the padding between cards in the screensaver info panel? Thanks!

@j-a-n, this is a great project! Very nice work.

12

Would the screen saver work with Google photos ?

13

Thanks!
Please have a look at the documentation.
You can start and play around with this style config:

      style:
        wallpanel-screensaver-info-box:
          '--wp-card-padding': 1px
          '--wp-card-margin': 1px
1 Like
14

You will have to mount / sync your google photos to your HA instance.
Then you can share this folder as a media folder.
See the following issue:
https://github.com/j-a-n/lovelace-wallpanel/issues/19#

15

Thank you. I figured out that my issue was related to the markdown card having excess padding.

16

I am feeling really dumb here, I can not get this to work. Can someone please point me in the right direction?

I created a new Dashboard, clicked the 3 dots on the right, choose Raw configuration editor, and put this code in.

views:
  - title: Home
wallpanel:
  enabled: true
  fullscreen: false
  hide_sidebar: false
  hide_toolbar: false
  debug: true
  image_url: https://source.unsplash.com/random/${width}x${height}?sig=${timestamp}
  image_fit: contain
  image_order: sorted
  screensaver_stop_navigation_path: null
  idle_time: 1
  cards:
    - type: custom:digital-clock

And I get …nothing, no picture, no clock… just a white screen.

Can someone try this and tell me WTF I am doing wrong ? Thanks

17

@Cactus_J Did you solve this? I am having the same issue

19

You need to insert the wallpanel configuration above the views:

wallpanel:
  enabled: true
  fullscreen: false
  hide_sidebar: false
  hide_toolbar: false
  debug: true
  image_url: https://source.unsplash.com/random/${width}x${height}?sig=${timestamp}
  image_fit: contain
  image_order: sorted
  screensaver_stop_navigation_path: null
  idle_time: 1
  cards:
    - type: custom:digital-clock
views:
  - title: Home
...
2 Likes
20

Hello,

When someone ring my doorbell I get a popup (browser_mod.popup) on my tablet with the bell image, however when the wallpanel is active the popup appears below the Wallpanel image (I have to touch the tablet screen to see the popup). Is there any way to disable the wallpanel by calling a function through an automation? I accept suggestions…

Thanks for the time spent!

Best regards!
Goncalo Almeida

21

Hello!
You can use an boolean helper entity to switch the screensaver on and off. See screensaver_entity in the README.

1 Like
22

Hello,

Perfect, thank you mate!
Is there any way to just reactivate the wallpanel only when you want (through automation or variables)?

Thanks for the time spent!

Best regards!
Goncalo Almeida