Stock OS. Did not remove any apps
I Will add i am running latest HA release too and all good
Yes, it’s giving me problems too. Connecting on LAN with this tablet though. Think that addon should be a problem if installed?
This looks awesome. What do you think about (if it’s even possible) adding the ability to use a code to unlock the screen? Use case: I want to mount this in an area that is open to the public, but I don’t want some random person coming up to change lighting scenes etc.
What do you think?
Hi,
I’m new here because of a stupid question, but I haven’t anymore clue for my “problem”.
I’m using the “contain” fill for my own images, the “blur”-filter for the background & the image itself is set as the background, everything works well, even the styles for the entity-cards. Now I want a small box-shadow or a soft, black border for the main image, to have it stand out against the blurred background, but I’m not getting this to work. Where do I have to add the box-shadow-attribute for the image itself? I tried every combination from css-tutorial-site linked on the github-help, but nothing helped. Does it need to be under “style” ???
wallpanel:
enabled: false
hide_toolbar: false
hide_sidebar: false
fullscreen: true
image_url: /local/photo
image_fit: contain
image_order: random
image_background: image
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
style:
wallpanel-screensaver-image-background:
filter: blur(2px)
background-position: center
background-size: cover
idle_time: 10
keep_screen_on_time: 30
display_time: 15
cards:
- type: entity
entity:
....
Thanks for help, kind regards
Will wallpanel work when there are camera streams in the view ?
I put this above all lines of the raw-configuration file:
wallpanel:
enabled: true
enabled_on_tabs:
- []
debug: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
idle_time: 5
title: Thuis
views:
- title: second
type: custom:horizontal-layout
badges: []
cards:
- type: vertical-stack
but nothing happens , not on my windows pc, nor on my android tablet
Hi there, very nice project. Thank you, a lot!
Two questions:
-
When the screensaver turns on, I can change the images during the running screensaver by clicking on the right side/margin of the screen/image. Only clicking in the middle/left area of the images stopps the screensaver. I couldn’t find this option in the documantation. Can this be turned of?
-
Even if the documentation says the image info box is disabled by default, there always was a small quadrangular area in the right bottom side of my images. Very small. I tried a lot to get rid of it. The solution was to turn the image info box on (true) and set the background color to fully transparent. Anyone else noticed this bug?
All the best and kind regards
benedikt
This is a fantastic addition to my wall mounted Android machine. I know the documentation says you can use ${timestamp}, ${width}, and ${height} variables in HTTP URL’s, but I was wondering if it might be possible to also use sensor/attribute values as well.
I have been playing with this, and it won’t work. This works in the Template Developer Tool, but not in WallPanel no matter how I use single or double quotes in any combination, so I figure this might be specific to WallPanel.
Specifically, I was wanting an automated way of inserting queries into the Image URL based on the next Holiday and current Season.
https://source.unsplash.com/random/${width}x${height}?{{ state_attr('calendar.holidays_in_united_states', 'message') }},{{ states('sensor.season') }}&sig=${timestamp}
Has anyone tried this, or is there another way of tackling it? I have also tried using a script that returns the URL after inserting the query strings.
UPDATE: Finally found the solution. Upon digging deeper into the documentation, I discovered the use of Entities in Wallpanel.
I created an Input Text Helper: input_text.wallpanel_image_url
Next was to create an automation that changes the URL query strings:
alias: Wallpanel Image
description: Change Wallpanel Image URL when next Holiday changes
trigger:
- platform: state
entity_id:
- calendar.holidays_in_united_states
attribute: message
- platform: state
entity_id:
- input_text.season
condition: []
action:
- service: input_text.set_value
data:
value: >-
https://source.unsplash.com/random/${width}x${height}?{{
state_attr('calendar.holidays_in_united_states', 'message') }},{{
states('sensor.season') }}&sig=${timestamp}
target:
entity_id: input_text.wallpanel_image_url
mode: single
Then, just put the Image URL into the Wallpanel config:
image_url: ${entity:input_text.wallpanel_image_url}
I hope this helps someone.
2 Likes
I have used wallpanel on a previous HA server on a Nexus 7 Android (v6) tablet. It worked well and is much appreciated.
Now rebuilt new server from scratch (4th time) (OS 10.5, Core 2023.9) and installed latest version of wallpanel 4.18.
Added same wallpanel settings from before, the screensaver kicks in as expected in a laptop browser window (used for testing/development), but not at all on the tablet (same dashboard).
On the tablet, the side/top menu/toolbar are hidden (so wallpanel is doing something) but screensaver does not start.
Debug is on and shows info on browser - nothing is shown on tablet, so guessing it is not starting at all for some reason. The only difference at the moment (that I can spot) is that the particular dashboard is not the default (yet) on the tablet - nor is it on the browser and this should not make a difference to basic functionality of the screensaver, activated on opening that dashboard (unless I have misunderstood).
I get similar behaviour on a Pixel 6a phone (Android 13). Both tablet and phone have latest HA app 2023.10.2.
I am obviously suspecting a tablet setting but at this stage my brain has about given up, so is likely (hoping) something obvious I have just missed. I have searched this topic and also some Reddit threads and tried to find something in the tablet settings.
If someone can point me in a constructive direction not least to rule out a wallpanel issue, it would be much appreciated (and apologies if indeed I have missed something in the docs) Thanks.
[incidental - do not know if related - I escape from the Wallpanel dashboard via navigation to another dashboard where i have set wallpanel to ‘disabled’ and hide top/side to false, but it still hides them until I manually refresh the page in the browser. Unsure if this is intended behaviour, and again I have misunderstood. On the tablet the ‘exit’ dashboard does not refresh and I am stuck without side/top - same on the Pixel phone]
UPDATE:
Checked logs and found this which looks possibly relevant:
Logger: frontend.js.latest.202309110
Source: components/system_log/__init__.py:269
First occurred: 25 October 2023 at 23:01:11 (6913 occurrences)
Last logged: 10:53:46
Uncaught error from Chrome WebView 117.0.0.0 on Android 13 TypeError: Cannot read properties of null (reading 'cloneNode') WallpanelView.restartProgressBarAnimation (/hacsfiles/lovelace-wallpanel/wallpanel.js:1143:25) WallpanelView.startScreensaver (/hacsfiles/lovelace-wallpanel/wallpanel.js:1866:8) WallpanelView.timer (/hacsfiles/lovelace-wallpanel/wallpanel.js:732:10)
Uncaught error from Chrome WebView 95.0.4638.74 on Android 6.0.1 TypeError: Cannot read properties of null (reading 'cloneNode') HTMLElement.restartProgressBarAnimation (/hacsfiles/lovelace-wallpanel/wallpanel.js:1143:25) HTMLElement.startScreensaver (/hacsfiles/lovelace-wallpanel/wallpanel.js:1866:8) HTMLElement.timer (/hacsfiles/lovelace-wallpanel/wallpanel.js:732:10)
Uncaught error from Chrome WebView 95.0.4638.74 on Android 6.0.1 Script error. null @:0:0
Uncaught error from Chrome WebView 118.0.0.0 on Android 13 TypeError: Cannot read properties of null (reading 'cloneNode') WallpanelView.restartProgressBarAnimation (/hacsfiles/lovelace-wallpanel/wallpanel.js:1143:25) WallpanelView.startScreensaver (/hacsfiles/lovelace-wallpanel/wallpanel.js:1866:8) WallpanelView.timer (/hacsfiles/lovelace-wallpanel/wallpanel.js:732:10)
Uncaught error from Chrome 114.0.0.0 on Linux x86_64 TypeError: Cannot read properties of null (reading 'cloneNode') WallpanelView.restartProgressBarAnimation (/hacsfiles/lovelace-wallpanel/wallpanel.js:1143:25) WallpanelView.startScreensaver (/hacsfiles/lovelace-wallpanel/wallpanel.js:1866:8) WallpanelView.timer (/hacsfiles/lovelace-wallpanel/wallpanel.js:732:10)
Suggests something is going on , though interestingly the Linux laptop is also showing an error even though it appears to be working OK (the progress bar shows as expected)
Hi @hawk100, I recently set this up for the first time. What I found is that setting show_progress_bar to True caused WallPanel to not work on my Android 11 All-in-One. I just removed it and it works fine. While nice to have, the progress bar is not a must have for me.
I have not tried WallPanel on any other devices.
Thanks @OtisPresley that indeed does seem to resolve the issue as a ‘workaround’. I created an issue on Github so will update that with this info.
1 Like
anyone use the new wallpanel-screensaver-image-overlay option to darken screen? i cant seem to get it working
Hi @randr, Thanks for this! I just tried it and got it working the way I wanted using the CSS opacity property for the overlay, which is a value between 0.0 and 1.0 with 0.0 being totally transparent and 1.0 being totally opaque. Here is my code under the style tag:
wallpanel-screensaver-overlay:
background: '#000000'
opacity: 0.5
I hope this helps.
1 Like
Hello!
My sample:
style:
wallpanel-screensaver-info-box:
'--wp-card-width': 420px
background-color: '#00000080'
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'
info_animation_duration_x: 80
info_animation_duration_y: 70
info_animation_timing_function_x: ease-in-out
info_animation_timing_function_y: ease-in-out
1 Like
How good does it work? Testing now…
I have an Ipad air 1 as my Homeassistant screen in my living room, and use WallPanel to display images after 1 minute. But after the latest update of Homeassistant, wallpanel does not work anymore on this iPad air 1. It works on all other newer devices. Has anyone a solution for this?
@hawk100, looks like the progress bar has already been fixed. I updated the Wallpanel frontend in Home Assistant, and it now works.
Hi - I tried 4.19, and it unfortunately behaved the same (OK on laptop, not on Android 6 and 13) - is that the one you tried? (if yes then maybe different Android version is a factor). It was after restart of HA, andn tablet/phone app.
This is the link to the github issue with complementary details.
I should point out it is only the progress bar affected as far as I know, so switching it off is an effective workaround (as it is not absolutely essential)
I am working on Android 11 with WallPanel 4.19.0 and Home Assistant App version 2023.10.2-full
I have also got this same issue and would very appreciate this threads help please (or just to point me in the right debug direction).
From @j-a-n reply (which was what hit in my searches) I have really carefully made sure my indenting is correct (I can even break the indenting such that it wont save in the HA file browser) - I used exactly the same style code lines too …
I just cant get the card on the screen saver to be translucent …
Here is my yaml
wallpanel:
enabled: false
hide_toolbar: true
hide_sidebar: true
fullscreen: true
cards:
- show_current: true
show_forecast: true
type: weather-forecast
entity: weather.openweathermap
forecast_type: hourly
style:
wallpanel-screensaver-info-box:
'--wp-card-width': 1275px
wallpanel-screensaver-info-box-content:
'--ha-card-background': none
'--ha-card-box-shadow': none
'--ha-card-border-width': 10px
text-shadow: >-
-0.5px -0.5px 0 rgb(17, 17, 17), 0.5px -0.5px 0 rgb(17, 17, 17), -0.5px
0.5px 0 rgb(17, 17, 17), 0.5px 0.5px 0 rgb(17, 17, 17)
'--primary-text-color': '#ffffff'
'--secondary-text-color': '#dddddd'
More over … in my debug I cant get any of the “style” lines to affect the screensaver at all …
ie. if I do
'--ha-card-border-width': **100px**
This “border width” change from 0px had no effect on refresh/reboot
So this means its not taking any effect, where as is I delete the line
entity: weather.openweathermap
It instantly breaks the card on the screen saver.
Thanks