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.
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:
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 |
hint | string | Hint text. |
image * | string | The image you want to select areas in. |
labels | array | 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 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 |
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 |
minWidth | number | Minimum width of the element in pixels. Takes priority over |
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 |
ratio[] | number | Relative size of one side. |
shapes | object | 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 |
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:
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 |
hint | string | Hint text. |
image * | string | The image you want to select areas in. |
labels | array | 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 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 |
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 |
minWidth | number | Minimum width of the element in pixels. Takes priority over |
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 |
ratio[] | number | Relative size of one side. |
shapes | object | 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 |
shapes.point | boolean | – |
shapes.polygon | boolean | – |
shapes.rectangle | boolean | – |
validation | condition | Validation based on condition. |