Android Example Signature Capturing with jSignature and WebViewExtras

Hi everyone:

After several test, now I can use the jSignature javascript plugin I was using in my web, in my B4A app, in order to update my database from b4a the same way I'm doing in my web. I know there are some solutions to do this in B4A, but I need to do it this way because I was using it before. Maybe useful for someone.

See attached an small sample of using the jSignature plugin inside a WebView.

You can read about jSignature here:
https://willowsystems.github.io/jSignature/#/about/

Basically I have a small webpage in the assets dir with a div to capture the sign, and I get the data from it with WebViewExtras (thanks to @warwound)

Just a javascript function in my web page
B4X:
function SendBase30() {
    $("#sign").val($('#signature').jSignature('getData', 'base30'));
    return document.getElementById('sign').value;   
}

And I call it from my app:
B4X:
Sub Button1_Click
    Dim Javascript As String 
    Javascript="B4A.CallSub('GetBase30', true, SendBase30())"
    WebViewExtras1.ExecuteJavascript(Javascript)
End Sub

Sub GetBase30(data As String)
    Label1.Text = data
End Sub
 

Attachments

  • jsignature b4a.png
    jsignature b4a.png
    210.9 KB · Views: 873
  • jsignaturesample.zip
    57 KB · Views: 575

josejad

Expert
Licensed User
Longtime User
Hi Peter:

I've just downloaded and work for me in both modes (Android 7.1).
Please check the capital and lower case letters in the scripts names and the files, I suspect sometimes the file names are converted from CamelCase to lower case.

B4X:
<script src="jquery.js"></script>
<script src="jsignature.min.js"></script>
<script src="jsignature.compressorbase30.js"></script>

I've´observed in the IDE the files seems to be CamelCase, but in the folder, they are in lower case (I renamed them because I had this problem while testing)

See attached image.
 

Attachments

  • Captura.JPG
    Captura.JPG
    43.2 KB · Views: 454
Top