SAPUI5: Digital Signature Pad

1.   Introduction

This document contains the functionality to draw the digital Signature on Signature Pad in SAP UI5 application. For this, I have used the HTML5 control. Users can draw the digital Signature on Signature Pad and can download the signature performed on .JPEG format. If signature is not performed correctly, then user can use the clear button to clear the signature pad and draw the signature again.

2.   Prerequisite

• Eclipse with SAP UI5 plugin (1.28 or higher).

3.   SAP UI5 Control

sap.ui.core.HTML is used to implement the Digital Signature Pad.

4.   XML View Code

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m" controllerName="sap.ui.demo.myFiori.views.SignPad"
	xmlns:html="http://www.w3.org/1999/xhtml">
	<Page title="Digital Signature Pad">
		<content>
			<VBox>
				<core:HTML id="html">
				</core:HTML>
			</VBox>
			<VBox>
				<HBox>
<Button id="Signature" text="Signature" press="onSign"> </Button>
					<Button id="Save" text="Save" press="saveButton"></Button>
					<Button id="clear" text="Clear" press="clearButton"></Button>
				</HBox>
			</VBox>
		</content>
	</Page>
</core:View>

5.   JS Controller Code

sap.ui.controller("views.SignPad_Edited", {

	onInit: function() {
		this.getView().byId("html").setContent("<canvas id='signature-pad' width='400' height='200' class='signature-pad'></canvas>");
	},
	
	/******************Signature Pad Draw************************/
	
	onSign : function(oEvent){
		var canvas = document.getElementById("signature-pad");
		var context = canvas.getContext("2d");
		canvas.width = 276;
		canvas.height = 180;
		context.fillStyle = "#fff";
		context.strokeStyle = "#444";
		context.lineWidth = 1.5;
		context.lineCap = "round";
		context.fillRect(0, 0, canvas.width, canvas.height);
		var disableSave = true;
		var pixels = [];
		var cpixels = [];
		var xyLast = {};
		var xyAddLast = {};
		var calculate = false;
		{ 	//functions
			function remove_event_listeners() {
				canvas.removeEventListener('mousemove', on_mousemove, false);
				canvas.removeEventListener('mouseup', on_mouseup, false);
				canvas.removeEventListener('touchmove', on_mousemove, false);
				canvas.removeEventListener('touchend', on_mouseup, false);

				document.body.removeEventListener('mouseup', on_mouseup, false);
				document.body.removeEventListener('touchend', on_mouseup, false);
			}

			function get_coords(e) {
				var x, y;

				if (e.changedTouches && e.changedTouches[0]) {
					var offsety = canvas.offsetTop || 0;
					var offsetx = canvas.offsetLeft || 0;

					x = e.changedTouches[0].pageX - offsetx;
					y = e.changedTouches[0].pageY - offsety;
				} else if (e.layerX || 0 == e.layerX) {
					x = e.layerX;
					y = e.layerY;
				} else if (e.offsetX || 0 == e.offsetX) {
					x = e.offsetX;
					y = e.offsetY;
				}

				return {
					x : x, y : y
				};
			};

			function on_mousedown(e) {
				e.preventDefault();
				e.stopPropagation();

				canvas.addEventListener('mouseup', on_mouseup, false);
				canvas.addEventListener('mousemove', on_mousemove, false);
				canvas.addEventListener('touchend', on_mouseup, false);
				canvas.addEventListener('touchmove', on_mousemove, false);
				document.body.addEventListener('mouseup', on_mouseup, false);
				document.body.addEventListener('touchend', on_mouseup, false);

				empty = false;
				var xy = get_coords(e);
				context.beginPath();
				pixels.push('moveStart');
				context.moveTo(xy.x, xy.y);
				pixels.push(xy.x, xy.y);
				xyLast = xy;
			};

			function on_mousemove(e, finish) {
				e.preventDefault();
				e.stopPropagation();

				var xy = get_coords(e);
				var xyAdd = {
					x : (xyLast.x + xy.x) / 2,
					y : (xyLast.y + xy.y) / 2
				};

				if (calculate) {
					var xLast = (xyAddLast.x + xyLast.x + xyAdd.x) / 3;
					var yLast = (xyAddLast.y + xyLast.y + xyAdd.y) / 3;
					pixels.push(xLast, yLast);
				} else {
					calculate = true;
				}

				context.quadraticCurveTo(xyLast.x, xyLast.y, xyAdd.x, xyAdd.y);
				pixels.push(xyAdd.x, xyAdd.y);
				context.stroke();
				context.beginPath();
				context.moveTo(xyAdd.x, xyAdd.y);
				xyAddLast = xyAdd;
				xyLast = xy;

			};

			function on_mouseup(e) {
				remove_event_listeners();
				disableSave = false;
				context.stroke();
				pixels.push('e');
				calculate = false;
			};
		}
		canvas.addEventListener('touchstart', on_mousedown, false);
		canvas.addEventListener('mousedown', on_mousedown, false);

	},
	
	
	/***********Download the Signature Pad********************/
	
	saveButton : function(oEvent){
		var canvas = document.getElementById("signature-pad");
		var link = document.createElement('a');
		link.href = canvas.toDataURL('image/jpeg'); 
		link.download = 'sign.jpeg';
		link.click(); 
		var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
			  backgroundColor: '#ffffff',
			  penColor: 'rgb(0, 0, 0)'
		})
	},
	
	/************Clear Signature Pad**************************/
	
	clearButton : function(oEvent){
		var canvas = document.getElementById("signature-pad");
		var context = canvas.getContext("2d");
		context.clearRect(0, 0, canvas.width, canvas.height);
		
		var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
			  backgroundColor: '#ffffff',
			  penColor: 'rgb(0, 0, 0)',
			  penWidth : '1'
		})
	}
}

6.   Saving the Signature

I am using HTML attribute tag to download the signature done on signature pad. Save method is defined as a part of controller.

saveButton : function(oEvent){
		var canvas = document.getElementById("signature-pad");
		var link = document.createElement('a');
		link.href = canvas.toDataURL('image/jpeg'); 
		link.download = 'sign.jpeg';
		link.click(); 
		var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
			  backgroundColor: '#ffffff',
			  penColor: 'rgb(0, 0, 0)'
		})
	}

7.  Scope of Application:

I have built this application as a part of POC and didn’t get chance to use it in any real time environment. This application can be used wherever we need to perform the digital signature on documents etc.

8.   Result Screens:

Before Drawing the Signature

After Drawing the Signature

Screenshot of Saved image (.JPEG format)