The minimal Demo
The minimal demo |
---|
![]() |
Check the following link to review the minimal demo.
This demo provides the following features:
- A basic
DashPictureAnnotation
allowing- Creating, modify, or removing annotation boxes by dragging and dropping.
- Modify the annotation label by an input box.
- Every time the annotation data is changed, the changed results will be reflected by the text below the annotator window.
- The annotator is already initialized by an annotation box. By default (if the page is refreshed), the annotation data will be reloaded by the initial data.
Define the layout
The core part of the layout is defined as follows:
dpa.DashPictureAnnotation(
id="annotator",
style={"height": "80vh"},
data=default_data,
image="/assets/test_image.svg",
options=None,
clearable_dropdown=True,
)
where the image is provided by the static assets. The default data is hard coded in
the script. Since options=None
, the selector (the dropdown menu) is not enabled.
Define the callbacks
The definition of the callback is pretty simple. It only catches the change of the
annotation data, and forward the data as an serialized JSON string to the
<div id="output">
tag.
@app.callback(
Output("output", "children"), Input("annotator", "data"), prevent_initial_call=False
)
def get_annotation(data) -> Optional[str]:
if data is None:
return None
return json.dumps(data)
This callback is configured to be fired when the application is initialized (see the
option prevent_initial_call
).