Hey everyone,
I’ve recently implemented a Browser Mod’s Popup feature to display a Popup containing 2 front cameras when a Doorbell is rang. The automation targets a Wall Panel tablet (Samsung Galaxy Tab A9+) running Fully Kiosk. While I’ve gotten it to work in general, there are 2 issues I’m trying to solve:
-
Popup automation requires an occasional page refresh. It will work for a few hours without a refresh, and then requires a refresh in order for the popup to appear.
-
Initially, after the page refresh, the popup will have a white “focus” rectangle around the bottom portion of the popup window (everything except the header). If I click on the header to change the “focus”, it shows normally the next time around.
I’ve made a video demonstrating both of these issues: Google Drive link.
I have tried switching cache types in Fully Kiosk between “Always Maintain Cache”, “Never Maintain Cache” and “Clear Cash on Refresh”. Neither of these options have had an effect.
When removing device targeting, I can confirm that popup loads on all other browsers apart from the Wall Panel tablet. Therefore the issue appears to be specific to the tablet.
Sharing the code of the Popup automation:
alias: Doorbell Wall Panel Popup
description: ""
trigger:
- platform: state
entity_id:
- binary_sensor.reolink_doorbell_visitor
from: "off"
to: "on"
condition: []
action:
- service: browser_mod.popup
data:
dismissable: true
autoclose: false
title: Doorbell
timeout: 60000
style: |
--popup-border-radius: 20px;
--popup-max-width: 900px;
--mdc-theme-surface: rgba(28,28,28,0.8);
card_mod:
style:
ha-dialog$: |
div.mdc-dialog__scrim {
background-color: rgba(0,0,0,0.5) !important;
backdrop-filter: blur(5px);
}
content:
type: custom:layout-card
layout_type: grid
layout:
grid-template-rows: auto
grid-template-columns: 80% 20%
margin: "-10px 18px -10px -5px"
grid-template-areas: |
"cam1 bt1"
"cam1 bt2"
"cam2 bt3"
"cam2 bt4"
cards:
- type: custom:webrtc-camera
view_layout:
grid-area: cam1
url: REDACTED
muted: true
ui: true
digital_ptz:
mouse_drag_pan: false
mouse_wheel_zoom: false
mouse_double_click_zoom: false
touch_drag_pan: false
touch_pinch_zoom: false
touch_tap_drag_zoom: false
persist: false
poster: >-
REDACTED
background: false
style: >-
video {object-fit: cover; object-position: bottom;} .mode
{display: none;} .fullscreen {display: none} .screenshot {display:
none} .pictureinpicture {display: none}
card_mod:
style: |
ha-card {
--ha-card-border-radius: 20px;
height: 300px;
width: 533px;
}
- type: custom:webrtc-camera
view_layout:
grid-area: cam2
url: REDACTED
muted: true
ui: true
digital_ptz:
mouse_drag_pan: false
mouse_wheel_zoom: false
mouse_double_click_zoom: false
touch_drag_pan: false
touch_pinch_zoom: false
touch_tap_drag_zoom: false
persist: false
poster: >-
REDACTED
background: false
style: >-
video {object-fit: cover; object-position: bottom;} .mode
{display: none;} .fullscreen {display: none} .screenshot {display:
none} .pictureinpicture {display: none}
card_mod:
style: |
ha-card {
--ha-card-border-radius: 20px;
height: 300px;
width: 533px;
}
- type: custom:button-card
view_layout:
grid-area: bt1
entity: cover.front_gate
name: Front Gate
show_state: true
state:
- value: open
styles:
icon:
- color: rgb(244,180,0)
card:
- background-color: rgba(35,35,35,0.8)
name:
- color: white
state:
- color: rgb(200,200,200)
tap_action:
action: toggle
styles:
icon:
- padding-right: 60px
- padding-bottom: 35px
- color: grey
card:
- width: 145px
- height: 145px
- border-radius: 20px
- background-color: rgba(35,35,35,0.8)
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 12px
- padding-bottom: 2px
- font-weight: italic
- font-size: 13px
- text-transform: capitalize
state:
- justify-self: start
- padding-left: 12px
- padding-bottom: 6px
- font-size: 13px
- color: grey
- type: custom:button-card
view_layout:
grid-area: bt2
entity: cover.garage_door
name: Garage
show_state: true
state:
- value: open
styles:
icon:
- color: rgb(244,180,0)
card:
- background-color: rgba(35,35,35,0.8)
name:
- color: white
state:
- color: rgb(200,200,200)
tap_action:
action: toggle
styles:
icon:
- padding-right: 65px
- padding-bottom: 25px
- color: grey
- width: 85px
card:
- width: 145px
- height: 145px
- border-radius: 20px
- background-color: rgba(35,35,35,0.8)
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 12px
- padding-bottom: 2px
- font-weight: italic
- font-size: 13px
- text-transform: capitalize
state:
- justify-self: start
- padding-left: 12px
- padding-bottom: 6px
- font-size: 13px
- color: grey
- type: custom:button-card
view_layout:
grid-area: bt3
entity: switch.shellyswitch25_483fda75999a_channel_1
name: Front Light
icon: mdi:lightbulb-group-outline
show_state: true
state:
- value: "on"
styles:
icon:
- color: rgb(244,180,0)
card:
- background-color: rgba(35,35,35,0.8)
name:
- color: white
state:
- color: rgb(200,200,200)
tap_action:
action: toggle
styles:
icon:
- padding-right: 65px
- padding-bottom: 30px
- color: grey
- width: 65px
card:
- width: 145px
- height: 145px
- border-radius: 20px
- background-color: rgba(35,35,35,0.8)
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 12px
- padding-bottom: 2px
- font-weight: italic
- font-size: 13px
- text-transform: capitalize
state:
- justify-self: start
- padding-left: 12px
- padding-bottom: 6px
- font-size: 13px
- color: grey
- type: custom:button-card
view_layout:
grid-area: bt4
entity: switch.shellyswitch25_483fda755250_channel_1
name: Entrance
icon: mdi:wall-sconce-flat
show_state: true
state:
- value: "on"
styles:
icon:
- color: rgb(244,180,0)
card:
- background-color: rgba(35,35,35,0.8)
name:
- color: white
state:
- color: rgb(200,200,200)
tap_action:
action: toggle
hold_action:
action: more-info
styles:
icon:
- padding-right: 68px
- padding-bottom: 25px
- color: grey
- width: 65px
card:
- width: 145px
- height: 145px
- border-radius: 20px
- background-color: rgba(35,35,35,0.8)
grid:
- grid-template-areas: "\"i\" \"n\" \"s\""
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 12px
- padding-bottom: 2px
- font-weight: italic
- font-size: 13px
- text-transform: capitalize
state:
- justify-self: start
- padding-left: 12px
- padding-bottom: 6px
- font-size: 13px
- color: grey
target:
device_id: f4ecdcb38f68f2d4c8aa310c6726f5a7
mode: single
I’d really appreciate any help around resolving these two issues. Thanks in advance!