Editor for image area selection

The editor lets you select an area of the image using either a rectangle or an arbitrary polygon:

Adding the editor

To add the editor to the task:

Connect the $TOLOKA_ASSETS/js/image-annotation.js library (click in the Task interface section on the project page).

Include the {{field type="image-annotation" name="<field ID>" src=<image URL>}} component in the HTML code of the interface. Field ID must match the field name in the output data description. For example:

{{field type="image-annotation" name="result" src=url}}

Full list of parameters


Parameter	Description	Required	Default value
`type`	Field type: `image-annotation`, the image area selection editor.	yes	no
`name`	Field ID. Must match the field name in the output data description.	yes	no
`src`	Image URL. Supported values: URL from the input data of the task. For example, from the field with `url` ID: `src=url`. Direct link. It is recommended to use HTTPS protocol. For example, `src="https://mywebsite.ru/img1.png"`. Relative link. Specify the `proxy` Handlebars component and the input data field ID. For example: `src=(proxy image)`. To add an image in the area selection editor, change the input data field type to string.	yes	no


Parameter	Description	Required	Default value
`type`	Field type: `image-annotation`, the image area selection editor.	yes	no
`name`	Field ID. Must match the field name in the output data description.	yes	no
`src`	Image URL. Supported values: URL from the input data of the task. For example, from the field with `url` ID: `src=url`. Direct link. It is recommended to use HTTPS protocol. For example, `src="https://mywebsite.ru/img1.png"`. Relative link. Specify the `proxy` Handlebars component and the input data field ID. For example: `src=(proxy image)`. To add an image in the area selection editor, change the input data field type to string.	yes	no

Add a field of JSON type into the output data description. For example:
```
{
  "result": {
    "type": "json",
    "required": true
  }
}
```
The output data contains a JSON object with point coordinates. For example:
```
{"data":{"p1":{"x":0.472,"y":0.413},"p2":{"x":0.932,"y":0.877}},"type":"rectangle"},
{"data":[{"x":0.143,"y":0.807},{"x":0.317,"y":0.87},{"x":0.511,"y":0.145},{"x":0.328,"y":0.096},{"x":0.096,"y":0.554}],"type":"polygon"}]"	
```
The x and y values are numbers from 0 to 1. Length and width of the image are taken as 1, with the center of coordinates in the lower-left corner of the image.

Keyboard shortcuts

By default, you can use the following keyboard shortcuts in the task:

C closes a polygon connecting the first and last points with a line.
D deletes the selected point, selected object or last point when creating the polygon.
Arrows move the selected point. With Alt pressed, they move it slower. With Alt+Shift pressed, they move it faster.
Tab moves from the selected point to the next one.
Shift+Tab moves from the selected point to the previous one.

Tell performers about keyboard shortcuts in the instructions to speed up the task completion.

Selection tools

By default, rectangle tool is added to the task interface.

You can change the tools set:

To add a rectangle, delete the CSS selector:

.image-annotation-editor__shape-rectangle {
  display: none;
}

To hide a polygon, add the CSS selector:

.image-annotation-editor__shape-polygon {
  display: none;
}

To hide a rectangle, add the CSS selector:

.image-annotation-editor__shape-rectangle {
  display: none;
}

Annotation

To let the performer enter annotation for the selected area, add an interface element to the task (for example, radio buttons, checkboxes or an input field):

Get the editor object getEditor() and annotation interface getField('result') in the onRender() method:
```
var field = this.getField('result');     
var editor = field.getEditor();
```
Implement the annotation interface in these methods:
- createInterfaceElement() — Calls the interface DOM element (the method is called once during the initialization of the object).
- onShow(shape, options) — Displays the annotation interface element when the performer points the mouse at the selected area. Accepts JSON with polygon point coordinates. This JSON can be also used to save annotation entered by the performer.
Code example for an editor with a text input field:
```
editor.annotationInterface = field.createAnnotationInterface({
    createInterfaceElement: function() {
        this._input = document.createElement('input');
        this._input.addEventListener('input', function() {
            this._shape.annotation = this._input.value;
        }.bind(this));
        return this._input;
    },
    onShow: function(shape) {
        this._shape = shape;
        this._input.value = shape.annotation;
    }
});
```

The following events occur when the performer interacts with the editor:

shape:start — Start of the area selection.
shape:finish — End of the area selection.
shape:cancel — Removal of a polygon point.
shape:remove — Removal of area selection.

To subscribe to these events:

editor.on('shape:start', function() {     /* event handling */ });