Los codigos para descargar están en esta dirección
http://gsdt.wacom.eu/support/STU-SDK-API-Samples.xml
El código del formulario es este:
Código PHP:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="demoButtons.css" />
<script type="text/javascript" src="demobuttons.js"></script>
<script type="text/javascript">
function initDemo() {
var signatureForm = new SignatureForm(document.getElementById("signatureImage"));
signatureForm.connect();
}
</script>
</head>
<body>
<div>
<div id="signatureDiv">
Signature image:<br/>
<img id="signatureImage"/>
</div>
<div>
Actions:<br/>
<input type="button" id="signButton" value="Start demo" onClick="javascript:initDemo()"/>
</div>
</div>
<object id="wgssSTU" type="application/x-wgssSTU"></object>
</body>
</html>
Código PHP:
// Generate the signature image
function generateImage() {
var saveImageCanvas = document.createElement("canvas");
saveImageCanvas.width = canvas.width;
saveImageCanvas.height = canvas.height;
var ctx = saveImageCanvas.getContext("2d");
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.font="30px Arial";
ctx.fillStyle="white";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
for (var i = 1; i < m_penData.length; i++) {
// Draw a line from the previous down point to this down point.
// This is the simplist thing you can do; a more sophisticated program
// can perform higher quality rendering than this!
var prev = tabletToScreen(m_penData[i - 1]);
var act = tabletToScreen(m_penData[i]);
if (m_penData[i].sw == 1) {
ctx.moveTo(prev.x, prev.y);
ctx.lineTo(act.x, act.y);
}
}
ctx.closePath();
ctx.stroke();
preview.src = saveImageCanvas.toDataURL("image/jpeg");
}
function close() {
document.getElementsByTagName('body')[0].removeChild(modalBackground);
document.getElementsByTagName('body')[0].removeChild(formDiv);
// Ensure that you correctly disconnect from the tablet, otherwise you are
// likely to get errors when wanting to connect a second time.
if (m_tablet != null) {
m_tablet.setInkingMode(0x00);
m_tablet.setClearScreen();
m_tablet.disconnect();
}
}
function btnOk_Click() {
// You probably want to add additional processing here.
generateImage();
close();
}
function btnCancel_Click() {
// You probably want to add additional processing here.
close();
}
function btnClear_Click() {
// You probably want to add additional processing here.
if (m_penData.length > 0) {
clearScreen();
}
}
function onCanvasClick(event) {
// Enable the mouse to click on the simulated buttons that we have displayed.
// Note that this can add some tricky logic into processing pen data
// if the pen was down at the time of this click, especially if the pen was logically
// also 'pressing' a button! This demo however ignores any that.
var posX = event.pageX - formDiv.offsetLeft;
var posY = event.pageY - formDiv.offsetTop;
for (var i = 0; i < m_btns.length; i++) {
if (m_btns[i].Bounds.Contains(new Point(posX, posY))) {
m_btns[i].Click();
break;
}
}
}
He pensado que en la function btnOk_Click(), se podria llamar a una consulta de actualizacion de una base de datos, bueno no se si eso es posible.
Si alguien puede echarme una mano, gracias
