Annotation Upgrade for Drawing Fields on iOS

This feature is available for select plans. Reach out to your Customer Success Manager or Account Manager to see if you qualify.

The Annotations upgrade provides many more tools for marking up drawing and photo fields when completing a submission. Annotations are available for drawing fields, reference images in a drawing field, and single or multiple photo fields that allow drawing on both iOS and Android. Please visit this article to learn more about using Annotations on Android.

Annotations

There are four buttons starting from the upper left corner along the top of the screen to access the different types of annotations, which include Drawing, Line, Arrow, Ellipse, Rectangle, Text, and Stamp. Press and hold the Line, Ellipse, or Text buttons to reveal menus to toggle between Line and Arrow, Ellipse and Rectangle, or Text and Stamp. Arrow is a preset for a simple one ended arrow but can be manipulated just like a Line annotation.

When an annotation is selected the Settings button will appear in the center that will be colored in to indicate the current color and opacity settings for that annotation. For example, in the first screenshot above, the Drawing annotation is selected and will have the primary color of sky blue with 100% opacity.  Next to the Settings button are the Undo and Redo buttons followed by the Exit button.

Common Settings

Each settings panel has a preview window for how the annotation will look with all the selected settings at the top followed by unique settings for each annotation. However, there are a few settings that are the same or similar across all or most of the annotations.

Color:

This setting is common across all annotations except Stamp. Select the primary color of the annotation using a color Grid, Spectrum, or Sliders. The Slider provides the option for either Display P3 Hex Color # or sRGB Hex Color #. The hex number can be typed in manually or copied and pasted to other annotations.

A color can be added to the list of preset colors by pressing the “+” sign at the very bottom of the settings panel. That color can also be removed from the list of presets by holding down on the circle until a “Delete” button is revealed. Whatever color preset was selected on the first screen of the panel will be replaced with whatever color is selected in the secondary page. 

The red forward slash means there is no fill color in the background of the annotation. The background of an annotation could be the surrounding area of the Drawing or Text annotation, the fill color for the Line Start or Line End, or the fill color for inside the Ellipse or Rectangle. The background or fill color can be added to the preset once selected and can be cleared by pressing “No Fill” in the upper right corner of the Background or Fill Color settings panel.

And if there is a specific color on the screen, like in the reference image, that you would like to use for the annotation color, the Eyedropper icon in the upper left corner of the Color settings panel reveals a pixel selector that can be dragged around the screen until the desired color is found. Simply release your finger when the color is found and it will appear in the preview square at the bottom left corner of the screen. Press the “+” icon to add that color to the presets.

Opacity: 

A slider to manipulate the percentage of transparency or opaqueness of the annotation. Available on all annotations except Stamp.

Thickness:

Thickness can be decreased to 0.1 pt all the way up to 40 pt. Available on all annotations except Text and Stamp.

Note, Copy, and Remove:

Although not exactly settings, Note, Copy, and Remove are common across all annotations. Press and hold any annotation that is in the drawing field and a small menu will pop up with these options. Notes are helpful for clarifying what an annotation means without cluttering the field with more text. Copy and Remove are self-explanatory and will do the familiar actions of copying or deleting an annotation.

Less Common Settings

Line Style:

This setting is common between the Line and Ellipse annotations. There are five options for the Line annotation and six for the Ellipse annotation that are a variation of dotted and dashed lines.

Line and Arrow Line Styles:

Ellipse and Rectangle Line Styles:

Blend Mode:

Blend modes are unique to the Drawing annotation and lets you decide how different layers of color will interact with each other and what the end result will be. One of the main use cases for this is to increase the legibility of markup annotations covering text, i.e. highlighting. Using any blend mode other than “Normal” will be called Freeform Highlight in the settings panel.

Line Start and Line End:

Line Start and Line End are unique to the Line and Arrow annotations. They are a variety of line end caps ranging from geometric shapes to arrows and perpendicular or slanted lines to provide many annotation options.

Orange Dotted Bisector:

The Ellipse and Rectangle annotations have an orange dotted line that bisects the annotation when a perfect object is drawn. This orange dotted line will appear when either a perfect circle or perfect square is drawn, with respect to the annotation that is in use. 

Text Annotation Unique Settings

• Size: Includes standard font sizes between 10 pt and 192 pt.
• Font: Eight downloaded classic fonts as well as a long list of fonts available for download.
• Alignment: Left, center, or right text.

Stamp Annotation

The Stamp Annotation is a quick way to add pre-determined, bold markups to your drawing field. There are several stamps that are already created for quick application and also the option to design your own to fit your needs that can be date and time stamped as well.

If you would like to use the existing stamps, simply press the one you want and it will automatically appear in the drawing field. You can resize the stamp by pulling one of the eight points or rotate the stamp by holding and dragging the dark blue dot underneath the stamp.

Editing Tools

The tools Note, Copy, and Remove have been mentioned previously in this article and are available on all annotations by tapping the annotation. An additional editing tool called Inspector is available for Drawing, Freeform Highlight, Line/Arrow, Ellipse/Rectangle, and Text annotations. Simply press and hold the annotation to reveal the menu with Inspector, Note*, Copy, and Remove and select Inspector. The following editing tools are only available from selecting Inspector and not on the Settings panel accessed from the function bar.

*Text annotations will have Edit instead of Note.

When the Inspector option is selected, all annotations have the option to Order the layer for the annotation. The selected annotation can be brought to the top layer, the second or third if there are more than two layers, or sent to the bottom layer. The Text annotation has the additional editing tool within Inspector called Style. Text annotation can either be a simple text box or a Callout. A Callout is a stylized text box that is outlined in a black line and has a three-point arrow extending from the text box that can be manipulated by the three dark blue dots.

Annotation Upgrade on Reference Images and Photo Fields

The Annotation upgrade applies to any field that has drawing capabilities. Annotations can be used on a drawing field that contains a reference image and annotations can be used on a single or multi photo field that has the option to “Allow drawing on photo(s)” toggled on. You can learn more about adding a reference image to a drawing field here. You can learn more about drawing on your photos here.

Saving, Editing, and Clearing the Drawing Field

Once your annotations are complete, simply click the Exit button in the upper right corner of the drawing field. You will be prompted with a pop up to Discard or Save the annotations that you added. Either option will exit the drawing field but if you press Save, the field will say “Drawing Captured” in green. You can continue filling out your form from here.

If at some point you need to edit your drawing or start over, simply click the field again. You will be shown the drawing that was saved with the option to Draw or Clear what was captured. Draw reopens the Annotations editor and Clear will take you back to the form where “Capture Drawing” will be in the field value. Click the field to reenter the Annotations editor and you may need to activate the function bar by pressing the Pencil icon in the upper right corner of the screen if the function bar is not immediately visible.