Frigate Lovelace Card + Camera Detection Switch Overlay

SpikeyGG · October 16, 2021, 12:44pm

I’m using the Frigate HACS integration with the Frigate Card Lovelace Frontend customization and it works fairly well but I really want to have a button for controlling the detection on each camera. There’s already an entity for switch.front_door_detect and I noticed on the Frigate Card Github Site and the information page on the HACS Frigate Lovelace Card there are a few screenshots that show what I want but none of my cameras have that button!

From the Frigate Card Github Site:

From one of my cameras:

I’m running:

Frigate 0.9.1 (stable)
HACS Frigate NVR Custom Component v2.1.0
HACS Frigate Lovelace Card v1.2.0

I also noticed that on the Frigate Card information page (and github site) that it says:

Example

This example allows access to the detection, recordings and snapshots switches
from the menu. It also enables a different entity to trigger a card update (but
without appearing in the menu).
entities:
 - entity: switch.front_door_recordings
 - entity: switch.front_door_snapshots
 - entity: switch.front_door_detect
 - entity: binary_sensor.front_door_person_motion
   show: false

I tried installing WebRTC and using these options to enable, specifically, the switch.front_door_detect that is explicitly listed in the example and I was still unable to get it to show up in the custom overlay menu…

What am I doing wrong and how can I get this to work?

thundergreen · October 16, 2021, 9:24pm

I think you have to take the condition element…wait I’ll try to find the part in the wiki

...
        elements:
          - type: conditional
            conditions:
              - entity: binary_sensor.motion_bla_bla
                state: 'on'

SpikeyGG · October 17, 2021, 3:27pm

Yup, you were right! That got my pointed in the correct direction. Thank you @thundergreen!

thundergreen · November 17, 2021, 10:06am

Just wanna share my awesome Lovelace card (put in swipe card). My Foscam with PTZ function finally

thundergreen · November 29, 2021, 7:00pm

small update:

josepdomotica · January 17, 2022, 5:08pm

@thundergreen Hi dude, can you share this code? Thanks

LucasB · April 19, 2022, 8:27pm

@thundergreen , would you be so kind and share your code for these lovely cards?

thundergreen · April 19, 2022, 8:39pm

I removed swipe card as now frigate card uses swipe as well here my complete code

# dwains_dashboard

- type: custom:frigate-card
  cameras:
    - camera_entity: camera.front_door_webrtc
      live_provider: ha
      camera_name: front_door
    - camera_entity: camera.doorbell_webrtc
      live_provider: ha
      camera_name: doorbell
    - camera_entity: camera.garage
      live_provider: frigate-jsmpeg
    - camera_entity: camera.garden_webrtc
      camera_name: camera.garden
      live_provider: ha
    - camera_entity: camera.garden_upstairs_webrtc
      camera_name: camera.garden_upstairs_2
      live_provider: ha
    - camera_name: birdseye
  menu:
    buttons:
      image: false
      frigate: true
    button_size: 80px
    mode: above
  live:
    preload: true
    lazy_unload: true
    auto_unmute: true
    transition_effect: slide
    view:
      update_cycle_camera: true
      update_seconds: 20
      default: live
      camera_select: live
    controls:
      next_previous:
        size: 100px
        # style: chevron
      thumbnails:
        media: clips
        size: 80px
        mode: below
      title:
        mode: popup-top-right
        duration_seconds: 3
    lazy_load: true
  event_gallery:
    min_columns: 8
  event_viewer:
    auto_unmute: true
    controls:
      next_previous:
        style: thumbnails
        size: 90px
      thumbnails:
        size: 90px
        mode: below
      title:
        duration_seconds: 8
        mode: popup-top-right
  dimensions:
    aspect_ratio: "16:7"
    aspect_ratio_mode: static
  elements:
    - type: custom:frigate-card-conditional
      conditions:
        camera:
          - camera.front_door_webrtc
      elements:
        - type: state-badge
          entity: sensor.dark_sky_humidity
          style:
            right: "-10px"
            top: 86px
            color: rgba(0,0,0,0)
            opacity: 0.7
        - type: state-badge
          entity: sensor.solar_powered_outdoor_siren_air_temperature
          style:
            right: 80px
            top: 110px
            color: rgba(0,0,0,0)
            opacity: 0.7
        - type: custom:frigate-card-menu-state-icon
          entity: lock.main_door
          tap_action:
            action: toggle
        - type: custom:frigate-card-menu-state-icon
          entity: script.restart_foscam
          tap_action:
            action: toggle
        - type: custom:frigate-card-menu-state-icon
          entity: script.preset_garage
          tap_action:
            action: toggle
        - type: custom:frigate-card-menu-state-icon
          entity: script.preset_street
          tap_action:
            action: toggle
        - type: custom:frigate-card-menu-state-icon
          entity: script.preset_maindoor
          tap_action:
            action: toggle
        - type: custom:frigate-card-conditional
          conditions:
            view:
              - live
          elements:
            - type: icon
              icon: mdi:arrow-up
              style:
                background: rgba(10, 10, 10, 0.75)
                border-radius: 5px
                right: 90px
                bottom: 130px
                transform: scale(3, 3)
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.turn_up
            - type: icon
              icon: mdi:arrow-down
              style:
                background: rgba(10, 10, 10, 0.75)
                border-radius: 5px
                right: 90px
                bottom: 30px
                transform: scale(3, 3)
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.turn_down
            - type: icon
              icon: mdi:arrow-left
              style:
                background: rgba(10, 10, 10, 0.75)
                border-radius: 5px
                right: 150px
                bottom: 80px
                transform: scale(3, 3)
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.turn_left
            - type: icon
              icon: mdi:arrow-right
              style:
                background: rgba(10, 10, 10, 0.75)
                border-radius: 5px
                right: 30px
                bottom: 80px
                transform: scale(3, 3)
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.turn_right
            - type: icon
              icon: mdi:magnify-plus
              style:
                background: rgba(10, 10, 10, 0.75)
                border-radius: 5px
                right: 30px
                bottom: 400px
                transform: scale(3, 3)
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.zoom_in
            - type: icon
              icon: mdi:magnify-minus
              style:
                background: rgba(10, 10, 10, 0.75)
                border-radius: 5px
                right: 120px
                bottom: 400px
                transform: scale(3, 3)
              tap_action:
                action: call-service
                service: script.turn_on
                service_data:
                  entity_id: script.zoom_out
    - type: custom:frigate-card-conditional
      conditions:
        camera:
          - camera.door_bell_webrtc
      elements:
        - type: custom:frigate-card-menu-state-icon
          entity: lock.main_door
          tap_action:
            action: toggle
    - type: custom:frigate-card-conditional
      conditions:
        camera:
          - camera.garage
      elements:
        - type: custom:frigate-card-menu-state-icon
          entity: light.garage
          tap_action:
            action: toggle
    - type: custom:frigate-card-conditional
      conditions:
        camera:
          - camera.garden_webrtc
      elements:
        - type: custom:frigate-card-menu-state-icon
          entity: light.porch_garden
          icon: mdi:track-light
          tap_action:
            action: toggle

I use dwains dashboard but should work also without

judasepa · June 2, 2022, 12:54am

Thanks!! very useful information!

LucasB · July 17, 2022, 2:57pm

This is amazin! Many thanks.
I did go and created view using Frigate and using webRTC plugin with additional controls for PTZ.

serot23 · July 18, 2022, 12:47pm

Sorry to bother you, thank u for sharing your code, i got it so far that it shows the buttons in the frigate card, but i could figure out how to get the buttons actual to work, by putting the elements in the card it self. I see u are using the script, but then it is over for me. The part i am interested in is the part of PTZ buttons and zoom in and out, and if you have the options for presets. FYI i am noob who is trying to figure it out but i can’t stop scratching my head with this and many more. Can u maybe share how u did this in HA? Thank u very much already and thanks again in advance.

thundergreen · July 20, 2022, 7:16pm

Hey mate I’m actually in vacations and will be back Saturday.will share and explain how to archive PTZ etc.

Darkyputz · December 15, 2022, 12:25pm

Hello and sorry in case the question is dumb, but i couldnt find the answer so far…
How can the frigate card itself be changed in size?
I would like to have it bigger than the typical size that it gets created with.
Do i miss something by being bl;ind?

THx Jan

thundergreen · December 31, 2022, 8:58am

Just use one page design or full screen of the card

Dualmiracle · June 13, 2023, 6:58pm

Where can i find the scripts for ptz camera?

thx

thundergreen · June 14, 2023, 9:39am

Depends on your camera …onvif adds automatically those ptz as a service

Dualmiracle · June 16, 2023, 6:16am

i have foscam cameras

thundergreen · June 16, 2023, 9:10pm

Then you can use foscam Integration … then you make a script calling the ptz service

kilopter · August 14, 2023, 3:37am

how you put ptz in the frigate card?

thundergreen · August 30, 2023, 1:26pm

Ping me on discord : thundergreen