Skip to Content

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)

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

    1. Former Member

      Hi Mutyala Rao,

      Please add the following URL in  the index.html of your application then touch will work

      <script src=”https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.5.3/signature_pad.min.js”></script>

      Regards,
      Sai Ram Dinesh Pallapotu

      (0) 
  1. Raphaël Cellard

    Hello,

    There is an issue with this code if your signature pad can move in the screen through a scrolling action. In this case, you can’t use it with ‘touch’ but only with mouse.

    This is due to the fact that the position of the finger on the screen is always determined relative to the screen device itself, not relative to the content of the screen.

    In order to make the signature pad works every time, everywhere, you have to change the coding in the get_coords(e) function:

    Replace :
    var offsety = canvas.offsetTop || 0;
    var offsetx = canvas.offsetLeft || 0;

    By:
    var canvasArea = canvas.getBoundingClientRect();
    var offsety = canvasArea.top || 0;
    var offsetx = canvasArea.left || 0;

    Without this little change, your signature is displayed out of the <canvas> boundaries. Usually in a virtual and invisible area above the screen (y-position < 0).

    (0) 
  2. Devisha Bhavik

     

    This is very nice blog. I have tried and it worked fine from WebIDE as SAPUI5 application running with index.html.

     

    But, when I tried to add the same code in the another application which I had creating using Fiori Worklist template, drawing is not working.. Looks like, mouse down and other events are not getting recognized and not being triggered. Only Mouse Up event is getting triggered.

    Not sure what could be wrong.

     

    Note: I can see the signature_pad.js and custom control JS files in the developer tools in source section. That means, those files are loaded on the browser. Also, I do not get any errors on the console.

     

    It would be wonderful if someone cracks this issue.

     

    Thanks,

    Bhavik

    (0) 

Leave a Reply