field.image-annotation

Adds an interface for selecting areas in images.

If you need to select different types of objects, classify the areas using the labels property.

You can select areas using points, polygons, and rectangles. In the shapes property, you can keep some of the selection modes and hide the rest.

View example in 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

Used to classify areas.

You can add several area types. When adding an area type, a button to select it appears in the interface, and when setting a new value, a new area selection color is added.

This feature is instrumental if you need to select different types of objects: you can use one color to select cars and a different one for pedestrians.

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 button for selecting a selection color.

labels[].value*string

The value to be written to the labels property data. Displayed to users as color options when selecting areas.

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

Used to add and hide selection modes: points, polygons, and rectangles. All three modes are available by default.

Use this property if you only need to keep certain modes. Modes with the true value are available.

shapes.pointboolean

shapes.polygonboolean

shapes.rectangleboolean

validationcondition

Validation based on condition.