A bounded box is an infinitely customizable image annotation component that can be used to select and tag areas of an image. It supports selection using specific points (landmarking) or draw rectangular areas (bounding boxes).
The bounding box required an image to display, enter the URL of the image to display it on the component.
The bounded box support selection using:
You can also click on the Fx to set the value programmatically.
List of labels
This property will include the list of label that will be displayed in the dropdown while selection in the bounded-box. This property requires the label in array format.
To add an event to a bounded-box, click on the component handle to open its properties on the right. Go to the Events accordion and click on Add handler.
On change event is triggered when the label from the dropdown in the selector is changed in the bounded box. Just like any other event on ToolJet, you can set multiple handlers for on-change event.
Check Action Reference docs to get the detailed information about all the Actions.
A Tooltip is often used to specify extra information about something when the user hovers the mouse pointer over the widget.
Under the General accordion, you can set the value in the string format. Hovering over the component will display the string as the tooltip.
|Show on desktop||Toggle on or off to display desktop view.||You can programmatically determine the value by clicking on |
|Show on mobile||Toggle on or off to display mobile view.||You can programmatically determine the value by clicking on |
|Visibility||Toggle on or off to control the visibility of the component. You can programmatically change its value by clicking on the |
|Disable||Toggle on to disable the widget. You can programmatically change its value by clicking on the |
Any property having
Fx button next to its field can be programmatically configured.
|annotations||This variable is an array of objects, where each object represents an annotation added to an image. The object contains the following keys: type, x, y, width, height, text, and id|
|annotations.||There are two types of annotations: Rectangle and Point|
|annotations.||coordinates on x axis|
|annotations.||coordinates on y axis|
|annotations.||width of annotation|
|annotations.||height of annotation|
|annotations.||label selected for the annotation|
|annotations.||unique id of the annotation (system generated)|
The values can be accessed dynamically using
Component specific actions (CSA)
There are currently no CSA (Component-Specific Actions) implemented to regulate or control the bounding box component.