Android Tutorial Signature Capture Tutorial

Discussion in 'Tutorials & Examples' started by Erel, May 11, 2011.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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.

    [​IMG]

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

    Attached Files:

    Jpiti, ronell, mendiburen and 12 others like this.
  2. ehsomma

    ehsomma New Member Licensed User

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

    TheDevMan Member Licensed User

    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
     
    ali021 likes this.
  4. Erel

    Erel Administrator Staff Member Licensed User

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

    golnoosh New Member

    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
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    Have you purchased Basic4android? If yes then contact support@basic4ppc.com to fix this issue. This file is only available to licensed users.
     
  7. Rusty

    Rusty Well-Known Member Licensed User

    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,
     
  8. Erel

    Erel Administrator Staff Member Licensed User

    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.
     
  9. Rusty

    Rusty Well-Known Member Licensed User

    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,
     
  10. Erel

    Erel Administrator Staff Member Licensed User

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

    Rusty Well-Known Member Licensed User

    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,
     
  12. Erel

    Erel Administrator Staff Member Licensed User

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

    Rusty Well-Known Member Licensed User

    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.
     
  14. legion48

    legion48 Member Licensed User

    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?
     
  15. Erel

    Erel Administrator Staff Member Licensed User

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

    legion48 Member Licensed User

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

    :icon_clap:
     
  17. Rusty

    Rusty Well-Known Member Licensed User

    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,
     
  18. Erel

    Erel Administrator Staff Member Licensed User

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

    Rusty Well-Known Member Licensed User

    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.
     
    Last edited: Feb 27, 2012
  20. Yeshua

    Yeshua Member Licensed User

    Save panel and imageview together

    Can you help me, pease?
     

    Attached Files:

Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice