Monday, July 14th, 2008
iPhone Web: Multitouch JavaScript “Virtual Light Table”
Category: iPhone
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:
-
-
for (var i = 0; i <e.touches.length; i++) {
-
// for each "movable" touch event:
-
if (e.touches[i].target.className == "movable") {
-
var id = e.touches[i].identifier;
-
-
// record initial data in the "moving" hash
-
moving[id] = {
-
identifier: id,
-
target: e.touches[i].target,
-
mouse: { x: e.touches[i].clientX, y: e.touches[i].clientY },
-
position: { x: e.touches[i].target.xfmTX, y: e.touches[i].target.xfmTY },
-
rotation: e.touches[i].target.xfmR,
-
scale: e.touches[i].target.xfmS
-
};
-
-
// move to the front
-
moving[id].target.style.zIndex = zIndexCount++;
-
-
// reset rotate/scale mode to off
-
moving[id].rotateScaleMode = false;
-
}
-
}
-
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.
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.
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.