Screensaver

[tcarlsen (Thomas Carlsen)]

Hey Community!

Just wanted to share a project that I am currently working on!

I have a iPad running in my kitchen with Home Assistant used to show the weather, Calendar and other goodies. I wanted my iPad to be turned on all the time for easy accessibility, but was afraid of screen burns. Therefore I turned to the good old days of screensavers.

This plugin is pretty simple. I will start the screensaver after a given idle time (no clicking/touching). The Images are from Unsplash using a given search term (defaults to nature).
To stop the screensaver simply click/touch the screen again.

For more information and installation guide, go visit the repo:

tcarlsen/lovelace-screensaver

[danbutter]

Nice idea. I like the concept, but I don’t really like the idea of getting the images from the cloud.
Could this be made to fetch images on a local network? Or failing that a local machine?
Also any plans to make this HACS compatible?

[tcarlsen (Thomas Carlsen)]

Using unsplash was an easy way to get this project up and running.

How are you thinking “fetch images on a local network”? you would need to make a private api for that or make a python service/plugin in hass to generate a json file

[Schmidij_ch (Schmid)]

Can you add this to HACS?

[tcarlsen (Thomas Carlsen)]

I totally will, when I’m done testing on my own system

[danbutter]

All I was thinking is setting a directory from a network share to randomly pull in pics from.
Failing that just pulling from a directory on the local machine.
Thanks

[gabrielmiranda]

Great idea! But it would but nice to use local images

[tcarlsen (Thomas Carlsen)]

@gabrielmiranda and @danbutter I will try making this an option. but for now my focus is to get the script running flawlessly and as smooth as possible.

[Abeksis]

It works wonderfully, just that the problem is that the images in the category are repeated in the loop. And don’t show all the pictures in the category.

[tcarlsen (Thomas Carlsen)]

@Abeksis that is correct. Im going to add the possibility to choose how make images to fetch, and make it an option to fetch next page if last image of the current page has been used. The reason this can be an issue is that you can run into the maximum number of api calls on your free version of Unsplash.

[oooshk (Rob)]

I like it, but I’m trying to avoid integration with too many sites.
For others like me, you could try going down the chromium extension route.
Theres an extension called Photo Screen Saver

Extension Link

that I have installed on my standalone pi kiosk mode, linked it to google photos, one dedicated hassio folder and im away. Can also display time and weather on the page.
May help you out.
R

[phaelium]

Hey there,

I really like this plugin, works well for me!

Is there a way to use an input_select or some other variable as the query for unsplash? That way I can more easily change the category for what is being displayed rather than having to edit the UI every time?

Thanks!

[drawbars (Bruce Wahler)]

Great idea. Is there a way to set it up to just produce a black screen? I don’t want to show pictures; I just want the device to sort of disappear into the wall when not in use. To quote Spinal Tap, “How much more black could this be? And the answer is none — none more black.”

This would also eliminate the concern about using Unsplash and the cloud.

[tcarlsen (Thomas Carlsen)]

if your using the mobile app on the device. you cloud remove the lock code for easy open and let the device it self go to black screen. if you want black it seems like the easiest way?

[drawbars (Bruce Wahler)]

Normally, yes. In this particular situation, the tablet is mounted on a wall in portrait mode, and the power button is difficult to get to. It’s a lower-end tablet by Vankyo, and doesn’t support double-tap-to-wake. So, I can’t let the device go to black screeen, because it’s hard to wake it up. I’m looking for alternatives to get what I want.

The tablet itself uses 9.0, but doesn’t implement all of the ‘aux’ functions. And there are no easy ways to bypass the power button:

• Swipe to wake = PWR + swipe
• Lock code = PWR + swipe + code
• etc.

Not expecting you to change your code; just hoping to stumble on a workaround. I’ve started using WallPanel for Android (vs Chrome), which does pretty much what I want, except the black screen doesn’t kill the backlight. So, I have a night light!

[CrosB (Chris)]

Hi everyone,

I’m new to Home Assistant and experimenting with creating a custom screensaver using the clock-weather-card. I’ve been making some progress, but I’m running into a few issues and would really appreciate your help!

My Issues:

1. Enlarging the Weather Icon (pink circled):
   The weather icon (e.g., cloudy, sunny, etc.) looks too small compared to the rest of the card. I’d like to make it more prominent. When I try increasing the size using card_mod, either nothing changes or the icon appears cut off.

2. Adjusting Forecast Layout (orange circled):
   The forecast rows (day, temperature, etc.) are now well aligned and nothing is cut off, but the entire layout feels too small overall. I’d like to “scale up” the whole section to better fit the screensaver.

3. Scaling the Entire Card:
   Although I’ve managed to resolve some layout issues, the card still feels too small when viewed on my screen. I’ve tried using the zoom property in card_mod, but the results don’t quite give the larger, readable look I’m aiming for.

My Current YAML:
Below is the code I’m using. I’ve worked on it with the help of ChatGPT, which has been super helpful for me as a newbie! However, I can’t quite figure out how to achieve the scaling and alignment adjustments I need:

wallpanel:
  enabled: true
  hide_toolbar: false
  hide_sidebar: false
  fullscreen: false
  idle_time: 3
  fade_in_time: 3
  info_animation_duration_x: 10
  info_animation_duration_y: 10
  crossfade_time: 2
  display_time: 20
  image_url: /
  style:
    wallpanel-screensaver-info-box: null
    '--wp-card-width': 900px
    wallpanel-screensaver-info-box-content:
      '--ha-card-background': none
      '--ha-card-box-shadow': none
      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'
  cards:
    - type: vertical-stack
      cards:
        - type: custom:clock-weather-card
          entity: weather.forecast_home
          sun_entity: sun.sun
          temperature_sensor: sensor.aussen_temperatur
          weather_icon_type: line
          forecast_rows: 5
          locale: de
          time_pattern: HH:mm
          time_format: 24
          date_pattern: ccc, dd. MMM yyyy
          hide_today_section: false
          hide_forecast_section: false
          hide_clock: false
          hide_date: false
          card_mod:
            style: |
              ha-card {
                zoom: 300%;
                line-height: 30px;
                font-size: 12px;
                background-color: transparent;
                text-shadow: 1px 1px 3px black;
                box-shadow: none;
                border: transparent;
                border-width: 0;
                background: transparent;
              }

Challenges:

• The weather icon size doesn’t change as expected or gets cut off.
• The forecast rows are aligned, but the whole section (and the card overall) feels too small.
• Scaling the entire card properly for better readability on the screensaver is proving tricky.

I’ve attached a screenshot to better illustrate the issues I’m facing. If anyone could help me:

1. Enlarge the weather icon without cutting it off.
2. Scale up the entire card for better readability.
3. Fine-tune the layout for a polished screensaver look.

Your advice and guidance would mean so much to me as I continue learning Home Assistant! Thank you in advance for your support!

Cheers,
Chris

[Brandonp (Brandon)]

@tcarlsen Hi Thomas! I had a question - do you think it would be possible to set up a new version of this project and instead of Unsplash, you could point the image slideshow pull from a Tumblr Website?!

[tcarlsen (Thomas Carlsen)]

hello
totally, but im not using this myself anymore, but I will be more then happy if you will make a PR on GitHub and release a new version