I’ve been anxious to demonstrate the progress on our multitouch support for Firefox, and here’s a video which showcases some possible interactions and use cases for what web pages and webapps can do with a multitouch device.
We’re working on exposing the multitouch 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 receives events for each touch point and use them to build a custom multitouch experience.
We’ll also add CSS support to detect touchscreen devices. Using the pseudo-selector :-moz-system-metric(touch-enabled)
, you can apply specific styles for your page only if it’s viewed by a touchscreen user. That, along with physical CSS units (cm
or in
), makes it possible to adjust your webapp for a touchscreen experience.
Check out a short video with the demos in action (.ogg), .mp4, or embedded below, and some screenshots for reference (I added some marks to the images showing where the contact points are).
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);[/sourcecode]
On the wiki page you can see code snippets for the other demos. Any comments regarding the demos or the API are really welcome. We 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.
[…] This post has also been cross-posted to Felipe’s personal blog. […]
By: bringing multi-touch to the web at hacks.mozilla.org on August 21, 2009
at 8:28 pm
[…] intern Felipe Gomes has put up a very nice video showcasing a few demos of what can be done with the new multitouch support coming on Windows […]
By: Firefox multitouch support demo - Mozilla Links on August 22, 2009
at 1:38 am
[…] [Felipe’s Blog] Also Read Show Me your FirefoxFirefox Mobile: Download Fennec Maemo 1.0 Beta 3Skype 2.0 beta for […]
By: Video: Firefox Multi-Touch Support Show Off | Kabatology ~ Open Source, Linux on August 22, 2009
at 8:37 am
Why -moz-system-metric and not a new CSS media query value?
By: Robert O'Callahan on August 22, 2009
at 11:21 am
@roc: we went and used the css selector because it was a simple and traditional way to add a moz specific value for now, and it suited well for making small CSS changes instead of a whole new file or section as would be with a media query or a conditional file in browser/skin/.
However, a media query makes sense to be considered too. Although, as I understand, they’re mutually exclusive, so there might be a problem in this (e.g. a screen user agent could support touch as well as a mobile user agent).
Another thing that will make sense to add in the future will be a property to check for touch capabilities from JS as this is CSS only.
By: felipe on August 24, 2009
at 7:01 pm
I’m not talking about CSS media values like ‘screen’ etc, but CSS media queries, which support an extensible set of independent queryable properties:
http://www.w3.org/TR/css3-mediaqueries/
There is a draft spec to provide script access to those values:
http://www.w3.org/TR/2009/WD-cssom-view-20090804/#dom-media-matchmedium
By: Robert O'Callahan on August 24, 2009
at 10:23 pm
Cool, thanks for the pointer Roc. I didn’t know about those. Let’s see if I’ll have an implementation of that in the following week 🙂
I couldn’t find any info regarding this in the spec, but: is the list of features there considered complete, or just a minimal set for implementors? Should we suggest adding _touch_ as a new feature for the spec?
By: felipe on August 24, 2009
at 11:04 pm
[…] través de Mozilla Links me entero que nuestro amigo (?) Felipe Gomes ha grabado una demostración de lo que es el soporte multitouch de Firefox. No tiene nada que ver con la compatibilidad multitouch para el touchpad, es para dispositivos que […]
By: Demostración del soporte mutitouch de Firefox 3.6 | Punto Geek on August 22, 2009
at 12:44 pm
[…] través de Mozilla Links me entero que nuestro amigo (?) Felipe Gomes ha grabado una demostración de lo que es el soporte multitouch de Firefox. No tiene nada que ver con la compatibilidad multitouch para el touchpad, es para dispositivos que […]
By: Demostración del soporte mutitouch de Firefox 3.6 on August 22, 2009
at 12:54 pm
[…] disponibili solamente alcuni frammenti di codice, e qualche informazione, reperibile sul blog di Felipe Gomes, uno degli ideatori. Ciao! Benvenuto su Geektwice! Ti consiglio di sottoscrivere il nostro RSS […]
By: Il Futuro dei Browser passa per le Nostre Mani | GeekTwice on August 22, 2009
at 4:47 pm
[…] Gomes has extended multitouch support in Firefox to reach into content space (i.e. us Web devs can use it!). Checking out the sexy demos in the […]
By: Ajaxian » Crazy sexy Firefox multitouch demo on August 22, 2009
at 8:01 pm
[…] Gomes has extended multitouch support in Firefox to reach into content space (i.e. us Web devs can use it!). Checking out the sexy demos in the […]
By: Crazy sexy Firefox multitouch demo | Guilda Blog on August 22, 2009
at 10:06 pm
[…] Gomes has extended multitouch support in Firefox to reach into content space (i.e. us Web devs can use it!). Checking out the sexy demos in the […]
By: Crazy sexy Firefox multitouch demo on August 23, 2009
at 4:05 am
[…] info: felipe's Blog Loading google.load('search', '1'); google.setOnLoadCallback(function(){ new […]
By: Firefox multi-touch demo on August 23, 2009
at 8:48 am
[…] Sneak peak on multitouch events « felipe’s Blog felipe.wordpress.com/2009/08/21/sneak-peak-on-multitouch-events – view page – cached #felipe’s Blog RSS Feed felipe's Blog » Sneak peak on multitouch events Comments Feed felipe's Blog Soon to be started The multitouch project status — From the page […]
By: Twitter Trackbacks for Sneak peak on multitouch events « felipe’s Blog [felipe.wordpress.com] on Topsy.com on August 23, 2009
at 10:19 am
[…] Gomes has extended multitouch support in Firefox to reach into content space (i.e. us Web devs can use it!). Checking out the sexy demos in the […]
By: The Ashes » Blog Archive » Crazy sexy Firefox multitouch demo on August 23, 2009
at 11:41 am
[…] dokunmatik ekranlarda web tarayıcı kullanılabilmesini sağlıyor. Mozilla programcılarından Felipe Gomes‘un geliştirdiği Firefox multitouch’un demosunda tarayıcı içinde çalışan […]
By: Düğümküme » Dokunmatik Web Geliyor on August 23, 2009
at 2:57 pm
[…] Gomes, interno de Mozilla, ha subido un muy buen vídeo mostrando unas pruebas de lo que se puede hacer con el nuevo soporte multitáctil que vendrá en […]
By: Video Demostración del soporte multitáctil de Firefox « Mozilla Links en español on August 23, 2009
at 7:44 pm
Nice work.
Can you please let me know what kind of device (e.g. Dell Laptop some model number) you are using to support multi-touch with Firefox?
Many thanks.
Cheers Craig
By: Craig Anslow on August 24, 2009
at 4:57 am
@craig: there are a couple of multitouch devices in the market right now. The one in this video is an HP Touchsmart TX2.
By: felipe on August 24, 2009
at 7:03 pm
[…] προγραμματιστής Felipe Gomes εργάζεται, όπως αναφέρει στο blog του, πάνω στην ενσωμάτωση της υποστήριξης του […]
By: Λειτουργίες multitouch στον Firefox | Search Top Greek Blog on August 24, 2009
at 6:00 am
[…] Felipe Gomes Blog […]
By: Sneak Preview: Firefox wird Multitouch-fähig - ROOSTER | Das urbane LifeStyle Magazin on August 24, 2009
at 8:54 am
[…] Source […]
By: Multi-touch in Firefox - Tux-planet on August 24, 2009
at 5:12 pm
[…] go to the top or bottom of a Web page, for example, or two-finger pinch gestures to zoom out. But Felipe Gomes, a Brazilian computer science student who just finished a stint as a Mozilla intern, has […]
By: Thai Brothers’ Sharing Blog » Blog Archive » Coder shows Firefox with multitouch Web apps on August 24, 2009
at 6:36 pm
[…] go to the top or bottom of a Web page, for example, or two-finger pinch gestures to zoom out. But Felipe Gomes, a Brazilian computer science student who just finished a stint as a Mozilla intern, has […]
By: The Cheap Computer Geek » Blog Archive » Coder shows Firefox with multitouch Web apps on August 24, 2009
at 6:38 pm
[…] go to the top or bottom of a Web page, for example, or two-finger pinch gestures to zoom out. But Felipe Gomes, a Brazilian computer science student who just finished a stint as a Mozilla intern, has […]
By: Coder shows Firefox with multitouch Web apps | Blogging on August 24, 2009
at 8:16 pm
[…] sulla creazione di un interfaccia multi-touch per la vostra applicazione, raggiungete il sito di Felipe Gomes dove troverete anche alcuni codici di […]
By: Firefox 3,6 sarà dotato di supporto per il multi-touch. (demo) | TuttoVolume on August 24, 2009
at 9:02 pm
Just a quick question is the currently plan to also support single touch devices for the events and css as well?
Still interesting to see where this goes…
By: Jason Horrocks on August 24, 2009
at 11:55 pm
Nice work. Is there going to be a draft specification submitted by mozilla or webkit for a multitouch API? I tend to lean more towards webkits implementation in the iPhone of ontouchstart, ontouchmove, ontouchend.
I agree with robert that CSS styling would be better used in a media query, like webkit does for their transitions etc using @media (-webkit-transition)
By: Ryan on August 25, 2009
at 2:03 am
[…] Gomes programador de la comunidad Mozilla presenta en su blog el soporte multitouch que incorporará la versión 3.6 de Firefox. Esta funcionalidad sólo pordrá […]
By: Multitouch en Firefox 3.6, video demostración – Vaya astracanada !!! on August 25, 2009
at 3:25 am
[…] Mozilla-Entwickler Felipe Gomez arbeitet zur Zeit an einer Multitouch-Unterstützung für Firefox. Die Multitouch-Daten sollen über DOM-Ereignisse mit Elementen einer Webseite […]
By: HowtoForge Linux Tutorials » Firefox erhält Multitouch on August 25, 2009
at 5:57 am
[…] […]
By: Mozilla-Programmierer zeigt Touchscreen-Anwendungen in Firefox - Software | News | ZDNet.de on August 25, 2009
at 6:05 am
[…] que quem apresenta esta “funcionalidade” é um brasileiro que está trabalhando lá, o Felipe Gomes. Ponto para o […]
By: Firefox suportará multitouch! « Marcelo Costa on August 25, 2009
at 9:21 am
[…] Can you think of any other cool stuff that you could do with a touchscreen interface on a web browser? Share your ideas in the comments below. var a_vars = Array(); var pagename=''; var phpmyvisitesSite = 8; var phpmyvisitesURL = "http://www.potpot.fr/stats/php.php"; Read […]
By: NEWS: VIDEO: Multi-touch interface for Firefox | Geek & High Tech on August 25, 2009
at 10:09 am
[…] y casos de uso para sitios web y aplicaciones.”, dice Felipe Gomes, interno de Mozilla, desde su blog oficial. “Hemos estado trabajando en exponer la información multitáctil del sistema a […]
By: Soporte multitáctil en Firefox (Vídeo) on August 25, 2009
at 11:55 am
[…] you are interested in multitouch and Firefox make sure to read this blog post by Felipe. var addthis_pub = ''; var addthis_language = 'en';var addthis_options = 'email, […]
By: Multitouch on Firefox - User Agents on August 25, 2009
at 12:29 pm
[…] go to the top or bottom of a Web page, for example, or two-finger pinch gestures to zoom out. But Felipe Gomes, a Brazilian computer science student who just finished a stint as a Mozilla intern, has […]
By: Freetracking.org » Coder shows Firefox with multitouch Web apps on August 25, 2009
at 1:31 pm
[…] Fuente y videos: Felipe’s Blog […]
By: Soporte MultiTouch en Firefox 3.6 « Zona DiTec® on August 25, 2009
at 9:25 pm
What about using firefox multitouch from my macbook ?
The Macbook’s trackpads include multi-touch technology too.
By: FGRibreau on August 26, 2009
at 8:33 am
[…] Daha fazla bilgi için: Sneak Peak on Multitouch Events […]
By: Firefox dokunmatik ekran hazırlığını tamamladı « Gökçe’nin Web Güncesi (gwg) on August 26, 2009
at 10:40 am
[…] Felipe Gomes is te zien in een video-demo waarin hij de status toont van het “MultiTouch Polish” […]
By: MultiTouch support voor Firefox | Syndicat on August 26, 2009
at 9:57 pm
[…] Gomes has extended multitouch support in Firefox to reach into content space (i.e. us Web devs can use it!). Checking out the sexy demos in the […]
By: Furkan Tunalı v4 beta // Crazy sexy Firefox multitouch demo / on August 27, 2009
at 7:54 am
[…] artık çoklu dokunmatik destek verecek. Geliştirici Felipe Gomes bu projenin ilk sonuçlarını kendi web günlüğünde yayımladı. Açıklamalara göre Firefox’taki dokunmatik yönetim, Html sayfalarındaki DOM […]
By: Windows 7 aşkı başka bir şey | BilişimCell.net on August 27, 2009
at 8:16 am
[…] Multitouch-tauglich werden. Erste Ergebnisse dieses Projekts zeigt Entwickler Felipe Gomes jetzt in seinem Blog. Die Multitouch-Funktionalität wird demzufolge auf normalen HTML-Seiten mittels DOM-Ereignissen […]
By: Blog - Favicons24.de » Blog Archive » Firefox lernt Multitouch für Windows 7 on August 28, 2009
at 2:18 am
[…] que Mozilla proporciona para su comunidad. Ahora, como usuario, ¿qué opinas? Enlaces Fuente: Felipe Gomes Ejemplos: Wiki […]
By: Soporte multitáctil en Firefox (Vídeo) on August 28, 2009
at 8:12 pm
[…] Ein brasilianischer Student namens Felipe Gomes zeigt in diesem Video, wie man einen Multi-Touch Screen im Firefox integrieren könnte. Gegen sich selbst Pong am Touchscreen zu zocken, ganz schön nerdig aber formidabel! Mehr Infos in Felipe’s Blog. […]
By: Multi-Touch in Firefox | electru.de on August 29, 2009
at 1:52 pm
[…] out the groovy clip here, then hit the jump and tell us what you […]
By: Mozilla Intern Offers Peak at Multitouch Firefox | ModCool on September 2, 2009
at 6:11 pm
[…] out the groovy clip here, then hit the jump and tell us what you […]
By: PC Games News Blog » Blog Archive » Mozilla Intern Offers Peak at Multitouch Firefox on September 3, 2009
at 7:32 am
[…] out the groovy clip here, then hit the jump and tell us what you […]
By: Mozilla Intern Offers Peak at Multitouch Firefox | Bagoscomp.com on September 3, 2009
at 10:32 am
[…] Check out the demo from Felipe Gomes. […]
By: Mozilla tests multitouch HTML coding in Firefox | techgrenade.com on September 3, 2009
at 11:26 am
[…] out the groovy clip here, then hit the jump and tell us what you […]
By: Techknology's Blog » Mozilla Intern Offers Peak at Multitouch Firefox on September 3, 2009
at 11:54 am
This is very nice work! From what source do you capture the events from? Is it a TUIO server, or are they events available in windows7 ?
I’m also a student computer engineering in Ghent (Belgium), and last semester we too worked on integrating multitouch with Firefox by means of a Firefox extension called PookyTouch — you may have allready seen it around (http://pooky.sourceforge.net/). We used a different API however, inspired by the one used by Safari and currently intensively used on the iPhone and such.
We were wondering what your future plans are with this project, and when or how Mozilla plans to bundle your work in a future release of Firefox. We would also be very interested in what you think about the API we used, and about the extension as a whole. Perhaps we could join forces in order to establish a speedy introduction of multitouch in the next Firefox release?
Please contact me at my e-mailadres, or via our website. Be sure to check out the demo’s we’ve provided there as well 🙂
Greetings,
Michael.
By: Michael Vittorelli on September 4, 2009
at 2:46 pm
Thats really good to here that having multi touch support in a browser.
But what kind of applications can be developed other than the sample examples with the multi touch support.
By: Madan Narra on September 8, 2009
at 1:01 am
[…] dokunmatik yönetime de destek verecek. Geliştirici Felipe Gomes bu projenin ilk sonuçlarını kendi web günlüğünde yayımladı. Açıklamalara göre çoklu dokunmatik yönetim HTML sayfalarındaki DOM hareketleri […]
By: Firefox: Windows 7 için önemli yenilik « HACIATA on September 10, 2009
at 8:54 am
Does these multitouch events available in Firefox 3.5? Or these will appear in Firefox 3.6?
By: Will on September 15, 2009
at 1:09 pm
They arn’t available in 3.5 yet.
By: Michael Vittorelli on September 15, 2009
at 1:23 pm
Very Interesting. I belong to NUIgroup and I’ve been investigating in “indirect” multitouch, which means using low cost multitouch pads and overlap webcam stream on window where multitouch app is running. Check this out:
there are also some threads on NUIgroup.com forums about this topic. My question is this one: can you add support to display visual feedback in window tabs in Firefox?
By: frav80 on September 16, 2009
at 2:40 pm
From what I understand of this project it should be pretty straight forward. Events are received in JavaScript, so it should be very easy to display touch-events on the screen.
When you take the PookyTouch extension for Firefox alongside the jPooky plugin for jQuery you should allready be able to get visual feedback with only one line of code: $.visualizeTouches(). Please try out your multi-touch pad on our website http://pooky.sourceforge.net/ and the demo’s we’ve provided there 🙂
By: Michael Vittorelli on September 16, 2009
at 9:14 pm
Thanks, I downloaded PookyTouch and I was able to use the pad with your multitouch apps on the website (great!) . Anyway It’s not clear to me what you said about visualizeTouches(). Visual feedback for me it’s not only touch points on the webpage, but it’s also needed the image streamed by the webcam in order to see how the hand is going on the screen. Let me know if it’s possible with your plugin to add a transparent video on a webpage in order to do that.
By: frav80 on September 19, 2009
at 10:58 am
At the moment that isn’t possible with PookyTouch (and from what I know of Filipe’s implementation, it isn’t possible with that either).
We have considered this possibility however, but to be honest it it’s not one of our priorities to implement that. Mostly because the complexity is rather large as we take our input from a TUIO server, and handle the events from there with Java/JavaScript.
By: Michael Vittorelli on September 19, 2009
at 8:04 pm
I highly enjoyed reading this post, keep on creating such interesting stuff.
By: floadsdoowsip on November 24, 2009
at 9:24 pm
[…] arrived, so I dived head-first into Processing.js, equipped with a very special build of Firefox by Felipe Gomes. I have been following Felipe since I found out he was working on Multi-Touch JavaScript events for […]
By: Digital Shiv » Homebrewed Multi-Touch Screen Input using Processing.js on December 8, 2009
at 1:35 am
[…] dokunmatik yönetime de destek verecek. Geliştirici Felipe Gomes bu projenin ilk sonuçlarını kendi web günlüğünde yayımladı. Açıklamalara göre çoklu dokunmatik yönetim HTML sayfalarındaki DOM hareketleri […]
By: Firefox: Windows 7 için önemli yenilik on December 28, 2009
at 7:05 am
[…] arrived, so I dived head-first into Processing.js, equipped with a very special build of Firefox by Felipe Gomes. I have been following Felipe since I found out he was working on Multi-Touch JavaScript events for […]
By: Multi-Touch Screen Input with JavaScript – Multi-Touch Screen Input with JavaScript – Bocoup Web Log on January 13, 2010
at 11:35 am
i am making a online javascript desktop, and would like to state THANK YOU!!! =)
By: kasper brandt on March 15, 2010
at 9:13 am
[…] My demo would not have been complete without the ability to create sound by touch. In this example I am rendering black squares on a white background so the touch points are visible on the low-quality web cam. Apart from the styles, the code is the same as the example above. I am using the HP TouchSmart TX2 with Felipe Gomes’ Firefox Touch API. […]
By: Web Audio – All Aboard! – Web Audio – All Aboard! – Bocoup Web Log on May 17, 2010
at 7:04 pm
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
By: Gert on June 3, 2010
at 7:50 am
Hi Gert, the support for touch events is not yet available on nightly builds of Firefox. They’re only on experimental builds. You can find one here: http://code.bocoup.com/processing-js/fx-builds/felipe-humph-firefox-3.7a1pre.en-US.win32.zip It’s a bit old but I’ll be posting an updated version soon
By: felipe on June 3, 2010
at 2:34 pm
Oh forgot to mention that the microsoft touch pad example applications all work fine.
By: Gert on June 3, 2010
at 8:45 am
Hi Felipe, thank you for your fast reply, I will test it tomorrow.
Can you tell me (you don’t have to promise anything) if they will make it into 3.7 final or are they scheduled for 4.0 first?
And thanks a lot for doing this work, kiosks will never be the same again in a very good way 🙂
By: Gert on June 3, 2010
at 7:07 pm
[…] Felipe Gomes is te zien in een video-demo waarin hij de status toont van het “MultiTouch Polish” […]
By: MultiTouch support voor Firefox | Prima Deluxe on June 30, 2010
at 3:02 pm
Hi again Felipe,
I forgot to write you that everything worked perfectly with your special build.
Just wanted to hear if there is any news regarding which version of FF you are aiming for this to appear in and/or a donation towards specific features is possible?
All the best and great work.
By: Gert on July 14, 2010
at 1:49 pm
submitted to social bookmark, thanks for your useful informations ^_^
wait before you buy touchscreen monitor
By: arya solo on November 5, 2010
at 8:59 am
[…] never-tiring folks at Mozilla are already hard at work on implementing multitouch events in Firefox. Felipe Gomes has posted a short demonstration of very cool multitouch capabilities via a few […]
By: Multitouch support demoed in Firefox - Ilia Draznin on March 14, 2011
at 9:40 pm
[…] arbeitet an Multitouch-Events und wartet noch auf Feedback der anderen […]
By: Mozilla Camp Europe – Namics Weblog on November 15, 2011
at 3:57 pm
[…] une démonstration de Felipe Gomes qui nous montre les derniers progrès en matière de multi-touche sous Firefox. Le système en est […]
By: lire Multi-touch in Firefox | itlaia on August 28, 2013
at 5:17 am