Fully Kiosk Interactive Screensaver | Home Assistant | Page 1

pulsar plover Jun 29, 2025, 4:55 AM

#

I have a dashboard with a screensaver. It plays a slideshow html by default. I setup an alt screensaver that displays a Music Assistant media player and browser as the screensaver. The thing I failed to consider was that Fully Kiosk Browsers web screensaver function automatically turns off the screensaver on screen touch. This makes the player and browser moot.

The idea is that if a media player is playing in the area’s associated with the dashboard, then when the screensaver comes on, it gives the option to pause or change the volume or even the track, without having to go back to the main dashboard and navigate from there.

Is there a method for creating an interactive screensaver with fully kiosk? Or is there some other option that I could use for screensaver like functionality that would allow for this interactive area on the screensaver?

pastel knot Jun 29, 2025, 10:18 AM

#

So, I've haven't set up any kind of screensaver for my tablets nor have I used Music Assistant, but perhaps a different approach will solve the problem. What about having an automation handle your screensaver functions?

#

With browser_mod, you can get a sensor entity that essentially shows when the device has been used. (It acts just like a motion detector.) When "motion" has not been detected for 5 minutes, the automation will navigate to the "screensaver" view. This view would have your screensaver, but, if Music Assistant is playing, it could have an "overlayed" card with the controls you mentioned.

#

I hope that kind of makes sense. The only thing that might be an issue would be how to "exit" the screensaver and return back to the normal view.

pulsar plover Jun 29, 2025, 1:10 PM

#

I had considered building it manually via automation, but I was focused on ‘last touched’ being trigger. I’ll give your idea a whirl though, it should work pretty well. Thank you.

pastel knot Jun 29, 2025, 9:58 PM

#

One thing that I was thinking about was how to handle touching the music controls and not deactivating the screensaver. I think instead of using the tap_action to directly play/pause, for example, you'd have to run it through a script/automation. The script would set a timestamp on a helper and then play/pause. But, as I think about it more, this may not even be necessary.

#

Can you post a little bit more about how your slideshow html is set up?

#

One option, that I think might handle a lot of the roadblocks, would be for the screensaver view. On that view, a single custom:button-card could be set to fill the entire screen. The screensaver html could be embedded into this card along with another card for the media controls which could be set to be shown conditional if music is playing. An overlay could be put over the screensaver html to handle tapping to stop the screensaver. It's z-index could be set below the media controls so they remain on top of everything.
Again, in my mind, this all makes sense but it make not with how I've typed it out.

#

Here's an example of a custom:button-card with extra stuff added as overlays. You can see more on how it was set up on my Github. https://github.com/dsellers1/home-assistant/tree/main/echo-show-screensaver
This was some of the layout groundwork for @maiden kestrel 's View-Assist project which he expanded way past just some layout stuff. You can see more about it at on his GH. https://github.com/dinki/View-Assist/

68747470733a2f2f6769746875622d70726f64756374696f6e2d757365722d61737365742d3632313064662e73332e616d617a6f6e6177732e636f6d2f36373634323333322f3239363631393739362d64383064653032612d336436632d346261332d616336632d3061.png

pulsar plover Jun 30, 2025, 4:51 AM

#

I think that makes a lot sense.
As I currently have it, there is a default slideshow, which is a simple slideshow.html file stored in /config/www/. The HTML uses standard <img> tags for a set JPGs and with setInterval and CSS transitions to fade smoothly between them every 20 seconds in randomized order. Its embedded using a picture-elements card with a custom:hui-element that wraps an <iframe> pointing to /local/slideshow.html.

The other element, besides the media_player card is for pulling the image from the media_player, to use as a full screen background.
When any one of the prioritized media_player entities is playing, a state-switch card swaps the slideshow for a fullscreen picture-elements card that uses the current track artwork as the background. I created a template sensor that pulls the entity_picture attribute from the active media_player and serves it as a direct URL (/api/media_player_proxy/...).

#

I was not familiar with View Assist, though I tinker with something similar a little while ago, never made it too far. Looks interesting. Also checked out your GitHub and your screensaver looks promising. Will probably borrow some of those elements from your yaml

pastel knot Jul 1, 2025, 5:40 PM

#

Here's an example from the old #frontend-archived where I show how to add an "overlay". This was used to "allow" a tap-action for a card that doesn't support a tap-action. This is the concept that I think will be helpful for being able to tap the "screensaver" (really, the invisible overlay) to exit but tapping the media controls won't. The z-index order would be screensaver/media image (full screen), overlay (full screen), media controls ("floating box").
https://discord.com/channels/330944238910963714/1220082789131751547

#Fully Kiosk Interactive Screensaver