topaz_sigweb.html.erb

<script type="text/javascript">
    var tmr;

    function onSign()
    {
        var ctx = document.getElementById('cnv').getContext('2d');
        SetDisplayXSize( 500 );
        SetDisplayYSize( 100 );
        SetJustifyMode(0);
        ClearTablet();
        tmr = SetTabletState(1, ctx, 50);
    }

    function onClear()
    {
        ClearTablet();
    }

    function onDone()
    {
        if(NumberOfTabletPoints() == 0)
        {
            alert("Please sign before continuing");
        }
        else
        {
            SetTabletState(0, tmr);
            //RETURN TOPAZ-FORMAT SIGSTRING
            SetSigCompressionMode(1);
//            document.FORM1.bioSigData.value=GetSigString();
//            document.FORM1.sigStringData.value += GetSigString();
            //this returns the signature in Topaz's own format, with biometric information


            //RETURN BMP BYTE ARRAY CONVERTED TO BASE64 STRING
            SetImageXSize(500);
            SetImageYSize(100);
            SetImagePenWidth(5);
            GetSigImageB64(SigImageCallback);


        }
    }

    function SigImageCallback( str )
    {
        document.FORM1.sigImageData.value = str;
        $('.SigForm').submit();
    }


</script>

<script type="text/javascript">
    window.onunload = window.onbeforeunload = (function(){
        closingSigWeb()
    });

    function closingSigWeb()
    {
        ClearTablet();
        SetTabletState(0, tmr);
    }

</script>
<table border="1" cellpadding="0"  width="500" class="mbm">
  <tr>
    <td height="100" width="500">
<canvas id="cnv" name="cnv" width="500" height="100"></canvas>
    </td>
  </tr>
</table>

<%= simple_form_for :signature, url: post_url, html: {name: 'FORM1', class: 'SigForm'} do |f| %>
    <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()" class="btn btn-warning">&nbsp;&nbsp;&nbsp;&nbsp;

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

      <input type="HIDDEN" name="bioSigData">
      <input type="HIDDEN" name="sigImgData">
      <br>
      <br>
      <INPUT TYPE=HIDDEN NAME="sigImageData" id="sigImageData">
    </p>
<% end %>

<script type="text/javascript">
    $(function() {
        onSign();
    });
</script>