Annotation module

The Annotation module serves as the central logic unit for the creating, editing, and deleting of different type of annotations (such as arrows, lines, shapes, freehand drawing, text, and callouts) overlaid on a background image (typically a 2D view capture). Using the provided input fields, it is possible to generate annotations from UI or by providing a JSON with the necessary information, whereas the module handles the necessary logic.

The Annotation module is a singleton — only one instance may exist in a scene at a time. An attempt to create a duplicate instance will result in an error.

An annotation can be created only in Annotation mode. When entering Annotation mode, a panel showing a background texture, customized by the user through the imageBinaryValue configuration, overlays the scene. For example, in the image below, the background texture represents a 2D view capture of the screen before entering annotation mode.

Whenever the screen dimensions change while in Annotation mode, the background image and the existing annotations are rescaled accordingly. However, they can only be resized down to their default minimum size. When the background image is resized, its original aspect ratio is preserved. As a result, black bars may appear to fill the extra space, as shown in the image below, where the first image illustrates the original ratio. The original ratio is calculated whenever annotation mode is activated.

Fields

• Configuration fields

• Input fields

• Output fields

Lines, Arrow, Rect, Circle, and Shape annotations

When lines, arrows and shapes annotations are created manually, the mouse/touch down and mouse/touch up positions define the annotation’s creation area, effectively acting as the diagonal of the rectangular region. Note that, since both mouse/touch down and up information is needed for the annotation creation, the annotation is visible only after the mouse/touch up event. However, after being created it can be resized and moved. Only FreeHand annotations behave differently, since they allow you to draw a shape using mouse drag or touch. Therefore, they are visible from the mouse/touch down event.

If the user performs a simple mouse/touch click, the annotation is created using its default minimum size. The default minimum size is the maximum between the 4% of the screen’s smallest dimension and the specific annotation minimum size (see AnnotationBase).

Considering shapes, when they are created through a horizontal drag movement, the resulting width matches the horizontal drag distance, the height is set to the minimum size, and the shape is centered around the midpoint of the drag.

The image below shows how different annotations that are created based on mouse/touch down and up positions (green arrows) and drag (green dashed lines).

Text Annotations

Text annotations are always created with a predefined initial size. A simple mouse/touch click places the annotation centered on the click position. If the user drags the mouse/finger, the annotation is instead centered at the midpoint of the drag. Text annotations automatically adjust their size according to the length of the text, while scaling them with the resize handle alters the font size to fit within the available space.

Callout Annotations

Callout annotations are composed of an AnnotationArrow and AnnotationText nodes. As illustrated in the below image, the position of the arrow tail with respect to the text might change according to the drag action. The green arrows down indicates the mouse down event and the green arrows up the mouse up event.

• If the mouse is released outside the background image during annotation creation, the partially created annotation is discarded. But the defined mode is preserved, so a new annotation of the same type can still be created.

• If the mouse is released outside the background image during annotation editing, the last annotation state is restored.