Hi everyone.
Recently I am facing issues with the random generator of image url that I am using for my WallPanel screensaver.
Am I the only one?
No you are not the only one!
You now need to sign up and get an api key.
https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY&query=
Maybe someone can help with the unsplah code formatting?
So I have set up my wall panel with a daytime and night time profile. I also have a weather card on it.
What I would like to do is have the query on unsplash to reflect the current weather condition pull up pictures based on day or night and weather.
https://api.unsplash.com/photos/random?client_id=MY ACCESS CODE&query=day
I figured it out and I am playing now with the API ā¦
I have access and it would work.
Challenge is that the response comes as a full JSON file, not directly as url as in the past.
I guess I will need a template helper to parse the JSON and extract the url.
The image quality with the Unsplah api url is quitte low, how to improve this?
I tried https://api.unsplash.com/photos/random?client_id=YOUR_ACCESS_KEY&query=iceland&w=1920&h=1200
How can I make this card thinner on my screensaver and smaller in ratio? I actually had this working but stupidly deleted whatever card config I had and for the life of me canāt remember. Code below and photo - which as you can see is taking up a third of my screensaver. I would love it to be alot thinner and smaller if possible. Thank you if youāre able to help!!
> wallpanel:
enabled: true
hide_toolbar: false
hide_sidebar: false
fullscreen: false
idle_time: 10
keep_screen_on_time: 86400
black_screen_after_time: 7200
control_reactivation_time: 1
image_url: media-entity://camera.google_photos_samuel_sinead_2017_2022_media
image_fit: cover
info_animation_duration_x: 90
info_animation_duration_y: 90
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
style:
wallpanel-screensaver-info-box:
font-size: 8vh
font-weight: 600
color: '#eeeeee'
text-shadow: '-2px -2px 0 '
cards:
- type: iframe
url: https://www.sbs.com.au/news/collection/top-stories
aspect_ratio: 1100%
wp_style: null
'--wp-card-width': '-100px'
'--wp-card-margin': 5px
Unable to start the screensaver with the latest homes assist version.
Is anyone else also facing the same issue?
1 Like
Nope. I have it on two tablets and am running everything up to date. Both are working fine.
I have the same problem and get the following error message:
Uncaught error from Chrome WebView 107.0.5304.105 on Android 8.1.0 TypeError: Cannot read properties of undefined (reading āeditModeā) _createCardElement (src/panels/lovelace/views/hui-view.ts:79:36) /hacsfiles/lovelace-wallpanel/wallpanel.js:1146:53 WallpanelView.createInfoBoxContent (/hacsfiles/lovelace-wallpanel/wallpanel.js:1132:17) WallpanelView.startScreensaver (/hacsfiles/lovelace-wallpanel/wallpanel.js:2090:8) WallpanelView.timer (/hacsfiles/lovelace-wallpanel/wallpanel.js:769:10)
Itās working fine again after an update to version v4.25.4
Thanks!
it seems HEIC is not supported on HA itself, not able to view any HEIC files in media browser within HA
1 Like
Is anyone else also facing the same issue?
@clintferns77 Maybe, my screensavers have stopped working on one set of dashboards for sure recently. Did you fix it?
My error is
TypeError: Cannot read properties of undefined (reading 'editMode')
at WallpanelView.value (hui-view.ts:79:37)
at wallpanel.js?hacstag..95064164254:1149:53
at Array. forEach (ā¹anonymous>)
at WallpanelView.createInfoBoxContent (wallpanel.js?hacstag...95064164254:1135:17)
at WallpanelView.startScreensaver (wallpanel.js?hacstag...095064164254: 2098:8)
at WallpanelView.timer (wallpanel.js?hacstag...095064164254:772:10)
Latest HA and latest WP as of right now
Just fixed it once on Edge then it failed again by clearing the cache. Screensaver loaded, but itās now doing the same again minutes after, even if I now clear the cache
Edit: Seems to be coming to life over time. Multiple cache clears and itās now seemingly reliable, if that helps anyoneā¦
Hello, Iām trying to customize my wallpanel layout.
Instead of having all the cards in the top left part of the screen, I try to position a part of the cards on the right side of the screen.
I read the doc but donāt understant how to use the CSS. I also tried with layout-card, but no success.
Then I found the following post in this discussion. My question may be stupid, but I really donāt understand how to use this.
Should I replace ācontent: Card1ā with my card content?
Thanks a lot for your help 
Hello,
Iāve been trying to get a wall panel screen saver setup that has a semi transparent calendar, clock, and weather with a background slideshow. Iāve been trying for hours and canāt get the cards to fit properly on the screen. Theyāre either small and only taking up a quarter or so of the screen, or theyāre extremely over-sized. Hereās the code Iām using right now which results in the over-sized problem. Iām also attaching a pic for reference. (I know I have 2 weather cards right now, itās just for fit check). Iāve tried every combo of width: 100%, āāwp-card-widthā: 100%, etc, but I canāt get it to simply fill the screen.
The background slideshow is working perfectly at least.
How do I accomplish my goal?
wallpanel:
enabled: true
hide_toolbar: false
hide_sidebar: false
fullscreen: false
image_background: color
image_fit: contain
image_order: random
image_url: /local/Backgrounds
idle_time: 2
fade_in_time: 3
crossfade_time: 2
display_time: 60
control_reactivation_time: 0.5
keep_screen_on_time: 0
show_progress_bar: true
style:
wallpanel-screensaver-info-box:
'--wp-card-width': 100%
width: 100%
height: 100%
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:clock-weather-card
entity: weather.forecast_home
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 1
locale: en-GB
time_pattern: HH:mm:ss
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: false
hide_forecast_section: false
show_humidity: true
hide_clock: false
hide_date: false
hourly_forecast: false
use_browser_time: false
show_decimal: false
- type: weather-forecast
entity: weather.forecast_home
forecast_type: weekly
- type: calendar
initial_view: dayGridMonth
entities:
- calendar.birthdays
- calendar.holidays
- calendar.family
- calendar.work_meetings
title: Full-Screen Calendar
I need help on what to use in enabled_on_tabs. The dashboard name is Tablet and the name of the tab is nesthome. If I remove it, the screensaver shows up everywhere. I only want it to show up in the āTabletā dashboard. How do I find the name I should be using here
wallpanel:
enabled: true
hide_toolbar: false
hide_sidebar: false
fullscreen: false
image_fit: cover
enabled_on_tabs:
- nesthub
screensaver_entity: input_boolean.screensaver_hub1
display_time: 15
idle_time: 60
image_url: media-entity://camera.google_photos_favorites_media
cards:
- type: markdown
content: ' {{ states(''sensor.timenew'') }}'
card_mod:
style: |
ha-card {
font-size: 80px;
font-weight: 250;
}
- type: markdown
content: >-
{{ states('sensor.weekday') }}, {{ states('sensor.month') }} {{
now().day }}
card_mod:
style: |
ha-card {
font-size: 15px;
font-weight: 300;
}
- type: custom:atomic-calendar-revive
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 7
maxEventCount: 6
disableEventLink: true
disableLocationLink: true
refreshInterval: 60
showWeekDay: true
entities:
- calendar.anniversaries
- type: custom:simple-weather-card
entity: weather.home
name: ' '
style:
wallpanel-screensaver-info-box:
'--wp-card-width': 420px
background-color: '#00000099'
box-shadow: >-
0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0,
0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)
wallpanel-screensaver-info-box-content:
'--ha-card-background': none
'--ha-card-box-shadow': none
'--ha-card-border-width': 0px
'--primary-background-color': '#111111'
'--secondary-background-color': '#202020'
'--primary-text-color': '#e1e1e1'
'--secondary-text-color': '#9b9b9b'```Hi there,
I am using fully kiosk browser in conjuntion with wall panel and for the most part it works great, but there is something within my fully kiosk settings that stops the screen saver within 24 hours every time and for the life of me I canāt figure out what setting is doing that. I am sure its something within fully kiosk browser because using the wall panel dashboard on my home computer activates the screen saver perfectly fine and it continues moving through photos without issue. I am using the google photos integration with it if that helps.
Has anyone got any ideas what could be causing this?
Thanks!
My code is as followsā¦ and I still donāt get any images! Everything else works. I just get a black background.
wallpanel:
enabled: true
hide_toolbar: false
hide_sidebar: false
fullscreen: true
idle_time: 5
image_url: https://source.unsplash.com/random/${1920}x${1080}?dogs,cats,nature
info_animation_duration_x: 30
info_animation_duration_y: 30
cards:
- type: vertical-stack
cards:
- type: custom:weather-card
details: true
forecast: true
hourly_forecast: false
name: Weather
entity: weather.inicio
current: true
number_of_forecasts: '6'