Personal tools
Navigation
 

Signature Pad for both Prescriptions and Eforms - html file

To be uploaded to the image folder (not the eform folder)

HTML icon SignaturePad(RxNeForms).htm — HTML, 6 kB (6371 bytes)

File contents

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Signature Pad(Rx+eForms)</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="../share/css/TabletSignature.css" media="screen"/>
<script type="text/javascript" src="displayImage.do?imagefile=mouse.js"></script>
<script>init_mouse=init;</script>
<script type="text/javascript" src="../share/javascript/TabletSignature.js"></script>
<script>
function jsg_init() {
	document.querySelector('#clear').addEventListener('click', jsg_clearCanvas, false);
	document.querySelector('#save').addEventListener('click', jsg_saveCanvas, false);
	canvas.addEventListener('mousedown', jsg_onMouseDown, false);	
	canvas.addEventListener('touchstart', jsg_onTouchStart, false);
}	
function jsg_onMouseDown(theEvent){
	theEvent.preventDefault();
	canvas.addEventListener('mousemove', jsg_onMouseMove, false);
	canvas.addEventListener('mouseup', jsg_onMouseUp, false);
	canvas.addEventListener('mousecancel', jsg_onMouseCancel, false);
	Xposition.push(theEvent.clientX);Yposition.push(theEvent.clientY);
}	
function jsg_onMouseMove(theEvent){theEvent.preventDefault();GetXY(theEvent.clientX,theEvent.clientY);}	
function jsg_onMouseUp(theEvent){theEvent.preventDefault();SetDrawOn();StrokeThickness=0;DrawMarker();StrokeThickness=3;}
function jsg_onMouseCancel(theEvent) {
	canvas.removeEventListener('mousemove', jsg_onMouseMove, false);
	canvas.removeEventListener('mouseend', jsg_onMouseEnd, false);
	canvas.removeEventListener('mousecancel', jsg_onMouseCancel, false);		
}
function jsg_onTouchStart(theEvent){
	theEvent.preventDefault();
	if (theEvent.touches.length==1){
		Xposition.push(theEvent.touches[0].clientX);
		Yposition.push(theEvent.touches[0].clientY);
		canvas.addEventListener('touchmove', jsg_onTouchMove, false);
		canvas.addEventListener('touchend', jsg_onTouchEnd, false);
		canvas.addEventListener('touchcancel', jsg_onTouchCancel, false)	
	}
}	
function jsg_onTouchMove(theEvent){	
	theEvent.preventDefault();if (theEvent.touches.length==1){GetXY(theEvent.touches[0].clientX,theEvent.touches[0].clientY)}
}	
function jsg_onTouchEnd(theEvent){
	theEvent.preventDefault();if(theEvent.touches.length==0){SetDrawOn();StrokeThickness=0;DrawMarker();StrokeThickness=3}		
}	
function jsg_onTouchCancel(theEvent){
	canvas.removeEventListener('touchmove', jsg_onTouchMove, false);
	canvas.removeEventListener('touchend', jsg_onTouchEnd, false);
	canvas.removeEventListener('touchcancel', jsg_onTouchCancel, false);		
}
function jsg_clearCanvas(){document.getElementById("DrawData").value="";SubmitData=new Array();DrawData=new Array();TempData=new Array();x0=0;y0=0;}
function jsg_saveCanvas(){}
function jsg_loaded(){if(canvas.getContext){jsg_init()}}
window.addEventListener("load", jsg_loaded, true);
</script>
<script type="text/javascript" src="../share/javascript/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="../share/javascript/jquery/jquery.form.js"></script>
<script type="text/javascript" src="displayImage.do?imagefile=jsgraphics.js"></script>
</head>
<script type="text/javascript">
var _in_window = true;
saveCanvas=function(){
	if(document.location.href.lastIndexOf('eform/displayImage.do')){
		var theContextRoot = document.location.href.replace(document.location.search,'').replace('eform/displayImage.do','');
		var theScratchPadLink=theContextRoot+'/scratch/index.jsp';
		var request=new XMLHttpRequest();
		request.open('GET', theScratchPadLink, false);
		request.send();
		if (request.status==200) {
			var theFormStart=request.responseText.indexOf('<form');
			var theTextAreaStart=request.responseText.indexOf('<textarea');
			var theFields=request.responseText.substring(theFormStart,theTextAreaStart);
			var theExpression =/<input[\s\S]*?name="([\s\S]*?)"[\s\S]*?value="([\s\S]*?)"[\s\S]*?>/gim;
			var theMatch;
			var theFormData = new FormData();
			while (theMatch=theExpression.exec(theFields)){
				switch (theMatch[1]) {
				    case "providerNo":
					theFormData.append("providerNo", theMatch[2]);
					break;
				    case "id":
					theFormData.append("id", theMatch[2]);
					break;
				    case "windowId":
					theFormData.append("windowId", theMatch[2]);
					break;
				}			
			}
			theFormData.append("dirty", '1');
			theTextAreaStart=request.responseText.indexOf('>',theTextAreaStart)+1;
			theTextAreaStop=request.responseText.indexOf('</textarea');
			var theTextArea = request.responseText.substring(theTextAreaStart,theTextAreaStop);
			theTextAreaStop=theTextArea.indexOf('***eFormSIGNATURE***');
			if(theTextAreaStop>-1){
				theTextArea=theTextArea.substring(0,theTextAreaStop);
			}
			theTextArea+='***eFormSIGNATURE***'+document.getElementById("DrawData").value+'***eFormSIGNATURE***'+'***SIGNATURE***'+canvas.toDataURL("image/png");
			theFormData.append("scratchpad", theTextArea);
			var request=new XMLHttpRequest();
			request.open('POST', theContextRoot+'Scratch.do', false);
			request.send(theFormData);
			document.getElementById('clear').click();
		}
	}
};
</script>
<body onload="init_mouse();SetSwitchOn('Freehand');" style="background-color: #555">
<div class="verticalCenterDiv">
	<div class="centerDiv">
		<canvas id='canvas'></canvas>
		<div><span id="signMessage" style="color:#FFFFFF;">Please sign in the box above this message.</span><button id="clear" style="display:none">Clear</button><button id="save" style="display:none;">Send Signature</button></div>
	</div>
</div>
<form>
<input type="hidden" name="DrawData" id="DrawData">
</form>
<div id="preview">
</div>	
<div id="myCanvas"
		onmouseover="SetDrawOn();"
		onmouseout="SetDrawOff();"
		onmousedown="SetMouseDown(); SetStart();" 
		onmouseup="SetMouseUp(); DrawMarker();"
		onmousemove="DrawPreview();"
		ontouchstart="SetDrawOn();SetMouseDown(); SetStart();" 
		ontouchmove="DrawPreview();"
		ontouchend="SetMouseUp(); DrawMarker();SetDrawOff();"		
		style="display: none;"
>
<canvas></canvas>		
</div>
<script type="text/javascript" src="displayImage.do?imagefile=jsgraphics_part2.js"></script>
</body>
</html>

Document Actions

 

Download button

DOWNLOAD OSCAR FOR TESTING

 

eForms button

DOWNLOAD SHARED E-FORMS


 Customize button

FIND PLUG-INS AND TWEAKS
FOR YOUR OSCAR EMR

 

Subscribe Button

SUBSCRIBE TO DISCUSSION LIST 
(SEE ALL LISTS)

  

Help button

ACCESS THE ONLINE MANUALS
(PAID SUPPORT)