touch location not given in iOS

[EdwardFlach]

https://biologymodel.org/choose
using p5 0.5.5

My code is fine on my Mac OS 10.12, and my friend has it working on Android: Chrome reporting correctly, Firefox showing NaN in draw() but must be correct in TouchEnded() to get past the decision screen to the simulation.

On iOS 10: touchX shows NaN nearly always in draw(), and no response in TouchEnded()
I also tried ptouchX and touchStarted(): no joy

Also: my p5 editor 0.6.2 doesn't recognise touches[i].x " Uncaught TypeError: Cannot read property 'x' of undefined"

Sorry if I haven't been thorough enough in my analysis – I'm a bit new to this

[lmccart]

ah, touchX/Y was removed in 0.5.5, use mouseX/Y instead
https://github.com/processing/p5.js/releases/tag/0.5.5

[EdwardFlach]

Sorry, I mis-typed: mouseX and mouseY – also pmouseX and pmouseY

[lmccart]

hm ok, could you please post a small snippet of code that illustrates the problem? it's hard to test when it's in the context of a larger project like you've linked to. thanks.

[EdwardFlach]

Did you try my link? Only I think it's pretty handy to test cross-platform...

[lmccart]

yes, what would be helpful is a small sample of code that is about 10-20 lines max that illustrates the problem. thanks.

[EdwardFlach]

var startX;
var endX;

var startY;
var endY;

function setup() {
  createCanvas(800, 500);
  fill(color(0,0,0))
  textFont("Helvetica", 40);
}

function touchStarted() {
  startX = mouseX;
  startY = mouseY
  return false;
}

function touchEnded() {
  endX = mouseX;
  endY = mouseY
  return false;
}

function draw() {
  background(255);
  text("touchStarted: mouseX = " + round(startX) + " mouseY = " + round(startY), 0, .2*height);
  text("touchEnded: mouseX = " + round(endX) + " mouseY = " + round(endY), 0, .4*height);
  text("draw: mouseX = " + round(mouseX) + " mouseY = " + round(mouseY), 0, .6*height);
}

[EdwardFlach]

I posted it biologymodel.org/p55 – if that helps?

[limzykenneth]

@EdwardFlach I'm not sure I understand your problem thoroughly so do forgive me if I missed the point completely 😉

I tested your sample code on desktop and on iPhone Safari and it seemed to be working as expected only exception being the values of startX/Y and endX/Y being NaN before any click or touch was made which is expected. The reason for that is because although the variables were declared in the beginning, they were not initialized with a numerical value hence NaN (Not a Number), its value before any click or touch happens is actually undefined. To solve that simply use this instead:

var startX = 0;
var endX = 0;

var startY = 0;
var endY = 0;

Other than that not any major issue that I noticed.

[EdwardFlach]

This is the result on my Mac after clicking, which works for me

This is the behaviour on my iPhone after tapping, which doesn't

i have an iPhone 6 running iOS 10.2, and I have the same behaviour in Safari, Chrome and Firefox.

[limzykenneth]

I'm using Safari on iPhone SE running 10.2 as well. I can't really visit biologymodel.org/p55 so I only run the code you provided on my computer. I'm not sure if there's a problem on there or not...

If you can it might be helpful to get the console value of the variables gotten through console.log() or print()

[EdwardFlach]

I don't know any other way to get the code to run other than hosting it and viewing it on a website, so I don't know how you're looking at it. And I don't understand why you can't visit biologymodel.org/p55!

I added console.log() and print(), just in the draw() function. I don't really know what I'm looking for. The phone still shows NaN for mouseX – just the same as displayed in write().
I haven't plugged my phone into my computer for a while!

[limzykenneth]

OK, I just realized I didn't update my p5.js version and this example works perfectly fine on 0.5.4 and broke on 0.5.5. I'll have a dig as to why, in the meantime you can roll back to 0.5.4 for the time being it should work as expected.

@lmccart I think this should be reopened

[EdwardFlach]

That's great that you reproduced it! (It's difficult to fix a problem you can't see :p)

And thanks very much for the workaround – I really appreciate it.

[limzykenneth]

@lmccart I managed to trace the problem back to 3c76fa1 where touchXY were removed and managed to isolate the problem with issue #1598.

In _updateMouseCoords on line 357,

var mousePos = getMousePos(this._curElement.elt, e);

which will eventually get used in

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top,
    winX: evt.clientX,
    winY: evt.clientY
  };
}

The event argument passed e or evt is actually different on desktop and on mobile. Desktop will properties.

clientX and clientY is not present on the TouchEvent and thus it returns undefined and eventually NaN.

[lmccart]

aha thanks @limzykenneth for tracking that down, and thanks @EdwardFlach for helping us reproduce it. we recently removed touchX/Y and it looks like there are still a couple kinks to work out. I think this should be a pretty easy fix, I'll take a stab at it today.