Add camera-relative elements support

[danlo315]

card_version: 6.0.0-beta.8
browser: Mozilla/5.0 (X11; Linux x86_64; rv:132.0) Gecko/20100101 Firefox/132.0
date: 2024-11-30T21:02:39.072Z
frigate_versions:
279672cc46de4241ae0bae4d97d805c8: 5.4.0/0.14.1-f4f3cfa
lang: en
timezone: America/New_York
git:
hash: a869109
build_date: Mon, 14 Oct 2024 00:01:23 GMT
commit_date: Sun, 13 Oct 2024 16:50:47 -0700
ha_version: 2024.10.4
config:
type: custom:frigate-card
cameras:
- camera_entity: camera.eddie_3
live_provider: go2rtc
go2rtc:
modes:
- webrtc
- mse
- mjpeg
image:
mode: camera
- camera_entity: camera.garage_2
live_provider: go2rtc
go2rtc:
modes:
- webrtc
- mse
- mjpeg
image:
mode: camera
- camera_entity: camera.basement_3
live_provider: go2rtc
go2rtc:
modes:
- webrtc
- mse
- mjpeg
image:
mode: camera
- camera_entity: camera.attic_2
live_provider: go2rtc
go2rtc:
modes:
- webrtc
- mse
- mjpeg
image:
mode: camera
menu:
style: hover
buttons:
media_player:
enabled: true
clips:
enabled: true
snapshots:
enabled: true
cameras:
enabled: false
live:
enabled: true
mute:
enabled: true
expand:
enabled: true
fullscreen:
enabled: false
frigate:
enabled: true
position: top
view:
default: live
live:
show_image_during_load: true
controls:
builtin: false
zoomable: false
lazy_load: false
display:
mode: grid
grid_max_columns: 2
grid_selected_width_factor: 2
media_gallery:
controls:
thumbnails:
show_timeline_control: false
show_download_control: false
show_favorite_control: false
media_viewer:
draggable: false
zoomable: false
lazy_load: false
snapshot_click_plays_clip: false
controls:
builtin: false
timeline:
show_recordings: false
performance: {}
profiles:
- low-performance
elements:
- type: custom:frigate-card-conditional
conditions:
- condition: camera
cameras:
- camera.garage_2
- condition: view
views:
- live
elements:
- type: state-icon
entity: light.office_lights_3
style:
left: 50px
top: 50px
tap_action:
action: toggle

I have 4 cameras set as a grid view. What I do is setup elements that show states specific to each camera. It seems that the style/position tags are for the entire card, but not specific to the camera. In the code above, the element is always going to be top 50px/left 50px. Am I missing something that will allow me to set the position of the element to the camera itself?

[dermotduffy]

Am I missing something that will allow me to set the position of the element to the camera itself?

You're not missing anything. Elements are currently relative to the card as a whole, not any contents within the card.

I think what you want is a different feature, something like "camera_elements" that renders relative to media (live or otherwise) for a given camera.

[danlo315]

Am I missing something that will allow me to set the position of the element to the camera itself?

You're not missing anything. Elements are currently relative to the card as a whole, not any contents within the card.

I think what you want is a different feature, something like "camera_elements" that renders relative to media (live or otherwise) for a given camera.

Thanks for the quick reply, and yes that is what I am looking for. Before grid view, I use Lovelace grid card, and have 4 frigate cards each with their own respective elements and their locations. I am hoping to consolidate into one single card for efficiency.

[dermotduffy]

OK, added as a new feature idea. Be sure to give it your original message a thumbs-up, as this helps choose prioritization of what features get worked on next.