Mozilla

Firefox 4 Beta: Latest Update is Here – Experimenting With Multi-touch

The latest Firefox 4 Beta has just been released (get it here). This beta comes with hundreds of bug fixes, improvements and multi-touch support for Windows 7 (see the release notes here). This article is about multi-touch support.

Felipe Gomes is working on bringing multi-touch support to web content. In this latest beta, we are experimenting with this new feature.

Playing with MultiTouch, HTML5 and CSS3:

This video is hosted by YouTube and uses the HTML5 video tag if you have enabled it (see here). YouTube video here.

Multi-touch Events

If you have a multi-touch capable display, touch events are sent to your web page, more or less like mouse events. Each input (created using your fingers) generates its own events:

  • MozTouchDown: Sent when the user begins a screen touch action.
  • MozTouchMove: Sent when the user moves his finger on the touch screen.
  • MozTouchUp: Sent when the user lifts his finger off the screen.

Touch information

Touch events provide several useful properties.

  • event.streamId: don’t forget, it’s multi-touch, which means that you have to deal with several events from several sources. So each event comes with an id to identify the input.
  • event.mozInputSource: the type of device used (mouse, pen, or finger, if the hardware supports it). This is a property of mouse events.
  • event.clientX/Y: the coordinates.

Designing a touch UI

You might want to have a specific UI for multi-touch capable devices. You can use the :-moz-system-metric(touch-enabled) pseudo class or the -moz-touch-enabled media query to design a more finger friendly UI.

Note: For now, this feature only works with Windows 7. If you don’t have hardware that supports multi-touch, you can try Hernan’s multi-touch simulator.

More joy:

(This video is made by Felipe, see more here).

At the beginning of the video, you see how a webpage can get data about multi-touch input, correctly track points of contact and differentiate between touch input and pen input.

At the second part, you see a visual application of multi-touch input on a fluid simulator, where each point of contact adds a particle source, and the movement adds forces to the field.

Both parts use HTML5′s canvas element to render their content.

Like it?

Edit: If you want more details, take a look at Felipe’s latest blog post.

31 comments

Comments are now closed.

  1. Sirquini wrote on August 11th, 2010 at 20:09:

    Really awsome

  2. Ivan Enderlin wrote on August 12th, 2010 at 00:10:

    Seriously guys, you rock :-).

  3. Ali wrote on August 12th, 2010 at 00:36:

    Make some of the demos available online.
    I got multiple Multitouch-devices running Windows 7 and would like to try them myself.

  4. Paul Neave wrote on August 12th, 2010 at 03:35:

    Wow, awesome stuff. Do you know if these touch events work with MacBook Pro’s multi-touch trackpads (and the new Magic Trackpad)? If you could make that work too that would be amazing, as a lot of people don’t have touch-screen but do have multi-touch trackpads.

  5. Anon wrote on August 12th, 2010 at 06:00:

    @Paul:
    The article quite clearly states…
    “Note: For now, this feature only works with Windows 7″

    Why don’t people read!

    1. Sam wrote on August 19th, 2010 at 08:43:

      Paul raises an important point: is Apple defining a proprietary standard for multi touch with the Magic Pad? We know they have patented a suite of gestures on top of the event layer, so I would expect to see HTML5 follow that lead in standardization.

  6. Derek K wrote on August 12th, 2010 at 06:49:

    Really neat stuff. I’m not sure how Windows 7 handles multitouch but does it require a specific type of touch screen (like a capacative screen)?

    @Paul, you can probably already access Apple’s trackpads via javascript. The problem is that Apple has already built a bunch of system level gesture support into them so you’d have to figure out how to override that first. That’s why the Wacom Bamboo Touch needs a driver. It’s not using the system gesture events. You could probably also hack that and get it working.

  7. Cody Russell wrote on August 12th, 2010 at 12:02:

    I was taking a look through the Win32 code and I see that it’s already handling WM_GESTURE event and doing something with it, but I don’t see if it’s actually exposing the gesture events as an API to webapps yet. I’m also not very familiar with the Firefox source yet, but could you give me some pointers as to what the status is of gesture events?

    1. Paul wrote on August 13th, 2010 at 02:19:

      We support gesture internally, but we don’t expose them to web content yet.

  8. Marco Pivetta wrote on August 12th, 2010 at 14:13:

    Spectacular!
    Can’t wait to play with that :)
    Photogalleries using multitouch will be great!
    -> now downloading latest sources trunk :D

  9. Jamie Brightmore wrote on August 13th, 2010 at 02:23:

    Try doing that video niceness with Flash! Really cool.

  10. none wrote on August 13th, 2010 at 09:58:

    But more important things like security through a Protected Mode similar to IE8 and Chrome on Win7/Vista, no?
    This is becoming a teenager fancy browser, skipping the serious things…

  11. David wrote on August 16th, 2010 at 06:51:

    Is the demo in the YouTube video available somewhere?

    1. Bhupesh Pranami wrote on August 16th, 2010 at 23:30:

      Me too looking for urls for demo or anywhere source download is available?

  12. Hans Bernhard Lung wrote on August 21st, 2010 at 16:10:

    It´s a very good tool for creative persons. :-) I can work with this feater with my photos good work. I had a smal firm in the it buissnes and now i work in a company who made medical instruments.
    Well done.

    Hans Bernhard Lung

  13. Joachim Thomas wrote on August 29th, 2010 at 04:56:

    hi,

    is it possible to test the multitouch features also with a LapTops touchpad? (in my case it’s an Elan smart-pad)… I think the problem is standard drivers track the motion, not the position…

    thanks in advance for any response ;)

    have a nice day

  14. Mithun wrote on September 3rd, 2010 at 12:41:

    Stupid question but just to know, does this work with out the hardware.. Or there is some hardware requirement as well

  15. PHANTOMIAS wrote on September 10th, 2010 at 05:25:

    I have a question about the hardware. I see in some videos that 2×2 = 4 fingers can be used simultaneoulsy, but I only find displays I only can use 2 fingers at one time.
    Which hardware do you use or which hardware supports more than 2 fingers simultaneously?

    1. James Carrington wrote on September 23rd, 2010 at 11:13:

      N-trig multi-touch digitizers support up to 4 fingers on Windows 7. Our digitizers currently ship in the the Dell Latitude XT and XT2, HP TX2, Dell Studio 17, Lenovo T400 and are coming soon in the Fujitsu Lifebook T580 (announced but not yet shipping).

      1. Lars Knudsen wrote on October 15th, 2010 at 08:39:

        Please send a link to good linux drivers – if you have some inside knowledge.

  16. Chris Kilgore wrote on October 2nd, 2010 at 09:23:

    Has anyone tried using this with a multi-touch surface running Touchlib?

  17. bernhard wrote on October 17th, 2010 at 11:35:

    Multitouch for Android would be nice.
    On iPhone my Map works fine.

  18. bunga wrote on November 8th, 2010 at 19:18:

    Go to the CBSNews.com – and see how still, the text in some parts of this page is overlapped and distorted. For some strange reason, Opera & Firefox cannot come up to IE8 or IE9 and present all sites in a normal manner. This is too sad.

    1. Ashley Sheridan wrote on March 29th, 2011 at 02:46:

      The problem isn’t that Opera and Fx can’t present sites in a normal manner, it’s the reverse, and that IE can’t display sites according to standards, so some sites tend to get built with only one browser in mind; IE as it is still the dominant browser (although not in Europe now according to some statistics)

  19. petrik wrote on March 11th, 2011 at 20:06:

    that’s cool

    can you put the script from 1st video somewhere online?! pleassse!

    it will be very usefull for me.
    i almost love this browser!

  20. Brian wrote on April 22nd, 2011 at 08:41:

    What type of monitor is that being used in the demo? I can’t find any touch monitors on Samsung’s website.

  21. Dilan From Sri Lanka wrote on May 2nd, 2011 at 22:51:

    Interesting Work!!!, Paul,

    Is it possible for you to put some guidance on how you implemented this 1st demo using the Firefox touch API?

    Because that would be helpful to many who really loves this stuff….

  22. Artem wrote on September 20th, 2011 at 11:51:

    Can I look at the source? Or an example of these events?

  23. Luca Bishop wrote on October 18th, 2011 at 00:50:

    Really nice!!
    It’s possible to publish a full suorce code about that?

  24. Federico wrote on December 5th, 2011 at 07:41:

    Yes, I’d like to see the code!

  25. Steven wrote on October 4th, 2012 at 11:43:

    But more important things like security through a Protected Mode similar to IE8 and Chrome on Win7/Vista, no?

Comments are closed for this article.