Android Tutorial Signature Capture Tutorial

Status
Not open for further replies.
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.

signaturecapture_1.png


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:
B4X:
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.
B4X:
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.
 

Attachments

  • SignatureCapture.zip
    6.4 KB · Views: 4,037

Yeshua

Member
Licensed User
Longtime User
Save panel and imageview together

Can you help me, please?:signOops:
 

Attachments

  • Capture.zip
    40.5 KB · Views: 452

Yeshua

Member
Licensed User
Longtime User
I want that when I click "btnSave," the panel with image view that are above it, may be saved as image.png or image.jpg
 

Yeshua

Member
Licensed User
Longtime User
:) Ok, I solved this way, thanks Erel!
B4X:
Dim OutImg As Bitmap
Dim CanvasTk As Canvas
Dim Obj1, Obj2 As Reflector

Obj1.Target=PanelPrint
    Obj1.RunMethod("forceLayout")
    DoEvents

    OutImg.InitializeMutable(PanelPrint.Width, PanelPrint.Height)
    CanvasTk.Initialize2(OutImg)
    Dim args(1) As Object
    Dim types(1) As String
    
    Obj2.Target = CanvasTk
    Obj2.Target = Obj2.GetField("canvas")
    args(0) = Obj2.Target
    types(0) = "android.graphics.Canvas"
    Obj1.RunMethod4("draw", args, types)
   
   
   Dim Out As OutputStream
   Out = File.OpenOutput(File.DirRootExternal,"IDPhoto.bmp", False)
   CanvasTk.Bitmap.WriteToStream(Out, 100, "PNG")
   Out.Close
 

Gearcam

Active Member
Licensed User
Longtime User
signature.png into binary data

This demo works great but i need to also upload the binary data from the signature into my sql server

I dont want to upload the actual image just the binary representation of the signature.

Any help ?

Steve
 
Last edited:

terrencejohns

New Member
Licensed User
Longtime User
Nothing in attached file

Hi there.
I downloaded the attached, but it wouldn't open. Says the archive is empty.
Will reall appreciate the Signature data module.

Thanks in anticipation

Terrence
:sign0085:
 

terrencejohns

New Member
Licensed User
Longtime User
Hi Errol

sorry I posted the reply to wrong message last time. Its the SignatureCapture.zip file thats empty. Is there perhaps another link I can try.

Thank you

Terrence
 

joneden

Active Member
Licensed User
Longtime User
wow so easy to use. Nice one Erel.

I extended it a little to get a byte array instead of the file, possibly worth including the the base class, it's nothing complex, code below.

B4X:
' Get the signature as a byte array
' objSignatureData - The SignatureCapture object used to capture the signature
' quality - Quality (in %) of the resultant file
' format - The format for the file - choose from PNG, JPEG or WEBP
'
' Example:<code>
' Dim signatureCaptured() As Byte
' signatureCaptured = SignatureCapture.GetAsByteArray(objSignatureData,90,"JPEG")
' Dim objBitmap As Bitmap
' Dim objInputStream As InputStream
' objInputStream.InitializeFromBytesArray(signatureCaptured, 0, signatureCaptured.Length)
' objBitmap.Initialize2(objInputStream)</code>
Sub GetAsByteArray(objSignatureData As SignatureData, quality As Int,  format As String ) As Byte()
   Dim out As OutputStream
   out.InitializeToBytesArray(0)
   objSignatureData.Canvas.Bitmap.WriteToStream(out,  quality, format )
   out.Close
   Return out.ToBytesArray()
End Sub
 

kkolle

Member
Licensed User
Longtime User
Hallo Erel,

is it possible to restore signature when screen orientation changed and signature was not saved as jpg?
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Use this code:
B4X:
'Activity module
Sub Process_Globals
   Dim bmp As Bitmap
End Sub

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")
   If bmp.IsInitialized Then
      Dim bd As BitmapDrawable
      bd.Initialize(bmp)
      Panel1.Background = bd
   End If
   Canvas1.Initialize(Panel1)
   SD.Initialize
   SD.Canvas = Canvas1
   SD.Panel = Panel1
   SD.SignatureColor = Colors.Black
   SD.SignatureWidth = 5dip 'Stroke width
End Sub

Sub Activity_Pause (UserClosed As Boolean)
   bmp = Canvas1.Bitmap
End Sub
 

cmc020378

New Member
Licensed User
Longtime User
Erel

Is it possible to increase the size of the signature panel and maintain the accuracy of the touches?
 

cmc020378

New Member
Licensed User
Longtime User
I was changing the size in code but not re-initializing the panel and canvas which was giving me problems, now that I am re-initializing after changing the size all works. Thank you
 

Eric H

Active Member
Licensed User
Longtime User
I am excited to finally contribute to the B4A community, even in this small way...
I have modified the Signature capture module to make the writing more smooth in the larger stroke widths.

Here is the original code module included in the first post:
B4X:
'Code module
Sub Process_Globals
    Dim px, py As Int
    Type SignatureData (Canvas As Canvas, Panel As Panel, SignatureColor As Int, SignatureWidth As Int)
End Sub

Sub Panel_Touch(SD As SignatureData, x As Int,y As Int, Action As Int)
    If Action = 0 Then 'mouse down constant
        px = x
        py = y
    Else
        SD.Canvas.DrawLine(px, py, x, y, SD.SignatureColor, SD.SignatureWidth)
        SD.Panel.Invalidate
        px = x
        py = y
    End If
End Sub
Sub Clear(SD As SignatureData)
    SD.Canvas.DrawColor(Colors.White)
    SD.Panel.Invalidate
End Sub
Sub Save(SD As SignatureData, Dir As String, Name As String)
    Dim out As OutputStream
    out = File.OpenOutput(Dir, Name, False)
    SD.Canvas.Bitmap.WriteToStream(out, 100, "PNG")
    out.Close
End Sub

I have added the following line of code just below the call to SD.Canvas.Drawline:
B4X:
SD.Canvas.DrawCircle(px, py, SD.SignatureWidth/2, SD.SignatureColor, True, SD.SignatureWidth/2)

I was seeing a problem when the connecting lines changed angle too sharply, the squared-off edges of the lines left a split on the outside edge, like this: /////////////\\\\\\\\\\\\\\ (notice the gap on the bottom between the angled slashes). My solution for this was to draw a circle at the edge of each of the lines so it fills in the gaps no matter what angle it is at: //////(/\)\\\\ (picture the parentheses as the circle, filling in the gap). If my silly ascii description doesn't make sense, I am not surprised... just check out the code in the module yourself and see that it looks much nicer.

Note: This doesn't do anything to increase the 'rate' of gathering points for the lines to be drawn between. So, if your device is an original TMoible G1, even if it's overclocked, it will still make a circle look like an octagon unless you draw it really slowly... I bet Informatix could figure this one out, but I don't know how to improve it.



Edit: I just create a image to better show what I am talking about...
 

Attachments

  • lines.png
    lines.png
    6.6 KB · Views: 562
Last edited:
Status
Not open for further replies.
Top