I've looked everywhere for how to capture touch pad input for laptops but I can't seem to find anything for Chrome extensions/JavaScript.
Question: how can I capture the number of fingers down (not clicked, just down and potentially moving as you would with a mouse), their corresponding x,y coordinates, and their corresponding up events, for a touch pad on a laptop?
Clarifications:
I'm not interested in detecting touch screen events. Just touch pad
events.
Can assume the touch pad lives on 3 year old or newer lap tops.
I can't find it by now, but I somewhere read about this topic. But the synopsis is simple: it's a draft/in development but no browser supports it by now.
Here is the W3C draft: https://w3c.github.io/pointerevents/
I think it is not possible to do this using JavaScript only. Let's take it this way:
Consider the following situation:
I am using a Macbook pro 13in Retina Display, with multi touch and multi gesture touchpad.
Now Suppose if I have gesture settings in my Operating System that if I tap two fingers, register it as a normal Left Click, and when I tap a single finger, register it as a right click.
Now imagine we are capturing both the events, click and dblclick, now tell me which event will get fired when I will do a single tap with one finger. It will be a dblclick, and when I will do a tap with two fingers it will be click event fired.
Another Case: Imagine i have inverted scrolling turned on in my computer, now when I will scroll upwards my page will scroll downwards. And this is something which chrome/ firefox is not controlling.
Conclusion:
There can be varied number of such settings across varied types of operating system, across varied number of devices such as trackpads, trackballs, touchpads, mouse, magic mouse etc. This gives me a feel that there is a layer between the external hardware and the browser detecting the firing events and this layer is provided by the operating system. Its operating system which manipulate the events according to the user defined/preset settings.
There can be devices which intent to provide and fire multiple events like touch device, on touch they fire multiple events. But that is not the case with all the devices. So it doesn't matter if you are clicking from mouse or from the trackball or from the touchpad or from the touch screen you will get one common event that is a click, there is definitely a possibility that some more events are fired but they are dependent on the type of device and not on the settings you have done in your Operating System.
One way you can capture is the event is by establishing some sort of connectivity between your browser web page and operating system as suggested by #AlvaroSanz.
to develop such kind of extension, you need to write chrome native client with Windows Touch Input to make it happen.
I know that you´re asking for a solution for Chrome extensions/JavaScript but I´ve been searching and getting nothing, so I finished with a possible solution combining VB and JavaScript.
There is VB api for Synaptics (https://autohotkey.com/board/topic/65849-controlling-synaptics-touchpad-using-com-api/) and you can call javascript from VB (http://www.codeproject.com/Articles/35373/VB-NET-C-and-JavaScript-communication#cjfv), it's a long way, but it's a way.
Related
To begin, I have read the documentation that says pointerId conveys no meaning
but to some extent it feels like it does.
When retrieving events from pointerdown on a desktop computer you can see that the pointerId property is always 1. I use this to verify if pointerdown event is coming from a mouse click.
However, when I open the Chrome developer tools and use the responsive mode and change it to a mobile device, let's say Pixel 2, and I click on the screen (which is simulated as a touch event) I get an incrementing pointerId on every click.
Now again, I understand it doesn't have a meaning but why does it stay 1 on desktop but go up infinitely on mobile?
I have inserted a simple snippet which when you run on the page it'll show 1 every click and if, you're on a desktop, click on full page and switch to responsive mode and pick a mobile device, it'll show an incrementing value.
window.addEventListener('pointerdown', (event) => {
console.log(event.pointerId);
});
Update
Thanks to the comments I realize that pointerId increments every time because there could be who knows how many fingers touching the screen of a mobile device so there is no way to differentiate them from others.
Why do I need (want) to keep track of pointerId?
Let's say I'm making an application that on desktop only needs the 1 mouse pointer but on mobile it requires 2 fingers to be used to interact with the application.
I need to keep track of where the left finger has been on the screen and what events it has caused and the same for the right finger. The problem comes where the incrementing pointerId comes in is there is no way for me to tell which finger is touching the screen.
Has anyone come across a solution for a problem like this?
I am using javascript/jquery/jquerymobile/cordova in my application currently testing on Android.
I am trying to detect the movement of a touch in a screen into the multiple targets/buttons that there maybe in the screen.
In a desktop hoover: would just do what I want. However, it does not work in mobile platforms as it does in desktops.
In my problem I am looking to throw some 288 very small buttons and I want to receive an event for each target that is touched/mouseover along the journey of the finger in the screen ( 1 single touchstart-touchmove-touchend). As I understand it as soon as a touchstart happens, that target is the only one receiving the event notification, no matter where the touch ends or what else is touched.
I could do it with canvas and calculate the distance to 288 points at each finger movement etc. But would be resource intensive, specifically for a task that a web browser excels. Hence I am looking to see how much can I delegate to the browser.
-- edited
I found a possible answer in How to find out the actual event.target of touchmove javascript event
I will be testing today. However, I am concerned by Steven Lu comments on performance. Specially as in my case there is a significant number of object/points that I need to track.
I'm attempting to convert my web app into a form usable by mobile devices. I'm attempting to build in support for touch gestures like horizontal scrolling. I'm finding some strange behavior in my app.
I start a gesture with a touchstart event, and then scroll on touchmove. However, my application sees a 500-700 ms delay between receiving these two events. As far as I can tell, my app is doing no other work between these two events.
Other aspects:
The code is written in jquery, using
$(element).bind(touchmove, function(ev) {return myobject.DoTouch(ev) }
were the DoTouch command simply checks the ev.type, records the touch position, and returns false.
Any ideas what I should look for to try to solve this? The lag between touching and getting a response from the app is very annoying.
Yes. It turns out, this is how iOS works. I was pulling my own hair out for some time. Read more here: http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Essentially, if iOS thinks it can handle this as an internal PAN gesture, it does and doesn't even bother sending a touchmove event at all.
In my project, I found that if the viewer makes the touchmove gesture very deliberately and pauses a bit longer before lifting the finger at the end of the move, then the touchmove event is, in fact, sent as one might expect. So, the documented behaviour may be a little iffy versus reality, which only added to confusion and my debugging efforts.
Anyway, if iOS handles the event internally as a PAN gesture, it will send a scroll event before the touchend. In my project I was able to use this to set the flag I was using to distinguish dragging gestures (which was normally sent in my touchmove handler) and ignore any behaviour in stand-alone touchend handlers that were not related to the handling of my own scroll-handling.
I hope this helps you (and others) as well!
I'm developing a web game application with a, HTML5 canvas that has to react to "click" events (in the general meaning).
On a mobile platform (or touch-capable), that means reacting to onTouchDown, on a desktop/laptop platform (with a mouse or pad), that means reacting to onMouseDown.
Problem is, if I handle both events, then sometimes the same "click" will result in both events getting fired, so I get a double signaling.
What would be the best way to handle that?
Currently, upon the first touch event I receive, I turn off mouse events, but that may be a bit heavy handed if the platform supports both touch & mouse clicks (f.i. an Android tablet with attached keyboard/pad/mouse)
Measuring the delay between touch & click to ignore a click after a touch doesn't work too well, as there are circumstances where user may touch/click at a high frequency, so a too long delay leads to dropped double taps/clicks, and a too short delay lets through the occasional double signaling slipping through.
I've looked at user-agent detection, but that seems quite fragile (many user agents out there), and doesn't solve the cases where the platform has both touch & mouse/pad.
Maybe a combination of your suggestion:
Measuring the delay between touch & click to ignore a click after a touch doesn't work too well, as there are circumstances where user may touch/click at a high frequency, so a too long delay leads to dropped double taps/clicks, and a too short delay lets through the occasional double signaling slipping through
And detecting the x,y coordinates of the tap would decrease the false positives. So if both events (tap & click) happening in sequence got the same coordinates they are handled as the same.
Or maybe let the user switch (through some sort of options screen) if he wants to use mouse or touch for his device if both is supported. Display a warning message for example saying you're on a touch device so we enabled touch events, if you're using a mouse please see options or something like that.
Most users would be happy with the auto-choice and everybody unhappy can change it.
A script I'm working on samples x/y mouse coordinates to determine a set of user gestures. It's currently attaching a mousemove event listener to document.body.
New requirements include adding listeners for mousedowns and keypress frequency. Those are simple enough. The other new requirement is replicating the interaction listening on mobiles/tablets.
My tentative plan is to avoid device-specific code like the touches object by using the legacy mouse and keypress support.
What challenges should I be aware of? For example, gotchas where a gesture with a mouse and a gesture with one finger will produce vastly different sets of x/y coordinates on mousemove... or a widely used mobile browser with super-odd event handling.
http://www.quirksmode.org/mobile/tableTouch.html is a wonderful reference.
Thanks!
Have you given jQuery Mobile a try? It comes loaded with all the touch gestures you'll ever need. I have used it and can confirm that it works across iOS and Android. Didn't quite test on other platforms though.
There is also this great jQuery plugin called jGestures which gives you access to many events such as touch, tap, pinch and even has a orientation change event.
jGestures: http://jgestures.codeplex.com/
Also I found this interesting page about touch events in Android and iOS and has a list of supported events on each platform: http://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html
Forgive me if I've misunderstood your question and posted something unrelated. Hope this helps.