Topaz Signature Pad with ReactJS

What if I told you while using ReactJS you are able to use the Topaz Signature Pad.

For this project we’re using the T-L462-HSB-R Signature Pad.

Download the devices respective software from https://www.sigpluspro.com/. There you can now either download the sdk and/or view source code.

This project uses the SigWeb Browser SDK for web applications.

Download the .exe installer for the device (This executable file is found on the SigWeb Installation Help Guide) from https://www.topazsystems.com/software/sigweb.exe, this allows the web application to communicate with the devices USB driver. Go ahead and download the SigWeb Test Utility to test the device was installed correctly.

Now for the Javascript portion.

Download the SigWebTablet.js file which will be our main modifiable code for the device.

Upon importing the file you should see a few errors, this can be easily solved with a few modifications.

1. Add window class to webkitURL e.g. window.webkitURL
2. Add window class to location e.g. window.location
3. Add window class to ActiveXObject e.g. window.ActiveXObject
4. For [xs, ys, canvas, and v] those may either be ignored by commenting those functions or by creating local variables within those functions to avoid the error. (Since we don’t use these functions do not worry deleting them either)

SigWebLCD1x5Demo.htm

From the source code and demos link from the sdk page, you will see a link for SigWeb Browser SDK, here you can find a few examples. Instead of selecting the basic examples we will select the Interactive Demo 1x5.

Once the webpage demo is open try out the interactive demo. Once you get the gist of it, you may now retireve the source code by opening your browsers inspector window (e.g. Chrome’s shortcut key Alt+Ctl+j ). Now in the source tab select the file SigWebLCD1x5Demo.htm (the source code for this demo should now be viewable), we will be using most of this code to make our Topaz Sig Web App.

SigWebTablet.js

Back to SigWebTablet.js, we will now move some code from SigWebLCD1x5Demo.htm to SigWebTablet.js. The code below is placed above the original code from SigWebTablet.js, We add export functions as well as variables, not to mention a listener function.

Notice how I do not include all the listeners, this reason is due to my state variable that I pass down to startTablet() function, which causes my canvas to re-render upon setState().

Reason being we just attach our new functions on top of SigWebTablet.js vs making a separate .js file is due the multiple dependencies certain variables have. To make things easier we use a single file for SigWeb Sdk.

ReactJS

I personally use Material-UI for my projects, but please use your preferred React Bootstrap.

App.js

And that’s it….

You should now have a functioning Topaz tablet upon ‘start’.

Thank you, let me know in the comment section if you have any suggestions or questions.