Browser_mod.popup w/ buttons & picture-glance (camera feed): possible to control size?

Configuration Frontend
1

I’m trying to create a popup when the doorbell is ringing so that the feed of a camera is shown with the possibility to control the gates and garagedoor.

On a desktop browser, the image is really to big. (obvious due to the fullscreen browser mod option)
With the mobile app on a tablet, it’s do-able but could be better.
Most important is to get it right on a tablet and mobile phone

This is the code:

service: browser_mod.popup
data:
  size: fullscreen
  content:
    type: vertical-stack
    cards:
      - square: false
        columns: 3
        type: grid
        cards:
          - type: custom:config-template-card
            entities:
              - switch.gate1_status
            card:
              type: button
              tap_action:
                action: none
              hold_action:
                action: call-service
                service: script.switch_gate1
                data: {}
                target: {}
              name: Gate 1
              show_name: false
              entity: switch.gate1_status
              icon: >-
                ${ states['switch.gate1_status'].state  === 'on' ?
                'mdi:gate-alert' : 'mdi:gate-arrow-right' }
          - type: custom:config-template-card
            entities:
              - switch.gate2_status
            card:
              type: button
              tap_action:
                action: none
              hold_action:
                action: call-service
                service: script.switch_gate2
                data: {}
                target: {}
              name: Gate 2
              show_name: false
              entity: switch.gate2_status
              icon: >-
                ${ states['switch.gate2_status'].state  === 'on' ?
                'mdi:gate-open' : 'mdi:gate' }
          - type: custom:config-template-card
            entities:
              - switch.garagedoor_status
            card:
              type: button
              tap_action:
                action: none
              hold_action:
                action: call-service
                service: script.switch_garagedoor
                data: {}
                target: {}
              name: Garage Door
              show_name: false
              entity: switch.garagedoor_status
              icon: >-
                ${ states['switch.garagedoor_status'].state  === 'on' ?
                'mdi:garage-open-variant' : 'mdi:garage-variant' }
      - camera_view: live
        type: picture-glance
        entities: []
        camera_image: camera.door
  dismissable: true
  autoclose: false

Fullscreen is aesthetically nice/very clear, that’s why I use it and would prefer to stick to it.
After days of searching, failing and trying, this is the best I could come up with but I’m open for any improvements/ideas and mainly how to control the contents of that popup.

Thanks ahead for any help/advice!

2

Anybody who can set me in the right direction?

3

Hi to all!

Problem: No live feed on NSPanel Pro thru Fully Kiosk from Reolink doorbell cameras

Description:
I’ve been trying to make a NSPanel Pro display the live feed from Reolink Doorbell cameras (1 on WiFi and 1 on ethernet connection, both installed using the Reolink integration, both added to WebtoRTSP integrarion also)

Access to Fully Kiosk was obtained thru @blackadder ’s unlock and I have HA Companion App running flawlessly. The live feed from both doorbells work fine when triggered by pressing the camera button at the HA companion app dashboard

Action code is:


service: browser_mod.popup
data:
  dismissable: true
  autoclose: false
  title: Hall 13
  size: fullscreen
  timeout: 120000
  Browser_ID: FKonNSPP02
  Content:
    Camera_View: live
    Type: picture-glance
    Entities: camera.porta_principal_db_sub
    Camera_Image: camera.porta_principal_db_sub

I get the pop up window with the title bit no image.

How can I fix this?

4

Sorry for digging up something old and possibly no longer needed. But I just spent the best part of an hour trying to solve the same problem you were having here: popup, but no content.
The fix was YAML formatting, including case sensitivity. Here is my working code as an example:

service: browser_mod.popup
data:
  title: Motion Detected
  timeout: 60000
  size: fullscreen
  content:
    type: picture-entity
    camera_view: live
    entity: camera.outdoor_rear_stream
    camera_image: camera.outdoor_rear_stream
    show_state: false
    show_name: true
target:
  device_id: my_tablet

I hope this helps anyone else who comes looking!

1 Like