Please Help: I Need to Display 4 Cameras 24/7 on Dashboard Full-Screen w/Time & Temp Overlay

Configuration Frontend
1

I’m not sure what the most efficient way to do this is so if I’ve gone down the wrong path, feel free to offer alternate routes. I’m looking to create another HA dashboard that’ll be displayed on my 32" FireTVs that are above my main viewing TVs in each room. So far I’ve got the foundation established:

image
image2283×818 73.2 KB

kiosk_mode:
  mobile_settings:
    hide_header: true
views:
  - title: Home
    sections:
      - type: grid
        cards:
          - type: horizontal-stack
            cards:
              - show_state: false
                show_name: false
                camera_view: live
                type: picture-entity
                entity: camera.front_g4_pro_low_resolution_channel
              - show_state: false
                show_name: false
                camera_view: live
                type: picture-entity
                entity: camera.garage_g4_bullet_low_resolution_channel
          - type: horizontal-stack
            cards:
              - show_state: false
                show_name: false
                camera_view: live
                type: picture-entity
                entity: camera.back_g4_pro_low_resolution_channel
              - show_state: false
                show_name: false
                camera_view: live
                type: picture-entity
                entity: camera.porch_g4_bullet_low_resolution_channel
    type: sections
    max_columns: 1
    cards: []

What I’d need to do to achieve my dashboard goals:

  1. Eliminate the styling/borders of the camera cards/framing so that the cameras are fully displayed & touching. No rounded corners or padding.

  2. This may be part of #1 but I also need the four cameras to fill a 16:9 display fully in landscape. Currently they reside smaller in the center as pictured above. I want them to fully fill the 16:9 displays from edge to edge. This will only be used on the same 32" displays currently so the resolution/dimensions will be the same across the board if I need to create custom sizing or something.

  3. This one may be a little bit trickier but I need to display the current time & temperature in the middle of the screen in basic font. Probably white or red in color but I’m assuming I can change the size/color as needed via the code until I reach the desired aesthetic. I’ve heard of making cards transparent save for the text you want to display to overlay so I think maybe this would be the route here.

I’m relatively new and still learning how to create/edit dashboards so simple explanations so that I can follow along would be appreciated.

2

Resizing video streams on the go is heavy on resources and can add distortion, so it is better to stay in the native resolution of the camera with added borders.

3

Wait… you may have jogged my brain with this post. I’m using the “low resolution” feed from my Unifi Protect for these cameras. The idea was they’d load quicker and use less resources for small-ish devices like computer monitors with several of them in grid format & smartphone screens.

Maybe I just need to enable the medium or high resolution feeds and experiment with those to see if they fill the scren more. Because it’s basically worthless as it appears from the screen grab in my initial post. I’ll just keep running IPCamViewer w/o the clock/temp overlay as it fills the screen completely with the same four cameras displayed.

Not sure why I wouldn’t be able to do the same thing w/the HA app that I do with another lower resource app that basically does the same thing and has for like a decade. It feels more like it’s able to do it and it’s just operator error that I don’t know how to do it.

4

The higher resolutions are definitely better for the fullscreen view than the low resolutions, especially if you can hit one that fits your screen perfectly in resolution.

5

The displays these will be shown on are only 1080p (aka FHD) so this would fall right in between the two lower options available which are 640x360 (what I’m running now) and 1280x720 so I don’t really have that perfect resolution from the Unifi Protect list.

That said, I managed to get them in a much fuller view using a new screen with the panel option (which was a bit challenging to figure out as it kept reverting away from Panel as I made edits. Another conversation entirely) and then grid with the four camera feeds. I dropped the kiosk YAML in at the top and now we’re much closer but still not quite there.

image
image1920×1082 258 KB

Here’s the code:

kiosk_mode:
  mobile_settings:
    hide_header: true
views:
  - title: Home
    type: panel
    cards:
      - square: false
        type: grid
        cards:
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.front_g4_pro_low_resolution_channel
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.garage_g4_bullet_low_resolution_channel
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.back_g4_pro_low_resolution_channel
          - show_state: false
            show_name: false
            camera_view: live
            type: picture-entity
            entity: camera.porch_g4_bullet_low_resolution_channel
        columns: 2

Still need to eliminate the borders/padding/corners:

image
image1920×1077 258 KB

6

FHD is 16:9
The resolutions from your camera is 4:3.
If you try to realize them to 16:9, then they will be blurry.