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

can you share your code?

image_url: >-
{% if states(‘weather.forecast_home’) == ‘sunny’ %}
https://api.unsplash.com/photos/random?MYAPI&query=sunny,sun,sunny-day
{% elif states(‘weather.forecast_home’) == ‘cloudy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=cloudy,overcast,overcast-day
{% elif states(‘weather.forecast_home’) == ‘rainy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=rainy,wet,rainy-day
{% elif states(‘weather.forecast_home’) == ‘snowy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=snowy,winter,snowy-day
{% elif states(‘weather.forecast_home’) == ‘stormy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=stormy,thunderstorm,thunderstorm-day
{% elif states(‘weather.forecast_home’) == ‘partlycloudy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=partly-cloudy,partly-cloudy-day
{% elif states(‘weather.forecast_home’) == ‘fog’ %}
https://api.unsplash.com/photos/random?MYAPI&query=foggy,foggy-day
{% elif states(‘weather.forecast_home’) == ‘lightning-rainy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=lightning-rainy,lightning-rainy-day-time
{% elif states(‘weather.forecast_home’) == ‘snowy-rainy’ %}
https://api.unsplash.com/photos/random?MYAPI&query=foggy,snow-rain-day,snow-rain
{% else %}
https://api.unsplash.com/photos/random?MYAPI&query=weather
{% endif %}

3 Likes

Yeah i get grey screen, it doesn’t fetch the picture. But maybe because I am using day night profile in my set up. Meaning that it during the day it displays daytime image and a night it darkens and displays night time images.

I am getting weather is undefined. where did you set your weather entity?

My time entity is the one I use in Home Assistant. Not what I did differently.

Just wanted to install this wallpanel but run into issues trying to add the custom repository:
image
Running the latest version of HA on Raspberry:
Core: 2024.8.1
Supervisor: 2024.08.0
Operating System: 12.4
Frontend: 20240809.0
HACS: 1.34.0

Does anybody have a solution to this? I really would like to use this to display Google Photos on my TV.

Installed it manually and got it partially working. I can show the cards, but the Google photos don’t show up (the background stays black). The code I have in the raw editor is:

wallpanel:
  enabled: true
  debug: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  image_fit: contain
  image_url: media-entity://camera.google_photos_google_hub_media
  show_progress_bar: true
  idle_time: 0
  image_list_update_interval: 30
views:
  - title: Google Photos
    cards:

What am I doing wrong? The Google Photos work when using it in a Picture entity Card.

Try image_url: >- instead of image_url:

Nope, didn’t work sadly.

Update: I was under the assumption that the wallpanel starts immediately, but it doesn’t. It is like a screensaver… I set the idle_time to 0.01 to make it work.

Seems to be running into issues one after another.
I now have the Wallpanel running as I want in my Chrome browser. However on my chromecast the screen goes black without displaying anything (even with debug on).
Anybody knows what the issue could be? (Have replaced the raw code with a very basic one but that didn’t help.

Hi. I can’t find the solution. I use wallpanel for my tablet and it works perfectly with full screen and everything but then I want to open it in my android phone and it’s full screen unscrollable …

How can I disable it if it’s mobile phone?

Thanks,

@dalton5

I have separate dashboards for mobile and for tablet with wall panel only running on tablet

You can use profiles to enable wallpanel on individual devices. Please see:

wallpanel:
  enabled: false
  profiles:
    device_xy:
      enabled: true

Hi.
I want to use the wallpanel on my NS Panel Pro. And I want the time to be displayed as a screensaver that is always on. I was able to show the time, but the screensaver is fading out within a few minutes. I want it to stay there till the panel is touched. Furthermore, I also saw that the time is not perfectly centered (added picture).
Could anyone please advice about those 2 problems
Thanks a lot

wallpanel:
  enabled: true
  fullscreen: true
  hide_sidebar: true
  hide_toolbar: true
  screensaver_stop_navigation_path: /dashboard-badkamer/0
  idle_time: 10
  fade_in_time: 2
  keep_screen_on_time: 0
  black_screen_after_time: 0
  show-images: false
  style:
    wallpanel-screensaver-info-box:
      margin-left: -30px
      margin-top: -30px
      font-weight: 600
  cards:
    - type: custom:mushroom-entity-card
      entity: sensor.time
      icon_type: none
      primary_info: none
      card_mod:
        style:
          mushroom-state-info$: |
            .container { 
              align-items: center;          
            } .secondary {  
              --card-secondary-font-size: 150px;  /* font size clock */
              padding: 248px;
            }

1 Like

This is such a great addon - has been great on my tablet dashboard! Question - is there any way to get the weather card to align with the bottom-left corner of the screen, rather than top-left? I’ve tried so many ways and it doesn’t seem to do what I want. I haven’t been able to find the answer in the documentation. Appreciate any tips, thanks!

Hi, I need help, because I’m not able to bring the wallpanle to work.
I want to access my Photos-Folder of my synology NAS to play the photos randomly but all I get is the sign of broken image display (see att).
Attached my yaml-code:

wallpanel:
  enabled: true
  image_url: media-source://synology_dsm/<ser.no.>/0
  image_order: random
  show_images: true
  image_list_update_interval: 3
  fullscreen: false
  idle_time: 1

What am I doing wrong. Can someone help me.
Thanks
Oliver
Screenshot 2024-09-28 210233

Hi all,

https://community.home-assistant.io/t/wallpanel-addon-wall-panel-mode-for-your-home-assistant-dashboards/449857/362?u=bjkluft

Sadly I’m still not able to solve this issue. I have created a separate dashboard with a 1 panel view. This view is being casted to the Chromecast but the Wallpanel screensaver just doesn’t start. If I open this dashboard in my browser the screensaver works like a charme.
Any ideas?

Hey there,

I Need help…
How is the correct url to the Media folder in the left sideline?

I do have a Template Sensor, which should change the picture if Horizont changes.

In the actual Wall Panel confi.
There is
Image_url: /
This works, because in this folder only 1 Picture exist at the Moment.

But I want to have 2 now in the folder, because it should Change.

How is the correct path?

What I Need to enter instead of the „/„ in image_url?

Herr my Sensor code.

Thank you!


{% set condition = states('sun.sun') %}
         {% if condition == 'above_horizon' %}
             /local/IMG_5602.jpeg
         {% elif condition == 'below_horizon' %} 
             /local/IMG_4854.jpeg
         {% else %}
            /local/IMG_4852.jpeg
         {% endif %}

I’m trying to follow the instructions to only enable WallPanel on my iPad in the companion app. I set up Browser Mod, added it as a device, but from here I’m lost.

I want WallPanel to be disabled for all devices/browsers EXCEPT my iPad companion app specifically. It seems the parent “enabled: false” is overriding any specific profiles I’m trying to configure after it, even with an “enabled: true” under that specific profile?

Can anyone tell me why the profiles and user.xyz based filter does not work in HA 2024.10.0? This is my config:

wallpanel:
  enabled: true
  debug: true
  hide_sidebar: true
  hide_toolbar: true
  profiles:
    user.xzy:
      enabled: false

But if I sign in with user xzy the sidebar and the toolbar is missing.

What am I missing here?

Hoping someone might be able to help me out with the below…

Im trying to have the weather conditions/temp on the left line up with the 'Welcome to Orangebark Loop and extend out to the right with words

But when the conditions are longer worded it extends out.

Thanks

    - type: weather-forecast
      entity: weather.home
      name: ' '
      card_mod:
        style: |
          ha-card {
           text-align: right!important;
           font-weight: 300!important;
           background: transparent;
           border: 0px;
           color: rgb(255, 255, 255);
           right: 208px;
           bottom: -541px;