B4A Library SignPad V0.20 - Signature Capture - incl Java source

SignPad
Version:
0.20

Android Signature Pad is an Android library for drawing smooth signatures. It uses variable width Bézier curve interpolation based on Smoother Signatures.

For those who want to play with the library or mayybe to extend
i have included the java source of this library so you can change it by yourself and then recompile the lib with SLC. Have fun


This wrapper is based on this

header.png

  • SignPad
    Events:
    • onSigned (sign As Bitmap)
    Methods:
    • AddToParent (Parent As ViewGroup, left As Int, top As Int, width As Int, height As Int)
    • Capture
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • clear
    • getAlbumStorageDir (albumName As String) As File
    • saveBitmapToJPG (bitmap As Bitmap, photo As File)
    Properties:
    • Left As Int
    • SignatureBitmap As Bitmap [read only]
    • Top As Int
    • TransparentSignatureBitmap As Bitmap [read only]

For those who want to extend the library i have attached the java-source of this library. FEEL FREE TO MODIFY IT
 

Attachments

  • libSignPad_0.16.zip
    9.8 KB · Views: 505
  • libSignPad_0.17.zip
    9.9 KB · Views: 520
  • LibSignPadv0.20.zip
    10.8 KB · Views: 953
  • SignaturePad_JAVASOURCE020.zip
    38 KB · Views: 754
  • SignPadEx.zip
    12.9 KB · Views: 907
Last edited:

DonManfred

Expert
Licensed User
Longtime User
Tutorial

How to add a SignPad to your App

1. Open you app and mark SignPad in the Library tab
2. Open the Designer
3. Create a Panel (as the background for the SignPad) and give it a good color
SignPad0018.png


4. Create a CustomView as Child of this Panel
SignPad0019.png


And set the CustomType to "SignPad"
SignPad0020.png


Name the Object SignaturePad (event name will be accordingly)
SignPad0021.png


Save the layout

Remember to create the object and also the event
SignPad0022.png


B4X:
Sub SignaturePad_onSigned(sign As Object)
    Log("SignaturePad_onSigned(sign)")
    Dim bmp As Bitmap = sign
    ImageView1.Bitmap = bmp
   
End Sub
 
Last edited:

Mahares

Expert
Licensed User
Longtime User
I tried to save the signature to a file using this code. But all I get is a black picture showing nothing.
B4X:
Sub btnSave_Click
    Dim bmp As Bitmap = SignaturePad.TransparentSignatureBitmap
    ImageView1.Bitmap = bmp
   'save image to file
    Dim out As OutputStream
    out = File.OpenOutput(File.DirRootExternal, "mysignature.jpg", False)
    bmp.WriteToStream(out, 100, "JPEG")
    out.Close
End Sub
Thank you for steering me.
 

DonManfred

Expert
Licensed User
Longtime User
i have similar issues... When i restart my device before i look at the saved image then all is ok.

when i send the image as email works too
B4X:
Sub btnSave_Click
    Dim bmp As Bitmap = SignaturePad.TransparentSignatureBitmap
    ImageView1.Bitmap = bmp
    SignaturePad.saveBitmapToJPG(bmp,File.Combine(File.DirRootExternal, "mysignature_save.jpg"))
    Log("mysignature_save.jpg saved")

    Dim Message As Email
    Message.Subject = "Signature-Capture"
    Message.Body = "Unterschrifts-Capture"
    Message.To.Add("[email protected]")
    Message.Attachments.Add(File.Combine(File.DirRootExternal, "mysignature_save.jpg"))
    StartActivity(Message.GetIntent)
End Sub
(Uses Phone library)
 

fixit30

Active Member
Licensed User
Longtime User
Hi there. This is a great Library!

Is there any way to be able to disable signature capture?

The reason I ask is that I would like the ability to be able view the previously captured signature, this is easy and I can load the Bitmap into an Image view placed under the SignaturePad, however nothing I try stops the capturing of a new signature. I've even placed another panel on top of the SignaturePad.

Any suggestions greatly welcomed!

Many Thanks.

Alan.
 

Reviewnow

Active Member
Licensed User
Longtime User
Don, Great work
Can you add additional features pixel count and DrawText
I have to use pixelcount to check that a signature is actually a signature maybe you can develop some rules for this
example, say I really need a valid signature and someone just puts a few dots on the screen it would not be a valid signature I know this is not fool proof but most likely
if the pixel count > 100 then you would have to believe that its a valid signature

Draw text would be for instance if a person was not able to physically sign the screen you could draw the text "Unable to Sign"


Again Great work and we appreciate the time you devote to making useful library's
 

DonManfred

Expert
Licensed User
Longtime User
There is NO pixelcount available...
The reason I ask is that I would like the ability to be able view the previously captured signature, this is easy and I can load the Bitmap into an Image view placed under the SignaturePad, however nothing I try stops the capturing of a new signature. I've even placed another panel on top of the SignaturePad.
Sadly there is no method in the original library to stop it. The Object is extending the View object... And is is overrriding the onTouchEvent.
Sadly this cannot be stopped.

WHAT you can do is:
Like in example you can put the signature to an imageview or so and then you HIDE (set the signarea to visible = false) so the signarea (which is transparent) disappears and only the panel in the background is shown.
When clicking on Clear you clear it and set the signarea to visible again...

I´ve attached an edited Example which shows this solution
 

Attachments

  • SignPadEx.zip
    12.9 KB · Views: 466

DonManfred

Expert
Licensed User
Longtime User
Can you add additional features pixel count and DrawText
Sadly there is no pixelcount... the library does a lot of math to show beziercurves... I cannot really find a place in the lib where i could "grab" "pixels"

BUT
you can get the transparent signaturebitmap and then scan the bitmap (getpixels) for "not transparent pixels" then you have the Pixels... As the size of such a signaturepad is limited the amount of pixels to scan are also limited and this should be done fast
 

fixit30

Active Member
Licensed User
Longtime User
Hi DonManfred.

Many thanks for your reply.

WHAT you can do is:
Like in example you can put the signature to an imageview or so and then you HIDE (set the signarea to visible = false) so the signarea (which is transparent) disappears and only the panel in the background is shown.
When clicking on Clear you clear it and set the signarea to visible again...

Unfortunately I get an error Unknown Member: Visible on this line in your updated sample?

B4X:
SignaturePad.Visible = True
 

fixit30

Active Member
Licensed User
Longtime User
Hi Manfred.

That's perfect, exactly what I needed.

I really appreciate your fine work and quick response.

Alan.
 

fixit30

Active Member
Licensed User
Longtime User
From my tests. If you click save the whole signature shows in the imageview.

The sample works better if you move the imageview into the same panel as the SignaturePad and make it the same size.

With a few code tweaks and also changing it so that the bmp saves as a transparent png, this works really well.

Alan.
 

Bryanne Vega

Member
Licensed User
Longtime User
I have this exactly as on the example. Works beautiful, I cannot change the color of the actual signature pad, but I can change the color of the panel. Any thoughts?
 

hibrid0

Active Member
Licensed User
Longtime User
Hi DonManfred, I test your library and is so great, but I have an small problem, but really is the same problem has the most systems to signature on TouchScreen.

The common people put base of the hand on the screen and then write with a pen, in this cases the SignPad not work fine, the people need only touch the screen with the pen and not with the base of the hand.

I think will be more natural to the real hand writing if the multitouch is implement and has a zone to listen and paint and other zone listen but not paint.

I found this library from agraham https://www.b4x.com/android/forum/threads/gestures-multi-touch-library.7421/

And this example from Erel https://www.b4x.com/android/forum/threads/android-multitouch-tutorial.10419/#content
 

Attachments

  • NewSignatureproto.png
    NewSignatureproto.png
    4.2 KB · Views: 435

manuel-r

Member
Licensed User
Longtime User
Hi

What can I do, if the signature isn't in one curve/line?
Most people are breaking while making their signature. Some have more than one name, others have "i", "t", "f" or whatever in the name...
 
Top