How to access Topaz Signature Pad ActiveX object through javascript?

Question

We are using the Topaz Systems signature pad device for recording electronic signatures on documents.

Here is the company provided demo for javascript usage:

Javascript-based HTML Internet Signature demo download

The signature pad is added to the page through an <OBJECT /> element.

 <OBJECT classid=clsid:69A40DA3-4D42-11D0-86B0-0000C025864A height=75
         id=SigPlus1 name=SigPlus1
         style="HEIGHT: 90px; WIDTH: 300px; LEFT: 0px; TOP: 0px; border: 1px solid #000; margin-top:10px; " VIEWASTEXT>
     <PARAM NAME="_Version" VALUE="131095">
     <PARAM NAME="_ExtentX" VALUE="4842">
     <PARAM NAME="_ExtentY" VALUE="1323">
     <PARAM NAME="_StockProps" VALUE="0">
 </OBJECT>

The documentation for performing actions on the object in javascript references VBScript and calls the object by id only.

<script language="javascript">  

    function OnClear() {
       SigPlus1.ClearTablet();
    }

    function OnCancel() {
       SigPlus1.TabletState = 0;
    }

</script>

I found that this approach fails to find the actual object in the DOM with all associated methods and attributes. Calling these functions results in:

SigPlus1 is undefined

OR

SigPlus1.ClearTablet() is not a function

How can I get the actual object in the javascript functions in order to call its methods and set its properties?

I have tried using prototype and jQuery to select the object in the DOM.

var vsig = $('SigPlus1');  // prototype
var vsig = $('#SigPlus1'); // jQuery
var vsig = document.form.SigPlus1; // document

None of which give the actual object required.

Thanks!

Answer 1

I was able to get the actual object by using document.getElementById(id);

So this code ended up working:

var vSig = document.getElementById('SigPlus1');

I hope this saves someone else from having to search for this answer!

Answer 2

I've managed to get it working by ignoring the "script" function for OnSign() and replacing the onclick="OnSign()" in my button with:

<INPUT id="SignBtn" name="SignBtn" type="button" value="Sign" onclick="javascript:SigPlus1.TabletState = 1;">

(ie I just took the javascript code from the section and used it directly instead of as a function.

I suppose my question is in relation to your answer, what do I do with the variable vSig once it is set by getElementbyId? As I'd prefer to leave the code within my script section.

Thanks

Answer 3

Once you have vSig initialized, you can call the associated functions and access the properties of the signature. For example the "Save Signature' button onclick should fire something like this:

function OnSaveSignature() {
    var vSig = document.getElementById('SigPlus1');
    if(vSig.NumberOfTabletPoints == 0){ // No signature data (Did not sign yet)
        alert("No Signature Found!");
    } else {
        vSig.TabletState = 0;  // Turn off sig tablet 
        vSig.SigCompressionMode = 1;  // Set compression mode
        mySaveSigFunction(vSig.SigString);  // Save sig data
    }  // Done!
}