Some new demos

By Paul Rouget on Monday 12 October 2009, 19:08 - shared - Permalink

I would like to show you 3 new features we have today in Firefox (trunk).

demo

To try this demos, please use a nightly build: http://ftp.mozilla.org/pub/mozilla.....

If you don't, you should follow hacks.mozilla.org. More details are coming. We are also on Twitter: @mozhacks @paulrouget.

Orientation

If your computer has accelerometers, Firefox fires "Orientation" events in the Web content:

                window.addEventListener("MozOrientation", function(e) {
                   /* 3 values: e.x, e.y, e.y */
                }, true)

For more details, see Doug's blog post. Here are the demos:

Firefox Web page moving
Firefox logo moving
a Web page following the computer orientation
Daniel Glazman wrote some demos too. See here.

Orientation works with the latest trunk of Firefox. It works on MacBooks, on Windows on Thinkpad and Linux on Thinkpad (don't forget to modprobe tp_smapi && /etc/init.d/hdapsd start).

On the last MacBook Pro (5.1), the orientation is not computed the right way. We are working on it (but the demos still work, just the computed orientation is the opposite of the real one).

And here is a screencast of Orientation in action (flash version)

WebGL

We talked about WebGL: http://hacks.mozilla.org/category/w....

Here is a demo showing WebGL + CSS3 + SVG: http://people.mozilla.com/~prouget/....

CSS Transition

We now support CSS Transition. Here is a demo including CSS Transition + the video tag: http://people.mozilla.com/~prouget/....

Follow us!

If you want to know more about these demos, please follow hacks.mozilla.org, more details are coming :)

Comments

1. On Tuesday 13 October 2009, 12:37 by Axel Hecht

FWIW, the orientation stuff works on Namoroka as well.

2. On Tuesday 13 October 2009, 16:06 by max

i don't think my laptop's accelerometer data should be freely accessible in javascript...

3. On Tuesday 13 October 2009, 16:57 by Clochix

Awesome Paul !
Have you try the CSS Transitions with Firebug ? When you use HTML Explorer, transitions also apply to the blue layer that FB adds to show the element you're on.

4. On Tuesday 13 October 2009, 17:16 by Hugh Isaacs II

Awesome, now all we need is CSS animations and 3D transitions and flash will be one foot in the grave.

and @max, your accelerometer data is already freely accessible in C/C++ (and subsequent languages) having it accessible in Javascript shouldn't be an issue.

Plus it's not like anything malicious can really be done with that data.

5. On Tuesday 13 October 2009, 20:32 by KrisK

try:
javascript:b=document.getElementsByTagName("body")[0];t=b.innerHTML;b.innerHTML=null;w=b.appendChild(document.createElement("div"));w.innerHTML=t;w.style.height="100%";w.style.width="100%";w.style.MozTransformOrigin="50% 0";b.style.overflow="hidden";i=0;window.addEventListener("MozOrientation",function(e){if(++i==2)w.style.MozTransform="skewx("+-60*e.x+"deg)";i=i==2?0:i;},true);

6. On Wednesday 14 October 2009, 02:01 by Robert Ying

The accelerometer data is incorrect on my Thinkpad X41, it's about 45 degrees off. For example, the firefox start page angle is approximately the angle of the character "/" upon startup. Perhaps add a calibration page?

7. On Wednesday 14 October 2009, 02:03 by Robert Ying

Actually, when flat, http://disruptive-innovations.com/z... reports an angle of -61 to -62 degrees.

8. On Wednesday 14 October 2009, 21:25 by Tobias

The simple math on the acceleration data is most definitely wrong for ThinkPads. I don’t know what raw values Macs report.

First, the normalization factor of 180 is wrong. On my ThinkPad the delta ranges from -146 to 146 in X and from -141 to 141 in Y. I assume the range is dependent on the sensor used. Currently, at right angles, I only get 0.8 out.
A range problem.

Second, what is coming out of the driver are acceleration values, not angles. When you tilt the laptop the angle has an arcsine relation to the acceleration. This is why the angles are distorted when you directly feed the data to rotate as degrees. I changed to arcsine and corrected for the inaccurate sensitivity delta and the logo demo was always upright.
Math.asin(-e.x * 1.24) + 'rad'
A scale problem.

9. On Friday 16 October 2009, 21:46 by belu

Super présentation ce matin au JDLL merci ! Tu sais si le système 3D DriveGuard des portables HP peux fonctionner ?

10. On Tuesday 20 October 2009, 01:26 by Bilal

Javascript approach looks dangerous.
Should change architecture.

11. On Friday 13 November 2009, 08:38 by Phil

when I use this my tilt left is back, and right is forwards and so on? anyone else have this issue? I have the 15" MBP unibody. could it be placed in there the wrong way??

12. On Saturday 14 November 2009, 18:42 by Matt

Phil:

I'm noticing the same behavior in linux on a Thinkpad R400.

blog.mozbox.org