I'm developing online map(like google maps) of cool fantasy world. I'm also use OS X on my main computer. Since OS X(especially Lion) are focused on different multi-touch gestures because almost of all mac users have a multi-touch input device(magic mouse or trackpad) I want to add support of pinch gesture to my online map(two-finger scroll would be cool to add too). Is it possible to do it? It's not bad if it will work only in some specific browser or web engine.
According to this question, it looks like firefox offers some support for multitouch gestures (see here), but other major browsers do not.
recently I've been developing webapplication for iPad using my PC and Chrome, it used a pinch feature. I found a way how to emulate touch and multi-touch feature on a desktop browser, posted my results on github here https://github.com/dgolovanev/mxTouch still does not supports predefined gestures but can handle touch and multi-touch events, hope it will be helpful
Related
I've looked around a bit but couldn't find a conclusive answer. Is it possible to detect multi touch gestures and events from a Macbook touchpad or other laptop trackpads in regular desktop browsers.
Let's say I want to click the touchpad and then scroll (a kind of dragscroll), but only when there is an extra finger touching the touchpad, instead of a regular dragscroll where the button is hold and then a single finger slides around.
It would be best if there was a generic API for this which worked with any laptop trackpad.
Is it possible to detect multi touch gestures and events from a Macbook touchpad or other laptop trackpads in regular desktop browsers.
Unfortunately, no.
In theory, the Touch API is probably how this would be supported. However, desktop browsers only implement this API for devices with true touch screens (like a tablet or smartphone), not for trackpads.
Additionally, many laptops simply do not have trackpads which can track multiple touch points. This functionality is relatively uncommon outside of Apple laptops.
I have started to use Hammer.js to implement drag functionality for mobile browsers. I have noticed that this functionality also works on desktop browsers (which is confirmed by this compatibility table https://github.com/EightMedia/hammer.js/wiki/Compatibility ).
Are there any drawbacks of using Hammer.js for desktop browsers as well?
As an example; let's say I want to implement a scrollbar (from scratch) where the "thumb" can be dragged. Instead of implementing this using onmousedown/up, onmousemove and set/release mousecapture I can simply use the dragstart, drag and dragend events of Hammer.js.
Hammer.js does a pretty good job on detecting whether it is running on a multitouch enabled system or not.
In most cases it also works pretty well when you have both, a mouse and a touch display. We are developing a desktop web-application based on hammer.js, which should work both, with mouse and multitouch interaction and it mostly works fine. However, it seems that this scenario is not as well tested as the use on mobile devices. See for example this open bug, when hammer.js triggers a tap event twice on Chrome (https://github.com/EightMedia/hammer.js/issues/302) which got closed in between, because no activity was detected.
Note also, that it is often needed to fine tune the behaviour of hammer.js, by fiddling with the user_select, user_drag and prevent_default parameters (see for example this question ). On Google Chrome we also had to enable the experimental touch-actions : none. I do not know, how much of this is specific to desktop systems though.
Summary
Hammer.js is written with desktop systems in mind and does quite a good job in providing sensible behaviour on both mouse and touch based systems. In detail it requires sometime fine tuning to make everything work as expected.
I was wondering if html5 is supporting touch functionality on a mobile device native? So we don't have to make an native app for iOS/Android/WP7 but can make an html5 page which loads in the mobile browser.
EDIT
I mean the JavaScript support for touch native in the browser so you can do you own thing with the touch in html5.
Depends on the type of touch event. For your standard browser click/mouse events these are emulated by the browser. As mentioned by Halst, just make your clickable elements big enough to work in a mobile environment.
If you want to use multitouch/gestures, it gets a little more interesting.
Webkit provides touchstart, touchmove, touchend, touchcancel. For single touch events support should be the same in both IOS Safari and Android Webkit. You could roll your own or use a library like jqTouch.
You can read more on how IOS Safari handles touch events. Events for Android don't seem to be as well documented, but you can read more on quirksmode touch support.
Just make liks and buttons big enough, and that's it.
Somewhat.
It's possible to write a webpage that looks almost as a native app for iPad (including multi-touch) but I had to give up with using "high level" events and had to handle instead the touches array explicitly to get a reasonable zoom/pan. The results are IMO quite good (people I've shown that vector graphics editor toy thought it was a native app).
For Android however things are a little trickier because on my Nexus one apparently there is no way to get anything close to full-screen (and for a phone losing the address bar space means losing a LOT of space) and also multitouch is disabled in the default browser :-(
Both problems (fullscreen and multitouch) are however solved for example in Opera and this is in my opinion sad because (may be) this means they don't WANT good web apps on the phone...
So technically it's possible to write a single html5/js program that runs in both desktop and phone, but this doesn't of course mean that the best UI for a desktop app is also the best for a phone.
I have made a multitouch surface ad it is pretty awesome. However, I am wondering if there is any desktop browser that supports multitouch as input and then exposes it either via an API or already smoothscrolls in a fashion similar to the iPhone.
Firefox 4/5 is the best option.
It also adds elastic scrolling to anything with a scrollbar as long as you use touch input.
Very cool!
I know there are many ways to do so directly on the iPhone (jQtouch), but I'd like to detect those events in my computer's browser.
Mozilla has some support for mouse gestures: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mouse_gesture_events
Looks like chrome and safari don't have native support for the same : JQuery - Can I query the MacBook Pro Trackpad?