# 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>