Signature Widget Image Changing without user input

[eprager412]

Describe the bug
The signature is provided and saved. When viewed a second time the image is zoomed in.

To Reproduce
Steps to reproduce:

1. Open for in mode /single/full/participant/ on a phone device.
   simplesignature.txt

2. Put sketch a value, or add a ,png in the '####Signature" item

3. Click the Subit button on the fomr

4. Open the record created from above in mode /edit/fs/dn/c/i/ . Open on a desktop/laptop device.

5. View the signature item on the screen and/or download the signature item file

Expected behavior
The saved png looks the same as the view seen when initial signature was provided.

Actual Behavior:
The image will be zoomed in closer than the original value shown when you sketched in step one. Most of the original canvas area will be missing.

Screenshots
Note the signature shown in the screenshots was a full name on the phone (not shown here) and now is a zoomed in version of the left hand corner of the original.

Browser and OS (please complete the following information):

• Browser:chrome

[MartijnR]

I'm assuming this is an enketo-core bug.

• send calendar invite to Krikor
• check if image gets submitted correctly in enketo-express-oc - yes
• check if image gets loaded correctly in enketo-express-oc - yes
• once reproduced, check if it also occurs with the OC theme
• is original submission correct (or zoomed in)? - cut off, see below

[MartijnR]

empty form: http://localhost:8005/single/full/participant/7e1bda1d8c268cb4426c3a4ace63a621?ecid=1

curl --user enketorules: -d \
    "server_url=http://localhost:3000&form_id=simplesignature&ecid=1&instance_id=a&instance=\
    <data xmlns:OpenClinica=\"http://openclinica.com/odm\" xmlns:enk=\"http://enketo.org/xforms\" xmlns:jr=\"http://openrosa.org/javarosa\" xmlns:oc=\"http://openclinica.org/xforms\" xmlns:orx=\"http://openrosa.org/xforms\" id=\"simplesignature\" version=\"BTest2\">\
    <group_zt8fu31_002>\
        <Patient_Signature_002_001>signature-14_12_44.png</Patient_Signature_002_001>\
    </group_zt8fu31_002>\
    <group_ar1jd35>\
        <note/>\
    </group_ar1jd35>\
    <meta>\
        <instanceID>uuid:376611b3-1506-4c11-b21a-3a246f6574f2</instanceID>\
    </meta>\
    </data>\
    &instance_attachments[signature-14_12_44.png]=http://localhost:3000/form/simplesignature/media/signature-14_12_44.png" \
http://localhost:8005/oc/api/v1/instance/edit/c

[MartijnR]

Cannot reproduce. Next step would be to check on the OC side if the first submitted image is stored unchanged (downloading the file directly, not within Enketo).

• retry on phone

[MartijnR]

I also couldn't reproduce this when creating the first signature file on a mobile phone (and then edited on a desktop), so back to y'all, to perhaps:

• check what is stored on the OC side as discussed @kkrumlian
• post an actual signature image file here that you can reproduce the issue with

[pbowen-oc]

@MartijnR - I tested this on my iPhone (14 Pro iOS 17.2.1) in Safari. It looks like the original image is being cropped when it is originally saved.
As originally drawn on the canvas:

After exiting edit in the canvas:

As saved on our server before reopening the form (cropped to top left):

Reopening on laptop form shows cropped image:

I reproduced this multiple times on my phone. Note that I was accessing the form in portrait orientation and using view /single/full/participant/.

[pbowen-oc]

@martijn - Note that I followed up on the above and opened the form in our more typical /single/fs/c/i/ view from my iPhone. The responsiveness is completely different and the form is much harder to use (perhaps because the page that the form was opened from was not responsive?), but I did not see the issue occur.

Drawing on canvas:

After leaving canvas edit:

File saved on our server (note that multiple incremental updates were saved prior to this):

[pbowen-oc]

In the first case (with the cropping), the raw file saved is 963 x 432. In the second case (no issue), the raw file saved is 2748 x 1236.

[MartijnR]

Thanks! Looks like this issue may not occur in fieldsubmission views which extract and submit an image as soon as its created (submission per field).

The Participate views wait until the whole form is complete and then submit everything in one submission.

If that's the case, it makes it sounds very much like some other issues that occur if the form is in Pages mode and the signature field is not on the last page. If that's the case you would not be able to reproduce it when removing the 'pages' style in the form definition.

• I'll quickly try to reproduce and test this theory. - Yes, I can reproduce and it is related to pages mode and when the field is not on the last page. It can be reproduced on a desktop as well by making the window small enough (or simulating mobile in devtools).
• try to reproduce with enketo/enketo
• file bug report for enketo/enketo: new drawing on low-resolution screen is cut off in submission (pages mode, non-last page) enketo/enketo#1291
• wait or fix in enketo/enketo
• wait for enketo-core release with fix
• try to merge/update in this repo

[kkrumlian]

@MartijnR which version do we need to go back to: https://github.com/enketo/enketo-core/commits/master/src/widget/draw ?

• ResizableSignaturePad.js is this the actual file that's impacting our functionality?

[MartijnR]

This one: enketo/enketo-core@561d832 (December 14th, 2022)

That file was introduced in a later commit, so it shouldn't exist in the older version. Best to copy all the files in the widget folder.

You may have to revert a depency (or several) in package.json as well, in particular signaturepad.