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


Name	Type	Description
`type`*	"field.image-annotation"	Set component type
`data`*	writable	Data with values that will be processed or changed.
`label`	string	Label above the component.
`disabled`	boolean	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.
`fullHeight`	boolean	If `true`, the element takes up all the vertical free space. The element is set to a minimum height of 400 pixels.
`hint`	string	Hint text.
`image`*	string	The image you want to select areas in.
`labels`	array	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.
`minWidth`	number	Minimum width of the element in pixels. Takes priority over `maxWidth`.
`ratio`	array	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.
`shapes`	object	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.point`	boolean	–
`shapes.polygon`	boolean	–
`shapes.rectangle`	boolean	–
`validation`	condition	Validation based on condition.


Name	Type	Description
`type`*	"field.image-annotation"	Set component type
`data`*	writable	Data with values that will be processed or changed.
`label`	string	Label above the component.
`disabled`	boolean	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.
`fullHeight`	boolean	If `true`, the element takes up all the vertical free space. The element is set to a minimum height of 400 pixels.
`hint`	string	Hint text.
`image`*	string	The image you want to select areas in.
`labels`	array	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.
`minWidth`	number	Minimum width of the element in pixels. Takes priority over `maxWidth`.
`ratio`	array	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.
`shapes`	object	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.point`	boolean	–
`shapes.polygon`	boolean	–
`shapes.rectangle`	boolean	–
`validation`	condition	Validation based on condition.