simFla.ux.plugins.signaturePad

[SimonFlack]

Hey Guys

I needed a touch signature pad for my app so I made this plugin.



Example:

{
		xtype: 'panel',
		id: 'signaturePanel',
		plugins: [new simFla.ux.plugins.signaturePad({width: 500, height: 100})]
	    }

ClearPad

Ext.getCmp('signaturePanel').plugins[0].reset()

Get Image Data (base64 PNG)

Ext.getCmp('signaturePanel').plugins[0].getSignatureAsImage('DATA')

Source: https://github.com/SimFla/SimFla-signaturePad

[AndreaCammarata]

That's really a good idea and nice implementation.
Good job SimonFlack!

[aCa]

Very usefull, thanks!

[jay@moduscreate.com]

Hey Guys

I needed a touch signature pad for my app so I made this plugin.




Example:

{
		xtype: 'panel',
		id: 'signaturePanel',
		plugins: [new simFla.ux.plugins.signaturePad({width: 500, height: 100})]
	    }

ClearPad

Ext.getCmp('signaturePanel').plugins[0].reset()

Get Image Data (base64 PNG)

Ext.getCmp('signaturePanel').plugins[0].getSignatureAsImage('DATA')

Source: https://github.com/SimFla/SimFla-signaturePad

that's awesome dude

[weazil]

It works great in chrome & ios... On Android I can draw... but when i do get image it will not display it and when you pass data it passes data: ,

[SimonFlack]

What android device and versjon did you test on? Was it just the image in the demo that did not show or was the data string corrupt?

[weazil]

I have tried it on an HTC evo running 2.2 and a galaxy Tab also running 2.2 FROYO

I have tried it in the stock browser and Dolphin w the same results
on the demo it doesnt display anything when you press get image, the reset button works fine tho.

I couldnt figure out how to send the image as part of the form so i created a textfield and made it hidden and when you press sumit it pushes the signature to this hidden field then form.submit runs and when you un hide it it only says "data: ," below is my code that i use to fill that hidden field

Ext.getCmp('temp_sign').setValue(Ext.getCmp('signature').plugins[0].getSignatureAsImage('DATA'));

like i said on ios on an ipad and chrome on the desktop it works fine but I didnt know how to really trouble shoot on the phone since all it was kicking back was data:,

[weazil]

What android device and versjon did you test on? Was it just the image in the demo that did not show or was the data string corrupt?

Unsure why everytime I try and reply here it says a moderator has to approve it.....

but anyway I tested it on An Evo & a Galaxy Tab, Both running 2.2 Froyo

the signature demo would not display the image below but it would clear the image

Ext.getCmp('temp_sign').setValue(Ext.getCmp('signature').plugins[0].getSignatureAsImage('DATA'));

And since I could not figure out how to submit it as a form i have a hidden textfield and was submitting it that way

chrome and ios both send the data: base64.... Image properly android just sends data : ,

[SimonFlack]

Weazil: I'll try to debug this and get back to you.

[tchaves]

Simon, this is awesome, thanks for creating it and sharing.

Does anyone know how I could disable scrolling on a card ONLY when the signature is being drawn?

In my case, I need to scroll down to see the signature field, but if scrolling is enabled, the card scrolls around while I try to draw the signature.

Any help is greatly appreciated!