[Bug]: Frigate+ view broken on desktop

[jonofmac]

Checklist

• I have updated to the latest available Frigate version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in incognito mode to rule out problems with any third party extensions or plugins I have installed.

Describe the problem you are having

When you go to the Frigate+ view on desktop (I tried chrome and firefox) and click on an image, there is no option to submit/acknowledge a submission to frigate+. It merely is a very zoomed in view of the image that was clicked on.

Steps to reproduce

1. Click on Frigate+ tab
2. Click on any image

Version

14.1

In which browser(s) are you experiencing the issue with?

Firefox 130.0 and Chrome 128.0

Frigate config file

database:
  path: /db/frigate.db

model:
  path: plus://<redacted>

mqtt:
  host: <redacted>
  port: 1883
  user: <redacted>
  password: <redacted>


logger:
  default: info

detectors:
  coral:
    type: edgetpu
    device: pci

detect:
  stationary:
    interval: 5
    threshold: 50

objects:
  track:
    - person
    - face
    - car
    - amazon
    - ups
    - fedex
    - package
    - cat
    - dog
  filters:
    person:
      min_score: 0.85
    cat:
      min_score: 0.90
    dog:
      min_score: 0.90
    car:
      min_score: 0.8
    package:
      min_score: 0.84

motion:
  threshold: 25
  contour_area: 30
  delta_alpha: 0.2
  frame_height: 50
  improve_contrast: true

snapshots:
  enabled: true
  timestamp: false
  bounding_box: true
  crop: true
  retain:
    default: 20

record:
  enabled: true
  expire_interval: 1
  retain:
    days: 20
    mode: all
  events:
    pre_capture: 5
    post_capture: 2

live:
  height: 1080
  quality: 8


# Optional: birdseye configuration
birdseye:
  # Optional: Enable birdseye view (default: shown below)
  enabled: true
  # Optional: Width of the output resolution (default: shown below)
  width: 1920
  # Optional: Height of the output resolution (default: shown below)
  height: 1080
  # Optional: Encoding quality of the mpeg1 feed (default: shown below)
  # 1 is the highest quality, and 31 is the lowest. Lower quality feeds utilize less CPU resources.
  quality: 8
   # Optional: Mode of the view. Available options are: objects, motion, and continuous
   #   objects - cameras are included if they have had a tracked object within the last 30 seconds
   #   motion - cameras are included if motion was detected in the last 30 seconds
   #   continuous - all cameras are included always
  mode: continuous

go2rtc:
  webrtc:
    candidates:
      - <redacted>
  streams:
    rtsp_back_porch:
      - rtsp://<redacted:redacted>@hikvision3:554/Streaming/Channels/101/

    rtsp_front_yard:
      - rtsp://<redacted:redacted>@hikvision6:554/Streaming/Channels/101/

    rtsp_front_yard_sub:
      - rtsp://<redacted:redacted>@hikvision6:554/Streaming/Channels/103/

    rtsp_driveway_side:
      - rtsp://<redacted:redacted>@hikvision5:554/Streaming/Channels/101/


    rtsp_front_door:
      - rtsp://<redacted:redacted>@hikvision3:554/Streaming/Channels/101/

    rtsp_garage:
      - rtsp://<redacted:redacted>@hikvision2:554/Streaming/Channels/101/

cameras:
####### Back Porch Camera ######
  back_porch:
    ffmpeg:
      hwaccel_args: preset-nvidia-h264
      inputs:
        - path: rtsp://127.0.0.1:8554/rtsp_back_porch
          input_args: preset-rtsp-restream
          roles:
            - record
            - detect
    live:
      stream_name: rtsp_back_porch
    detect:
      width: 1920
      height: 1080
      fps: 5
    zones:
      patio:
        coordinates: 0.957,0.608,0.333,0.083,0.234,0,0.115,0,0,0.102,0,1,0.982,1
        objects:
          - person
          - cat
          - dog
        inertia: 3
      parking_zone:
        coordinates: 0.281,0,0.969,0,0.904,0.459,0.369,0.18,0.258,0.149
        objects:
          - person
          - cat
          - dog
        inertia: 3
    snapshots:
      required_zones:
        - patio
        - parking_zone
    objects:
      track:
        - person
        - face
        - cat
        - dog
      filters:
        cat:
          min_area: 200
        dog:
          min_area: 200
    review:
      alerts:
        required_zones:
          - patio
          - parking_zone
      detections:
        required_zones: patio
    motion:
      mask: 0.063,0.932,0.34,0.924,0.342,0.968,0.06,0.97
  front_yard:
    ffmpeg:
      hwaccel_args: preset-nvidia-h264
      inputs:
        - path: rtsp://127.0.0.1:8554/rtsp_front_yard
          input_args: preset-rtsp-restream
          roles:
            - record
        - path: rtsp://127.0.0.1:8554/rtsp_front_yard_sub
          input_args: preset-rtsp-restream
          roles:
            - detect
    live:
      stream_name: rtsp_front_yard
    detect:
      fps: 4
    motion:
      mask:
        - 0.415,0.061,0.345,0.09,0.335,0,1,0,1,0.162,0.896,0.104,0.699,0.054
        - 0,0,0.273,0,0.28,0.058,0.23,0.1,0.151,0.147,0,0.243
        - 0.018,0.913,0.311,0.916,0.313,0.947,0.016,0.948
      threshold: 30
      contour_area: 10
      improve_contrast: true
    zones:
      yard:
        coordinates: 
          0.064,0.306,0,0.383,0,1,1,1,1,0.422,0.887,0.233,0.65,0.191,0.374,0.203,0.263,0.224,0.119,0.268
        objects:
          - person
          - face
          - amazon
          - ups
          - fedex
          - cat
          - dog
        min_area: 3000
        inertia: 3
      driveway:
        coordinates: 1,0.425,1,0.284,0.893,0.246
        objects:
          - person
          - fedex
          - amazon
          - ups
          - car
          - cat
          - dog
        inertia: 3
      street:
        coordinates: 
          0,0.26,0.165,0.162,0.229,0.113,0.308,0.066,0.344,0.065,0.292,0.113,0.457,0.076,0.613,0.064,0.824,0.091,1,0.152,1,0.251,0.649,0.182,0.323,0.201,0.124,0.265,0,0.333
        objects:
          - car
          - person
          - face
          - amazon
          - ups
          - fedex
          - cat
          - dog
        inertia: 3
        loitering_time: 0
    objects:
      filters:
        car:
          min_area: 3000
        person:
          min_area: 3000
    snapshots:
      required_zones:
        - street
        - driveway
        - yard
    review:
      alerts:
        required_zones:
          - driveway
          - yard
      detections:
        required_zones:
          - yard
          - driveway
          - street

# Driveway camera
  driveway_side:
    ffmpeg:
      hwaccel_args: preset-nvidia-h264
      inputs:
        - path: rtsp://127.0.0.1:8554/rtsp_driveway_side
          input_args: preset-rtsp-restream
          roles:
            - record
            - detect
    live:
      stream_name: rtsp_driveway_side
    detect:
      width: 1920
      height: 1080
      fps: 4
    motion:
      mask:
        - 0.585,0.078,0.405,0.122,0.545,0.162,0.76,0.263,0.772,0.002
        - 0.336,0,0.035,0,0.044,0.188,0.193,0.131,0.347,0.064
        - 0.018,0.913,0.26,0.908,0.261,0.948,0.016,0.949
    objects:
      filters:
        car:
          min_area: 15000
        person:
          min_area: 70000
        cat:
          min_score: 0.5
          min_area: 10000
        dog:
          min_score: 0.5
          min_area: 10000
    zones:
      driveway_entrance:
        coordinates: 0.393,0.148,0.51,0.255,0,0.5,0,0.323
        objects:
          - person
          - face
          - car
          - cat
          - dog
        inertia: 3
      driveway:
        coordinates: 
          0.536,0.253,0.761,0.348,0.775,0.035,0.935,0.078,1,0.092,1,1,0,1,0,0.518,0.205,0.48,0.447,0.353
        objects:
          - person
          - car
          - cat
          - dog
        inertia: 3
      street:
        coordinates: 0.234,0.184,0.039,0.249,0.035,0.09,0.21,0.029,0.427,0.019,0.435,0.114
        objects:
          - car
          - person
          - cat
          - dog
        inertia: 3
    snapshots:
      required_zones:
        - driveway_entrance
        - driveway
        - street
    review:
      alerts:
        required_zones:
          - driveway_entrance
          - driveway
      detections:
        required_zones:
          - driveway
          - driveway_entrance

# Front Door
  front_door:
    ffmpeg:
      hwaccel_args: preset-nvidia-h264
      inputs:
        - path: rtsp://127.0.0.1:8554/rtsp_front_door
          input_args: preset-rtsp-restream
          roles:
            - detect
            - record
    live:
      stream_name: rtsp_front_door
    detect:
      height: 1920
      width: 1080
      fps: 5
    motion:
      mask: 1,0,0,0,0,0.388,1,0.432
    zones:
      front_porch:
        coordinates: 884,824,1086,939,1086,1920,0,1920,0,767,86,806,348,841
        objects:
          - person
          - face
          - cat
          - dog
          - amazon
          - ups
          - fedex
          - package
    objects:
      filters:
        dog:
          mask:
            - 644,1628,839,1920,1080,1920,1080,1369,999,1353,728,1441
        cat:
          mask:
            - 644,1628,839,1920,1080,1920,1080,1369,999,1353,728,1441
        package:
          mask:
            - 0,1920,222,1920,97,1498,0,1463
            - 1080,1920,1080,1403,528,1424,442,1809,156,1841,116,1920
    snapshots:
      required_zones:
        - front_porch

    review:
      alerts:
        required_zones:
          - front_porch

###### Garage Camera ######
  garage:
    ffmpeg:
      hwaccel_args: preset-nvidia-h264
      inputs:
        - path: rtsp://127.0.0.1:8554/rtsp_garage
          input_args: preset-rtsp-restream
          roles:
            - detect
            - record
    live:
      stream_name: rtsp_garage
    detect:
      width: 1920
      height: 1080
      fps: 5
    zones:
      garage_inside:
        coordinates: 0.003,0.125,0.539,0.003,0.999,0.18,0.995,0.994,0.003,0.997
        objects:
          - person
          - cat
          - dog
        inertia: 3
    snapshots:
      required_zones:
        - garage_inside

    review:
      detections:
        required_zones: garage_inside
      alerts:
        required_zones: garage_inside
    motion:
      mask: 0.369,0.952,0.342,0.901,0.077,0.909,0.064,1
version: 0.14
camera_groups:
  Perimeter:
    order: 1
    icon: LuHome
    cameras:
      - back_porch
      - driveway_side
      - front_door
      - front_yard

docker-compose file or Docker CLI command

Not needed

Relevant Frigate log output

No log output seen for this

Relevant go2rtc log output

No log output

Operating system

Debian

Install method

Docker Compose

Network connection

Wired

Camera make and model

Hikvision

Screenshots of the Frigate UI's System metrics pages

Any other information that may be helpful

No response

[NickM-27]

this is likely due to the zoom level of your browser, if you zoom out the buttons will be there.

[jonofmac]

All my browsers are on default zoom.

I just made a discovery. I just updated to 14.1 today. All my images from 14.0 in the frigate+ tab have this issue, anything that was added on the current version works as expected.

[jonofmac]

Turns out my thought about it being version related is not true. It's actually camera-specific.
It's all images from my "front yard" camera have this problem. Any other camera shows normally.
my front yard camera is the only camera I have a different detect stream from the main stream.

Edit again: Turns out all cameras have this issue EXCEPT for my front door camera. I have no idea why it does not have this issue.

[jonofmac]

Digging into the source a bit:
All but 1 of my cameras has this issue:
The picture below is "broken" in terms of sizing, you can see I had to zoom way out to see the buttons

The picture below works as expected (but I have the dev portal open, so it's covering the buttons, but with normal 100% zoom, it works as expected)

[voron69-bit]

So...we just wait until the next full release to be able to report images to frigate+?

[NickM-27]

You can zoom out in the browser. Based on reports this doesn't affect most users.

[voron69-bit]

Yeah I've tried that, doesn't work. My laptop has a touch screen, and i can pinch to zoom, but the buttons never show up. Frustrating

[NickM-27]

When I say zoom I mean use the browsers scale function. Usually it is ctrl and the - button

[nasixi]

I fixed mine by zooming out in Chrome, to 90%. I used my mouse scroll wheel, but I've also just tested it with [CTRL] + [-] as Nick suggests and that works, as well.

[tbclark3]

It's affecting me, all 11 cameras, starting this morning.

[anisart]

Me too for all cameras when viewing on laptop with 1366x768 resolution. It's UI bug and needs to be fixed.
Other affected resolutions can be found via 'Chrome dev tools -> Toogle device resolution' and play with resolution.