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.
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 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.
(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.
Edit: If you want more details, take a look at Felipe’s latest blog post.
About Paul Rouget
Paul is a Firefox developer.