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>