Posts tagged ·

touch

·...

Update to HTML5 Canvas Panorama Viewer

Comments Off

I published the HTML5 Panorama Viewer last year, and have finally had the time to make some updates, including support on touch screen mobiles. I’ve tested on several browser for Android (bulti-in, Firefox, and Opera Mobile), as well as Safari on iPhone; it’s looking good, but please report any issues you might find. Known limitations include click and move lag on older phones, no support for history management in some browsers, nor multi-touch in most (thus no pinch-zoom yet).

Desktop controls:
Zoom in: double click
Zoom out: right click
Move: Hold and drag

Mobile controls:
Zoom in: double click (can be a bit tricky)
Zoom out: hold without moving for more than 2-3 seconds
Move: Hold and drag

Licenses: The JavaScript and HTML coded for the viewer is licenses under GPL3. The copyright of the panorama images are retained by the author.

Comments Off

Touch events in JavaScript

Comments Off

Looking to extend my “HTML5 Canvas Panorama Viewer” to make it work on mobile phones, I’ve started to dig into the wonderful world of incompatible touch events between all the browsers. It’s IE vs. WebKit vs. Gecko vs. Opera, or back to the 90s in other words.

Peter-Paul Koch site quirksmode does a good job of summarising the various aspects of mobile web development.  In particular, the touch table is relevant to what I wanted to achieve. However, it does not look too promising right now, as most events are listed as either no supported, or incomplete.

Still, an old tutorial by nroberts, “Touching and Gesturing on the iPhone” gives hope. It includes a small example (http://tinyurl.com/sp-iphone) which actually do work to some extent on both the Android¬† native browser, and Firefox 6.

Now the challenge is to combine it all, and have both desktop and mobile browser behave in an expected and functional manner. Using the same events for the same actions does probably not make sense, however the user should be able to achieve the same across all browsers. The panorama viewer needs only three actions: zoom in, zoom out, and move. Zoom in already works, move works but is buggy, and some touch gesture must replace right-click to zoom out. I’ll come back to this later.

Comments Off