[WB26] signature strip - Javascript?

Hi

I have a site created in [WD26] which has a signature strip, where has Users would sign there name and its saved as an image. The problem is it doesn't work on Mobile Devices, and i cant get it to work no matter what i try.

So i tried the 'Image Editor Component' - waste of time,absolute garbage!

so now i am working on a Javascript solution. The signature is working fine its just getting the signature to save as an image to my HyperfileSQL Database thats the problem

Has anyone any experience or ideas?

many thanks

ISO

Ill provide you a working code sample

regards

var can = $('#signature')[0],
ctx = can.getContext('2d'),
mousePressed = false,
mouseX = 0,
mouseY = 0;
can.addEventListener('touchmove', onTouchMove, false);
can.addEventListener('touchstart', onTouchStart, false);
can.addEventListener('touchend', onMouseUp, false);
// Tablet
function onTouchMove(event){
if (mousePressed) {
event.preventDefault();
mouseX = (event.targetTouches[0].pageX) - can.offsetLeft;
mouseY = (event.targetTouches[0].pageY) - can.offsetTop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}

function onTouchStart(event){
mousePressed = true;
mouseX = (event.targetTouches[0].pageX) - can.offsetLeft;
mouseY = (event.targetTouches[0].pageY) - can.offsetTop;
ctx.beginPath();
ctx.moveTo(mouesX, mouseY);
}

function onMouseUp(event){
mousePressed = false;
}
// Desktop
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);

function onMouseMove(event) {
if (mousePressed) {
event.preventDefault();
mouseX = event.clientX - can.offsetLeft - 0;
mouseY = event.clientY - can.offsetTop - 20;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}

function onMouseDown(event) {
mousePressed = true;
mouseX = event.clientX - can.offsetLeft - 10;
mouseY = event.clientY - can.offsetTop - 0;
ctx.beginPath();
ctx.moveTo(mouseX, mouseY);
}

$('#clearsig')[0].addEventListener('click', clearSignature, false);

function clearSignature() {
ctx.clearRect(0, 0, can.width, can.height);
}

Hi Renko

Many thanks for the code, i did already find a solution but i will have a look at your code also. much appreciated,

Hi No problem

I use this withthe webcomponent control.


regards

Renko


ps this one works on mobile divices quite well !