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

[Chiran]

Hi,

I am trying to implement Signature Pad into my Appery app.
https://github.com/szimek/signature_pad

1). I have uploaded signature_pad.js and signature_pad.min.js as Javascript files into my Project.

2). I have created an HTML element into my page and inserted the following code:
Load--Run Javascript--???

I am not sure what function I should run in the Javascript event, and if my HTML code is correct.

Thank you in advance.

[Chiran]

There is also this plugin available - https://github.com/thomasjbradley/sig...

but I still have the issue of not knowing how to implement the code in appery

[Chiran]

There is also this jquery plugin available - https://github.com/thomasjbradley/sig...

but I still have the issue of not knowing how to implement the code in appery

[Illya Stepanov]

Hi Chiran,

You need to add this JavaScript library in your Appery.io project as it described here: http://devcenter.appery.io/documentat...

• and call the needed functions from this library on any screen: http://devcenter.appery.io/documentat...

• using JavaScript with Appery.io Events menu: http://devcenter.appery.io/documentat...

[Chiran]

Hi Illya,

Thanks for your response.

I have tried following the steps but the problem I am facing is in the implementation of the steps. Specifically, I do not know what html code I should insert and what JavaScript event I should create.

Can you please tell me what JavaScript event and html code I need to run this plugin?

[Chiran]

Hi Illya,

Thanks for your response.

I have tried following the steps but the problem I am facing is in the implementation of the steps. Specifically, I do not know what html code I should insert and what JavaScript event I should create.

Can you please tell me what JavaScript event and html code I need to run this plugin?

[Yurii Orishchuk]

Hi Chiran,

Please follow these steps:

1 Create new JS asset and populate it with following code "http://szimek.github.io/signature_pad..." (you've done it).

2 Put on the page HTML component.

3 Set for this HTML component dimensions with "auto" and "auto" values. http://prntscr.com/49b543/direct

4 Click "EditHTML" http://prntscr.com/49b5av/direct

5 Navigate to "HTML Source" and populate it with following code: http://prntscr.com/49b5mg/direct

pre

/pre

6 Create new CSS asset and populate it with following code: http://prntscr.com/49b64w/direct

pre

.signature_pad{
/* you can change background for this component here */
background: #f00;
}

/pre

7 Now you can invoke following code to initialize plugin:

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

You will get following result:

http://prntscr.com/49b70n/direct

Regards.

[Chiran]

Thanks Yurii - it works!

Is there a way for the signature area to fill the whole screen (or a specified area) and then resize according to device screen size?

I tried putting the HTML widget component in a 'grid cell' and then changed the dimensions of the grid cell to what I wanted, but the html/signature pad didn't auto change to the grid cell dimensions.

[Chiran]

I've been able to change the dimensions of the signature pad by going into the HTML and changing the px there.

But when I change the dimensions of the device screen in 'Test', the signature pad does not auto-adjust.

[Yurii Orishchuk]

Hi Chiran,

Please use following code instead of yours:

pre

//Note you need to replace "html_2" with your html component name.
var canvas = Apperyio("html_2").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

Regards.