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.
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
- Cleared the fully kiosk cache both in the Fire tablet App settings as well as fully kiosk settings. Still showing
- Removed wall panel and installed again and added the relevant code snippet
- 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 ?
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.
2 Likes
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…? 
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'
4 Likes