Картинка с возможностью выделения областей

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

1. Подключите библиотеку $TOLOKA_ASSETS/js/image-annotation.js (нажмите в блоке Интерфейс задания на странице проекта).

2. Включите в HTML-код интерфейса компонент {{field type="image-annotation" name="<название выходного поля>" src=<URL изображения> annotations=<название входного поля>}}. Например:

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

3. Добавьте во входные данные:

   • Поле для указания ссылки на картинку. Если вы храните картинки на Яндекс.Диске, используйте тип строка, а не ссылка.
   • Поле polygon с типом json для передачи координат выделенной области.

4. В выходные данные тоже добавьте поле result с типом json. Поле для записи результатов обязательно для этого компонента. Если исполнитель поменяет выделенную область, туда будут записаны обновленные координаты.
5. Экранируйте JSON c координатами точек и добавьте в TSV-файл с заданиями.

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;
            }
        });
   },
  onDestroy: function() {
    // Задание завершено, можно освобождать (если были использованы) глобальные ресурсы
  }
});

function extend(ParentClass, constructorFunction, prototypeHash) {
  constructorFunction = constructorFunction || function () {};
  prototypeHash = prototypeHash || {};
  if (ParentClass) {
    constructorFunction.prototype = Object.create(ParentClass.prototype);
  }
  for (var i in prototypeHash) {
    constructorFunction.prototype[i] = prototypeHash[i];
  }
  return constructorFunction;
}