Introduction

Dash Picture Annotation is a Dash component library.

Dash porting version of the React project React Picture Annotation. Provide a simple annotation window for a single picture.

The following two figures compare the demos of the original React version and the ported Dash version. Since this project is just a dash component wrapper on the original React component, the performance is the same.

React Picture Annotation	Dash Picture Annotation

Compared to the original project, this project has the following special features that the original React project does not support:

Responsive sizing: The width of the annotator can be automatically adjusted according to the parent web element.
Different modes: When selecting an annotation, the modifier can be configured as an input box or a dropdown menu box.
Data sanitized: The data is simply sanitized. Even if a not standardized data is passed to the annotator, it still works.
Anti-mistakes: A threshold of the annotation size can be configured to prevent users create a tiny annotation item by mistake.
Disabled: A flag can be configured to make the annotator disabled.
Specified colors: A special color can be configured for an annotator with a specific comment. Different comments can have different colors.
Dynamic colors: Without specifying colors manually, a flag can enable the colors to be automatically calculated based on the hash code of the annotation comments.

A video demo of Dash Picture Annotation

Preview a quick video demo here:

Usage

The following signature shows the basic usage of this component.

import dash_picture_annotation as dpa

dpa.DashPictureAnnotation(
    id="annotator",
    style={"height": "80vh"},
    data=default_data,  # Can be `None`
    image="/assets/test_image.svg",  # Can be `None`
    options=None,
)

where the data is typed by dpa.Annotations. It should be formatted like this:

{
  "timestamp": 0,
  "data": [
    {
      "id": "N5fewQ",
      "mark": {
        "x": -224.45,
        "y": 62.76,
        "width": 125.53,
        "height": 125.53,
        "type": "RECT"
      },
      "comment": "has-a-type"
    },
    {
      "id": "ibJMdK",
      "mark": {
        "x": -36.15,
        "y": 62.76,
        "width": 125.53,
        "height": 125.53,
        "type": "RECT"
      }
    },
    {
      "id": "...",
      "...": "..."
    }
  ]
}