GSOC 2023: o3-Draw-on-body-diagram app- Project Updates & Discussion

Community
, , ,
21

Hi

PR here;

@jayasanka @heshan @dennis @ibacher @anjisvj

1 Like
22

Hi

Updated PR;

1 Like
23

Hi folks;

Get my mid term evaluation;

2 Likes
24

Made some draft of the custom-control, kindly review it;

@ibacher @achachiez @mksd @heshan @jayasanka

25

Testing some drawing and serialization to svg; PR here;

26

Looking the React Image Annotation library as the one I have pulled in the MFE, it seems not to provide drawing function, seemingly thinking about the scope between Clicking & Drawing

27

Hi I implemented conditional rendering of an image either as an activeImage from the usercontext or uploading from the users local machine;

About persisting the diagram as a complex obs, I think I can use the exposed endpoints of the attachment-module(though it would requre a functionality within forms)

conditional rendering

Any suggestions on improvement of the ui especially before choosing a file to render when no image has been fetched for a specific user context/patient

I was thinking about three workarounds to allow for its use in forms;

  1. Natively supporting the widget in the form engine(one as POC)
  2. Making it as an extension (extension slots in the form)
  3. having it invoked from the workspace tools

The question is how is the feature going to be used?

cc//@heshan @jayasanka @dennis @bistenes @bistenes, @jdick, @mksd, @dkibet, @mayanja, @eudson, @grace @samuel34 @ibacher @burke @mogoodrich @jesplana @mozzy

1 Like
28

NEXT STEP: Creating and retrieving images to and from the backend server.

This is the progress of the project

Hitting the save button to create an attachment of annotated image throws an error;

image
image720×372 131 KB

Testing the api for attachment using postman, seems to work fine hitting these;

https://demo.openmrs.org/openmrs/ws/rest/v1/attachments

{
    "uuid": "c1fccac8-89a9-4e12-b07d-e7760046655b",
    "comment": "testimage",
    "obsDatetime": "2023-08-07T17:55:10.000+0000"
}

https://demo.openmrs.org/openmrs/ws/rest/v1/attachment?patient=adc4e0fc-c1b8-49a8-adf2-a7c304d56cd7

{
    "results": [
        {
            "bytesContentFamily": "IMAGE",
            "bytesMimeType": "image/jpeg",
            "comment": "testimage",
            "dateTime": "2023-08-07T17:55:10.000+0000",
            "links": [
                {
                    "rel": "self",
                    "resourceAlias": "attachment",
                    "uri": "http://demo.openmrs.org/openmrs/ws/rest/v1/attachment/c1fccac8-89a9-4e12-b07d-e7760046655b"
                }
            ],
            "uuid": "c1fccac8-89a9-4e12-b07d-e7760046655b"
        }
    ]
}

seems i need to create a new endpoint to handle annotated image?

@ibacher

2 Likes
29

400 Bad Request while Hitting the createattachment endpoint to test upoad(before i contexuallize the app)

Screenshot from 2023-08-13 13-04-48
Screenshot from 2023-08-13 13-04-482560×717 125 KB
Screenshot from 2023-08-13 13-04-37
Screenshot from 2023-08-13 13-04-372560×717 205 KB

Frontend code

const handleSaveAnnotations = async (annotations: ImageData[]) => {
    // Serialize the annotations to SVG
    const serializedSvg = annotationsToSVG(annotations);

    try {
      const patientUuid = "736e8771-e501-4615-bfa7-570c03f4bef5"; 

      // Make an API request to save the serialized SVG using the custom createAttachment function
      await createAttachment(patientUuid, {
        file: new File([serializedSvg], "serialized.svg"),
        fileName: "serialized.svg",
        fileType: "image/svg+xml",
        fileDescription: "Serialized SVG",
        base64Content: "",
      });
      //Todo
      // Handle errors or show an succes notification to the user
    } catch (error) {
      //Todo
      // Handle errors or show an error notification to the user
    }
    //TODO
    // display the serialized SVG.
  };

backend code

The patientUuid seems well passed to the createattachement function

But the response from the server seems not understood " a patient paramater must be provided to upload attachment"

@dkayiwa @mozzy @mksd @heshan @jayasanka

1 Like
30

Today’s update

  1. The Error “must provide patient” was resolved. it turns out that I was using the demo server and the patient was not exixtent on the database.

So an attachment is able to be saved to the server thanks @Heshan Andrews for the pair program

  1. added diagram rendering and preview in the form engine

Screencast from 13-08-23 22 26 51

PR here;

NEXT STEPS;

  1. annotation button on the rendered image/diagram
  2. Integration and opening annotation tool in new tab on clicking annotate
  3. save → original image replaced with new annotated image

The Goal;

  1. embed a diagram/image with some kind of annotation button(onclick(),take the user to the drawing-widget(in new tab using a url paramater to pass info) that has the ability to annotate images).
  2. Saving the annotated image through the drawing-widget would substitute the original diagram with its annotated version.
  3. Whether the annotation button is ever used or not, the diagram is submitted as a complex obs as part of the form’s submission process.

@heshan @jayasanka

31

Screenshot from 2023-08-14 04-12-55
Screenshot from 2023-08-14 04-12-551920×1091 87.3 KB

32

Screenshot from 2023-08-13 19-29-07
Screenshot from 2023-08-13 19-29-072544×1447 261 KB

why does the form appear like this sometimes even after using the carbon components??

@dennis

33

The Annotate Button functionality;

Goal

Trigger the drawing widget with state like image path

PR here for details;

Wondering if there could be a util function within the patient-commons-lib to set or make the trigger

The silver lining here is how to effectively communicate between the from and the drawing widget i.e pass on the image picked on the form to the drawing unit and back with annotations

@heshan @samuel34 @ibacher @eudson @mksd

34

meanwhile

Hitting the save button on the darwing widget, attaches the annotated image to the patient attachmnets.

PR here;

@heshan