Our company has quite a few of these Topaz T-S 460 signature pads. we're trying to integrate them with Laserfiche forms, since the budget doesn't allow for mass purchase of tablets or touch screen PCs.
Ideally what I'd like is a way to add an option to capture the signature pad input within the signature dialog popup, but I'm not confident enough to fiddle with the JS files and not destroy anything.
Topaz provides an API for access to the signature pads http://www.topazsystems.com/sigweb.html and it references a javascript file which I've linked via the css and javascript option.
So far I've been able to get the control to show on a Laserfiche form, using the custom HTML control. I've also been able to get the signature image data passed to a form field. The problem is the once the form is submitted, the custom HTML signature isn't saved and I can't think of a way to pass the signature image data into an image tag without refreshing the page.
The following is the code in the custom html field.
<table border="1" cellpadding="0" width="500"> <tbody><tr> <td height="100" width="500"> <canvas id="cnv" name="cnv" width="500" height="100"></canvas> </td> </tr> </tbody></table> <br> <canvas name="SigImg" id="SigImg" width="500" height="100"></canvas> <p> <input id="SignBtn" name="SignBtn" type="button" value="Sign" onclick="javascript:onSign()"> <input id="button1" name="ClearBtn" type="button" value="Clear" onclick="javascript:onClear()"> <input id="button2" name="DoneBtn" type="button" value="Done" onclick="javascript:onDone()"> </p>
The following is the javascript I've used.
$(document).ready(function(){ $("#sigNav a:eq(0)").hide(); $("#form-signature-dlg").on("shown.bs.modal", function(){$("#sigNav a:eq(1)").click();});7 }); $(document).ready(function () { $.getScript('https://www.sigplusweb.com/SigWebTablet.js') }); var tmr; function onSign() { var ctx = document.getElementById('cnv').getContext('2d'); SetDisplayXSize( 500 ); SetDisplayYSize( 100 ); SetJustifyMode(0); ClearTablet(); tmr = SetTabletState(1, ctx, 50) || tmr; } function onClear() { ClearTablet(); } function onDone() { if(NumberOfTabletPoints() == 0) { alert("Please sign before continuing"); } else { SetTabletState(0, tmr); //RETURN TOPAZ-FORMAT SIGSTRING SetSigCompressionMode(1); var elem = document.getElementById("Field66"); elem.value = GetSigString(); SetImageXSize(500); SetImageYSize(100); SetImagePenWidth(5); GetSigImageB64(SigImageCallback); } } function SigImageCallback( str ) { var elem2 = document.getElementById("Field65"); elem2.value = str; } window.onunload = window.onbeforeunload = (function(){ closingSigWeb() }) function closingSigWeb() { ClearTablet(); SetTabletState(0, tmr); }
Any help would be greatly appreciated.