Page 4 of 7

How to implement canvas based signature (using signature_pad javascript)?

Posted: Sun Jan 04, 2015 10:16 pm
by Yurii Orishchuk

Hi Wilson,

Please describe what you have tried, and what is not work.

Did you been able:

  1. Get worked sign functionality?

  2. Get correct base64 string of your sign?

    Also if you can not answer previous question please debug your app.
    Here is link about how to do it: http://devcenter.appery.io/documentat...

    Regards.


How to implement canvas based signature (using signature_pad javascript)?

Posted: Sun Jan 04, 2015 11:16 pm
by Wilson W

Hello Yurii yes we have the sign funtionality working

and even the correct base 64 string

seems I have the wrong code to save base64 string to database am using

Code: Select all

}; 

 // Returns approximated length. 
 Bezier.prototype.length = function () { 
     var steps = 10, 
         length = 0, 
         i, t, cx, cy, px, py, xdiff, ydiff; 

     for (i = 0; i  0) { 
             xdiff = cx - px; 
             ydiff = cy - py; 
             length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); 
         } 
         px = cx; 
         py = cy; 
     } 
     return length; 
 }; 

 Bezier.prototype._point = function (t, start, c1, c2, end) { 
     return          start * (1.0 - t) * (1.0 - t)  * (1.0 - t) 
            + 3.0 *  c1    * (1.0 - t) * (1.0 - t)  * t 
            + 3.0 *  c2    * (1.0 - t) * t          * t 
            +        end   * t         * t          * t; 
 }; 

 return SignaturePad; 

})(document);

var canvas = jQuery("signature_pad");

var c = canvas[0];

var ctx = c.getContext("2d");

//Get base64String.

var base64String = c.toDataURL();

console.log("base64String = " + base64String);

//here you can use this "base64String" value to store in DB.
Apperyio("signature_string").val(base64String);

console.log('img alt="https://api.appery.io/rest/1/db/collect ... ployee_sig>" ');


How to implement canvas based signature (using signature_pad javascript)?

Posted: Mon Jan 05, 2015 4:41 am
by Yurii Orishchuk

Hi Wilson,

Please follow this solution:

  1. replace your line of code:

    pre

    //here you can use this "base64String" value to store in DB.
    Apperyio("signature_string").val(base64String);

    /pre

    With following one:

    pre

    //Store base64 to LSV.
    localStorage.setItem("signBase64", base64String)

    /pre

  2. Open your create/update service.

  3. Find request parameter where you need to save sign.

  4. Click on "JS" on this parameter. And populate it with following code:

    pre

    var signBase64 = localStorage.getItem("signBase64")
    return signBase64;

    /pre

    Also, don't forget to invoke this create/update service.

    Regards.


How to implement canvas based signature (using signature_pad javascript)?

Posted: Tue Jan 06, 2015 3:24 am
by Wilson W

Thanks Yurii

how does one invoke service without going insane tried a few options

the one below does not work...
what should I actually name this service

var signBase64 = localStorage.getItem("signBase64");

return signBase64;

success: ({success: signBase64});

servicename.invoke({success: signBase64});

Thanks much for your help


How to implement canvas based signature (using signature_pad javascript)?

Posted: Tue Jan 06, 2015 4:42 am
by Yurii Orishchuk

HI Wilson,

Here is steps to save:

  1. add create/update service to the page.

  2. open before send mapping.

  3. find request field where you want to store your base64 sign. And click JS.

  4. Populate it with following JS code:

    pre

    var signBase64 = localStorage.getItem("signBase64")
    return signBase64;

    /pre

  5. In the end of the code(where you get this base64 sign data) add following JS code:

    pre

    //Where "datasourceName" is datasource from 1st step.
    datasourceName.invoke();

    /pre

    That's all.


How to implement canvas based signature (using signature_pad javascript)?

Posted: Thu Jan 08, 2015 4:15 am
by Wilson W

Hello Yurii

Seems we agree on steps 1 - 4
but step five is not working on my but

have tried a few options and have not figured how to get this working but will keep focusing on it

unless you can easily see what am missing

here the last part of my javascript that allows users to draw a signature
all works well other then sending sig to database

*****************************************************************************************

Bezier.prototype._point = function (t, start, c1, c2, end) {
return start * (1.0 - t) * (1.0 - t) * (1.0 - t)
+ 3.0 * c1 * (1.0 - t) * (1.0 - t) * t
+ 3.0 * c2 * (1.0 - t) * t * t
+ end * t * t * t;
};

Code: Select all

 return SignaturePad; 

})(document);

var canvas = jQuery("signature_pad");

var c = canvas[0];

var ctx = c.getContext("2d");

//Get base64String.

var base64String = c.toDataURL();

console.log("base64String = " + base64String);

//Store base64 to LSV.

localStorage.setItem("signBase64", base64String);

//Where "datasourceName" is datasource from 1st step.

Signature.invoke();

console.log('https://api.appery.io/rest/1/db/colle...');

******************************************************************************************************

Thanks much


How to implement canvas based signature (using signature_pad javascript)?

Posted: Thu Jan 08, 2015 5:52 am
by Yurii Orishchuk

Hi Wilson,

My bad,

5 step is incorrect.

Here is how to invoke service datasource correctly:

pre

//Where "datasourceName" is datasource from 1st step.
datasourceName.execute();

/pre

Regards.


How to implement canvas based signature (using signature_pad javascript)?

Posted: Thu Feb 19, 2015 4:43 am
by Wilson W

hello Team

Thanks much for your awesome support seems am able to get steps 1 - 3 with great confidence
Please do me a favor and verify am getting step four and five right
here is the link to app
http://appery.io/app/mobile-frame?src...
username user002
password user/002

Thanks much
Wilson


How to implement canvas based signature (using signature_pad javascript)?

Posted: Mon Feb 23, 2015 3:03 pm
by Maryna Brodina

Hello!

Please clarify what is the exact problem you have?


How to implement canvas based signature (using signature_pad javascript)?

Posted: Wed Apr 08, 2015 12:42 pm
by ali7378248

Hi

i success to do the signature pad

but i am not able to save it to db