HTML5 / Javascript. Can I get the absolute coordinates of a touch event on a Macbook Trackpad keyboard in a browser?

Question

I would like to write something in a browser that writes gestures to the trackpad.

Since I wanted to be able to track all movements without worrying about the pointer leaving the window, I first investigated this problem and used the MDN Pointer Lock API as a starting point.

But I notice when using this demo on a MacBook that if I lift my finger and start a new drag elsewhere on the trackpad, it ignores the distance that my finger moved in the air, it only considers movement while my finger is touching the trackpad. This is consistent with how the trackpad is used to move the mouse pointer in the operating system as a whole.

But for my specific application, I want to have the absolute x and y of my finger on the trackpad. Is it possible to build the demonstration option linked above, where the red dot corresponds to the absolute position of your finger? for example, if you raise your finger and then put it in the upper left corner, will the red dot always jump to the upper left of the canvas?

I know the javascript Touch Events API , which gives absolute coordinates when used on a tablet, but the demo does not register the trackpad input when working on a MacBook under Firefox (v36) or Chrome (v41).

I also read that you can enable touch emulation in Chrome, although I could not find this checkbox to do this in my version (maybe only in special builds of developers) and from reading about it, it seems to be more mouse-to-mouse translation. therefore, I doubt that this emulation will have any support for trackpads.

Is there a way to get the absolute x, y coordinates of a touch event on a MacBook trackpad using HTML / Javascript?

Answer 1

I really do not believe that you can make the trackpad work the way you want it to. Remember that the trackpad should act like a mouse, it's like a flattened trackball. Think of it as if your finger is pressing the cursor each time you swipe your finger, and then center the cursor under your finger whenever you click on the trackpad.

If you were not able to display the 1: 1 trackpad on the screen, as is the case with something like a Wacom tablet, the trackpad has nothing to do with the screen; he only knows about the mouse.

In Chrome (version version 46.0.2490.71 m), you can simulate touch events by turning it on in emulation mode:

• Open Dev Tools F12
• Either click the phone icon in the upper left corner or open the best console by pressing Esc
• Go to the emulation tab
• Go to the Sensors panel
• Check Emulate touch screen