Extend Largo to show the outline of the annotations

[dlangenk]

This is more or less an extension of #30.

Especially for ML predicted annotations, checking if the outline is correct is very important. In addition ambiguous cases (#30), where multiple objects are in close proximity or the object is not in the center of the patch (e.g. for an object that is near an edge) can be made clear.

Technically we would generate another largo patch with the outline and overlay it over the current patch. We discussed this briefly and agreed on a blue colored outline at first (Is it possible to use CSS to set the color in the frontend to the color of the selected class?). A slider can then be used to set the opacity of the overlay as this might not be of interest to everybody.

[mzur]

Ideas for the implementation:

• The second annotation patch with the outline should be generated in the backend. The outline should have a similar style to the lines in the annotation tools (i.e. a colored line with a white border). The color may be blue but we could also just try black. Maybe an adjustable color is possible, too (see below).

• The backend already uses Vips for image processing. One way to draw an overlay on a thumbnail could be to draw an SVG. This supports enough styling options to allow the same line style than in the annotation tools.

• If we draw the outline with SVG maybe we can just generate an SVG and try to apply the same transformations to it than for the annotation patch. In the frontend, the SVG can overlay the patch. This would allow for more modifications of the overlay style and would also require less storage space.

[mzur]

More ideas! The most challenging part with the separate SVG will be to transform the annotation coordinates in the SVG in the same way than the thumbnail is transformed (cropping and resizing here). But maybe it is very easy, too. The SVG can be created with the same dimensions than the original image, the annotation drawn onto it and then read as a Vips image. This image could maybe be cropped and resized exactly the same than the thumbnail!

If this works, we only have to think about the annotation style in the SVG. For example, if the annotation is drawn with a 5 px thick line and then the SVG is resized, the line may end up being 1 px thick. The thickness will vary across patches because each annotation thumbnail is resized differently. But in Largo the lines should all have the same style. Maybe the style can be defined via CSS in the frontend?

[mzur]

Oh, I could not find an SVG save function for Vips, so maybe that's a dead end :confused:

[dlangenk]

SVG is a rather simple format. We could also create the svg with a PHP function as it is just text. At that point we already have all the information like cropping and resizing. Crop is just subtracting the top and left coordinates and resizing is by a constant factor, which is computed during crop generation.

[mzur]

Or use something like meyfa/php-svg :wink: