Multitouch JavaScript “Virtual Light Table” on iPhone v2.0

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.

This entry was posted on Friday, July 11th, 2008 at 4:50 pm and is filed under JavaScript, Uncategorized, Web, iPhone. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  • This is really great stuff, I'm glad to see people picking up these APIs. What's really fun about this demo you have up is being able to drag two different items around the screen at the same time! It's a whole new type of drag and drop

  • cool! on a different note, check out http://www.torahweb.org/audio - uses plain old js and css do give the user an iphone-like experience while browsing an audio and video library - all pure js, css. driven off of json data.

  • Darren Brierton

    This is an amazingly impressive demo. I've been reading through your Javascript to try and get a better handle on how it works. I can't find where the


    e.touches[i].target.xfm*


    properties are documented. Google doesn't seem to be any help at all. Would you mind pointing me in the right direction?

  • Tom

    Darren: That's not a standard property or anything, I just use it to store the current transform values. (in JavaScript you can add arbitrary properties to an object at any time, and this was a convenient place to put them)

  • Darren Brierton

    @Tom: Thanks for the reply, Tom. I keep forgetting that you can just add your own properties to DOM nodes. D'oh!

  • This is awesome!

  • name

    Good day!,

  • Great article Tom!
    I posted a tutorial on how you can make drag and drop in JavaScript's API for iPhone based on your example: http://www.nextroot.com/post/2008/09/20/Drag-and-Drop-using-iPhonee28099s-JavaScript.aspx

  • Vjitroke

    Jonny was here

  • 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
blog comments powered by Disqus
« JSON Diff
A new kind of music video: Radiohead’s “House of Cards” »


Warning: include(/home/tlrobinson/tlrobinson.net/_footer-analytics.php) [function.include]: failed to open stream: No such file or directory in /home/tlrobinson/tlrobinson.net/blog/wp-content/themes/clean-look-150/footer.php on line 13

Warning: include() [function.include]: Failed opening '/home/tlrobinson/tlrobinson.net/_footer-analytics.php' for inclusion (include_path='.:/usr/local/php5/lib/php:/usr/local/lib/php') in /home/tlrobinson/tlrobinson.net/blog/wp-content/themes/clean-look-150/footer.php on line 13