Skip to content
Justin Brooks edited this page Jun 11, 2019 · 5 revisions

Overview

Tools

Tools are built with Vue components that use the tool.js mixin to inherit functions and properties. The mixins act as a parent class and bring structure to the design of tools in the annotator. Each tool initializes a Paper Tool, which is then configured to call specific functions within the component on common events which are overwritten by the child class. The mixin also sets the tools icon, appropriate colors and manages the tools state.

Selection Tool

Select Tool is the default tool for the annotator and provides many useful features for inspecting metadata and modifying annotations directly on the canvas. Users can carry out any of the following operations to modify annotations:

  • click and drag points to move them to there desired location
  • hold the shift key well click d to remove points
  • click any point online the stroke of the shape to add any additional points.

A white circle is created as visual feedback when a point is selected.

Option Type Description
Show hover Text Toggle Show metadata when hovering over annotations (disabling can increase performance)

Polygon Tool

The Polygon Tool creates polygonal shapes and paths (shape outlines). To complete a section place a point close to the start of your selection or click 'Close Polygon' found in the options panel. Once closed a simplification is applied to remove any excessive points and saved to the currently selected object layer.

Useful for creating accurate annotations, or annotation objects without distinct edges.

Option Type Description
Guidance Toggle Draws a line between the cursor and last added point
Delete Polygon Operation Removes currently selected polygon
Complete Distance Integer Distance between first and last point to trigger automatic completion

Polygon Keyboard Shortcuts

This tool can only be activated when an annotation layer is selected, otherwise, the tool is disabled.

Flood Fill Tool

Flood fill, also commonly called Magic Wand, is the algorithm used in to create selections using by determining the area connected to a given pixel and expanding outward until pixels no-longer are similar. It is useful for extracting objects from a flat background, quickly selecting an irregularly shaped area, or selecting a distinctly-colored element. This tool is implemented by using the library created by Paul Tamersoul called magic-wand-js.

When a user clicks a pixels on the image, a selection is made using the floodFill function which creates a binary mask. The gaussian-blur function, (gaussBlurOnlyBorder), is then applied to the binary mask to smooth out any inconsistencies. The final step converts the mask into a contour array (traceContours) which is passed to a Paper JS object to create a visual selection.

Option Type Description
Threshold Number Pixel similarity threshold
Blur Number Amount to blur outline for smoother outlines

Wand Keyboard Shortcuts

This tool can only be activated when an annotation layer is selected, otherwise, the tool is disabled.

Eraser/Brush Tool

The brush tool allows users to select a circle shape as well as thickness in pixels and move the cursor over the desired shape create an annotation.

Keypoints Tool

DEXTR

Deep Exemtrem

Annotate Tool

The Annotate Tool was created to allow for circular annotations. This means, as you create training data and train a model you can call on it to annotate more images for you quicker.

By default this tool is disabled and required adding of API URL to the dataset. This will be the URL the annotate will post the image and apply any annotations returned to your current image. Inside the annotator click the settings icon on the left panel. Type the URL of the model (if using the built in MaskRCNN its /api/model/maskrcnn)

MaskRCNN

Pre-configued support for MaskRCNN comes right in the annotator. Take a look at issue #176 for more information.

Copying Tool

Modes

Segment Mode

Label Mode

Undo

Annotator

Object