Signature Capture

Hi All,
Has anyone implemented a solution to capture signature from user in a sc form? For example when you have a field to add users signature at the end of the form then you draw a signature by hand/light pen. I need this to run on an iPad device.
Thank you.

No, that’s not easily done. Not sure what kind of interface html5 has, but a webapplication is not a ‘traditional’ app. The way we went is by digitally signing a document. That requires no ‘sigining’.

A tiny bit of searching will show you in the right direction… Several solutions for the price of nothing…
http://stackoverflow.com/questions/3096470/capture-signature-using-html5-and-ipad

I’ve implemented a solution using jSignature. Easy and reliable mix using Php and javascript. Available as opensource. Search in google

Thanks for all the responses. I will give it a try.

Giorgio - Great to hear that someone already implemented that. Have you had to modify much to get it working in scriptcase? Do you have any further tips or advice on this? Anyway I will check this out soon.

Download software ( search with google ).
Create a new blank app and put the attached code on the OnExecute event

​Hope this help

jSignature_onExecute.zip (883 Bytes)

Not possible to attach anything here :frowning:
PM me your email and i will send you an example

That’s the jSignature package with class for php

signature.class.zip (8.5 KB)

The sample code received from gbravi worked really well. I am trying to work out to do same in a form application. Which will then save the captured signature in the correct location. For some reason when pasted code inside a php button it times out when generating source code.

aari, Were you able to get jsignature to work in the form? If so can you explain how you were able to get it to work. I am having the same issue.

Here a sample project using the jSignature library.
Inside you can find the project and a sample db.

Sorry but attachment limit cut the file…

Hi Giorgio, can you send me the sample project? I tried to make this work, but is not.
Thanks you very much in advance.
Cheers, Ariel.

I’m trying to use jSignature library, but I do not know how to implement in order to work in the form.
Could anybody help with some examples please?
Thanks in advance.

Rik

Why not use a DOM element of canvas and use fabricjs?

Then you can save that signature as an .svg and import in TCPDF, etc…You could save the .svg in the DB…It’s a vector format and completely scalable.

Just a thought…

Thanks for the tip.
For me, at this moment, however, what I use. The problem is that they do not know how to implement the solution in the form Scriptcase.
As a result, I need a signature, which is stored as an image in the database via the form.

Therefore, I am trying to ask here for an example how to do it.
As an example, we have sufficient form with two entries. Like name and signature.

If you can be able to share an example with me, I’d be very grateful…

Hello Aari77,

I am using jSignature and jpegcam in an application for my company for a frontdesk sign-in:

[ATTACH=CONFIG]n74589[/ATTACH]

This works very well for me. Maybe Netmake can add these 2 programs into the New Scriptcase.

Company - Frontdesk.jpg

No Aari77,

“Rik” I am now interested in this solution.
Would you be able to share sample with me?

Did a quick test…seems to work…(I copied and pasted…so sorry about anything that is incorrect) You will need to do the work to save the image, but this should get you started. HTML% supports canvas elemetns

Inside Scriptcase…

onApplicationInit

?>

<!-- Get version 1.1.0 of Fabric.js from CDN -->
<script src=“https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js” ></script>

<!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>

<div id=“CanvasContainer” style=“text-align: center”>
<canvas id=“SignatureCanvas” width=“400” height=“100” style=“text-align: center; margin-left: auto; margin-right: auto; display: inline; border:1px solid #000000;”>
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

<script>
init_canvas();
</script>

<?php


Then under Programming create a javascript method and add:

New Method:

init_canvas (Using this as the name and calling it from the <script>init_canvas();</script>

Then place this code inside the JS Method

// Place script tags at the bottom of the page.
// That way progressive page rendering and
// downloads are not blocked.

// Run only when HTML is loaded and
// DOM properly initialized (courtesy jquery)
$(function () {

// Obtain a canvas drawing surface from fabric.js
var canvas = new fabric.Canvas(‘SignatureCanvas’);
canvas.isDrawingMode = true;
});

Please let me know how this works for you.

hello.PNG

Thanks for the code hbmaddog. Of course it works.

But up to this point I have come with the use of jSignature_onExecute.js and signature.class.php. There we stopped (signature.class.php) when it is necessary to save the image in the tmp folder.

My problem starts from here on. How far to implement this in the form
and then the image signature stored in a MySQL database.

It looks like you’ve mastered. Therefore, I will let you I ask for further help, if possible.

That’s why I liked fabricjs…It allows you to draw on it…You can export to svg through the API (basically a text file)…Save this data to any DB…Then load the image again when needed.

It will take a little work, but you may be best to use a Control Application inside Scriptcase, especially if it is only a few fields…I don’t want to get you side tracked there…Maybe others have comments?

I don’t have experience with the other libraries you mentioned…But you should be able to save the signature in svg format inside the DB with this info…