Page 1 of 1

Field for electronic signature

Posted: 2014-02-21 15:02
by Yilmaz
Dear all,

I would like to add into my database table an additional field which will allow to sign (web, ipad, iphone etc.) the signature of the user.

For that purpose I prepared a very simple website with a signature area (http://www.planetnikon.de/sign) at the very bottom. If you click on this field a little popup window apperars and you can sign with your fingers (mobile device) or your mouse (pc).

This princip is clear (HTML5 --> canvas).

My question is: How can I store this grafic as a jpg file and send it (over an hidden HTML field) to the database record in my appgini application?

Any ideas?

KR
Yilmaz

Re: Field for electronic signature

Posted: 2014-02-21 22:01
by benzoD
This may help. You should be able to do this in the tablename_before_insert hook.

Re: Field for electronic signature

Posted: 2014-02-25 00:10
by KSan
Wow! This is amazing. Great work with that signature area page. I would love to learn how you did that and the final AppGini integration when you get it to work. Amazing!!!

Re: Field for electronic signature

Posted: 2017-07-27 12:55
by Asawyer13
The URL is dead so I can't see that part.
Did anyone ever get it working in AppGini that can show someone how it was done?

Re: Field for electronic signature

Posted: 2017-07-29 14:55
by DevGiu
Asawyer13 wrote:
2017-07-27 12:55
The URL is dead so I can't see that part.
Did anyone ever get it working in AppGini that can show someone how it was done?
I don't know how it's done in this post, I had to do something similar, and used Signature Pad. On save just do an ajax request passing the signature, it's a dataurl you can convert to png from server side

Re: Field for electronic signature

Posted: 2018-06-10 02:47
by vmehta
I do want to capture digital signature with the records into my table. please help me with it.

Re: Field for electronic signature

Posted: 2019-04-10 12:46
by Yilmaz
Dear all,

Did anyone implement in the meanwhile "signature pad" library to use it within Appgini as a field for electronic signature to save it into mySQL?

Kind regards,
Yilmaz

Re: Field for electronic signature

Posted: 2019-04-11 09:08
by jsetzer
Stand by, I will have a look today.

Kind regards,
Jan

Re: Field for electronic signature

Posted: 2019-04-11 14:06
by jsetzer
It's tricky, but finally I have managed to turn AppGini text-fields into Signature Pad areas:

ezgif.com-optimize (1).gif
ezgif.com-optimize (1).gif (253.31 KiB) Viewed 7613 times

  • Create a field (datatype = Text) in your TABLENAME
  • Publish your app and ensure all fields have been rebuilt
  • Include the JavaScript library from their CDN:
    https://www.jsdelivr.com/package/npm/signature_pad
    I am using 2.3.2 which is latest stable version today.
  • In your TABLENAME_dv append a <canvas> to your $html variable
  • Create a TABLENAME-dv.js file in your hooks folder
  • I am hiding the field using .hide() function and only show the drawing-canvas
  • Find the canvas, create a SignaturePad object, pass the canvas and some options (see below)

    Code: Select all

    var elem = document.getElementById(canvas_id);
    var signaturePad = new SignaturePad(elem, {
                backgroundColor: 'rgba(255, 255, 255, 0)',
                penColor: 'rgb(0, 0, 128)',
            });
    
  • Now in your JavaScript on change of Signature Pad get the data usign .ToData() function. There is an onEnd() event which can be used for detecting every end of a stroke
  • I am converting the raw data into Json using JSON.stringify, but there are other alternatives like converting the image into a Base64 string
  • Store the json in your field:

    Code: Select all

    var field = jQuery('#' + fieldname);
    signaturePad.onEnd = function () {
      var data = this.toData();
      field.val(JSON.stringify(data));
    };
    
  • On load of your form, get the data (which comes as text from database) and convert it into json:

    Code: Select all

    var data = field.val();
    if (data) {
      data = JSON.parse(data);
    }
    
  • Pass your json object to the Signature Pad object:

    Code: Select all

    var signaturePad = new SignaturePad(elem, {
      backgroundColor: 'rgba(255, 255, 255, 0)',
      penColor: 'rgb(0, 0, 128)',
    });
    
    if (data) {
      signaturePad.fromData(data);
    }
    
    ---

    This is quite complex for non-programmers. If there is enough interest, I can continue working on a plugin library which will reduce coding to a few lines of code, only:

    Changes in hooks\TABLENAME.php:
    Init my helper class; 1st arg: columnname; 2nd arg: editable { true | false }

    Code: Select all

    function ratings_dv($selectedID, $memberInfo, &$html, &$args){
        $signature = new \AppGiniHelper\SignaturePad("signature", true);
        $html .= $signature;
    }
    
    Changes in hooks\footer-extras.php

    Code: Select all

    \AppGiniHelper\SignaturePad::finalize();
    
    ---

    ;) It's a lot of work to get this running. If you are interested in buying the code and/or in me supporting your project, please send me a PM or contact me: https://www.bizzworxx.de/en/appgini-improvements/

    Kind Regards,
    Jan

Re: Field for electronic signature

Posted: 2019-05-03 07:15
by Yilmaz
Hallo Jan,

habe Dir eine PN verschickt!

Viele Grüße
Yilmaz

Re: Field for electronic signature

Posted: 2020-05-07 08:01
by Yilmaz
Dear all,

during these crazy times of Corona and especially HomeOffice it's getting more and more important that most of company related workflows are digital.

So electronic signing of forms and approvements is a MUST HAVE! Is there any near future plan to integrate this functionaly (like https://github.com/szimek/signature_pad) in AppGini as a standard "esign field".

I had also contact last year to Jan for individual developement of this topic but it was for me as only 1 interested person to high costs. May be there are in the meanwhile some other AppGini users we can ask Jan to implement this and we all can divide the costs among us?

Kind regards,
Yilmaz

Re: Field for electronic signature

Posted: 2020-05-31 22:42
by G Scott
Hi Jan,

I've recently purchased your AppGini Helper library.
It would be great if you could incorporate adding Signature Pad objects in your library.
I think this would be useful for many people.

In the next few days, I'm going to try and add a Signature Pad object based on the help you've provided above. *Fingers Crossed*

Kind regards,
Grant

Re: Field for electronic signature

Posted: 2022-12-20 10:39
by urichard
Hi IS there any update to this topic?

I would really like to add a signature field to my tables