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

[Chiran]

I replaced it with your code but it now no longer works - image attached.

I replaced this code:
pre
var canvas = jQuery("#signature_pad")[0];
if(!canvas)
alert("Here is no #signature_pad element on the page");
else
var signaturePad = new SignaturePad(canvas);
/pre

with your one:
pre
//htmlsigpad is name of html component
var canvas = Apperyio("htmlsigpad").find("canvas");
var content = jQuery('[data-role="content"]');
var height = content.height();
var width = content.innerWidth() - 40;
console.log("height = " + height);
canvas.attr("height", height);
canvas.attr("width", width);
var canvas = jQuery("#signature_pad")[0];
if(!canvas)
alert("Here is no #signature_pad element on the page");
else
var signaturePad = new SignaturePad(canvas);
/pre

[Yurii Orishchuk]

Hi Chiran,

Please show as your app public link and describe steps to reproduce it..

We need to take a look.

Regards.

[Chiran]

This is the app public link - http://appery.io/app/mobile-frame?src...

[Yurii Orishchuk]

Chiran,

Thanks for the public link.

I see you invoke this code on "page load".

You should do it on "page show" event instead.

Regards.

[Chiran]

Thank you, Yurii, it works!

If you don't mind, could you please tell me why it works on page show and not on page load?

[Yurii Orishchuk]

Hi Chiran,

on page load you have generated and appended to the document page. But this time the page is hidden.

You can follow this solution to understand how it works:

1 Add "page load" JS event handler with following code:

pre

//Replace "Screen46_textarea" with your page name.
var page= Appery("Screen46_textarea");
console.log("pageDisplay on load = " + page.css("display"));

/pre

2 Add "page show" JS event handler with following code:

pre

//Replace "Screen46_textarea" with your page name.
var page= Appery("Screen46_textarea");
console.log("pageDisplay on show = " + page.css("display"));

/pre

When page is hidden you can not get actual width and height from any inner elements.

Thus this code not worked on "load" event.

Regards.

[Wilson W]

trying to setup a signature pad - am so lost even after following above steps- please help

[Yurii Orishchuk]

Hi Wilson,

Please follow these thread again,

And if you will have any problems - please show us screen shots of your implementation.

Regards.

[Wilson W]

Hello Team

Need help figuring out how to allow my uses to sign

Here is what I have done so far
Created a new JavaScript named signaturepad.js and pasted code from
http://szimek.github.io/signature_pad...

Then added HTML component named html_34 – set dimensions to “auto”
Edited and added html code as directed on thread

Then created a css named cs_sigpad
Added code as directed on thread

Set event for page show to run this JavaScript

var canvas = Apperyio("html_34").find("canvas");

var content = jQuery('[data-role="content"]');

var height = content.height();

var width = content.innerWidth() - 40;
console.log("height = " + height);
canvas.attr("height", height);
canvas.attr("width", width);
var canvas = jQuery("signature_pad")[0];
if(!canvas)
alert(" no signature_pad element on the page");
else
var signaturePad = new SignaturePad(canvas);

Sadly still getting error msg

Please let me know what I need to change

Thanks much for your time and help

Wilson.
http://timeinapp.app.appery.io/sign_i...
Test username user001 Test Password user001

[Yurii Orishchuk]

HI Wilson,

I see wrong line of code in your implementation:

pre

//This is wrong line. And get nothing...
var canvas = jQuery("signature_pad")[0];

/pre

Details: http://prntscr.com/5jym2v/direct

Regards.