Multitouch JavaScript "Virtual Light Table" on iPhone v2.0

Posted on by

Now that iPhone 2.0 is out I started playing around with some of the new web features, and soon found that I had created the prototypical virtual light table that’s an essential demo for any new multitouch technology.

It’s about 100 lines of JavaScript. It grabs the 10 latest photos from Flickr’s “interesting photos” API and randomly places them on the screen for you to play with:

This is great if you have an iPhone with the 2.0 software, but desktop browsers should get some multitouch love too. So I started writing a little bridge that fakes multitouch events in desktop browsers. It’s far from complete, but it’s just good enough to get the virtual light table demo working.

So go ahead and load it up in the new iPhone MobileSafari or Safari 3.1+ / WebKit nightly (requires CSS transforms):

http://tlrobinson.net/iphone/lighttable/

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).

For a good overview of touch events and gestures, check out this SitePen blog post and Apple’s documentation.

Here’s the source for the fake multitouch bridge:

http://tlrobinson.net/iphone/lighttable/multitouch-fake.js.

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.

  • Sandor

    Dear Tom,

    this is very impressive! I am working on some “real” MultiTouch mockups. We have built an MT-Table a while ago and now i am playing around with the Quartz Composer, trying to incorporate some basic MT-Functionality. On this way (using JS) I believe that MT would be open for a wider range of people (specially under OSX). I was trying to adopt your JS-code for using it inside Quartz Composer (there is a JS patch for that).
    But to be honest, since i am not a programmer i got stucked 😉 Well maybe you could help – if your time allows this… 🙂

    The syntax inside the Quartz Composer JS-Patch is just like this:

    ————
    /*
    A simple script that takes two input values, sums them and returns the result.

    Special keywords for defining input and output key types:
    __boolean, __index, __number, __string, __image, __structure, __virtual

    Note that the function input arguments are read-only.
    */

    function (__number outputNumber) main (__number inputNumber[2])
    {
    var result = new Object();
    result.outputNumber = inputNumber[0] + inputNumber[1];
    return result;
    }
    ————

    Since we are working with TUIO, we can track and determine easily following things:

    – how many touches are on the table
    – the x and y for the different touches
    – a bolean for the “is the touch inside a rectangle”

    All this things would be “inputNumbers”

    Do you maybe have a simple way to adapt you code to this condition?

    Would be really great!

    Greetings from Cologne- Germany,

    Sandor

  • Anonymous

    Hello,

    Is it possible not to have photos flickr but simply an image locally ?

  • Anonymous

    Do you think the iPhone 3G is awesome? Well, I can’t say I totally disagree, but it seems there are a lot of problems with it, some real, some that may appear in time, while others are nothing more than fiction at this time.

  • http://automotivelightbulbs.net automotive light bulbs

    I love it…I don’t think it is not worth all the attention it is getting

  • http://twitter.com/atornblad Anders Tornblad

    When developing for the iPhone or iPad, it’s sometimes difficult to test your solution. The iPhone Developer mode doesn’t give you quite enough.

    That’s why I developed addTouch. It’s a multitouch emulator, that lets you use Firebug or Google Chrome Developer Tools to debug your touch-enabled web app. Give it a try:

    http://j.mp/fVFE5C