Signature Pad for both Prescriptions and Eforms - html file
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