I am trying to put a signature pad in my code, but since that is initiating the a div element and putting scribble area into it. I am struck doing that. .php
<script>
<div id="canvas"></div>
function signature() {
signatureCapture();
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
}
</script>
So how to initiate directly in view Thank You in Advance.
I am trying to put a signature pad in my code, but since that is initiating the a div element and putting scribble area into it. I am struck doing that. http://www.zetakey./codesample-signature.php
<script>
<div id="canvas"></div>
function signature() {
signatureCapture();
var canvas = document.getElementById("newSignature");
var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
}
</script>
So how to initiate directly in view Thank You in Advance.
Share Improve this question asked Oct 15, 2014 at 9:22 Avinash KumarAvinash Kumar 711 gold badge2 silver badges8 bronze badges2 Answers
Reset to default 5I'm not sure if I undersood correctly but here's an option to use the library you have given.
What I'm suggesting is you to use the sap.ui.core.HTML ponent to add the relevant html code that will instantiate the signature pad. For this to work you need to have the Signature.js file (downloaded from the site) on your project with a minor change.
Please, check the code sample.
index.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_goldreflection">
</script>
<script>
sap.ui.localResources("util");
sap.ui.localResources("test");
jQuery.sap.require("util.Signature");
var view = sap.ui.view({id:"idApp1", viewName:"teste.App", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
test/App.view.js
sap.ui.jsview("test.App", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf teste.App
*/
getControllerName : function() {
return "test.App";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf test.App
*/
createContent : function(oController) {
var mySignature = '<div id="wrapper"> ' +
' <p>Zetakey Signature Webapp</p> ' +
' <div id="canvas"> ' +
' Canvas is not supported. ' +
' </div> ' +
' ' +
' <script> ' +
' signatureCapture(); ' +
' </script> ' +
' </div>';
var myhtml = new sap.ui.core.HTML();
myhtml.setContent(mySignature);
var clearBtn = new sap.m.Button({text: "Clear Signature", tap: function(evt) {
signatureClear();
}});
return new sap.m.Page({
title: "Title",
content: [
myhtml,
clearBtn
]
});
},
});
util/Signature.js (as downloaded but I've added the first line to make it a ui5 module)
jQuery.sap.declare("util.Signature");
/*************************************************
Signsend - The signature capture webapp sample using HTML5 Canvas
Author: Jack Wong <[email protected]>
Copyright (c): 2014 Zetakey Solutions Limited, all rights reserved
...THE REST OF THE FILE...
Will this work for you? Let me know.
Regards.
Actually, I have created a signature pad control for this. So that you can encapsulate signature pad code in one control. http://jsbin./suquki/18/edit
-D