Image Annotation Control

The Image Annotation control is not a display control and is not shown at runtime on the form. Rather, when using the form you'll click a button or take some other action to insert a photo, and then the image can be annotated on an iOS device. At design time you see a visual representation of the control that you can configure.

Follow the steps below to configure a scenario where the Image Annotation control is used.

1. Create an Expense SmartObject to act as a database containing expense claim information and their associated annotated images.
   
2. Auto-generate an Item view and form from the SmartObject.
3. Edit the Item view and drag the Image Annotation control onto the canvas. The control can be found in the Input section of the Controls found in the View Designer.
   
4. Add and configure the following controls:
   • a Button called Add Image
   • a Label called Image Size
   • a Data Label called SizeDataLabel
   • a Label called Image
   • a Data Label called ImageDataLabel (Select the Literal property of this control)
   
5. Navigate to the rules and add the following rule:
   
6. Configure the condition as follows. If the device is not supported, a message is displayed to the user.
   
7. Configure the message as follows:
   
8. Finish the rule and add the next rule:
   
9. Configure the condition as follows. If the device is supported, the rule continues.
   
10. No configuration is required for the Take Picture method.
11. Save the rule and add the last rule:
    
12. Configure the SizeDataLabel control as follows:
    
13. Configure the ImageDataLabel control as follows:
    
14. Save the rules and the view.
15. Check in the view.
16. Edit the form and continue to the Layout page.
17. Click on the white space on the bottom of the canvas to access the form properties, then expand the Advanced section of the Properties and select the Application Form property in order for the form to show up on the Forms menu in K2 Mobile.
    
18. Finish the form, then save the form to the K2 Mobile App location:
    System>Application Forms
    
19. Open K2 Mobile on an iOS device.
20. Access the Forms menu.
21. Open the Expense form.
22. Capture information in the form.
    
23. Click Add Image. Note the option to take a photo or use an existing photo from the library.
    
24. Select Take Photo.
25. Take a photo of the object and click Use Photo.
26. Make a mark on the photo such as a signature or any other annotation.
27. Click Done.
28. You return to the form with the annotated image displayed. You can alternatively save the data of the annotated image to a SmartObject for later use.
    

• The Image Annotation control is only available for use with the K2 Mobile iOS app
• The Image Annotation control is not a display control
• Rule events and actions must be configured to execute the control
• Image data is saved as base64 string
• Image controls don't support base64 strings
• Picture controls don't support base64 strings

The following events and methods are available on the Image Annotation control.
Rule events:

• When the [control] is Annotated - A rule condition or action can be executed when the control is annotated
• When the [control] is Annotating - A rule condition or action can be executed when the control is annotating
• When the [control] is Changed - A rule condition or action can be executed when the control is changed, for example selecting an item or transferring a value to the control
• When the [control] is Error - A rule condition or action can be executed when the control is in error
• When the [control] is Initialized - A rule condition or action can be executed when the control is initialized
• When the [control] is Not Supported - A rule condition or action can be executed when the control is not supported, for example showing a message to the user

Image Annotation control method:

• Take Picture method - Takes a picture or uses an existing image
  

The Image Annotation control interacts with other controls through rules. Following are examples of actions where the control surfaces:

• Set a control’s properties- The control's settable properties can be configured using this action
• Data Transfer - Data can be transferred from items listed in the Context Browser to the control
• Execute a control's method: The control's method can be configured using this action

The Image Annotation control is available in the Input section of the Controls found in the View Designer.