asked on

Javascript routine works on PCs but not on touchscreen phones or tablets:

Javascript routine works on PCs but not on touchscreen phones or tablets:

Zakaria Acharki helped me at https://www.experts-exchange.com/questions/29129533/Webpage-is-not-working-on-phones-tablets-without-a-mouse.html with a webpage I designed in 2012 to get it partially working on touchscreen phones and tablets.

Here is a link to the webpage modified so it doesn't send data to me: www.barnwellmd.com/PainDiagram/Testdrawing.html

But this routine which works great with a mouse on a PC does not work on phones or tablets:

function clearGray()
{
	var imageData2 = context.getImageData(0, 0, 700, 643);
	var newPixels = imageData2.data;
	for (var i = 0, il = pixels.length; i < il; i += 4) 
	{
		if((pixels[i] == 255 && pixels[i+1] == 204 && pixels[i+2] == 153) 
		|| (newPixels[i] > 235 && newPixels[i+1] < 150 && newPixels[i+2] > 75 && newPixels[i+2] < 110))
		{
		}
		else
		{
		   newPixels[i] = pixels[i];
		   newPixels[i+1] = pixels[i+1];
		   newPixels[i+2] = pixels[i+2];
		}
	}
	context.putImageData(imageData2, 0, 0);
	context.fillStyle  = "#CDCDCD";
	context.fillText("Referred pain",275,600);
}

Open in new window

This routine deletes the markings not on the body image when mouseup is fired.

This is what it looks like on the pc after swiping the mouse across the entire image:

This is what it looks like on my phone after swiping my finger across the entire image:

So on the phone, lines drawn on the image are not deleted outside of the body image.

What do I need to do to get this to work on touchscreens?
Thanks!

Zakaria Acharki

Hi thenelson,

Try to trigger the `touchmove` event too on the `this.mouseup = this.touchend = function (ev) {` event like :

this.mouseup = this.touchend = function (ev) {
  if (tool.started) 
  {
    if (color_value == "#FF7F50")
    {
      var angle = Math.atan2(lastY-prevY,lastX-prevX);
        context.beginPath();
      context.moveTo(lastX+15*Math.cos(angle),lastY+15*Math.sin(angle));
      context.lineTo(lastX-7*Math.cos(angle-Math.PI/4),lastY-7*Math.sin(angle-Math.PI/4));
        context.lineTo(lastX-7*Math.cos(angle+Math.PI/4),lastY-7*Math.sin(angle+Math.PI/4)); 
      context.closePath();
      context.fillStyle  = color_value;
      context.fill();
    }
    tool.started = false;
    tool.mousemove(ev);
    tool.touchmove(ev); <-- ADD THIS LINE

    clearGray();
  }
};

Open in new window

thenelson

ASKER

Adding that line did not fix the issue.

I discovered that if I pinch zoom the page larger, ClearGrey() fires and clears the lines outside of the body image.

Also I just noticed that the line drawn is halfway down the image, not under the finger when the entire image is on the screen. If about half of the image is off the bottom of the screen, the line draws under the finger. I'm not sure if this started when I added the tool.touchmove(ev); line in the code.

thenelson

ASKER

If I zoom in on the page with my fingers not on the image, function clearGray() does not fire. If my fingers are on the image, function clearGray() does fire.

I added an alert("test"); at the beginning of the this.mouseup = this.touchend = function (ev) { function. It did not popup when I drew a line but did popup when I zoomed into the image. So it looks like function clearGray() is working. this.mouseup = this.touchend = function (ev) { is not firing with lifting the finger.

I tried changing
this.mouseup = this.touchend = function (ev) {
to
this.mouseup = this.touchend = this.touchcancel = function (ev) {
that didn't wotk also.

thenelson

ASKER

I also learned that touchend is fired if I touch the image without dragging (moving) the finger.

I found two articles:
https://stackoverflow.com/questions/14477550/android-javascript-touchstart-event-not-fired-until-zoom-or-scroll-the-page
Not exactly the same. Scrolling the page doesn't fire touchend and the article states that once the page is scrolled or zoomed it will work fine after that. I have to scroll the image each time to fire toouchend.

https://bugs.chromium.org/p/chromium/issues/detail?id=152913
This discusses a problem with touchend not firing in chrome after touchmove. But states it was fixed.

Zakaria Acharki

I'm sorry thenelson, I've seen your comments and searched around but can't get any clear answer :(

Good luck

thenelson

ASKER

I appreciate you spending time to help me.

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

thenelson

ASKER

leakim971,

adding canvas.addEventListener('touchend', clearGray, false); worked!!
Thanks!

A different problem: when I touch the canvas, the line is drawn halfway down the canvas instead of under the finger. If only half the canvas is displayed on the screen (the bottom half is below the screen) then the line is drawn under the finger. I can close this question giving you credit for the answer and open a new question if you prefer - just let me know.

Thanks again.

leakim971

if you had this issue before the "fix", you should create a new question to help someone searching a similar question
this is the main purpose of this site
thanks

thenelson

ASKER

leakim971,

adding canvas.addEventListener('touchend', clearGray, false); worked!!
Thanks!

I created a new question for the new problem: https://www.experts-exchange.com/questions/29130648/Javascript-routine-works-on-PCs-but-not-on-touchscreen-phones-or-tablets.html