Drawn signature HTML Field

Frappe Framework Customization
1

Hi,

we want to add a custom HTML field to get a drawn signature. We found Thomas J Bradley’s signature pad, it has 2 dependencies: json2.js and FlashCanvas. Is this a recommended way to go with ERPNext or are there better solutions?

More info here:
http://thomasjbradley.ca/lab/signature-pad/#require-drawn

Demo here:
http://thomasjbradley.ca/lab/signature-pad/require-drawn/

Thanks!

1 Like
2

Looks interesting do share your results.

3

This could be a great addition to ERP field types. Any plan to implement this @rmehta?
How was your implementation @info?

4

Have implemented something similar but for mobile app using GitHub - szimek/signature_pad: HTML5 canvas based smooth signature drawing.

1 Like
5

Unfortunately we did not have time to dig in this, but is a recurrent requisite for our customers.

@rmehta we would be interested in sponsor this feature. The idea would be to allow a custom HTML field with an editable signature pad and that is being saved as image/data as any other field of the document. We would use it mainly in Delivery notes, but probably could be implemented so that may be inserted in any DocType.

6

@info can you post on GitHub. Also will be great if you can get this done via a freelancer (upwork.com ?). Currently running a very packed schedule.

7

Hi, thank you for your answer, we posted it to Github. We would prefer to wait and until you can evaluate it, as you know the best how this can work within erpnext/frappe environment.
https://github.com/frappe/erpnext/issues/4410

8

HI, would be someone in the community interested in implementing and pulling this feature to ERPNext?

Thanks!

1 Like
9

Hi there, this doesn’t look complicated. I kinda hacked just a custom field using jSignature to do this.
If we want to integrate this as a Field Type, I would need some pointer on the Frappe code base to add a field type and handling it the proper way. @rmehta

Also, we need to know the expected behavior before developing such as:

  • Include 1 div for drawing and 2 buttons (reset and save)
  • Include an image field to show the result ?
  • Should it open a pop up instead of drawing directly to Detail view

The flow will probably be:

  • Only show the Div and 2 buttons when docstatus is not submitted
  • Once Save Btn clicked, export the drawing to base64 image and upload the file to server (frappe.upload._upload_file)
  • Got back the url and assign to Image field ?

Currently this is what i have: video. Although it works in this but when it goes to 1 column view (mobile size), there is a weird problem which i think gotta do with Pop up …

using simple scripts (though a bit hacky):

cur_frm.cscript.custom_refresh = function(doc, dt, dn) {
    var $pad = cur_frm.fields_dict['signature'].$wrapper
    $pad.html('');
    $pad.jSignature({height:300, width: "100%"});
}

cur_frm.cscript.custom_save = function(doc, dt, dn) {
    var $pad = cur_frm.fields_dict['signature'].$wrapper
    console.log('Save image, base 64: ', $pad.jSignature("getData"));
    frappe.upload.upload_to_server({}, {
        'from_form': 1,
        'doctype': dt,
        'docname': dn,
        'filename': 'signature.jpg',
        'filedata': $pad.jSignature("getData")
    }, {
        callback: function(msg) {
            console.log("Upload complete 333", msg);
            cur_frm.set_value("signature_image", msg.file_url);
        }
    });
}
5 Likes
10

It doesn’t work for me. Had u just add this custom script ?

11

Hi@nathan_dole

Since we would store a signature which is very sesitive I think best practice would be to store it in DB rather then attachments and render it when doc is called in desk print or for pdf…

12

Oh you gotta put the file jSignature.min.js from the library into custom_scripts folder. And include it in hooks.py, something along the line of:

doctype_js = {
    "ToDo": ["custom_scripts/jSignature.min.js", "custom_scripts/test.js"],
}

But don’t use it like this in production, it’s a hack not a very good practice. Not sure if the ERPNext team want to have this feature as a different type of built-in field. That’s better than I need to create a custom app just for this.

Yeah i agree on this. It was merely a hack, but from base64 data received for the image we can easily encrypt and store in DB. That should not be an issue. Anw, that’s why i think it’s important to know what do we expect:

13

@nathan_dole I think that it should be built in. It can be a custom field to add to the forms if someone needs it. Also how would we make sure that the signature is valid. We would need some kind of cert for that

14

@nathan_dole @woakes070048 happy to accept a pull request!

15

@woakes070048

also since a stored Signature could virtually be used over and over again I think it is crutial to tie the signature to the document signed…
one could put a watermark behind the signature stating date, document name and clear name of the sighnee and then convert it to base64 others then that one could privide either a photo of the sighnees passport or face along with the signature, a photgraph of the face taken by a smartphone with appropriate exif data e.g. GPS location and time would provide further evidence to prove who sighned what where and when.
I think These measures are more of a verification compared to 3rd party certificates as that only certifies that someone gave a signature

16

@spa this is the only want to make a signature legal in the us and the uk is signing them with PKI’s I believe. Here is a great doc for anyone that wants to look at it.
Redirect Notice

17

Hi @woakes070048,

maybe I got mixed up here but I think the paper and this threat are talking different things…
Your paper explains a digital “signature” used to “sign” documents digitally by encrypting them with a third party given public key.
We are talking about a drawn signature e.g. UPS wants for delivering a parcel - I mean how would you provide your digital private key to the delivery drivers device to sign a delivery on the doorstep in order to “sign” your signature?
Well you shouldnt as then your private key is exposed so you can only digitally sign via one of your devices.
that would be impractical for e.g. deliveries.

18

@spa I never read anything about UPS deliveries above. My use case would be for contracts, internal documents that must be signed for compliance issues, etc. That is what i would be looking for. Now if all you are looking for a signature I don’t think that using the above method would poses any issues. I would have a time stamp in the signature if it was me though.

19

@woakes070048

well I agree with the general need of a digital signature function achived by PKI that complies with standarts but that would be a separate feature.
The Delivery example was only to explain a possible usecase for a drawn signature captured in the field - not the initial problem to be solved
also I hope that everyone is aware of the fact that a million dollar contract should NOT be verified by such drawn signature stored as an image but of course an encryption technique á la PKI.

however as stated before I think the request for a digital signature is valid and maybe a different thread for that should be opened

20

@nathan_dole

did you start to implement this already ? can I help somehow?