HA Lovelace - using picture-elements instead of camera - brilliant

[S-Przybylski]

Dear @blakeblackshear
dear all
I played with the built-in lovelace picture-elements card. This is the most versatile card in Home Assistant I found. And the best, its not a custom card!
You need only 2 minutes to enhance your lovelace dashboard like this:

Features:

1. Navigation to a predefined lovelace page
2. Enlarge camera stream
3. Show last detected person
4. Switches for detection, clips and snapshots
5. Show Temperature
6. Show active detection and number of objects

Please adapt the following items before inserting into a empty lovelace card:

1. frigate-IP = your IP address to frigate
2. camxyz = your Frigate camera name
3. outdoor_temperature = your temperature sensor / or something else
4. Adapt the link "/lovelace/home"
   Thats it!

Two modes are available:

1. Leave it as it is: Card shows the camera stream or
2. Delete the two lines "camera_image" and "camera_view": This card displays the mjepg stream (debug)

type: picture-elements
image: 'http://frigate-IP:5000/api/camxyz?bbox=1&timestamp=1&motion=1&regions=1'
camera_image: camera.camxyz
camera_view: live
elements:
  - type: state-icon
    tap_action:
      action: toggle
    entity: switch.camxyz_detect
    style:
      bottom: 0%
      left: 1%
      transform: none
  - type: state-icon
    tap_action:
      action: toggle
    entity: switch.camxyz_clips
    style:
      bottom: 0%
      left: 10%
      transform: none
  - type: state-icon
    tap_action:
      action: toggle
    entity: switch.camxyz_snapshots
    style:
      bottom: 0%
      left: 18%
      transform: none
  - type: state-label
    entity: sensor.outdoor_temperature
    style:
      bottom: 0%
      left: 42%
      transform: none
      color: 'rgb(249, 251, 255)'
      font-f4mily: Trebuchet MS
      font-size: 150%
      text-shadow: 2px 2px DarkSlateGrey
      text-rendering: optimizeLegibility
      '-moz-osx-font-smoothing': grayscale
      font-smoothing: antialiased
      '-webkit-font-smoothing': antialiased
      opacity: 0.6
  - type: conditional
    conditions:
      - entity: binary_sensor.camxyz_person_motion
        state: 'on'
    elements:
      - type: state-label
        entity: sensor.camxyz_person
        style:
          bottom: 0%
          right: 0%
          width: 37%
          transform: none
          font-family: Trebuchet MS
          text-sha5ow: 2px 2px black
          font-size: 150%
          font-weight: bold
          color: 'rgb(249, 251, 255)'
          border-right-style: solid
          box-shadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)'
          border-color: 'rgb(34, 255, 10)'
          background-color: 'rgb(240, 65, 78)'
          opacity: 0.4
      - type: icon
        icon: 'hass:run'
        entity: binary_sensor.camxyz_person_motion
        style:
          bottom: 2%
          right: 2%
          color: 'rgb(254, 0, 0)'
          opacity: 0.8
          transform: none
  - type: icon
    icon: 'mdi:home'
    tap_action:
      action: navigate
      navigation_path: /lovelace/home
    style:
      top: 6%
      left: 5%
      color: 'rgb(249, 251, 255)'
      opacity: 0.6
      transform: 'scale(1.5,1.5)'
  - type: icon
    icon: 'mdi:camera-switch'
    tap_action:
      action: more-info
    entity: camera.camxyz
    style:
      top: 21%
      left: 5%
      color: 'rgb(249, 251, 255)'
      opacity: 0.6
      transform: 'scale(1.5,1.5)'
  - type: icon
    icon: 'mdi:camera-account'
    tap_action:
      action: more-info
    entity: camera.camxyz_person
    style:
      top: 37%
      left: 5%
      color: 'rgb(249, 51, 55)'
      opacity: 0.6
      transform: 'scale(1.5,1.5)'

Addition 1: Picture-elements card for GRID usage - here the camera with a active detection has a red box around the picture (using the debug view url instead of the camera image)

Adapt the conditional part:

  - type: conditional
    conditions:
      - entity: binary_sensor.camxyz_person_motion
        state: 'on'
    elements:
      - type: icon
        icon: 'hass:none'
        entity: binary_sensor.camxyz_person_motion
        style:
          top: 0%
          left: 0%
          right: 0%
          bottom: 0%
          color: 'rgb(254, 65, 78)'
          opacity: 1
          transform: none
          border: solid
          border-color: 'rgb(255, 65, 78)'
      - type: icon
        icon: 'hass:run'
        entity: binary_sensor.camxyz_person_motion
        style:
          bottom: 2%
          right: 2%
          color: 'rgb(254, 0, 0)'
          opacity: 0.8
          transform: none

Addition 2: Instead of navigate to an internal HA page open a external url
Change the icon tap_action from navigate to url:

  - type: icon
    icon: 'mdi:home'
    tap_action:
      action: url
      url_path: 'https://<Frigate-IP:5000'

Addition 3: There is an undocumented feature within the card:
"aspect_ratio" could be used to strech the image

aspect_ratio: '1.4'

I use the second addition within a matrix of four GRID cards for six cameras and this works really fine!
Grid1:
Grid2: X X
Grid3: X X
Grid4: X X
Feel free to use! I am interrested in your approaches! Please share!

[natm]

@S-Przybylski Thanks for sharing this!

[S-Przybylski]

Do you had a chance to make it better?