Purpose

The purpose of the Image Annotation Widget Unit Test is to allow users to learn and understand how to setup and use the Image Annotation custom widget in their Tulip applications. Custom widgets are coded widgets that sit on top of the Tulip platform to give additional functionality that is not currently part of the main platform. The Image Annotation Custom Widget can be used to capture an image, and add text/sketch annotations onto the image, and save this annotated image to a table record.

Setup

Custom Widget Plugins interact with your application through the use of properties and events. Properties are the shared data that exists between your application and widget, while events are signals that your widget can send to your application. In your app editor you can build triggers based off these events. Events can be made to send data to your application as well.

The Image Annotation Custom Widget makes use of four properties and three events. The first property being used is called 'Image URL' and is of type ImageURL and is read-only. This should be connected to the variable or table record field that you want to display as the source image. The second property being used is called 'Annotation' and is of type Text and is read-only. This property allows you to enter the text that you want to display as the Text Annotation. This can also be connected to a dynamic data source such as a variable or a table record. The third property being used is called 'Annotation Size' and is of type integer and is read-only. This allows you to set the font size of the Annotation Text. The last property being used is called 'Annotation Color' and is of type color and is read-only. This allows you to set the color for the text annotation.

The first event being used in this custom widget is called 'Annotated Image' and this event fires to return the annotated image and allows you to store the annotated image to a table record. The second event being used in this custom widget is called 'Warning' and this event fires to return a warning message, when no image or text annotation is found. The last event being used in this custom widget is called 'Annotation Text' and this event fires to store the annotation image as base64 text.

How it Works

The Image Annotation Custom Widget can be used to capture an image, and add text/sketch annotations onto the image, and save this annotated image to a table record. An example of how the Image Annotation Custom widget works can be seen in the GIF below.

Did this answer your question?