(feat)O3-2368 Add Support for embedding (annotated)images in AMPATH Forms

[jona42-ui]

Requirements

• This PR has a title that briefly describes the work done, including the ticket number if there is a ticket.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

Feature: Diagram Embedding and Annotation

This PR adds a new feature to AMPATH Forms that enables image annotation within the forms. The feature includes the ability to embed diagrams, annotate them using an external annotation tool, and submit the annotated image as a complex observation (obs) within the form submission process.

Description

This Pull Request introduces a new feature to AMPATH Forms, allowing users to embed diagrams within forms, annotate them, and seamlessly submit annotated diagrams as complex observations (complex obs). This feature enhances the versatility and usability of AMPATH Forms for data collection processes.

Details

• Diagram Embedding Control:

  • Added a custom form control tailored for embedding diagrams.
  • Users can upload images or provide image URLs for diagram inclusion.
  • The control ensures the proper display of embedded diagrams within the form.

• Annotation User Experience (UX):

  • To Integrate a powerful frontend annotation library to enable image annotation.
  • The annotation tool is seamlessly integrated into the custom diagram embedding control.
  • Users have access to a user-friendly interface for drawing, text input, and other annotation features.
  • An "annotate" icon located near the diagram allows users to launch the annotation tool.

• Annotation Integration:

  • Clicking the "annotate" icon opens the annotation tool, preloaded with the embedded diagram.
  • Users can utilize the annotation tool to draw and add annotations to the diagram.
  • Annotations are saved within the annotation tool.

• Annotated Diagram Submission:

  • To Implement the capture and submission of annotated diagrams as complex obs within the form data.
  • Ensured that annotated diagrams are correctly associated with the relevant form submissions.

Screenshots

Related Issue

O3-2368

Other

This feature enriches AMPATH Forms with the capability to work seamlessly with diagrams, offering users a powerful tool for data collection and annotation.

[jona42-ui]

@mks-d are there any specific aspects or configurations related to Complex Obs support that I can assist with