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.
Related
I am attempting to use the data received from DeviceOrientationEvents to animate (rotate) a camera in three.js using three's DeviceOrientationControls. The controls are updated upon every animation frame, and everything works as I would expect. However, if I begin to scroll, then no DeviceOrientationEvent is fired again until the inertia from the scrolling is complete.
I have confirmed that these events are not fired (or at least not dispatched) during the scroll by logging to the console from within the DeviceOrientationEvent handler. I can see the events fired regularly up until the moment I begin to scroll, then stop, and then resume firing from the moment the inertia from the scroll is complete.
Manually stopping the inertia mid-scroll (by touching the screen) also causes the deviceorientation events to resume.
I have disabled all other scroll event handlers in my script. I have made all touch event handlers passive, have tried making them non-passive as well, and have also tried disabling all touch event handlers in my script altogether.
I am fairly sure by this point that this may be a function of how the processing of the scroll thread (which operates separately to the main thread) and the processing of IMU data are scheduled/queued in the browser, so that there may be no good solution, but I'm asking here in case there is something I've overlooked in my own troubleshooting. This does not appear to be an issue with three.js or the DeviceOrientationControls in three.js, but I've tagged this as three.js just in case anybody has ever come across this problem when attempting something similar.
My unique case for having DeviceOrientationControls enabled while scrolling is that scroll drives the animation of a "camera rig" (of empty objects whose rotation and position are animated), while moving the phone around rotates the camera itself. (It's a bit like being able to turn your head to look around while moving in a railcar.)
My testing has been on an IPhone 11 Pro, with iOS 13.5.1, in Chrome iOS 84, and Safari. I have not tested on Android.
iOS has slowed down repetitive JavaScript functionality during scroll for many years now. This is to conserve battery consumption, since it has to re-render the page lots of times while scrolling, so it halts other secondary commands until scrolling is complete. See here for more.
You could create your own custom scrolling functionality without actually scrolling down an HTML page by capturing vertical swipe gestures via 'touchstart' and 'touchmove'. Or you could use a library like Hammer.js to help you.
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.
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!
First, excuse me please, this is not a programming question, but I think it wont fit to Theoretical CS, and CS Non Programming is still in private Beta.
after updating my phonegap Applications to listen to
$(selector).bind("touchstart",function());
instead of
$(selector).click(function());
(here with jquery),and the performance improved remarkably, I want to know what touchstart does different, despite of the fact that it is probably designed especially for mobile devices environments. I looked up the w3c document on touchstart, but it doesnt provide any information.
if anyone has a link to further explanation or can explain how it works, I greatly appreciate it
On the iPhone the touchstart event fires as soon as your finger touches the screen, whereas the click event fires 300 ms after you touch the screen and lift you finger off the screen. The 300 ms time delay is so that Safari can wait to see if you intend to double tap the screen in succession to simulate the zoom gesture.
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.