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

I updated with HACS…
Anyway, please, how can I solve the problem?

Did you clear your cache?

I newly installed wallpanel, and everything works fine. The sidebar and top bar are hidden, and the screensaver runs images from Unsplash. When I touch the screen to stop the screen saver and enter the home assistant UI, the top bar with the tabs shows up and remains after that until I restart the home assistant. When I restart it doesn’t show until it goes to the screensaver and returns to the UI. What am I missing in my code?
title: Home
wallpanel:
enabled: false
debug: false
hide_toolbar: true
hide_toolbar_action_icons: true
hide_sidebar: true
fullscreen: true
idle_time: 10
screensaver_stop_navigation_path: /lovelace/dashboard-tablet10/default_view
image_url: >-
https://source.unsplash.com/random/${width}x${height}?sig=${timestamp}
image_fit: fit
image_list_update_interval: 3600
image_order: sorted
image_excludes:
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
card_interaction: true
cards:
- type: custom:digital-clock
dateFormat:
weekday: long
day: 2-digit
month: short
timeFormat:
hour: 2-digit
minute: 2-digit
- type: weather-forecast
entity: weather.home_2
show_forecast: true
style:
wallpanel-screensaver-info-box:
font-size: 4vh
font-weight: 600
color: ‘#eeeeee
text-shadow: >-
-2px -2px 0 #03a9f4, 2px -2px 0 #03a9f4, -2px 2px 0 #03a9f4, 2px 2px 0
#03a9f4

Your code is not yaml

Well I copied the code from the Lovelace Raw configuration editor by clicking the three dots on the top right and going into the Raw configuration editor. It might not be pasted in the correct format here.

How to help us help you - or How to ask a good question => Format it properly

Got it thanks, here is the code. I stripped down the animation etc. to see what is causing the issue.

In addition I am starting to see another issue, I removed the weather card from wall panel info box and reloaded and restarted home assistant, but it still shows it. So, I did the following

  1. Cleared the fully kiosk cache both in the Fire tablet App settings as well as fully kiosk settings. Still showing
  2. Removed wall panel and installed again and added the relevant code snippet
  3. Created a new tab only with one entity and added all the wallpanel code snippet

Nothing changed, still its getting the weather card in the info box from somewhere

wallpanel:
  enabled: false
  debug: false
  hide_toolbar: true
  hide_toolbar_action_icons: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 10
  screensaver_stop_navigation_path: /lovelace/default_view
  image_url: >-
    https://source.unsplash.com/random/${width}x${height}?pleasant,nature,landscape,parks,garden,flowers,forest&sig=${timestamp}
  image_fit: cover
  image_list_update_interval: 3600
  image_order: sorted
  cards:
    - type: custom:digital-clock
      dateFormat:
        weekday: long
        day: 2-digit
        month: short
      timeFormat:
        hour: 2-digit
        minute: 2-digit
    - type: weather-forecast
      entity: weather.home
      show_forecast: true
  card_interaction: true
  style:
    wallpanel-screensaver-info-box:
      font-size: 4vh
      font-weight: 600
      color: '#eeeeee'
      text-shadow: >-
        -2px -2px 0 #03a9f4, 2px -2px 0 #03a9f4, -2px 2px 0 #03a9f4, 2px 2px 0
        #03a9f4

I have several views on my dashboard, one is the door camera, and have frigate proxy installed.

Is it possible to automagically navigate to my doorcam page when frigate detects movement ?

I think this can be achieved with browser_mod and a popup.

Thanks, but I’m not a fan of browser mod, I will try and find another solution.

Thank you for this great add-on. Here is my wallpanel right now. I want to add some options in future.

5 Likes

I found and fixed the issue. It seems that the problem was related to screensaver_stop_navigation_path, which was directing to a different dashboard that didn’t have wall panel enabled. So I was seeing the top bar(not sure why the sidebar wasn’t shown). However, once I changed it to the dashboard with wall panel, it started working properly. The weather card issue is also related to this. I just wanted to share this information in case anyone faces a similar issue.

1 Like

would you mind sharing your code for this? it is stunning!

Hi all,

Could you please help me what is the error here?

The config has been managed properly I guess

Thank you in advance!!!

Hi, are you trying to add the panel code in a lovelace card?

I try to create a new dashboard with the hide toolbar and hide sidebar features using this wallpanel addon.
What am I doing wrong…? :thinking:
Thanks!

Specifically on how you tried to do it: did you create a card ON an existing dashboard and put the code for the panel in there?

Your question helped a lot! Thank you!
I should add the wallpanel codes at dashboard level using the raw configuration editor.

I too would like to know how to get the cards in a different location than vertically along the left. Thanks!

wallpanel:
  enabled: true
  debug: false
  hide_toolbar: true
  show_progress_bar: true
  image_animation_ken_burns: false
  hide_toolbar_action_icons: false
  hide_sidebar: true
  fullscreen: false
  idle_time: 10
  screensaver_stop_navigation_path: /dashboard-new/home
  image_url: >-
    https://source.unsplash.com/random/${width}x${height}?wallpapers/android&sig=${timestamp}
  image_fit: cover
  show_image_info: true
  image_list_update_interval: 3600
  image_order: sorted
  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: right!important;
           font-weight: 300!important;
           padding: 8px 0px;
           background: transparent;
           border: 0px;
           color: rgb(255, 255, 255);
           position: absolute;
           right: 80px;
           bottom: 70px;
          }
    - type: custom:mushroom-chips-card
      chips:
        - type: entity
          entity: person.*******
          content_info: none
          use_entity_picture: true
          tap_action:
            action: navigate
            navigation_path: '#hidde'
          card_mod:
            style: |
              /* Color border around avatar to show person status */
              ha-card {
                --chip-background:
                {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                  rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                {% else %}
                  rgb(var(--rgb-state-person-zone))
                {% endif %};
              } 

              /* Slightly enlarge & bring to front on hover */
              ha-card:hover {
                transform: scale(1.2);
                transform-origin: top center;
                z-index: 1;
                transition: all 1s;
              }
        - type: entity
          entity: person.*******
          use_entity_picture: true
          content_info: none
          card_mod:
            style: |
              /* Color border around avatar to show person status */
              ha-card {
                --chip-background:
                {% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
                  rgb(var(--rgb-state-person-{{ states(config.entity) | replace('_', '-') }} ))
                {% else %}
                  rgb(var(--rgb-state-person-zone))
                {% endif %};
              } 

              /* Slightly enlarge & bring to front on hover */
              ha-card:hover {
                transform: scale(1.2);
                transform-origin: top center;
                z-index: 1;
                transition: all 1s;
              }    
        - type: template
          entity: sensor.afvalwijzer_next_type
          tap_action:
            action: navigate
            navigation_path: '#afval'
          card_mod:
            style: |
              /* Color border around avatar to show person status */
              ha-card {
                --chip-background:
                 {% set state=states('sensor.afvalwijzer_next_type') %}
                 {% if state=='pmd' %}
                 orange
                 {% elif state=='restafval' %}
                 grey
                 {% else %}
                 green
                 {% endif %}
                } 
              ha-card:after {
                content: "{{states("sensor.afvalwijzer_next_in_days") | capitalize}}";         
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                border-radius: 100%;
                top: -5px;
                width: 50%;
                height: 50%;
                font-size: 0.3em; 
                right: -5px;
              }
          icon: |
            {% set state=states('sensor.afvalwijzer_next_type') %}
            {% if state=='pmd' %}
            mdi:trash-can
            {% elif state=='restafval' %}
            mdi:trash-can
            {% else %}
            mdi:food
            {% endif %}
          icon_color: |-
            {% set state=states('sensor.afvalwijzer_next_type') %}
            {% if state=='pmd' %}
            white
            {% elif state=='restafval' %}
            white
            {% else %}
            white
            {% endif %}
        - type: template
          entity: sensor.window_count
          card_mod:
            style: |
              /* Color border around avatar to show person status */
              ha-card {
                --chip-background:
                  {% set state = states('sensor.window_count')|float(-1) %}
                  {% if state >= 1 %} rgb(var(--rgb-green))
                  {% elif state >= 0 %} rgb(var(--rgb-orange))
                  {% else %} green
                  {% endif %}
                } 
              ha-card:after {
                content: "{{states("sensor.window_count") | capitalize}}";         
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                background: rgb(var(--rgb-orange));
                color: var(--card-background-color);
                border-radius: 100%;
                top: -5px;
                width: 50%;
                height: 50%;
                font-size: 0.3em; 
                right: -5px;
              }
          icon: |
            {% set state = states('sensor.window_count')|float(-1) %}
            {% if state >= 1 %} mdi:window-open-variant
            {% elif state >= 0 %} mdi:window-closed-variant
            {% else %} green
            {% endif %}      
          icon_color: white
      card_mod:
        style: |
          ha-card {
           position: absolute!important;
           left: 40px!important;
           bottom: 80px!important;
          }
    - type: custom:mod-card
      view_layout:
        grid-area: title
      card:
        type: custom:mushroom-title-card
        title: |-
          {% set time = now().hour %} {% if (time >= 18) %} 
           Goedenavond, {{user}}
          {% elif (time >= 12) %}
           Goedemiddag, {{user}}
          {% elif (time >= 5) %}
           Goedemorgen {{user}}
          {% else %}
           Slaap lekker, {{user}}!
          {% endif %}
        subtitle: |-
          {% set state=states('light.alle_verlichting') %} {% if state=='on' %}
           {% set lights = [ 
            states.light.verlichting_bureaulamp, states.light.verlichting_kerstboom,
            states.light.verlichting_erker, states.light.verlichting_slaapkamer_puck,
            states.light.verlichting_eettafel, states.light.verlichting_pui,
            states.light.verlichting_entree, states.light.verlichting_overkapping,
            states.light.verlichting_wand_buiten,
            states.light.verlichting_badkamerspiegel,
            states.light.verlichting_koffiecorner, states.light.verlichting_kookeiland,
            states.light.verlichting_entree, states.light.verlichting_tuinspots ] %}Het is binnen {{states("sensor.woonkamer_temperatuur")}} °C  er zijn {{ lights | selectattr('state','eq','on') | list | count }} lampen aan
          {% else %}
            Het is binnen {{states("sensor.woonkamer_temperatuur")}} °C 
          {% endif %}
      card_mod:
        style:
          mushroom-title-card$: |
            h1 {
              --title-font-size: 4vh;
              --title-font-weight: 300;
              --title-line-height: 1;
              color: #FFFFFF!important;
              position: absolute;
              top: -20px!important;   
              text-shadow: #F5F5F5 1px 0 20px;
              width: 620px;
            }
            h2 {
              --title-font-size: 16px;
              color: #FFFFFF!important;
              position: relative;
              top: 5px;
            }
            .header {
              --title-padding: 12px 12px 0px;
            }
    - show_current: true
      show_forecast: false
      type: weather-forecast
      entity: weather.buienradar_2
      forecast_type: hourly
      name: ' '
      card_mod:
        style: |
          ha-card {
           bottom: 18px!important;
           background-color: transparent;
           position: absolute;
           color: #FFFFFF;
           font-weight: 300;
           height: 150px!important;
           left: 220px;
           border: 0px;
           columns: 2;
           width: 250px;
          }
          .state {
            display: none!important;
          }
          .temp-attribute {
            text-align: right;
            text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
          }
  card_interaction: true
  style:
    wallpanel-screensaver-info-box:
      font-size: 3vh
      font-weight: 600
      color: '#eeeeee'
3 Likes