Skip to main content

Example of controlling the annotation size

Example of controlling the annotation size
Example of controlling the annotation size

Check the following link to review the demo of controlling the annotation size.

size_control.py

This demo provides the following features:

  1. A basic DashPictureAnnotation allowing
    1. Creating, modify, or removing annotation boxes by dragging and dropping.
    2. Modify the annotation label by an input box.
  2. Every time the annotation data is changed, the changed results will be reflected by the text below the annotator window.
  3. Configure a requirement of the minimal values of the annotation width and height. Creating or resizing an annotation with a width or height smaller than the given value will let the annotation removed.

Define the layout​

Compared to the minimal demo, the main change is to add a property size_minimal in the definition of the component:

dpa.DashPictureAnnotation(
    id="annotator",
    style={"height": "80vh"},
    data=None,
    image="/assets/test_image.svg",
    options=None,
    clearable_dropdown=True,
    size_minimal=20,
)

This property is motivated to control the minimal size of annotations. Sometimes, users may click the annotator by mistake, which may create an annotation box with width=0 and height=0. In this case, the created annotation is meaningless and the not selectable. Compared to letting users to sanitize the data by themselves, it is better to add such a property that specify a limitation of the minimal width and height. By adding this property, any annotation with a size smaller than the specified value will be removed.

tip

The property size_minimal can be configured by a dictionary like this:

dpa.DashPictureAnnotation(
    ...
    size_minimal={"width": 20, "height": 20},
)

which allows users to specify different limitations with respect to the width and height, respectively.