Wacom signature on ASP.NET forms

Question

I'm writing an ASP.NET webform application that should use Wacom tablet (STU-430) signature to sign up documents produced by the application itself.

The ASP.NET application runs on a web server and the remote client (Internet Explorer only at this time due to Wacom COM object use) owns/handle the tablet for the signature.

The webform should embed only the code to collect/capture the signature. The signature processing should be handled remotely by the web server.

Wacom HTML samples uses javascript and COM to allow client side html pages to capture the signature 'storing' the signature inside a element in the form. To make a long story short, this's is the HTML doc structure before the 'signature':

  <div id="signatureDiv">
    Signature image:<br/>
    <img id="signatureImage"/>
  </div>

and this is the HTML structure 'after' the signature:

<div id="signatureDiv">
    Signature image:<br/>
    <img id="signatureImage" src="data:image/jpeg;base64,/9j/....">
</div>

The COM object 'modify' the client site DOM structure and 'insert' the binary data of the signature image inside the img 'placeholder' ....

The question is... how can I retrieve the data of the element in client DOM structure and post it to the server so it can 'handle' the signature and process/store it correctly ?

Is it possible to 'store' the binary content of the img data inside an hiddend form field and use this as a gateway to post the data ?

Bestr Regards, Michele

Answer 1

I found the solution. Hope this can help someone else:

1) before starting to develop something that use the WACOM tablet please consider that the signature capture process can take a looong time (in my experience it tooks even 40 seconds to have the signature digitized on the form);

2) the code provided by WACOM works (at least c# examples and HTML one does) it just took so much time;

3) if you are going to develop a webform solution the HTML code sample is all that you need, plus a little JS and some C# or VB coding;

4) under Windows 8.1 64 bits systems (I still have to check on Win 7) the second time you place a signature there's a good chance that the WACOM tablet will not 'show' the signature while you are drawing it... if you press OK after blind-signing the 'signature' is anyway sent to the client. The only way to revert the system is unplugging and plugging it back in the USB port;

In the webform you have to arrange something like that:

HTML :

<link rel="stylesheet" type="text/css" href="Signature.css" />
<script type="text/javascript" src="BigInt.js"></script>
<script type="text/javascript" src="sjcl.js"></script>
<script type="text/javascript" src="Signature_encryption.js"></script>
<script type="text/javascript" src="Signature.js"></script>

<script type="text/javascript">
    var _signatureForm = null;

    function initDemo() {
        if (_signatureForm == null)
        {
            var _signatureImage = document.getElementById("signatureImage");

            _signatureForm = new SignatureForm(_signatureImage);
        }

        _signatureForm.connect();

        return false;
    }

    function signForm() {
        var _signatureImage = document.getElementById("signatureImage");
        var _hdnSignature = $("input[id$='_hdnSignature']");

        _hdnSignature.value = _signatureImage.src;

        return true;
    }
</script>

<form id="_frmMain" runat="server">
<div>
    <div id="signatureDiv">
        Signature image:<br />
        <img id="signatureImage" />
    </div>
    <div>
        Actions:<br />
        <asp:Button ID="signButton" runat="server" Text="Capture" OnClientClick="javascript: return initDemo();" />
        <asp:Button ID="_btnSign" runat="server" Text="Sign" OnClientClick="javascript: return signForm();" OnClick="_btnSign_Click" />
        <asp:HiddenField ID="_hdnSignature" runat="server" />
    </div>
</div>
<object id="wgssSTU" type="application/x-wgssSTU" ></object>
</form>

All .js files referenced in this example are those provided within Wacom SDK HTML samples.

The dirty job is done by the signForm() function that take the image and insert it in the hidden field, allowing the codebehind procedure to handle the signature.

The code behind section (C# in my case) is quite simple. Just handle the button event and decode the image:

protected void _btnSign_Click(object sender, EventArgs e)
{
    string _sImage = _hdnSignature.Value.Replace("data:image/jpeg;base64,", "");

    byte[] _rgbBytes = Convert.FromBase64String(_sImage);

    string _sImageFile = Guid.NewGuid().ToString().Replace("-", string.Empty);

    _sImageFile += ".jpg";

    using (FileStream imageFile = new FileStream(Server.MapPath("~/" + _sImageFile), FileMode.Create))
    {
        imageFile.Write(_rgbBytes, 0, _rgbBytes.Length);
        imageFile.Flush();
    }
}

Please consider that the WACOM tablet it's not embedding METADATA in the image file then it should be a good idea to do so in your code.

Best Regards, Mike