Image with area selection

If you have images with selected objects and you want to upload them to the task:

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

2. Include the {{field type="image-annotation" name="<output field name>" src=<image URL> annotations=<input field name>}} component in the interface HTML code. Example:

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

3. Add the following in the input data:

   • A field for entering an image link.
   • The polygon field with the json type to pass the coordinates of the selected area.

4. Add the result field with the json type in the output data. A field for recording results is required for this component. If the performer edits the selected area, the updated coordinates are recorded there.
5. Escape JSON with point coordinates and add it to the TSV file with tasks.

var listOption =
[["Animals","Cat","Dog","Bird"]];
var listValues =
[
["-","Cat","Dog","Bird"]
];
var bigListValues = [];
for(var i=0;i<listValues.length;i++){
    for (var j=0;jlistValues[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() {
    // Task is completed. Global resources can be released (if used)
  }
});

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;
}
Copied to clipboard