Saturday, August 22nd, 2009

Crazy sexy Firefox multitouch demo

Category: Browsers, Firefox

>

Felipe 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 video above will make you pine for the day (not long!) where all laptop screens support touch (my son thinks they are already ;)

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.

javascript
< view plain text >
  1. var assignedFingers = {};
  2. var lastused = 0;
  3.  
  4. function touchMove(event) {
  5.   var divId;
  6.   if (lastused < = 4) return;
  7.   if (assignedFingers[event.streamId]) {
  8.     divId = assignedFingers[event.streamId];
  9.   } else {
  10.     divId = "trackingdiv" + (++lastused);
  11.     assignedFingers[event.streamId] = divId;
  12.   }
  13.   document.getElementById(divId).style.left = event.clientX + 'px';
  14.   document.getElementById(divId).style.top  = event.clientY + 'px';
  15. }
  16.  
  17. document.addEventListener("MozTouchMove", touchMove, false);
  18. document.addEventListener("MozTouchRelease", function() { lastused--; }, false);

You can check out code from all of the demos.

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.

Filipe is one of the amazing interns that has worked at Mozilla this summer. Summer at Moz is a fantastic experience with them around. It is a shame to see them go, but I can’t wait to see what Filipe and the others get up to next!

Posted by Dion Almaer at 5:59 pm
5 Comments

++++-
4.4 rating from 33 votes

5 Comments »

Comments feed TrackBack URI

Wow this is extremely cool. Kinda wish I had a tablet so I could play around with this when it’s added to Minefield.

Btw, you guys forgot to close the anchor tag for “code from all the demos” link. The last two paragraphs are a giant link, as well as the rating stars. :)

Comment by iliad — August 22, 2009

Lol fail

Comment by Darkimmortal — August 22, 2009

Wow, this is awesome, I had no idea you could do this.

Comment by cancelbubble — August 23, 2009

this its great! when we can use this feature>??????? :D
btw, Filipe is Felipe xD

@Darkimmortal fail what?

Comment by marlonbtx — August 24, 2009

Leave a comment

You must be logged in to post a comment.