simFla.ux.plugins.signaturePad

[SimonFlack]

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]

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

[weazil]

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]

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]

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]

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]

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]

Perfect. Thanks again Simon.

[weazil]

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]

A little bug to set stroke's width. Need to modify initCanvas function and replace :

oCtx.strokeWidth = "4px";

by

oCtx.lineWidth = 4;