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

[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.

[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>" ');

[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.

[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

[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.

[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

[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.

[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

[Maryna Brodina]

Hello!

Please clarify what is the exact problem you have?

[ali7378248]

Hi

i success to do the signature pad

but i am not able to save it to db