Android Tutorial Signature Capture Tutorial

Several developers were interested in adding support for signature capturing in their Android application.
The attached code module makes it easy to capture the signature and save it to a file.

You should create a layout similar to the above layout.
The drawing is done on a Panel view.

Load the layout (or create it programmatically), initialize the canvas object which does the actual drawing and initialize the SignatureData object:

Sub Globals
    Dim Panel1 As Panel
    Dim Canvas1 As Canvas
    Dim SD As SignatureData 'This object holds the data required for SignatureCapture
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    Canvas1.Initialize(Panel1)
    SD.Initialize
    SD.Canvas = Canvas1
    SD.Panel = Panel1
    SD.SignatureColor = Colors.Black
    SD.SignatureWidth = 5dip 'Stroke width
End Sub

Add events for the panel Touch event and for the buttons. These events call the SignatureCapture module.

Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
    SignatureCapture.Panel_Touch(SD, x, y, Action)
End Sub
Sub btnSave_Click
    SignatureCapture.Save(SD, File.DirRootExternal, "sign.png")
    ToastMessageShow("Signature saved to: " & File.Combine(File.DirRootExternal, "sign.png"), True)
End Sub
Sub btnClear_Click
    SignatureCapture.Clear(SD)
End Sub

That's it.

 

[ehsomma]

Wow! excelent. Just what I need.
Thank you Erel

 

[TheDevMan]

Hi Erel,

Thanks for those great tuts.

Is there a way to capture en store the points of the signature? instead of a picture?

Thanks in advance!

TheDevMan

 

[Erel]

You can change the code and store the points together with drawing the lines.

 

[golnoosh]

zip file

Hi

That is what I really need, but I cannot save the file.
is it free? How can I access to the code.

Best,
Golnoosh

 

[Erel]

Have you purchased Basic4android? If yes then contact [email protected] to fix this issue. This file is only available to licensed users.

 

[Rusty]

Signature Capture resolution

Erel,
I have written a signature capture program and find that the points I capture are far apart. Is there a way to set the frequency the Panel_Touch event is fired? The points I capture are too far apart and I want to get smoother lines as opposed to angular straight lines.
Thanks,

 

[Erel]

Are you using this code module?
There is no way to modify the frequency of the touch event. Make sure that you are not doing anything too heavy when handling this event.

 

[Rusty]

Sub Panel1_Touch (Action As Int, X As Float, Y As Float)
SignatureCapture.Panel_Touch(SD, x, y, Action)
If SignPt < SignPoints.Length -1 Then
SignPoints(signPt).x = x
SignPoints(signPt).y = y
SignPt = SignPt + 1
End If
End Sub
The only thing I'm doing differently is I have a type array SignPoints and a pointer variable signPt where I record the touch location each time it changes. I've limited the array size to 1000 points and rarely get to 180 points on a fairly complex signature. If the user draws a circle slowly, it creates a jagged circle. If he does it fast, it might be a straight line. I digitize it so I don't have to store an image. Yes, I'm using your code module in the signaturecapture code, unchanged.
Ideas are appreciated. Thanks,

 

[Erel]

Which device are you using?
I've just tested it and it draws quite smoothly even when I draw very quickly.

 

[Rusty]

I'm using a velocity Cruz R101. It is a low end device: Eclair: Kernal 2.6.29#125:
Do you think the processor is too slow or other hardware issue? My deployed systems are on the Velocity Cruz T301, which is a much better machine than my dev machine.
Thanks,

 

[Erel]

It is possible. Try testing it on the target devices.

 

[Rusty]

I installed it on my cellphone (Samsung Charge), it works perfectly. Therefore, it is safe to assume the Cruz is too slow or whatever...
Thanks for your help.

 

[legion48]

Erel, I've adapted this example as a simple drawing pad for my grandkids. I've added the ability to load a saved drawing with:

Panel1.SetBackgroundImage(LoadBitmap(File.DirRootExternal, "MyDrawing.jpg"))


which works ok. The problem I'm having is that the existing drawing routines wont seem to draw to my loaded image. Should I be loading the image to
SD.canvas1 instead? If so, how do I do that?

Can you advise please?

 

[Erel]

You have two options. Either draw the bitmap with Canvas.DrawBitmap or reinitialize the canvas after changing the background.

 

[legion48]

Brilliant, thank you so much Erel! It works like a charm.

:icon_clap:

 

[Rusty]

Signature Capture resolution

Erel,
I'm back at trying to figure out why my signatures are "jagged" instead of smooth.
Your tutorial code works great on an Asus eePad.
I have embedded your code within my application as an activity.
When I run my application and execute your code as an activity, I get "jagged" lines. In other words, if I draw a circle, it comes out a polygon.
I am assuming my application continues running on its own thread and might be using too man "cycles" of the tablet.
Is there a way to allow the signature capture activity to have priority or to suspend the main application until the signature capture activity is complete? (assuming this would smooth out the lines)
Thanks,

 

[Erel]

Both your code and this code run in the same thread. What does your application do while the signature activity is visible?

 

[Rusty]

Erel,
I figured it out and am posting a follow up for those as dumb as I am...:BangHead:
In my Panel_Touch routine, I was setting a label to visible = false.
Of course, every pixel of movement would cause this to be reset again and again, thus slowing everything down, thus causing the extremely poor resolution on the signature.
Bottom line, the Panel_Touch routine should not have anything in it except recording the touch location data...

Further, it seems if you convert 1.bal to a 10.1" 1280X800 and expand the panel to full screen the resolution suffers...

Thanks for the help.

 

[Yeshua]

Save panel and imageview together

Can you help me, pease?