Last active
September 9, 2020 15:20
-
-
Save ivanlynch/6d768fb6eae57e5d0dfaf17af2c22e91 to your computer and use it in GitHub Desktop.
Digital PAD
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <script id="sap-ui-bootstrap" | |
| type="text/javascript" | |
| data-sap-ui-libs="sap.m" | |
| data-sap-ui-theme="sap_bluecrystal" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script> | |
| </head> | |
| <body class="sapUiBody"> | |
| <div id="content"></div> | |
| <script id="jsbin-javascript"> | |
| jQuery(function() { | |
| sap.ui.core.Control.extend('SignaturePad', { | |
| metadata: { | |
| properties: { | |
| width: {type: 'int', defaultValue: 300}, | |
| height: {type: 'int', defaultValue: 100}, | |
| bgcolor: {type: 'string', defaultValue: '#ccc'}, | |
| lineColor: {type: 'string', defaultValue: '#666'}, | |
| penColor: {type: 'string', defaultValue: '#333'}, | |
| signature: 'string' | |
| } | |
| }, | |
| renderer: function(oRm, oControl) { | |
| var bgColor = oControl.getBgcolor(); | |
| var lineColor = oControl.getLineColor(); | |
| var pen = oControl.getPenColor(); | |
| var id = oControl.getId(); | |
| var w = oControl.getWidth(); | |
| var h = oControl.getHeight(); | |
| oRm.write("<div"); | |
| oRm.writeControlData(oControl); | |
| oRm.write(">"); | |
| oRm.write('<svg xmlns="http://www.w3.org/2000/svg" width="' + w + | |
| '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '">'); | |
| oRm.write('<rect id="' + id + '_r" width="' + w + '" height="' + h + | |
| '" fill="' + bgColor + '"/>'); | |
| var hh = h - 20; | |
| oRm.write('<line x1="0" y1="' + hh + '" x2="' + w + '" y2="' + hh + | |
| '" stroke="' + lineColor + | |
| '" stroke-width="1" stroke-dasharray="3" ' + | |
| 'shape-rendering="crispEdges" pointer-events="none"/>'); | |
| oRm.write('<path id="' + id + '_p" stroke="' + pen + '" stroke-width="2" ' + | |
| 'fill="none" pointer-events="none"/>'); | |
| oRm.write('</svg>'); | |
| oRm.write("</div>"); | |
| }, | |
| clear: function() { | |
| this.signaturePath = ''; | |
| var p = document.getElementById(this.getId() + '_p'); | |
| p.setAttribute('d', ''); | |
| }, | |
| onAfterRendering: function() { | |
| var that = this; | |
| this.signaturePath =''; | |
| isDown = false; | |
| var elm = this.$()[0]; | |
| var r = document.getElementById(this.getId() + '_r'); | |
| var p = document.getElementById(this.getId() + '_p'); | |
| function isTouchEvent(e) { | |
| return e.type.match(/^touch/); | |
| } | |
| function getCoords(e) { | |
| if (isTouchEvent(e)) { | |
| return e.targetTouches[0].clientX + ',' + | |
| e.targetTouches[0].clientY; | |
| } | |
| return e.clientX + ',' + e.clientY; | |
| } | |
| function down(e) { | |
| that.signaturePath += 'M' + getCoords(e) + ' '; | |
| p.setAttribute('d', that.signaturePath); | |
| isDown = true; | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| function move(e) { | |
| if (isDown) { | |
| that.signaturePath += 'L' + getCoords(e) + ' '; | |
| p.setAttribute('d', that.signaturePath); | |
| } | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| function up(e) { | |
| isDown = false; | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| r.addEventListener('mousedown', down, false); | |
| r.addEventListener('mousemove', move, false); | |
| r.addEventListener('mouseup', up, false); | |
| r.addEventListener('touchstart', down, false); | |
| r.addEventListener('touchmove', move, false); | |
| r.addEventListener('touchend', up, false); | |
| r.addEventListener('mouseout', up, false); | |
| if (this.getSignature()) { | |
| console.log('asdasda'); | |
| this.signaturePath = this.getSignature(); | |
| var p = document.getElementById(this.getId() + '_p'); | |
| if (p) { | |
| p.setAttribute('d', this.signaturePath); | |
| } | |
| } | |
| this.setSignature = function(s) { | |
| this.setProperty('signature', s); | |
| this.invalidate(); | |
| } | |
| } | |
| }); | |
| var oCtrl = new SignaturePad(); | |
| oCtrl.placeAt('content'); | |
| (new sap.m.Button({ | |
| text: 'Clear', | |
| press: function() { | |
| prevSignature = oCtrl.getSignature(); | |
| if (prevSignature) { | |
| undo.setEnabled(true); | |
| } | |
| oCtrl.clear(); | |
| } | |
| })).placeAt('content'); | |
| (new sap.m.Button({ | |
| text: 'Accept', | |
| press: function() { | |
| sap.m.MessageToast.show(oCtrl.getSignature()); | |
| } | |
| })).placeAt('content'); | |
| var prevSignature = null; | |
| var undo = new sap.m.Button({ | |
| text: 'Undo', | |
| enabled: false, | |
| press: function() { | |
| oCtrl.setSignature(prevSignature); | |
| } | |
| }); | |
| undo.placeAt('content'); | |
| }); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">jQuery(function() { | |
| sap.ui.core.Control.extend('SignaturePad', { | |
| metadata: { | |
| properties: { | |
| width: {type: 'int', defaultValue: 300}, | |
| height: {type: 'int', defaultValue: 100}, | |
| bgcolor: {type: 'string', defaultValue: '#ccc'}, | |
| lineColor: {type: 'string', defaultValue: '#666'}, | |
| penColor: {type: 'string', defaultValue: '#333'}, | |
| signature: 'string' | |
| } | |
| }, | |
| renderer: function(oRm, oControl) { | |
| var bgColor = oControl.getBgcolor(); | |
| var lineColor = oControl.getLineColor(); | |
| var pen = oControl.getPenColor(); | |
| var id = oControl.getId(); | |
| var w = oControl.getWidth(); | |
| var h = oControl.getHeight(); | |
| oRm.write("<div"); | |
| oRm.writeControlData(oControl); | |
| oRm.write(">"); | |
| oRm.write('<svg xmlns="http://www.w3.org/2000/svg" width="' + w + | |
| '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '">'); | |
| oRm.write('<rect id="' + id + '_r" width="' + w + '" height="' + h + | |
| '" fill="' + bgColor + '"/>'); | |
| var hh = h - 20; | |
| oRm.write('<line x1="0" y1="' + hh + '" x2="' + w + '" y2="' + hh + | |
| '" stroke="' + lineColor + | |
| '" stroke-width="1" stroke-dasharray="3" ' + | |
| 'shape-rendering="crispEdges" pointer-events="none"/>'); | |
| oRm.write('<path id="' + id + '_p" stroke="' + pen + '" stroke-width="2" ' + | |
| 'fill="none" pointer-events="none"/>'); | |
| oRm.write('</svg>'); | |
| oRm.write("</div>"); | |
| }, | |
| clear: function() { | |
| this.signaturePath = ''; | |
| var p = document.getElementById(this.getId() + '_p'); | |
| p.setAttribute('d', ''); | |
| }, | |
| onAfterRendering: function() { | |
| var that = this; | |
| this.signaturePath =''; | |
| isDown = false; | |
| var elm = this.$()[0]; | |
| var r = document.getElementById(this.getId() + '_r'); | |
| var p = document.getElementById(this.getId() + '_p'); | |
| function isTouchEvent(e) { | |
| return e.type.match(/^touch/); | |
| } | |
| function getCoords(e) { | |
| if (isTouchEvent(e)) { | |
| return e.targetTouches[0].clientX + ',' + | |
| e.targetTouches[0].clientY; | |
| } | |
| return e.clientX + ',' + e.clientY; | |
| } | |
| function down(e) { | |
| that.signaturePath += 'M' + getCoords(e) + ' '; | |
| p.setAttribute('d', that.signaturePath); | |
| isDown = true; | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| function move(e) { | |
| if (isDown) { | |
| that.signaturePath += 'L' + getCoords(e) + ' '; | |
| p.setAttribute('d', that.signaturePath); | |
| } | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| function up(e) { | |
| isDown = false; | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| r.addEventListener('mousedown', down, false); | |
| r.addEventListener('mousemove', move, false); | |
| r.addEventListener('mouseup', up, false); | |
| r.addEventListener('touchstart', down, false); | |
| r.addEventListener('touchmove', move, false); | |
| r.addEventListener('touchend', up, false); | |
| r.addEventListener('mouseout', up, false); | |
| if (this.getSignature()) { | |
| console.log('asdasda'); | |
| this.signaturePath = this.getSignature(); | |
| var p = document.getElementById(this.getId() + '_p'); | |
| if (p) { | |
| p.setAttribute('d', this.signaturePath); | |
| } | |
| } | |
| this.setSignature = function(s) { | |
| this.setProperty('signature', s); | |
| this.invalidate(); | |
| } | |
| } | |
| }); | |
| var oCtrl = new SignaturePad(); | |
| oCtrl.placeAt('content'); | |
| (new sap.m.Button({ | |
| text: 'Clear', | |
| press: function() { | |
| prevSignature = oCtrl.getSignature(); | |
| if (prevSignature) { | |
| undo.setEnabled(true); | |
| } | |
| oCtrl.clear(); | |
| } | |
| })).placeAt('content'); | |
| (new sap.m.Button({ | |
| text: 'Accept', | |
| press: function() { | |
| sap.m.MessageToast.show(oCtrl.getSignature()); | |
| } | |
| })).placeAt('content'); | |
| var prevSignature = null; | |
| var undo = new sap.m.Button({ | |
| text: 'Undo', | |
| enabled: false, | |
| press: function() { | |
| oCtrl.setSignature(prevSignature); | |
| } | |
| }); | |
| undo.placeAt('content'); | |
| });</script></body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery(function() { | |
| sap.ui.core.Control.extend('SignaturePad', { | |
| metadata: { | |
| properties: { | |
| width: {type: 'int', defaultValue: 300}, | |
| height: {type: 'int', defaultValue: 100}, | |
| bgcolor: {type: 'string', defaultValue: '#ccc'}, | |
| lineColor: {type: 'string', defaultValue: '#666'}, | |
| penColor: {type: 'string', defaultValue: '#333'}, | |
| signature: 'string' | |
| } | |
| }, | |
| renderer: function(oRm, oControl) { | |
| var bgColor = oControl.getBgcolor(); | |
| var lineColor = oControl.getLineColor(); | |
| var pen = oControl.getPenColor(); | |
| var id = oControl.getId(); | |
| var w = oControl.getWidth(); | |
| var h = oControl.getHeight(); | |
| oRm.write("<div"); | |
| oRm.writeControlData(oControl); | |
| oRm.write(">"); | |
| oRm.write('<svg xmlns="http://www.w3.org/2000/svg" width="' + w + | |
| '" height="' + h + '" viewBox="0 0 ' + w + ' ' + h + '">'); | |
| oRm.write('<rect id="' + id + '_r" width="' + w + '" height="' + h + | |
| '" fill="' + bgColor + '"/>'); | |
| var hh = h - 20; | |
| oRm.write('<line x1="0" y1="' + hh + '" x2="' + w + '" y2="' + hh + | |
| '" stroke="' + lineColor + | |
| '" stroke-width="1" stroke-dasharray="3" ' + | |
| 'shape-rendering="crispEdges" pointer-events="none"/>'); | |
| oRm.write('<path id="' + id + '_p" stroke="' + pen + '" stroke-width="2" ' + | |
| 'fill="none" pointer-events="none"/>'); | |
| oRm.write('</svg>'); | |
| oRm.write("</div>"); | |
| }, | |
| clear: function() { | |
| this.signaturePath = ''; | |
| var p = document.getElementById(this.getId() + '_p'); | |
| p.setAttribute('d', ''); | |
| }, | |
| onAfterRendering: function() { | |
| var that = this; | |
| this.signaturePath =''; | |
| isDown = false; | |
| var elm = this.$()[0]; | |
| var r = document.getElementById(this.getId() + '_r'); | |
| var p = document.getElementById(this.getId() + '_p'); | |
| function isTouchEvent(e) { | |
| return e.type.match(/^touch/); | |
| } | |
| function getCoords(e) { | |
| if (isTouchEvent(e)) { | |
| return e.targetTouches[0].clientX + ',' + | |
| e.targetTouches[0].clientY; | |
| } | |
| return e.clientX + ',' + e.clientY; | |
| } | |
| function down(e) { | |
| that.signaturePath += 'M' + getCoords(e) + ' '; | |
| p.setAttribute('d', that.signaturePath); | |
| isDown = true; | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| function move(e) { | |
| if (isDown) { | |
| that.signaturePath += 'L' + getCoords(e) + ' '; | |
| p.setAttribute('d', that.signaturePath); | |
| } | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| function up(e) { | |
| isDown = false; | |
| if (isTouchEvent(e)) e.preventDefault(); | |
| } | |
| r.addEventListener('mousedown', down, false); | |
| r.addEventListener('mousemove', move, false); | |
| r.addEventListener('mouseup', up, false); | |
| r.addEventListener('touchstart', down, false); | |
| r.addEventListener('touchmove', move, false); | |
| r.addEventListener('touchend', up, false); | |
| r.addEventListener('mouseout', up, false); | |
| if (this.getSignature()) { | |
| console.log('asdasda'); | |
| this.signaturePath = this.getSignature(); | |
| var p = document.getElementById(this.getId() + '_p'); | |
| if (p) { | |
| p.setAttribute('d', this.signaturePath); | |
| } | |
| } | |
| this.setSignature = function(s) { | |
| this.setProperty('signature', s); | |
| this.invalidate(); | |
| } | |
| } | |
| }); | |
| var oCtrl = new SignaturePad(); | |
| oCtrl.placeAt('content'); | |
| (new sap.m.Button({ | |
| text: 'Clear', | |
| press: function() { | |
| prevSignature = oCtrl.getSignature(); | |
| if (prevSignature) { | |
| undo.setEnabled(true); | |
| } | |
| oCtrl.clear(); | |
| } | |
| })).placeAt('content'); | |
| (new sap.m.Button({ | |
| text: 'Accept', | |
| press: function() { | |
| sap.m.MessageToast.show(oCtrl.getSignature()); | |
| } | |
| })).placeAt('content'); | |
| var prevSignature = null; | |
| var undo = new sap.m.Button({ | |
| text: 'Undo', | |
| enabled: false, | |
| press: function() { | |
| oCtrl.setSignature(prevSignature); | |
| } | |
| }); | |
| undo.placeAt('content'); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment