Tutorial: 04 - Using EasyScript with jSignature

04 - Using EasyScript with jSignature

The jSignature library is a commonly used touch screen / mouse signature capture library written in JavaScript. It's possible to integrate Scriptel's ScripTouch EasyScript with this library so that you can capture signatures from touch screen's, mice and ScripTouch digitizers.

#Example Application In this example we'll show a simple signature capture application using jSignature. The included files jquery.js and jSignature.min.js can be found in the jSignature package. The scriptel-easyscript.js file is included with this package.

<!DOCTYPE html>
<html>
    <head>
        <title>EasyScript with jSignature Integration Example</title>
        <script type="application/javascript" src="jquery.js"></script>
        <script type="application/javascript" src="jSignature.min.js"></script>
        <script type="application/javascript" src="scriptel-easyscript.js"></script>
        <script type="application/javascript">
            function doExample() {
                var signature = $("#signature");

                //Initialize jSignature
                signature.jSignature();

                //Initialize EasyScript Library
                var escript = new ScriptelEasyScript();

                //Add Signature Listener to Document.
                escript.addSignatureListener(document.body);

                //When a signature is heard convert the signature and send it to jSignature.
                escript.registerSignatureCallback(function(sig) {
                    var hScale = signature.width() / escript.signatureProtocol.width;
                    var vScale = signature.height() / escript.signatureProtocol.height;

                    //Scale the image proportionally to the lesser of the horizontal or vertical scale.
                    var scale = (hScale < vScale) ? hScale : vScale;

                    //Convert from the EasyScript data structure to jSignature's.
                    var stroke, point, raw = [];
                    for(stroke = 0; stroke < sig.strokes.length; stroke++) {
                        raw[stroke] = { "x":[], "y":[] };
                        for(point = 0; point < sig.strokes[stroke].length; point++) {
                            raw[stroke]['x'][point] = Math.round(sig.strokes[stroke][point].x * scale);
                            raw[stroke]['y'][point] = Math.round(sig.strokes[stroke][point].y * scale);
                        }
                    }

                    //Notify jSignature of the new data.
                    signature.jSignature("setData", raw, "native");
                });
            }
        </script>
    </head>
    <body onload="doExample();">
        <div id="signature" style="width: 480px; height: 128px; border: 1px solid black"></div>
    </body>
</html>