search

cvat-ai / cvat

Annotate better with CVAT, the industry-leading data engine for machine learning. Used and trusted by teams at any scale, for data of any scale.
https://cvat.ai
MIT License
11.9k stars 2.9k forks source link

Why shape lines are too thick? #1563

Closed MahdiEsf closed 4 years ago

MahdiEsf commented 4 years ago

There are almost 20 users annotating images via CVAT applications and 2 of them (will refer to them as target individuals) have encountered the issue of thick polygon lines which is super problematic when zoom in to get around the objects. Once you zoom in, lines get even thicker as depicted in the following. Tried the following scenarios:

  1. As admin, I don't see such an issue when checking out the target individuals' annotations
  2. Logged into CVAT with target individuals' credentials on my local laptop and a remote workstation but found no issue with line width
  3. Target individuals checked their annotations on another machine but found the same issue
  4. Played with screen resolution and browser zoom in/out features without any luck

I am running out of ideas and appreciate any help. Thanks example_1 example_2

nmanovic commented 4 years ago

@ActiveChooN , @bsekachev , let's investigate. It looks like a bug. Probably some specific options can affect the property. Also we can think about an option inside settings to adjust the property.

bsekachev commented 4 years ago

@MahdiEsf

What browser and platform do individuals use?

MahdiEsf commented 4 years ago

@bsekachev Windows 10 and Google Chrome

MahdiEsf commented 4 years ago

@nmanovic Do you mean browser or machine's options? Chrome comes with default settings where no one usually changes them, at least, our annotators. Also, the annotator who's having problem tried CVAT on two machines with similar specifications where others don't have problem with BUT ran into the same issue again.

MahdiEsf commented 4 years ago

@nmanovic @bsekachev Do you think there would be a quick fix for this issue so that we can keep going on our project or any other ideas I can give it a try? or it's a matter of long-term feature enhancement for CVAT

bsekachev commented 4 years ago

@MahdiEsf

Okay. I would suggest to make a chain of actions: 1) Create a tiny bounding box 2) Zoom canvas (to make bbox bigger) 3) Press F12 (or open dev tools in another way) 4) Select the bounding box with DOM selector (Elements tab in dev tools, see the screenshot below) 5) Make a screenshot like this: Screenshot from 2020-05-20 22-39-03

I don't think it is difficult issue, but the problem is we cannot reproduce it. BTW, could you also attach git commit hash?

MahdiEsf commented 4 years ago

@bsekachev I haven't made any git commit to send you the hash string. Attached the following example as you requested. Screen Shot 2020-05-21 at 2 42 14 PM

bsekachev commented 4 years ago

@MahdiEsf

Hmm.. Could I know what resolution does this image have?

MahdiEsf commented 4 years ago

@bsekachev For this image is 2533 x 3285. I don't think it's about the resolution because 1) other users annotated the same image and had no similar problem 2) this issue happens to all images of different sizes/resolutions/dimensions for the same user.

bsekachev commented 4 years ago

@MahdiEsf

Sorry for the delay. On your screenshot and on my screenshot we can compare two property values of the selected shape: stroke-width. In my case when I zoomed in the image it is 0.175. In your 10.047.

Going to the code we can find how this value is computed: File: cvat-canvas/src/typescript/canvasView.ts Function: transformCanvas(), lines: 335-344 (in develop) Exactly the row:

object.attr({
    'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
});

The first value consts.BASE_STROKE_WIDTH is a hardcoded constant: 1.75px The second value this.geometry.scale is a current scale of the image. It is expected to be > 1 when zoom in and < 1 when zoom out.

Scale is computed as oldScale * 6/5 when zoom in and oldScale * 5/6 when zoom out. Scale should be approximately 0.17 to get stroke-width===10.047 with basic width 1.75.

If you see that image is increased after zoom in, it looks scale works correctly. As you see, computing of stoke-width is trivial. To be honest, I do not know what is a reason. Especially taking into account the fact that individuals have the same issue on another machine, but you do not have the issue on two your machines on the same tasks.

bsekachev commented 4 years ago

@MahdiEsf

By the way. Can the issue be reproduced on our public instance https://cvat.org/?

MahdiEsf commented 4 years ago

@bsekachev Thanks for the deep dive. As an update, the same individual who had problem with line width on two laptops, opened CVAT on another laptop and found no issues there!! It's complicated as this issue is seen on all images of all resolutions for him but not on my end and for other individuals. After all different experimentation, I guess CVAT is using some configurations from the machine to calculate "scale" which rarely ends up with big polygon lines specially when you zoom in which is required most of the times. I haven't tried to reproduce it on publicinstance

bsekachev commented 4 years ago

@MahdiEsf

Unfortunately we are not able to reproduce the issue on our side. You can investigate the reason of the issue on your own and contact us with more specific steps to reproduce If somebody else has the same issue and can help us with it, you are welcome.

I will close the issue for now.

pepijnob commented 1 year ago

Hi,

I just had the same issue, I couldn't find the solution anywhere else. Anyway, It turned out that the annotator was zoomed in in the browser itself and not inside the tool which causes the bounding boxes to look really thick.

Maybe this can help someone else in the future.