Field for electronic signature

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
Yilmaz
Posts: 22
Joined: 2013-01-24 16:58

Field for electronic signature

Post by Yilmaz » 2014-02-21 15:02

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

benzoD
Veteran Member
Posts: 69
Joined: 2013-01-31 21:16

Re: Field for electronic signature

Post by benzoD » 2014-02-21 22:01

This may help. You should be able to do this in the tablename_before_insert hook.

KSan
AppGini Super Hero
AppGini Super Hero
Posts: 252
Joined: 2013-01-08 20:17

Re: Field for electronic signature

Post by KSan » 2014-02-25 00:10

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!!!

Asawyer13
Posts: 4
Joined: 2016-08-28 22:40

Re: Field for electronic signature

Post by Asawyer13 » 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?

DevGiu
AppGini Super Hero
AppGini Super Hero
Posts: 151
Joined: 2016-05-27 09:08

Re: Field for electronic signature

Post by DevGiu » 2017-07-29 14:55

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
/Giuseppe
Professional Outsourcing Services

vmehta
Posts: 1
Joined: 2018-06-09 11:08

Re: Field for electronic signature

Post by vmehta » 2018-06-10 02:47

I do want to capture digital signature with the records into my table. please help me with it.

Yilmaz
Posts: 22
Joined: 2013-01-24 16:58

Re: Field for electronic signature

Post by Yilmaz » 2019-04-10 12:46

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

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 292
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Field for electronic signature

Post by jsetzer » 2019-04-11 09:08

Stand by, I will have a look today.

Kind regards,
Jan

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 292
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Field for electronic signature

Post by jsetzer » 2019-04-11 14:06

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 1144 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

Yilmaz
Posts: 22
Joined: 2013-01-24 16:58

Re: Field for electronic signature

Post by Yilmaz » 2019-05-03 07:15

Hallo Jan,

habe Dir eine PN verschickt!

Viele Grüße
Yilmaz

Post Reply