field.image-annotation

Component for image labeling.

The interface lets you select areas using points, rectangles, and polygons. You can use the shapes property to configure labeling modes that are available to the user.

If you need to categorize selected items, create labels for each category using the labels property.

You can disable labeling using the disabled property. For example, use this if you need to create a task to check labeled images, or if you want to allow labeling only after a certain condition has been met.

See example in the sandbox.

Component properties

NameTypeDescription
type*"field.image-annotation"

Set component type

data*writable

Data with values that will be processed or changed.

labelstring

Label above the component.

disabledboolean

Determines whether adding and deleting areas is allowed:

  • false (default) — Allowed.
  • true — Not allowed.

You can use this feature when creating an interface to check whether the selection is correct, or if you need to allow selection only when a certain condition is met.

fullHeightboolean

If true, the element takes up all the vertical free space. The element is set to a minimum height of 400 pixels.

hintstring

Hint text.

image*string

The image you want to select areas in.

labelsarray

Labels for classifying areas.

Each array element creates a button in the interface for selecting a label.

If you use labels, you need to add at least two.

labels[]object

labels array area:

  • "label": "button text";
  • "value": "value".

At least two objects must be added to the array.

labels[].label*string

Text on the label selection button.

labels[].value*string

A value that corresponds to the label and is sent in the output.

minWidthnumber

Minimum width of the element in pixels. Takes priority over maxWidth.

ratioarray

An array of two numbers that sets the relative dimensions of the sides: width (first number) to height (second number).

Not valid if "fullHeight": true.

ratio[]number

Relative size of one side.

shapesobject

Setting up labeling modes that are available to the user.

By default, all three selection modes are available: points, rectangles, and polygons.

Modes with the true value are available to the user.

shapes.pointboolean

shapes.polygonboolean

shapes.rectangleboolean

validationcondition

Validation based on condition.