ACME is a local company that has hired you to create a \"Signature Pad\" used fo
ID: 3855184 • Letter: A
Question
ACME is a local company that has hired you to create a "Signature Pad" used for credit card transactions. The Signature Pad will allow the user to use their mouse to write, or sign, the pad just like you do in the real world albeit this is simulated. See image below. Allow the user to use the left mouse button, while being held down, to "sign" or draw their name on the black line provided. See image below. The Cancel button will display a dialog box that will allow the user to accept the dollar amount: not accept the dollar amount: or cancel the transaction. See image below. When the user clicks the appropriate button, the following events should occur: Closes the "Select and Option* dialog and EXISTS the ACME Credit Signature Pad (I.e. is no longer displayed. Closes the "Select and Option* dialog and "clears" the signature from the ACME Credit Signature Pad. Closes the "Select and Option" dialog and return the user back to the ACME Credit Signature Pad. The signature DOES NOT dear. When the user selects the Accept Button AND there is a signature display a dialog box finalizing and thanking the end user. If there is NO signature display a dialog box telling the end user a signature is required to complete the transaction.Explanation / Answer
//step1 for creating HTML file
<html>
<head>
<title>Signature Capture Example using HTML5 canvas</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>
step2 for creating java script
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'MyApp',
appFolder: 'app',
controllers: [
'Signature'
],
launch: function() {
Ext.create('Ext.container.Viewport', {
margin: 10,
defaults: {
margin: 10,
},
items: [{
xtype: 'label',
html: '<b>Capture signature using using HTML5 canvas</b>'
},
{
xtype: 'signatureCapture',
},
{
xtype: 'button',
text: 'Save Signature',
id: 'save',
disabled: true,
},
{
xtype: 'button',
text: 'Clear Signature',
id: 'clear'
}]
});
}
});
step3 for signature capture pannel
Ext.define('MyApp.view.SignatureCapture', {
extend: 'Ext.Container',
alias : 'widget.signatureCapture',
layout: {
type: 'vbox',
align: 'stretch'
},
width: 600,
height: 300,
border: 1,
style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
items: [
{
xtype: 'panel',
id: 'signature',
html: '<canvas id="signaturePanel" width="600" height="300">no canvas support</canvas>'
}]
});
step 4 for application control file
Ext.define('MyApp.controller.Signature', {
extend : 'Ext.app.Controller',
//define the views
views : ['SignatureCapture'],
//define refs
refs: [{
ref: 'mySignature',
selector: 'panel[id="signature"]'
}],
init : function() {
this.control({
'signatureCapture' : {
afterrender : this.onPanelRendered
},
'viewport button[id=clear]' : {
click : this.onClearSignature
}
,
'viewport button[id=save]' : {
click : this.onSaveSignature
}
});
},
onClearSignature: function(button) {
console.log('Clear Signature button clicked!');
signPad.width = signPad.width;
signPadContext.lineWidth = 3;
saveButton.disable();
},
onSaveSignature: function() {
console.log('Save Signature button clicked!');
//Returns the content of the current canvas as an image that you can
//use as a source for another canvas or an HTML element
var data = signPad.toDataURL();
var signatureData = data.replace(/^data:image/(png|jpg);base64,/, "");
//create an AJAX request
Ext.Ajax.request({
url : 'SaveSignature',
method:'POST',
params : {
'signatureData' : signatureData
},
scope : this,
//method to call when the request is successful
success : this.onSaveSuccess,
//method to call when the request is a failure
failure : this.onSaveFailure
});
},
onPanelRendered: function(panel) {
console.log('Signature Panel rendered, get ready to Sign!');
var view = panel.up('viewport');
saveButton = view.down('button[id=save]');
//get the signature capture panel
signPad = Ext.getDom("signaturePanel");
if (signPad && signPad.getContext) {
signPadContext = signPad.getContext('2d');
}
if (!signPad || !signPadContext) {
alert('Error creating signature pad.');
return;
}
signPad.width = this.getMySignature().getWidth();
signPad.height = this.getMySignature().getHeight();
//Mouse events
signPad.addEventListener('mousedown', this.eventSignPad, false);
signPad.addEventListener('mousemove', this.eventSignPad, false);
signPad.addEventListener('mouseup', this.eventSignPad, false);
//Touch screen events
signPad.addEventListener('touchstart', this.eventTouchPad, false);
signPad.addEventListener('touchmove', this.eventTouchPad, false);
signPad.addEventListener('touchend', this.eventTouchPad, false);
sign = new this.signCap();
signPadContext.lineWidth = 3;
},
signCap: function() {
var sign = this;
this.draw = false;
this.start = false;
this.mousedown = function(event) {
signPadContext.beginPath();
signPadContext.arc(event._x, event._y,1,0*Math.PI,2*Math.PI);
signPadContext.fill();
signPadContext.stroke();
signPadContext.moveTo(event._x, event._y);
sign.draw = true;
saveButton.enable();
};
this.mousemove = function(event) {
if (sign.draw) {
signPadContext.lineTo(event._x, event._y);
signPadContext.stroke();
}
};
this.mouseup = function(event) {
if (sign.draw) {
sign.mousemove(event);
sign.draw = false;
}
};
this.touchstart = function(event) {
signPadContext.beginPath();
signPadContext.arc(event._x, event._y,1,0*Math.PI,2*Math.PI);
signPadContext.fill();
signPadContext.stroke();
signPadContext.moveTo(event._x, event._y);
sign.start = true;
saveButton.enable();
};
this.touchmove = function(event) {
event.preventDefault();
if (sign.start) {
signPadContext.lineTo(event._x, event._y);
signPadContext.stroke();
}
};
this.touchend = function(event) {
if (sign.start) {
sign.touchmove(event);
sign.start = false;
}
};
},
eventSignPad: function(event) {
if (event.offsetX || event.offsetX == 0) {
event._x = event.offsetX;
event._y = event.offsetY;
} else if (event.layerX || event.layerX == 0) {
event._x = event.layerX;
event._y = event.layerY;
}
var func = sign[event.type];
if (func) {
func(event);
}
},
step5 for
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.JsonObject;
public class SaveSignature extends HttpServlet {
private static final long serialVersionUID = 1L;
private static final String DESTINATION_DIR_PATH ="/signatureFolder";
private File destinationDir, filePath;
public SaveSignature() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// nothing here
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//PrintWriter to send the JSON response back
PrintWriter out = response.getWriter();
//set content type and header attributes
response.setContentType("text/html");
response.setHeader("Cache-control", "no-cache, no-store");
response.setHeader("Pragma", "no-cache");
response.setHeader("Expires", "-1");
JsonObject myObj = new JsonObject();
String signatureData = request.getParameter("signatureData");
String realPath = getServletContext().getRealPath(DESTINATION_DIR_PATH);
String fileName = "Signature_" + getTodaysDate() + "_" + getCurrentTime() + ".png";
destinationDir = new File(realPath);
if(!destinationDir.isDirectory()) {
myObj.addProperty("success", false);
myObj.addProperty("message", "Signature destination folder not found!");
}
else {
filePath = new File(realPath, fileName);
Base64.decodeToFile(signatureData, filePath.getPath());
myObj.addProperty("success", true);
myObj.addProperty("fileName", fileName);
}
out.println(myObj.toString());
out.close();
}
private String getTodaysDate() {
DateFormat dateFormat = new SimpleDateFormat("yyyyMMdd");
String todaysDate = dateFormat.format(System.currentTimeMillis());
return todaysDate;
}
private String getCurrentTime() {
DateFormat dateFormat = new SimpleDateFormat("kkmmss");
String currentTime = dateFormat.format(System.currentTimeMillis());
return currentTime;
}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.