Minimalistic Screensaver For Wall Mounted Panel

Just thought I’d share a quick and easy way of making your own screen saver on HA.

This is based off of Thomas Loven’s wonderful browser_mod (kudos to you for sharing your great work), in particular this is a tweak to the pop up card.

Editing the following lines in the browser_mod.js (from line 82) file will take care of making the card full screen (in a Kindle Fire HD9, for a different device just tweak the values below), so here’s the line before the change:

:host([large]) .content {
  width: calc(90vw - 48px);
}

and after editing:

:host([large]) .content {
  // width: calc(90vw - 48px);
  width: 100vw;
  height: 100vw;
  margin: -100px -24px;
}

This will only apply to the cards that have the option large:true enabled (which I only use for the screen saver), meaning it won’t affect all the great work that you’ve already done on your popup cards.

Then the following automation gets executed every two minutes to call the full screen popup card (ie our screen saver):

- id: '1234567'
  alias: Screen Saver
  description: ''
  trigger:
  - platform: time_pattern
    minutes: /2
  condition: []
  action:
  - service: browser_mod.popup
    data:
      hide_header: true
      large: true
      deviceID: kindle
      title: Screen saver
      auto_close: true
      card:
        cards:
        - elements:
          - aspect_ratio: 10%
            entity: sensor.time
            style:
              color: '#ffffff'
              font-size: 8.5vw
              left: 77.5%
              top: 50%
            type: state-label
          - entity: sensor.weather_icon_template
            style:
              left: 30.5%
              top: 35%
              transform: scale(1.5,1.5)
            type: state-icon
          - entity: sensor.date_template
            style:
              color: '#ffffff'
              font-size: 3vw
              left: 77.5%
              top: 60%
            type: state-label
          - entity: sensor.dark_sky_temp_template
            style:
              color: '#ffffff'
              font-size: 5vw
              left: 20%
              top: 38%
            suffix: °
            type: state-label
          - entity: sensor.home_temp_template
            style:
              color: '#ffffff'
              font-size: 15vw
              left: 25%
              top: 25%
            suffix: °
            type: state-label
          image: /local/images/Bg-mobile.png
          type: picture-elements
        type: vertical-stack
  mode: single

Here’s the final (minimalistic) result:

Of course this can be customized by choosing your favourite background picture (simply edit the “image: /local/images/Bg-mobile.png” to point to your image et voila’).

Given that we have enabled the autoclose option for this card (auto_close: true in the automation code above), tapping anywhere on the screen will close the card.

7 Likes

Can’t fill the screen

Did you adjust as required?

width and height ?
whatever values i putt the size is the same
thx for help

What about playing with the margin values

whatever values i change it stays the same

Sorry for the late reply, I noticed that you don’t have HA running in kiosk mode, perhaps that is the issue? I have mine running with hidden tabs and never ran into what you’re experiencing.

Did anyone get this to work as true full-screen?
I’ve edited the values in browser_mod.js, but no joy.

You use kiosk mode ?

Yep! Here’s what I’ve done, vs what I’m getting.

            :host([large]) .content {
              width: 100vw;
              height: 100vh;
              margin: -10px -10px;              
            }
service: browser_mod.popup
data:
  hide_header: true
  large: true
  deviceID:
    - kiosk_kitchen
  title: ' '
  auto_close: true
  card:
    type: picture-entity
    entity: camera.screensaver
    show_name: false
    show_state: false
    camera_view: live
    tap_action:
      action: toggle
      entity_id: automation.kiosk_screensaver

I still get a wide gap on all sides, and it scales the content oddly.

No luck for now

Very briliant!

I would like to know if i can create an automation that through browsermod can open a certain card.

If i use my dashboard i navigate through cards in order to light on lights or other things, i would like that after 2 minutes of inactivity fully kiosk navigate to the dashboard card.

May you provide me some advises?

Thank you
Marco