Mozilla

bringing multi-touch to Firefox and the web

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.

17 comments

Comments are now closed.

  1. Dan wrote on August 21st, 2009 at 17:58:

    Great stuff. I don’t currently have any multi-touch devices, but when I do I look forward to being able to use it on the web. Multi-touch really makes HCI more intuitive.

  2. Pingback from הבלוג של osh » תמיכה ב Multi Touch ב Mozilla Firefox on August 22nd, 2009 at 04:40:

    […] מקור: http://hacks.mozilla.org/2009/08/multi-touch-firefox […]

  3. Jean wrote on August 24th, 2009 at 06:18:

    That sounds interesting but how do you prevent intereference with existing of features based on mutlitouch ?

    I think of Iphone (even though there is no firefox there yet) the two finger drag is used to zoom in and out of web pages what would happen between that and say the image editing use case shown in the video … ?

  4. Pingback from Multitouch UI on Firefox! - Yeah…I’m a geek on August 24th, 2009 at 06:33:

    […] of his work getting multitouch support on Windows 7 using Firefox… More information on this here and at his blog […]

  5. F1LT3R wrote on August 24th, 2009 at 09:21:

    Seriously very cool. Awesome work Felipe! Can’t wait to start using this stuff in web apps.

  6. Pingback from eceblogger.com » Multitouch and Firefox using Windows 7 on August 24th, 2009 at 10:08:

    […] friend of mine has recently linked me to this interesting multi-touch video (see below). The video depicts a multi-touch project done […]

  7. Felipe Gomes wrote on August 24th, 2009 at 20:01:

    @Jean: That’s a good question. The two gestures are the same so there’s definitely ambiguity there, so what we’re planning is that ultimately the webpage will be able to make the decision between getting the raw events or using the regular multitouch support from the browser.
    In the current experimental implementation what we’re doing is that the webpage can set the property document.multitouchData to true and them the browser won’t zoom or scroll and will start sending the DOM events to the page. But there are better solutions being considered, for ex. switching between modes when the page start listening for a MozTouch event.

  8. Pingback from CSS3 and HTML5- Straight into Future | william on September 15th, 2009 at 08:54:

    […] even recently demonstrated multi-touch screen events thats enable you of controlling your browser with your […]

  9. Pingback from Firefox 4.0 cu functia multitouch « Informatii si articole web on October 16th, 2009 at 12:34:

    […] a fost aparuta pe site-ul mozilla.org si Pc […]

  10. Gert wrote on June 3rd, 2010 at 03:50:

    Hi,

    I have been trying to get this working on Firefox 3.7 alpha on Windows 7 Professional and an Acer T230H monitor but without luck. I have made a very simple test page available on http://gert.dk/moztouch

    Firefox does respond to the -moz-system-metric(touch-enabled) css selector but I can’t get any reactions in my javascript, regular taps on the monitor is reconized as mouse clicks.

    The drawing example app at http://www.mgalli.com/development/drawing/demoapp.html does not work either (found it through this blog post: http://www.labnol.org/internet/firefox-logo-drawn-using-firefox/10579).

    I have looked through about:config to see if I should enable something to get Mozilla touch events to work but I cannot find anything.

    Does anybody know what it is that I am missing? I’m sure it’s simple once I know but right know I’m stuck.

    Full browser info: Mozilla/5.0 (Windows; U; Windows NT 6.1; WOW64; en-US; rv:1.9.3a5pre) Gecko/20100602 Minefield/3.7a5pre

  11. Gert wrote on June 3rd, 2010 at 04:47:

    Oh forgot to mention that the microsoft touch pad example applications all work fine.

    1. Anders wrote on July 13th, 2010 at 07:44:

      Been doing research. Seems like u need a special build of Firefox. Anyone know where to find that.

      1. Gert wrote on July 14th, 2010 at 09:50:

        Hi Anders,

        I got a special build from Felipe by commenting on his blog post at http://felipe.wordpress.com/2009/08/21/sneak-peak-on-multitouch-events/#comment-1509

        1. Anders wrote on July 14th, 2010 at 13:48:

          Hi Gert

          Thanks a lot. Will play around with it. Can’t wait until it’s finally released.

  12. Henrik wrote on August 16th, 2010 at 20:06:

    Is there a reason you’re using different syntax that Webkit has for multitouch gestures (on the iPhone)? This stuff is really cool and must-have for the future development… but as a developer, I really really wish there wouldn’t be another browser war around multitouch gestures. One day, it will be the defacto input method, so we should get these things right.

    Doc for Safari’s multitouch-syntax:
    http://developer.apple.com/safari/library/documentation/appleapplications/reference/safariwebcontent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW22

  13. Priyank wrote on October 29th, 2012 at 12:13:

    Well great release ever…I liked it very much….

  14. Piyush wrote on December 7th, 2012 at 05:29:

    That’s really an awesome release…. love it…

Comments are closed for this article.