Monday, July 14th, 2008

iPhone Web: Multitouch JavaScript “Virtual Light Table”

Category: iPhone

<p>

The video above is Tom Robinson, one of the 280 North fellas who is smart enough to port Cocoa to the Web, showing us his multitouch “virtual light table” using the JavaScript APIs nicely documented by SitePen, as well as Apple.

His ~100 lines of code uses the new CSS transforms handles all of the touch events: touchstart, touchmove, touchend, touchcancel with code such as:

javascript
< view plain text >
  1. for (var i = 0; i < e.touches.length; i++) {
  2.   // for each "movable" touch event:
  3.     if (e.touches[i].target.className == "movable") {
  4.         var id = e.touches[i].identifier;
  5.        
  6.         // record initial data in the "moving" hash
  7.         moving[id] = {
  8.             identifier: id,
  9.             target:     e.touches[i].target,
  10.             mouse:      { x: e.touches[i].clientX, y: e.touches[i].clientY },
  11.             position:   { x: e.touches[i].target.xfmTX, y: e.touches[i].target.xfmTY },
  12.             rotation:   e.touches[i].target.xfmR,
  13.             scale:      e.touches[i].target.xfmS
  14.         };
  15.        
  16.         // move to the front
  17.         moving[id].target.style.zIndex = zIndexCount++;
  18.        
  19.         // reset rotate/scale mode to off
  20.         moving[id].rotateScaleMode = false;
  21.     }
  22. }

He also added a nice bridge to allow you to somewhat play from the desktop:

In desktop browsers it uses the previous clicked location as a second “touch”, so you can click a photo then click and drag another spot on the photo to resize and rotate (notice the yellow dot).

Clearly the reverse of this bridge would be even more useful, since iPhone only sends mouse events under specific conditions. The mousedown, mouseup, and mousemove events could be emulated using the touch equivalents to make certain web apps work on the iPhone without much additional work. Of course you would need to either cancel the default actions (i.e. panning and zooming) on touch events, or have some way to manage the interactions between them.

Related Content:

Posted by Dion Almaer at 8:17 am
2 Comments

++++-
4 rating from 27 votes

2 Comments »

Comments feed TrackBack URI

This is incredible, I’m so happy to see webapps evolving. I’m a big fan of dbelement apps for the iPhone, I can’t wait to see what their next app will be.

Comment by AmberUO — July 16, 2008

Can someone explain to me why even on a high-res screen like the iPhone’s, antialiasing on diagonals still looks crappy? Is quality sacrificed for performance, or is it just really hard to do right? I know fuck all about graphics manipulation of that sort, I just find it extremely noticeable and unpleasant to the eye.

Comment by eyelidlessness — July 16, 2008

Leave a comment

You must be logged in to post a comment.