Редактор для выделения области на картинке

Редактор дает возможность выделить область на картинке либо прямоугольником, либо произвольным многоугольником:

Примечание. Не добавляйте обучающие и контрольные задания в проект с редактором для выделения области на картинке.

Добавление редактора

Если вам нужно добавить редактор для картинки без выделенных объектов:

Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).
Включите в HTML-код интерфейса компонент {{field type="image-annotation" name="<название выходного поля>" src=<URL изображения>}}. Например:
```
{{field type="image-annotation" name="result" src=image}}
```
Полный список параметров см. в таблице.
Добавьте поля:
- с типом ссылка (если вы храните картинке на внешнем сервисе) или строка (если храните картинки на Яндекс.Диске) в входные данные;
- с типом json в выходные данные.

В выходные данные записывается объект JSON c координатами точек. Например:

[{"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"}]

Значения x и y — числа от 0 до 1. Длина и ширина изображения принимаются за 1, начало координат находится в левом нижнем углу картинки.

Если у вас есть картинки с выделенными объектами и вы хотите загрузить их в задание:

Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).
Включите в HTML-код интерфейса компонент {{field type="image-annotation" name="<название выходного поля>" src=<URL изображения> annotations=<название входного поля>}}. Например:
```
{{field type="image-annotation" name="result" src=image annotations=polygon}}
```
Добавьте поля:
- с типом ссылка (если вы храните картинке на внешнем сервисе) или строка (если храните картинки на Яндекс.Диске) в входные данные;
- с типом json в входные данные.
- с типом json в выходные данные.
Экранируйте JSON c координатами точек и добавьте в TSV-файл с заданиями.

Параметры


Параметр	Описание	Обязательный	Значение по умолчанию
`type`	Тип поля: `image-annotation` — редактор для выделения области на картинке.	да	нет
`name`	Атрибут для поля выходных данных. Содержит имя поля выходных данных.	да	нет
`src`	URL изображения. Варианты значений: URL из входных данных задания. Например, из поля с идентификатором `url`: `src=image`. Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: `src="https://mywebsite.ru/img1.png"`. Относительная ссылка. Если вы используйте файлы на Яндекс.Диске, укажите компонент `proxy` и название поля входных данных. Например, для поля с названием `image` запишите `src=(proxy image)`. Измените тип поля на строку.	да	нет
`annotations`	Атрибут для поля входных данных. Содержит название поля входных данных. Сюда можно передавать координаты разметки для последующего редактирования. Формат данных — объект JSON.	нет	нет


Параметр	Описание	Обязательный	Значение по умолчанию
`type`	Тип поля: `image-annotation` — редактор для выделения области на картинке.	да	нет
`name`	Атрибут для поля выходных данных. Содержит имя поля выходных данных.	да	нет
`src`	URL изображения. Варианты значений: URL из входных данных задания. Например, из поля с идентификатором `url`: `src=image`. Прямая ссылка. Рекомендуется использовать протокол HTTPS. Например: `src="https://mywebsite.ru/img1.png"`. Относительная ссылка. Если вы используйте файлы на Яндекс.Диске, укажите компонент `proxy` и название поля входных данных. Например, для поля с названием `image` запишите `src=(proxy image)`. Измените тип поля на строку.	да	нет
`annotations`	Атрибут для поля входных данных. Содержит название поля входных данных. Сюда можно передавать координаты разметки для последующего редактирования. Формат данных — объект JSON.	нет	нет

Горячие клавиши

По умолчанию в задании будут работать горячие клавиши:

С закрывает многоугольник — соединяет линией первую и последнюю точки.
D удаляет выделенную точку, выделенный объект или последнюю точку при создании многоугольника.
Стрелки перемещают выделенную точку. При нажатой клавише Alt — медленнее. При нажатых клавишах Alt+Shift — быстрее.
Tab — переход от выделенной точки к следующей.
Shift+Tab — переход от выделенной точки к предыдущей.

Расскажите исполнителям о горячих клавишах в инструкции, чтобы ускорить выполнение задания.

Инструменты для выделения

По умолчанию в интерфейс задания будет добавлен один инструмент редактора — многоугольник.

Вы можете изменить набор инструментов:

Чтобы добавить прямоугольник, удалите CSS-селектор:

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

Чтобы скрыть многоугольник, добавьте CSS-селектор:

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

Чтобы скрыть прямоугольник, добавьте CSS-селектор:

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

Аннотация

Чтобы исполнитель мог ввести аннотацию к выделенной области или выбрать ее из списка, в задание нужно добавить элемент интерфейса (например, текстовое поле, выпадающий список):

Получите объект редактора getEditor() и интерфейса для аннотаций getField('result') в методе onRender():
```
var field = this.getField('result');     
var editor = field.getEditor();
```

Установите реализацию интерфейса для аннотаций в методах:

createInterfaceElement() — вызывает DOM-элемент интерфейса (вызывается один раз при инициализации).
onShow(shape, options) — отображает интерфейс для аннотаций, когда исполнитель наводит мышку на выделенную область. Получает на вход JSON с координатами точек многоугольника. В этот JSON можно записать аннотацию, которую ввел исполнитель.

Пример кода редактора с аннотацией:

exports.Task = extend(TolokaHandlebarsTask, function (options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        var field = this.getField('result');     
        var editor = field.getEditor();
        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;
            }
        });
   }

var listOption = 
[["Животные","Кошка","Собака","Птичка"]];
var listValues = 
[
["-","Cat","Dog","Bird"]
];
var bigListValues = [];
for(var i=0;i<listValues.length;i++){
    for (var j=0;j<listValues[i].length;j++){
        if(j != 0){
            bigListValues[bigListValues.length] = listValues[i][j];
        }
    }
}

exports.Task = extend(TolokaHandlebarsTask, function (options) {
    TolokaHandlebarsTask.call(this, options);
}, {
    onRender: function() {
        var field = this.getField('result');     
        var editor = field.getEditor();
        editor.annotationInterface = field.createAnnotationInterface({
            createInterfaceElement: function() {
                this._select = document.createElement('select');
                for(var j=0;j<listOption.length;j++){
                    var listGroup = listOption[j];
                    var valuesGroup = listValues[j];
                    var optgroup = document.createElement("optgroup");
                    optgroup.setAttribute('label', listGroup[0]);
                    for (var i = 1; i < listGroup.length; i++) {
                        var option = document.createElement("option");
                        if (i == 0) {
                            option.setAttribute('disabled', 'disabled');
                        }
                        option.value = valuesGroup[i];
                        option.className = "seletOpt";
                        var oText = document.createTextNode(listGroup[i]);
                        option.appendChild(oText);
                        optgroup.appendChild(option);
                    }
                    this._select.appendChild(optgroup);
                }
                this._select.addEventListener('change', function() {
                    this._shape.annotation = this._select.value;
                    _.each(bigListValues, function(value) {
                        this._polygonEl.classList.remove(value.toLowerCase());
                    }.bind(this));
                    this._polygonEl.classList.add(this._select.value.toLowerCase());
                }.bind(this));
                return this._select;
            },
            onShow: function(shape, el) {
                console.log("shape: ", shape)
                console.log("el: ", el)  
                this._shape = shape;
                this._select.value = shape.annotation;
                this._polygonEl = el;
            }
        });
   }

Взаимодействие исполнителя с редактором вызывает следующие события:

shape:start — начало выделения области.
shape:finish — завершение выделения.
shape:cancel — удаление точки.
shape:remove — удаление выделения.

Подписаться на эти события можно так:

editor.on('shape:start', function() { 
    /* обработка события */ 
});