PDA

View Full Version : simFla.ux.plugins.signaturePad



SimonFlack
13 Jan 2011, 1:55 AM
Hey Guys

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


http://www.youtube.com/watch?v=88VGalk8CTU

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
13 Jan 2011, 2:43 AM
That's really a good idea and nice implementation.
Good job SimonFlack! ;)

aCa
28 Jan 2011, 4:37 AM
Very usefull, thanks!

jay@moduscreate.com
28 Jan 2011, 11:03 AM
Hey Guys

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


http://www.youtube.com/watch?v=88VGalk8CTU


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
1 Feb 2011, 1:42 PM
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
2 Feb 2011, 4:27 AM
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
2 Feb 2011, 6:30 AM
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:,

dombroskib
2 Feb 2011, 1:24 PM
Very clean implementation!

jay@moduscreate.com
2 Feb 2011, 1:26 PM
Simon, what is the license on this beast? :)

weazil
2 Feb 2011, 1:30 PM
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
3 Feb 2011, 5:05 AM
At the moment it is "Just Use It".. hehe

I am new to open source and I have no idea.

I want people to be able to use it and modify it as they see fit. It would be great if people could send me any code changes so that I can merge them in if necessary. Any suggestions?

SimonFlack
3 Feb 2011, 5:08 AM
Weazil: I'll try to debug this and get back to you.

weazil
15 Feb 2011, 11:49 AM
Weazil: I'll try to debug this and get back to you.

http://code.google.com/p/android/issues/detail?id=7901

it appears that only on honeycomb toDataURL API is fixed in 2.1 & 2.2 it is listed that i can use it but it doesnt work



String ImageBuffer::toDataURL(const String&) const
{
// leaving this unimplemented, until I understand what its for (and what it really is).
return "data:,"; // I think this means we couldn't make the data url
}

jaypompano
16 Feb 2011, 6:04 AM
Great stuff SimonFlack!

I noticed there is a 'getSignatureAsImage' which I'm assuming transfers the signature on the canvas to an image. But do you have a 'loadSignatureImageToCanvas' or something like that? Or would it just be a simple matter of assigning a 'src' property to the canvas element?

SimonFlack
16 Feb 2011, 7:13 AM
Do you want to be able to load an existing signature into the control?

If so you could just hide the signature panel and display the signature image instead. Maybe with 50% opacity so that the user knows that it is not editable.

Did I understand you correctly?

jaypompano
18 Feb 2011, 7:11 AM
Thank you for your reply. I think so yes. So, at the point of the call to getSignatureAsImage, you have the image on the client side correct? I need to take that image and toss it over to the webserver, and be able to retrieve it from the server once again, and display it on the client side. Trying to wrap my head around it. I think this is all doable?

UPDATE: looking at the return data on the following line of code



var strData = oScaledCanvas.toDataURL("image/png");


If passed to sever side, and returned back to client, I'm hoping that is sufficient to resupply to the control. In other words, allow to sign signature, save to server and store, then retrieve back to client side...

SimonFlack
18 Feb 2011, 8:49 AM
Ext.getCmp('signaturePanel').plugins[0].getSignatureAsImage('DATA')

This call will give you a base64 encoded version (a string) of the image in PNG format.

You can send and receive this to and from your web server and store it in a database etc etc.

If you want to display the image after getting it from the server you could do something like this.



Ext.getCmp('your_imagePanel').el.createChild({
tag: 'div',
style: 'background-image: url(' + [THE IMAGE STRING HERE] + '); width: 500px; height: 100px'
});
Ext.getCmp('your_imagePanel').doComponentLayout();

or you could just use .update() to set the inner html of a panel.


<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg=="/>

Hope that helps.

jaypompano
18 Feb 2011, 12:56 PM
Perfect. Thanks again Simon.

weazil
28 Feb 2011, 6:40 AM
Weazil: I'll try to debug this and get back to you.

Simon doing some more research since Android does not allow for the todataURL at the moment doing saveasbmp works fine it just takes a second since the bmp is soo much bigger currently working to see if compression on the bmp can be enabled but what i wanted to tell you was on save i guess because of the transparency for a bmp it just turns the entire image black..

so when intializing the canvas i just filled the bg white


iWidth = oCanvas.width;
iHeight = oCanvas.height;

new -- oCtx.fillStyle = "rgb(255,255,255)";
new -- oCtx.fillRect(0,0,iWidth,iHeight);

oCtx.beginPath();
oCtx.strokeStyle = "rgba(0,0,0, 0.5)";
oCtx.strokeWidth = "4px";


gives me a signature for the moment :) and might help someone else trying to use it for android

Mis63
3 Mar 2011, 11:57 PM
A little bug to set stroke's width. Need to modify initCanvas function and replace :


oCtx.strokeWidth = "4px";

by


oCtx.lineWidth = 4;

tchaves
28 Mar 2011, 4:34 PM
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!

Akrion
14 Jul 2011, 6:12 AM
I have exactly the same issue. Anyone has any ideas regarding this?

Akrion
14 Jul 2011, 6:26 AM
I guess adding this to a panel with no scrolling solves this issue, but in the cases where we have vertical scrolling allowed this plugin end up being tricky to use to say the least :)

SimonFlack
14 Jul 2011, 11:07 AM
I can see how that will be a problem. My only suggestion is to design your interaction around this limitation.

Example: You could add a button labeled "Sign Here" (or something like that) and slide in an ActionSheet or Overlay that contains the SignaturePanel.

Akrion
14 Jul 2011, 11:09 AM
Yep an overlay is the apporach I went with. Thanks.

sissonb
22 Aug 2011, 3:51 PM
I am having an issue when I try to save an image as a bitmap.

I call,
plugins[0].getSignatureAsImage('BMP')
and it returns me a img element with a scr that is corrupt. This image is always the same even when the canvas changes.

How would I save an image as BMP using this extension?

Thanks

SimonFlack
22 Aug 2011, 11:08 PM
Hey

Not sure that BMP is working.

Why cant you use Ext.getCmp('signaturePanel').plugins[0].getSignatureAsImage('DATA')?

Simon

tomlobato
6 Nov 2011, 2:02 PM
Great! On sencha touch version 1 it works perfectly.
Is there some version for sencha touch 2?

SimonFlack
6 Nov 2011, 11:50 PM
I will try to get a version for ST2 up and running soon.

AndreaCammarata
7 Nov 2011, 1:06 AM
I will try to get a version for ST2 up and running soon.

Come on don't be lazy Simon ;)
Looking forward to see a ST2 version of this good component!

SimonFlack
7 Nov 2011, 1:17 AM
Hehe... Looking at it now actually... Does not look like Ext.AbstractComponent contains code to "init" the plugings like you find in Ext JS 4 version.



if (me.plugins) { me.plugins = [].concat(me.plugins); for (i = 0, len = me.plugins.length; i < len; i++) { me.plugins[i] = me.initPlugin(me.plugins[i]); } }

eyepoker
24 Jan 2012, 3:37 PM
hello, I'm using the signature pad from simon (thanks for this!), but have run into the same issue as was noted a page or two back on android, namely that we don't get any image data in anything below android 3. On my android 3.1 tablet i get the image data, however, on my SGS2 (android 2.3.6) i dont' get any data. It was mentioned that attempting to get a BMP instead of a PNG might work but like the others I too get the [object HTMLImageElement] string when I attempt to get the signature value. Any idea as to how we can get something working on pre Android 3.x devices? Have those that ran into the same issue been able to find a solution?

[EDIT] I see now that its not possible pre android 3. however, there are some workarounds as noted by weazil at the link he provided (http://code.google.com/p/android/issues/detail?id=7901) .... if any have used the workarounds it would be nice to hear your impressions/experiences.

sissonb
24 Jan 2012, 3:51 PM
@eyepoker I was able to successfully call plugins[0].getSignatureAsImage('DATA') on android 2.3.3(both DroidX and HTC EVO).

I only had an issue when calling plugins[0].getSignatureAsImage('BMP')

eyepoker
25 Jan 2012, 8:35 AM
From what I can tell you shouldn't be getting the desired result for android 2.x devices. I have a Galaxy S2 (2.3.6) and I literally get this short string as the output: "data:". This is consistent with the reported behavior.

On an Acer a500 (3.2) i get the full data string.

The issue is that toDataURL on android 2.x just isn't fully implemented, thus signature pad isn't able to do its magic. I've no idea why you can get it to work on your two devices - i have to think that it is in fact not working. No error will be thrown, you *can* draw/write and you do get "something" returned... just not the image data.... I'm sure you have, but in case not, have you taken a look?

skizzato
1 Mar 2012, 3:10 AM
Hi Simon, really thanks for this awesome plugin!!
I've a question: how can I disable/enable the signature panel? In order to allow user to edit or not it.

Thanks :)

SimonFlack
1 Mar 2012, 3:15 AM
I will look into this and get back to you. I am also about to make a version for 2.0 now that it is soon ready for release.

skizzato
1 Mar 2012, 3:51 AM
Hi Simon, thanks for your quick reply and for the good news!
So I'll wait for :)

profunctional
6 Mar 2012, 6:44 AM
Anyone get this to work with Android 2.0+ but < Android 3.0? If there is any known workaround please share.

Thanks!

eyepoker
6 Mar 2012, 8:58 AM
i used the phonegap canvas plugin for android 2x.... assuming you are making an app.

profunctional
6 Mar 2012, 10:47 AM
i used the phonegap canvas plugin for android 2x.... assuming you are making an app.

Is it possible to do testing with the phonegap canvas plugin on Chrome?

eyepoker
6 Mar 2012, 12:15 PM
unfortunately, no, you can't. you have to test on-device. what i did was get the captured base 64 and displayed it in a test div to see what i got.

profunctional
7 Mar 2012, 8:21 AM
I have two signaturepad instances on my app. It seems that when one is used, the other one is rendered useless.

The symptom is that I cannot draw in the signaturePad on the second instance, once the first instance has been drawn on.

Any advice?

tomlobato
9 Mar 2012, 8:02 AM
For who is trying to get signatures in ext/st/st2, I found a good solution, but out of the Ext world: http://thomasjbradley.ca/lab/signature-pad/. It is easy to use it inside sencha...

The html. For example the "html:" property of a panel:


<div class="sigPad"><canvas class="pad" width="400" height="170"></canvas></div>


Instantiating the sig pad:


var sigpad = $('.sigPad').signaturePad({
drawOnly: true,
lineWidth: 1,
lineTop: 130,
lineMargin: 50
});


The complete Sig.js controller is attached.
The url order/relat just returns a relatory in html containning the div.sigPad example above.

Of course, would be nice to do this all only inside sencha, but while it is not a easy option, jquey.segnaturepad works very well.

weazil
12 Mar 2012, 2:27 AM
Doing more and more research I am leaning towards making my app a native app with phonegap or senchas new packaging and was curious if anyone could help me turn this code into a native over ride as i do not know java or android programming

http://corner.squareup.com/2010/07/smooth-signatures.html
(http://corner.squareup.com/2010/07/smooth-signatures.html)
This link here describes exactly the problems I am having, I also found that in the android-tools from senchalabs they use the historicalX & Y that square uses to smooth the signature

https://github.com/senchalabs/android-tools
(https://github.com/senchalabs/android-tools)
So far I have gotten the signatures to save with bmp and ive figured out a phonegap plugin to get todataurl to work so i can have native png vs bmp I've even found 1 bmp to png in javascript but I just cant figure out how to make squares code become an over ride for canvas so i can have smooth signatures

If anyone can steer me in the right direction that would be great

Stim
14 Mar 2012, 6:34 AM
I really need something like this, looking forward to the touch 2 version. Good work so far Simon

profunctional
22 Mar 2012, 9:19 AM
Quick question. What is the base64.js file for?

kalor
26 Apr 2012, 4:50 PM
Just wanted to add my encouragement to Simon for the ST2 version. Claim the fame, dude.

SimonFlack
29 Apr 2012, 4:40 AM
Hey Guys

Sorry this is taking so long. I just have not had time to do this kind of stuff since I started Whitefox last year.

Hopefully I get around to it soon. Maybe somebody will beat me to it.

I will be working on a Sencha 2.0 project from next week so maybe I can look into it then.

Simon

QuinnPerkins
20 May 2012, 1:38 AM
Great project! Any update on a 2.0 version? Could we bribe you to prioritize its release?

Thanks for sharing!

SimonFlack
20 May 2012, 1:56 AM
Sorry Guys. I am just so busy with work at the moment. If nobody beats me too it I will try to get around to this asap.

ujjwal_kumar_roy
24 May 2012, 11:24 PM
That's really a good idea and nice implementation.
Its really helpfull..... but i am a new one in this field and i have no adequate knowledge... but i want to make a page where multiple signature pad is present... but i can't do it ..... can any one help me.....please...

manishkumar
19 Jun 2012, 12:54 AM
Hi Simon, really thanks for this awesome plugin!!
I want to use for sencha touch 2.0 so, when it will be released

Sips
7 Aug 2012, 12:41 PM
complete newbie here not getting the 'plugin' loaded...

should I, besides loading the js files onto the page, also declare the path to the files in the
Ext.Loader.setConfig paths:

Or is there something else im missing?

chandramuralis
19 Aug 2012, 5:18 PM
In order to use multiple signature pad in a single page, you have to assign the id for the canvas element dynamically. For example change the below line in initControl function from



this.canvasID = Ext.id(null, 'thecanvas');
this.cmp.html = '<canvas width="' + width + '" height="' + height + '" style="border:1px solid black;" id=' + this.canvasID + '></canvas>';

to


this.canvasID = Ext.id(null, 'thecanvas');
this.cmp.html = '<canvas width="' + width + '" height="' + height + '" style="border:1px solid black;" id=' + this.canvasID + '></canvas>';

Vitaly Ivanov
17 Sep 2012, 6:01 AM
Hey Guys, I have updated the plugin to work on Sencha Touch 2.
You can find redesigned plugin and sample here https://github.com/ivanovvitaly/SignaturePadST2
You can ask me any questions involved with this plugin for the ST 2

new thread about it here http://www.sencha.com/forum/showthread.php?242843-SignaturePad-plugin-for-the-Sencha-Touch-2&p=888043

pidugusundeep
26 Feb 2018, 3:33 AM
How do i implement the same on classic ?