[Support]: Mask and Zone Creator not rendering correctly

[rayzorben]

Describe the problem you are having

When using the mask and zone creator I am trying to draw a simple rectangle. I start at the bottom left, then bottom right, upper right, upper left. This is what I am left with

Is this just a display error? Are my zones getting created correctly regardless?

Version

11

Frigate config file

mqtt:
  host: homeassistant.local

ffmpeg:
  #hwaccel_args: -hwaccel vaapi -hwaccel_device /dev/dri/card0 -hwaccel_output_format yuv420p
  #hwaccel_args:
    #-hwaccel h264_rkmpp
    #-hwaccel_device /dev/dri/card0
    #-hwaccel_output_format yuv420p
  input_args: -avoid_negative_ts make_zero -fflags +genpts+discardcorrupt -rtsp_transport tcp -stimeout 5000000 -use_wallclock_as_timestamps 1

detect:
  width: 704
  height: 480
  fps: 5

snapshots:
  enabled: True

cameras:
  driveway:
    motion:
      mask:
        - 0,0,704,0,704,166,0,184
    ffmpeg:
      inputs:
        - path: rtsp://admin:foo@192.168.1.21:554/cam/realmonitor?channel=1&subtype=1
          roles:
            - detect
            - rtmp

Relevant log output

None

FFprobe output from your camera

None

Frigate stats

None

Operating system

HassOS

Install method

HassOS Addon

Coral version

CPU (no coral)

Network connection

Wired

Camera make and model

amcrest

Any other information that may be helpful

No response

[NickM-27]

It's not a display error, the points are out of order and you'll want to swap one side vertically

[rayzorben]

Is there a recommended way of creating these masks, should I start upper left going clockwise? It's a simple rectangle, it seems like a bug if I am going in order?

[NickM-27]

Is there a recommended way of creating these masks, should I start upper left going clockwise? It's a simple rectangle, it seems like a bug if I am going in order?

https://user-images.githubusercontent.com/14866235/200394051-024a6b66-d2f5-4fae-9d68-40ff52676f79.mov

Following your order I had no issues ^. I then did it on the edges and it had the same issue, however doing it clockwise at the edges of the screen did not have that issue.

[rayzorben]

OK, I will go clockwise, thanks.

[rayzorben]

Reopening, I think there is a bug. I can't get this zone working at all

When adding coordinates it prepends them, then all of a sudden it puts it in the middle?

Shouldn't it just append always? Or is it trying to do something smart and messing it up?

coordinates: 138,43 coordinates: 302,31,138,43 coordinates: 490,48,302,31,138,43 coordinates: 666,98,490,48,302,31,138,43 coordinates: 651,173,666,98,490,48,302,31,138,43 coordinates: 651,173,666,98,490,48,324,106,302,31,138,43

[NickM-27]

It does not append them to the end but based on near points adds it where it thinks makes sense.

[rayzorben]

That doesn't seem like the right behavior, as it is assuming that the algorithm is smarter than the user. The user should know what order the coordinates for the polylines are and click in a logical order to produce that. The algorithm very often gets it wrong, as shown in many cases here, and tons others that I have had to work around by randomly starting my bounding area at different coordinates and going in different directions.

[NickM-27]

That doesn't seem like the right behavior, as it is assuming that the algorithm is smarter than the user. The user should know what order the coordinates for the polylines are and click in a logical order to produce that.

I must say I disagree. This is assuming a user knows exactly what shape zone they want when making it the first time, meanwhile in reality I have many times made a zone and tested it only to discover that one particular spot was too close to the sidewalk, street, fence, etc. and I needed to add one extra point in the middle of two others to adjust it slightly.

Working as it is today this was easy, if it worked in an order based approach like described above then I'd be forced to move / shift every single point to the one before it which is a bad user experience.

I do agree it is finicky at times, but it has its reasons for existing.

[NickM-27]

Also, you can see where this is implemented: https://github.com/blakeblackshear/frigate/blob/dev/web/src/routes/CameraMap.jsx#L320

[rayzorben]

WELL. OK I agree with you now, the issue is that the functionality is not documented. The UI should explain the following

1. Right click to delete a point
2. You can drag the points around

Now that I know these things, creating them is simple!

[NickM-27]

I'll make a PR to note these things, agree it should have instructions