The ever-energetic Felipe Gomes was nice enough to intern with Mozilla this summer in between busy semesters in Brazil. During that time he’s been working on multi-touch support for Firefox on Windows 7. A nice result of that work is that he’s also found ways to bring multi-touch support to the web. He’s made a short video and written up some short technical information to go with it.

This post has also been cross-posted to Felipe’s personal blog.

Multitouch on Firefox from Felipe on Vimeo.

I’ve been anxious to demonstrate the progress on our multi-touch support for Firefox, and this video showcases some possible interactions and use cases for what web pages and webapps can do with a multi-touch device.

We’re working on exposing the multi-touch data from the system to regular web pages through DOM Events, and all of these demos are built on top of that. They are simple HTML pages that receive events for each touch point and use them to build a custom multi-touch experience.

We’re also adding CSS support to detect when you’re running on an touchscreen device. Using the pseudo-selector :-moz-system-metric(touch-enabled) you can apply specific styles for your page if it’s being viewed on a touchscreen device. That, along with physical CSS units (cm or in), makes it possible to adjust your webapp for a touchscreen experience.

Firefox 3.6 will include the CSS property, but is unlikely to include the DOM events described below.

Here is an example of what the API looks like for now. We have three new DOM events (MozTouchDown, MozTouchMove and MozTouchRelease), which are similar to mouse events, except that they have a new attribute called streamId that can uniquely identify the same finger being tracked in a series of MozTouch events. The following snippet is the code for the first demo where we move independent <div>s under the X/Y position of each touch point.

var assignedFingers = {};
var lastused = 0;

function touchMove(event) {
    var divId;
    if (lastused < = 4)
        return;

    if (assignedFingers[event.streamId]) {
        divId = assignedFingers[event.streamId];
    }
    else {
        divId = "trackingdiv" + (++lastused);
        assignedFingers[event.streamId] = divId;
    }

    document.getElementById(divId).style.left = event.clientX + 'px';
    document.getElementById(divId).style.top  = event.clientY + 'px';
}

document.addEventListener("MozTouchMove", touchMove, false);
document.addEventListener("MozTouchRelease",
                          function () { lastused--; }, false);

On the wiki page you can see code snippets for the other demos. Leave any comments regarding the demos or the API on my weblog post. We really welcome feedback and hope to start some good discussion on this area. Hopefully as touch devices (mobile and notebooks) are getting more and more popular we’ll see new and creative ways to use touch and multitouch on the web.