Mozilla

a multi-touch drawing demo for Firefox 3.7

on October 13, 2009 by

in Feature Featured Demo Firefox Multi-touch

Firefox Multitouch at MozChile – Drawing Canvas Experiment from Marcio Galli on Vimeo.

A couple of months ago we featured a video that had some examples of multi-touch working in Firefox. At a recent event in South America, Marcio Galli put together a quick and fun drawing program based on the multi-touch code that we’ll have in a later release of Firefox. What’s really great is that he was able to put this together in just a couple of hours based on the web platform.

There are three main components to the touch support in Firefox:

1. Touch-based scrolling and panning for the browser. This allows you, as a user, to scroll web pages, select text, open menus, select buttons, etc. This is part of Firefox 3.6.

2. Implement a new CSS selector that will tell you if you’re on a touch-enabled device. This is -moz-system-metric(touch-enabled). You can use this in your CSS to adjust the size of UI elements to fit people’s fingers. This is part of Firefox 3.6.

3. Exposing multi-touch data to web pages. This takes the form of DOM events much like mouse events you can catch today. This isn’t part of Firefox 3.6, but is likely to be part of Firefox 3.7.

Although not all of this will be in our next release we thought it would be fun for people to see what will be possible with the release after 3.6.

Note: You can find the sample code on Marcio’s page for the demo.

17 comments

Comments are now closed.

  1. AndyEd wrote on October 13th, 2009 at 4:08 pm:

    Got a pointer to a multi-touch build for windows 7?

  2. Daniel Glazman wrote on October 13th, 2009 at 11:04 pm:

    Uuuuurrrrrghhhh…. Who decided and who accepted that syntax…

  3. Pingback from Firefox Logo Drawn Using Firefox Itself | L&C Tech Talk on October 14th, 2009 at 2:52 am:

    [...] upcoming Firefox 3.6 release will have basic support for touch-enabled devices like you will be able scroll & pan web pages, select text on the [...]

  4. Pingback from Firefox 3.7 multi-touch demo in the wild « Position Absolute on October 14th, 2009 at 6:00 am:

    [...] is a nice video on Mozilla hacks demonstrating multi-touch in Firefox 3.7. A nice multi touch painting application. Interestingly [...]

  5. Christopher Blizzard wrote on October 14th, 2009 at 10:00 am:

    @Andy – looking into that. There were some builds up, I’m trying to see if there are newer ones up.

    @Daniel – yeah, we’re talking about changing it to be something more reasonable. There’s a bug open on that – I think roc had the same reaction you did. :) https://bugzilla.mozilla.org/show_bug.cgi?id=522149

  6. Felipe Gomes wrote on October 14th, 2009 at 11:45 am:

    @Andy, you can download the builds as a zip or installer from here:
    http://exchangecode.com/robert/work/try-a808df333211-win32.zip
    http://exchangecode.com/robert/work/try-a808df333211-win32.installer.exe

    or you can download the patch from bugzilla and recompile ( https://bugzilla.mozilla.org/show_bug.cgi?id=508906 )

    Hope that helps!
    Felipe

  7. Jay Patel wrote on October 14th, 2009 at 11:50 am:

    I was able to try out Marcio’s demo with my Lenovo multi-touch x200t with this build:
    http://exchangecode.com/robert/work/try-a808df333211-win32.installer.exe

  8. Ryan wrote on October 14th, 2009 at 3:15 pm:

    I think the CSS pseudo selector would work better as a media query e.g.

    @media (-moz-touch-enabled) { }

  9. Pingback from Remains of the Day: RIAA Can’t Stop BitTorrent Edition [For What It's Worth] | Superstars Of Gaming on October 14th, 2009 at 4:20 pm:

    [...] a multi-touch drawing demo for Firefox 3.7 A drawing app that runs inside Firefox and uses the multi-touch features that will be available in Firefox 3.7. Now if only all of us had hardware that would support it. [hacks.mozilla] [...]

  10. Spyros wrote on October 14th, 2009 at 4:42 pm:

    does this multi-touch feature includes the touchpad found on modern netbooks/laptops ?

  11. Pingback from 用手指塗鴉畫圖 « Digital Life Coaching on October 16th, 2009 at 5:25 am:

    [...] 16, 2009 by zENO 用手指塗鴉畫圖（應用 multi-touch 技術的火狐Web軟件） a multi-touch drawing demo for Firefox 3.7 （英文） （按圖直接入去看片，按 link [...]

  12. Pingback from Sarah Doherty » MozCamp Chile and Jornadas Regionales de Software Libre 2009 on October 17th, 2009 at 10:27 pm:

    [...] have to ration swag or it would all disappear immediately.  I enjoyed seeing the creativity of the touchscreen demos, the support through each Mozilla keynote/track talk and how excited everyone was to see Mozilla at [...]

  13. Linda Marroquin wrote on October 19th, 2009 at 9:31 am:

    Look at this user interface for multi touch. http://www.youtube.com/watch?v=te9O8HavQpQ

  14. jacob wrote on April 16th, 2010 at 9:58 pm:

    any chances of integration to microsoft tablet sdk on windows? : )

  15. Ole wrote on May 10th, 2010 at 1:46 pm:

    I also would like to try the javascript-multi-touch-support.
    Unfortunately all the build have disappeared :-(
    Does anybody still have a copy?

  16. karelr wrote on August 24th, 2010 at 5:17 pm:

    how can I let firefox 4 beta4 let work the application work on an windows7 starter tablet (archos9)

    thanks to help me

  17. Oleg wrote on May 7th, 2011 at 10:52 am:

    Argl! Another Multi-touch demo entirely single-touch.

Comments are closed for this article.