Picture elements card with camera - is fullscreen possible here?

Configuration
1

I have a picture elements card with my camera and ptz arrows overlayed in the corner. Is there an option for a fullscreen button to overlay on the card as well?

If I use a picture-glance card with a live camera_view, I am able to click on the stream and then select fullscreen (but obviously I cannot use overlay buttons here)

What I want is to be able to have all my cameras as picture element cards in a view, then be able to individually fullscreen them.

I do know of panel view, but that isn’t a true fullscreen (as the header information is there). Is there an option or alternative to toggle fullscreen on a camera picture elements card?

2

I decided to workaround this problem by directly overlaying an iframe to my shinobi mp4 stream (which has a few seconds less latency than using the built in home-assistant camera stream function, due to not having a redundant ffmpeg pass the stream through the home-assistant host), and, although I cannot overlay the ptz controls over an iframe, I have them directly below the iframe, so it works well enough.

3

I’ve been trying to do something similar with my Amcrest feeds. Would you mind posting your config? Thanks!

4

What parts are you looking for? Are you using Shinobi?

5

Mostly the lovelace config that you’re using to show the stream with a separate PTZ control. I’m not using Shinobi, but have been testing out Blueiris and Motioneye. Currently, I just have the Amcrest cameras using the HA integration. I have the picture-elements working using the example from here: https://www.home-assistant.io/integrations/amcrest/ (at the bottom) but I would like to click and open the stream like I can do with the picture-entity card.

6

Example from my ui-lovelace.yaml (the iframe is serving a shinobi stream with a user api and group api. The PTZ script directly calls my amcrest camera API through a shell script):

      - type: iframe
        url: http://192.168.0.22:8080/[APIKEY]/mp4/[GROUPKEY]/[CAMERAID]/s.mp4
      - type: picture-elements
        image: /local/ptzControl.svg
        elements:
          - icon: 'mdi:arrow-up'
            type: icon
            style: 
              transform: none
              background: 'rgba(155, 155, 255, 0.25)'
              bottom: 35.5%
              right: 5.5%
            tap_action: 
                action: call-service
                service: shell_command.amcrest_ptz_control
                service_data:
                  payload: '"192.168.10.201" "admin" "amcrest_passwords" "Up"'
          - icon: 'mdi:arrow-down'
            type: icon
            style: 
              transform: none
              background: 'rgba(155, 155, 255, 0.25)'
              bottom: 0%
              right: 5.5%
            tap_action: 
                action: call-service
                service: shell_command.amcrest_ptz_control
                service_data:
                  payload: '"192.168.10.201" "admin" "amcrest_passwords" "Down"'
          - icon: 'mdi:arrow-left'
            type: icon
            style: 
              transform: none
              background: 'rgba(155, 155, 255, 0.25)'
              bottom: 4%
              right: 10.9%
            tap_action: 
                action: call-service
                service: shell_command.amcrest_ptz_control
                service_data:
                  payload: '"192.168.10.201" "admin" "amcrest_passwords" "Left"'
          - icon: 'mdi:arrow-right'
            type: icon
            style: 
              transform: none
              background: 'rgba(155, 155, 255, 0.25)'
              bottom: 4%
              right: 0%
            tap_action: 
                action: call-service
                service: shell_command.amcrest_ptz_control
                service_data:
                  payload: '"192.168.10.201" "admin" "amcrest_passwords" "Right"'

ptz shell command config:

shell_command:
  -   amcrest_ptz_control: bash /config/shell_scripts/amcrest_ptz.sh {{payload}}

amcrest_ptz.sh:

#!/bin/bash
_ip=$1
_name=$2
_pass=$(cat /config/secrets.yaml | grep ^$3: | grep -oP '(?<=:).*' | sed 's/ //g')
_code=$4
curl -m 1 --digest -u "${_name}:${_pass}" "http://${_ip}/cgi-bin/ptz.cgi?action=start&code=${_code}&channel=0&arg1=1&arg2=1&arg3=0"
curl -m 2 --digest -u "${_name}:${_pass}" "http://${_ip}/cgi-bin/ptz.cgi?action=stop&code=${_code}&channel=0&arg1=1&arg2=1&arg3=0"
curl -m 2 --digest -u "${_name}:${_pass}" "http://${_ip}/cgi-bin/ptz.cgi?action=stop&code=${_code}&channel=0&arg1=1&arg2=1&arg3=0"

Its a rough script that pulls the camera password from the secrets.yaml file. You might need to tweak the curl calls if you want more movement per button click or less (or your camera model uses different ptz commands - the ones above are for IP3M-941B cams). I only have the basic ptz move functionality, as I haven’t had the necessity to use presets or zoom commands. The ptzControl.svg file is just a rectangle background to hold the ptz buttons.

Hopefully something above works for you.

7

This is great. Thanks so much for sharing. I should be able to get something out of this. So you’re not using the amcrest integration within HA, correct? You’re just pulling the stream from Shinobi and sending PTZ commands directly to the camera using a bash script with simple curl commands? I’m using IP2M-841EW camera which I are similar to yours except 1080p, so I’m sure the commands are the same or very similar. Thanks again!

8

Correct, I’m using an iframe because the shinobi stream allows me to fullscreen the video. I’m actually flipping between shinobi and zoneminder right now - and am writing a simple webpage for the iframe that will have the ptz and fullscreen buttons directly on top of the stream. I’m currently working out the home-assistant api calls to make this happen. It is a very simple process to allow an element to become truly fullscreen, maybe the home-assistant crew or modder will implement it directly into hass at some point, but until then, my webpage wrapper will get the job done.

9

Hi @RandomHassUser Can you share how you did this with a wrapper page? I’m facing the exact same issue.