You are viewing limited content. For full access, please sign in.

Question

Question

Topaz signature Pads and Laserfiche Forms

asked on November 4, 2015

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()">&nbsp;&nbsp;&nbsp;&nbsp;
<input id="button1" name="ClearBtn" type="button" value="Clear" onclick="javascript:onClear()">&nbsp;&nbsp;&nbsp;&nbsp;

<input id="button2" name="DoneBtn" type="button" value="Done" onclick="javascript:onDone()">&nbsp;&nbsp;&nbsp;&nbsp;

</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.

sigdata.PNG
sigdata.PNG (11.98 KB)
0 0

Answer

SELECTED ANSWER
replied on November 4, 2015

Download and install the appropriate version of the SigWeb Browser API onto the Forms Server. Then add the following JavaScript to your form:

var baseUri = "http://localhost:47289/SigWeb/";

function initSigWeb(){
        var ctx = $("#sigTabContent .signatureSettings").getContext('2d');
          ResetParameters();
        SigWebSetDisplayTarget(ctx);
        tmr = setInterval(SigWebRefresh, 50);
        SetDisplayXSize(438);
        SetDisplayYSize(150);
    SetJustifyMode(0);
        SetTabletState(1);
        $("#form-signature-dlg").on("shown.bs.modal", function(){
              $("#sigNav a:eq(1)").click();
                KeyPadClearHotSpotList();
                ClearSigWindow(1);
               ClearTablet();
              SetLCDCaptureMode(2);
              $("button.signSignatureBtn").removeAttr("disabled");
        });
          $("span.clearSignature").on("click", function(){
              SetLCDCaptureMode(1);
              KeyPadClearHotSpotList();
                ClearSigWindow(1);
               ClearTablet();
              $("button.signSignatureBtn").removeAttr("disabled");
              setTimeout(function(){SetLCDCaptureMode(2);}, 2000);
          });
          $("#form-signature-dlg").on("hidden.bs.modal", function(){
            SetLCDCaptureMode(1);
              KeyPadClearHotSpotList();
                ClearSigWindow(1);
               ClearTablet();
    });
}

$(document).ready(function(){
  $.getScript("http://localhost:47289/SigWeb/SigGetScript/SigWeb.js", initSigWeb);
});

In order to be able to use the Topaz signature pad to sign, the pad must be on and connected prior to opening the form. If the pad is connected after the form is open, just refresh the page.

The basic steps are to open the signature field dialog in the form, sign on the signature pad, and the signature will appear. You can click on the "x" button to clear the signature (may take a few seconds). To save the signature, click the "sign" button and then it will show up in the form.

Lastly, with this JavaScript in place, you are no longer able to use the mouse to draw the signature on the screen.

This has been tested internally with models T-LBK43LC-HSB-R and T-LBK460-HSB-R

2 0
replied on September 24, 2018

They no longer seem to offer the Sig Web Browser API on the link provided. Instead they seem to have a SigWebTablet.js file. Are we using that now instead?

0 0
replied on October 3, 2018

I contacted Topaz support. You no longer have to install anything on the server, you need to install on the workstation now. That is why all the script references are referring to "localhost".

0 0
replied on October 31, 2018

What do you have to install on the client? I can't seem to download the sigweb.exe file any more...

0 0
replied on October 31, 2018

Working from this end. I am using this link: : www.topazsystems.com/software/sigweb.exe

0 0
replied on December 27, 2019

the script does work in IE and Chrome but not Edge. Is there any solution to this issue?

0 0
replied on December 27, 2019

I'd honestly wait for the Edge Chromium update coming January 15th, 2020. After that, scripts should behave the same in Edge as they do in Chrome. I wouldn't put effort into solving a problem that disappears by itself in two weeks.

You can download a beta insider build of Edge Chromium to test out today here:

Microsoft Edge Insider Channel

 

0 0

Replies

replied on May 26, 2016 Show version history

Hi all,

The following is an unofficial workaround to the issue of a signature field requiring a click on the canvas to not throw the "Please provide your signature" error message on submission even when one has been drawn with a Topaz signature pad.

There are two parts to the workaround.

1. Updated JavaScript code that wraps the initSigWeb function as a JQuery object so it can be easily detected by Forms. The code is below.

var baseUri = "http://localhost:47289/SigWeb/";

$.initSigWeb = function(){
  var ctx = $("#sigTabContent .signatureSettings").getContext('2d');
  ResetParameters();
  SigWebSetDisplayTarget(ctx);
  tmr = setInterval(SigWebRefresh, 50);
  SetDisplayXSize(438);
  SetDisplayYSize(150);
  SetJustifyMode(0);
  SetTabletState(1);
  
  $("#form-signature-dlg").on("shown.bs.modal", function(){
    $("#sigNav a:eq(1)").click();
    KeyPadClearHotSpotList();
    ClearSigWindow(1);
    ClearTablet();
    SetLCDCaptureMode(2);
    $("button.signSignatureBtn").removeAttr("disabled");
  });
  				
  $("span.clearSignature").on("click", function(){
    SetLCDCaptureMode(1);
    KeyPadClearHotSpotList();
    ClearSigWindow(1);
    ClearTablet();
    $("button.signSignatureBtn").removeAttr("disabled");
    setTimeout(function(){SetLCDCaptureMode(2);}, 2000);
  });
  
  $("#form-signature-dlg").on("hidden.bs.modal", function(){
    SetLCDCaptureMode(1);
    KeyPadClearHotSpotList();
    ClearSigWindow(1);
    ClearTablet();
  });
}

$(document).ready(function(){
  if (!window.isPrintMode){
    $.getScript("http://localhost:47289/SigWeb/SigGetScript/SigWeb.js", $.initSigWeb);
  }
});

2. Adding an additional condition to the check that produces the error message so it won't trigger if initSigWeb is detected. The check is in the forms.js file which has the default path "C:\Program Files\Laserfiche\Laserfiche Forms\Forms\js\form\forms.js".
I have attached a forms.js file with the modification for Forms Version 10.1.0.559 (Forms 10.1 release build) that is almost a drop-in replacement. Simply rename the file to "forms" with a .js extension. Make a backup copy of the existing one first!

If you're using a different version or wish to make the change yourself, do the following:

  1. Create a backup copy of forms.js and save it as forms - original/unaltered/etc.js
  2. Open forms.js in your favorite text editor (Notepad++ and Atom are great)
  3. Find the following function: 
    $('.signSignatureBtn').on('click',function(){if($('#sigNav li.active').index()==1&&Signature.sigPad.isEmpty()&&$.initSigWeb==undefined){alert(localize('WRN_NO_SIG'));return false;}else{Signature.acceptsignature();if(Signature.cacheEnabled){Signature.Cache.Add(Signature.curSignatureFieldId,Signature.currentSig);}}});
    
    Shown here with formatting for readability:
    $('.signSignatureBtn').on('click',function(){
    	if($('#sigNav li.active').index()==1&&Signature.sigPad.isEmpty()&&$.initSigWeb==undefined){
    		alert(localize('WRN_NO_SIG'));
    		return false;
    	}else{
    		Signature.acceptsignature();
    		if(Signature.cacheEnabled){
    			Signature.Cache.Add(Signature.curSignatureFieldId,Signature.currentSig);
    		}
    	}
    });

    Then, add &&$.initSigWeb==undefined to the end of the first if statement so it reads:

    if($('#sigNav li.active').index()==1&&Signature.sigPad.isEmpty()&&$.initSigWeb==undefined)

    And save the file. This addition changes the condition for the error message displaying so that it can only be met when a form isn't utilizing the SigWeb SDK (as it is implemented in the first code block). 

Then fire up Forms and test it out. Let me know if this works for you, if there are any questions, or if you encounter any issues along the way!

**Important Notes**

  • This workaround involves modifying Laserfiche Forms' source code (however slightly) and you do so at your own risk
  • Upgrading Forms versions will overwrite the change to forms.js, requiring it to be re-implemented after an upgrade
2 0
replied on May 27, 2016

Samuel,

This certainly gets rid of that click event issue, but I have one strange thing happening :)

 

When I click 'Sign' it brings up the capture box, and sets to the Draw tab for pen input.  After 4-5 seconds it changes back to the Type tab.  Whether I'm giving it input or not, the behavior continues.  I can click the draw tab again, but it certainly interferes with the input.

 

0 0
replied on May 27, 2016

Fixed that little issue.

 

Replaced this

$("#form-signature-dlg").on("shown.bs.modal", function(){
    $("#sigNav a:eq(1)").click();
    KeyPadClearHotSpotList();
    ClearSigWindow(1);
    ClearTablet();
    SetLCDCaptureMode(2);
    $("button.signSignatureBtn").removeAttr("disabled");
  });

 

With this

$("#sigNav a:eq(0)").hide();

$("#form-signature-dlg").on("shown.bs.modal", function(){$("#sigNav a:eq(1)").click();});

 

It completely hides the type tab instead of just setting the other active.  Credit to Abby Shen on this post

https://answers.laserfiche.com/questions/64136/With-the-new-signature-field-option-is-there-a-way-to-force-users-to-draw-a-signature-instead-of-allowing-them-to-type-one

1 0
replied on November 4, 2015

Thanks so much Alex, works perfectly!

0 0
replied on November 6, 2015

I have this working as well.

 

However, when I go to save it as a tiff or pdf through a workflow, it is unable to save it to the repository.

I get this error message:

Exit with code 1 due to network error: ConnectionRefusedError

Does anyone know how to make this work?

0 0
replied on November 6, 2015

Hi Dane,

To confirm, this issue only occurs when you added the JS to allow submitters to sign from a Topaz device? If you remove the signature field and JS from the form and then have users re-submit a new form submission, then that gets saved to the repository correctly?

Regardless, it may be best to contact your Laserfiche reseller to open a support case for the matter so this issue can be further investigated.

Regards

0 0
replied on November 6, 2015

Correct, this issue only occurs when the JS is in place to allow users to sign from a Topaz device.  Without the JS the form submitted correctly.

 

Thanks we will contact our reseller.

0 0
replied on November 10, 2015

Alexander, 
Do you have any suggestions as to how I can get around this issue? 

0 0
replied on November 10, 2015

Hi Dane,

Not at the moment. It doesn't appear that a support case has been opened for the matter yet. It's best to troubleshoot through there rather than on this Answers thread. When you have a moment, please contact your Laserfiche reseller to open a support case so we can investigate further. When you do open a support case, please also provide the exported business process (.xml) as well as the unfiltered Application event log from the Forms server saved in its native format.

Regards

0 0
replied on November 16, 2015

On way around this is to check if the form has been submitted or not. I have found that when the form has been submitted, all the input fields are replaced with div elements with a class of "cf-medium". Using this logic, you could check if the form has been submitted, and if so, do not load the "initSigWeb" function, even go as far as not loading the sigweb.js.

0 0
replied on November 19, 2015

Ruel,

Are you having this same issue or is it working properly for you?

0 0
replied on November 19, 2015

Try this updated JS

var baseUri = "http://localhost:47289/SigWeb/";

function initSigWeb(){
        var ctx = $("#sigTabContent .signatureSettings").getContext('2d');
          ResetParameters();
        SigWebSetDisplayTarget(ctx);
        tmr = setInterval(SigWebRefresh, 50);
        SetDisplayXSize(438);
        SetDisplayYSize(150);
    SetJustifyMode(0);
        SetTabletState(1);
        $("#form-signature-dlg").on("shown.bs.modal", function(){
              $("#sigNav a:eq(1)").click();
                KeyPadClearHotSpotList();
                ClearSigWindow(1);
               ClearTablet();
              SetLCDCaptureMode(2);
              $("button.signSignatureBtn").removeAttr("disabled");
        });
          $("span.clearSignature").on("click", function(){
              SetLCDCaptureMode(1);
              KeyPadClearHotSpotList();
                ClearSigWindow(1);
               ClearTablet();
              $("button.signSignatureBtn").removeAttr("disabled");
              setTimeout(function(){SetLCDCaptureMode(2);}, 2000);
          });
          $("#form-signature-dlg").on("hidden.bs.modal", function(){
            SetLCDCaptureMode(1);
              KeyPadClearHotSpotList();
                ClearSigWindow(1);
               ClearTablet();
    });
}

$(document).ready(function(){
 if (!window.isPrintMode){
  $.getScript("http://localhost:47289/SigWeb/SigGetScript/SigWeb.js", initSigWeb);
 }
});

initSigWeb is called conditionally on document ready.

2 0
replied on November 20, 2015

Thank you! This fixed the problem I was coming across. 

0 0
replied on March 24, 2017

@████████  I don't suppose you happen to know if different JS is needed for 10.2, do you?

 

I have what you posted above working perfectly with 10.1.  We just installed 10.2 on a test server & repository to try things out, and it is sadly not working any longer.

 

Any tips?

 

Thanks!

0 0
replied on March 24, 2017
1 0
replied on March 24, 2017

Hey! Fantastic.  Thanks

0 0
replied on April 28, 2016

Hi All,

Have any of you had success deploying with SSL? 

0 0
replied on May 11, 2016

I'm noticing one issue... Capture box is still waiting for a click event before it will allow you click sign. 

 

So I'm having to click on the box and then click sign before signature appears on form

 

0 0
replied on May 19, 2016

Did you ever solve this?  Having the same issue implementing the Topaz units.

0 0
replied on May 20, 2016

No I haven't resolved it yet

0 0
replied on May 26, 2016

Hi Cedric and Kyle,

Please see my post in this thread below or at the following direct link:

https://answers.laserfiche.com/questions/86327/Topaz-signature-Pads-and-Laserfiche-Forms#98777

1 0
replied on May 19, 2016

I'm having the same issue as Cedric.  I'm not a java guy so being able to copy and paste the sample above was awesome!  However it displays an error popup "Please provide your signature"  and won't accept it until you give the capture box some kind of input from the mouse.  Once that click event happens inside the capture area, I can click sign and the signature from the Topaz device is saved fine.

 

Any thoughts? 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.