Advanced camera card and activity display

Configuration Frontend
1

Is there any way to configure the advanced camera card to overlay specific type of activity detected? For example, if we keep the camera pointed at our baby, could we have an overlay showing a colored tag saying “motion” or “crying”, when Frigate detects these? Home Assistant is getting that information as entities, which are regularly binary sensors.

It would be fantastic to have that capability because we keep a baby camera displaying 24/7 in our living room at all times to show us what the baby is doing. And we would sometimes miss events because we are not exactly paying attention (it’s human to get used to pictures which are mostly motionless and grey). But with something colorful and loud overlaid, we would probably pay more attention.

Thanks in advance. I’m only asking because I could not find anything in the documentation for the advanced camera card.

1 Like
2

Similar question (not for a baby though). I would like to see live view of my front door camera in a dashboard, with on top latest 3-4 events.

1 Like
3

overrides:

:thinking:

Example

type: custom:advanced-camera-card
camera_entity: camera.baby_cam #<>
title: Baby Monitor
show_controls: false
background: black

overlays:
  - conditions:
      - entity: binary_sensor.baby_motion #<>
        state: "on"
    elements:
      - type: label
        text: "👶 MOTION DETECTED"
        style:
          top: 10%
          left: 50%
          color: white
          font-size: 20px
          font-weight: bold
          background-color: rgba(255, 0, 0, 0.7)
          border-radius: 10px
          padding: 6px 12px

  - conditions:
      - entity: binary_sensor.baby_crying #<>
        state: "on"
    elements:
      - type: label
        text: "😭 BABY CRYING"
        style:
          top: 20%
          left: 50%
          color: white
          font-size: 20px
          font-weight: bold
          background-color: rgba(0, 0, 255, 0.7)
          border-radius: 10px
          padding: 6px 12px
4

Yep that worked. This is what I ended up using:

type: custom:advanced-camera-card
cameras:
  - camera_entity: camera.master_bedroom_camera
    live_provider: go2rtc
    go2rtc:
      modes:
        - webrtc
timeline:
  style: ribbon
menu:
  buttons:
    mute:
      enabled: true
    media_player:
      enabled: false
    download:
      enabled: false
    microphone:
      enabled: true
    cameras:
      enabled: true
live:
  zoomable: true
  controls:
    ptz:
      hide_pan_tilt: true
      hide_zoom: true
      hide_home: true
grid_options:
  columns: full
view:
  keyboard_shortcuts:
    ptz_left:
      key: ArrowLeft
    ptz_right:
      key: ArrowRight
    ptz_up:
      key: ArrowUp
    ptz_down:
      key: ArrowDown
    ptz_zoom_in:
      key: +
    ptz_zoom_out:
      key: "-"
    ptz_home:
      key: h
elements:
  - type: conditional
    conditions:
      - entity: binary_sensor.master_bedroom_camera_person_occupancy
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.master_bedroom_camera_person_occupancy
        state_color: false
        style:
          bottom: 0.3vw
          left: 0.3vw
          transform: none
          "--mdc-icon-size": 2vw
          padding: 0.3vw
          background-color: rgba(0,0,0,0.35)
          border-radius: 0.3vw
          "--icon-primary-color": "#2196f3"
  - type: conditional
    conditions:
      - entity: binary_sensor.master_bedroom_camera_motion
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.master_bedroom_camera_motion
        state_color: false
        style:
          bottom: 0.3vw
          left: 2.8vw
          transform: none
          "--mdc-icon-size": 2vw
          padding: 0.3vw
          background-color: rgba(0,0,0,0.35)
          border-radius: 0.3vw
          "--icon-primary-color": "#2196f3"
  - type: conditional
    conditions:
      - entity: binary_sensor.master_bedroom_camera_crying_sound
        state: "on"
    elements:
      - type: state-icon
        entity: binary_sensor.master_bedroom_camera_crying_sound
        state_color: false
        style:
          bottom: 0.3vw
          left: 5.3vw
          transform: none
          "--mdc-icon-size": 2vw
          padding: 0.3vw
          background-color: rgba(0,0,0,0.35)
          border-radius: 0.3vw
          "--icon-primary-color": "#f47575"
1 Like