new device API for Firefox 3.6: orientation

One new feature that we’re including as part of Firefox 3.6 is support for web pages to access machine orientation information if it’s available. As you can see from the demo above you can use it to figure out if the machine is moving and what direction it’s facing.

Using the API is very simple. All you have to do is add a simple event listener:

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

Originally built as something that we would include for our upcoming mobile browser release, we’ve made it available on desktop systems as well. Many modern Macbooks and Thinkpads contain devices and drivers that expose this information. We’ve added support for Linux, Macs and some Thinkpads where drivers and devices are available. (Note, on some Macbooks detect the orientation information backwards – we’re working on that.)

You can find more information on two posts by Doug Turner and an update on documentation for orientation from Eric Shepherd.

Paul Rouget has this and some other demos up in one of his posts.


61 comments

  1. Lloyd Hilaiel

    Neat!

    Hey, if you figure out that backwards orientation issue, please drop me a line? We’ve got the same problem here:

    http://browserplus.yahoo.com/demos/marbles/

    much love,
    lloyd

    October 12th, 2009 at 17:24

  2. […] evangelist Christopher Blizzard announced Firefox’s coming orientation interface […]

    October 12th, 2009 at 21:34

  3. […] evangelist Christopher Blizzard announced Firefox’s coming orientation interface […]

    October 13th, 2009 at 00:01

  4. bernhard

    A compass API would be nice.

    October 13th, 2009 at 00:30

  5. […] able to detect which way is down will allow people rotate their laptop to play it. Mozilla made an official post on the new feature, with Christopher Blizzard saying, “One new feature that we’re including as part of […]

    October 13th, 2009 at 02:07

  6. Craig Baker

    I’m generally a positive guy. Seriously all I want out of Firefox is less crashes and more stability, not more features.

    I’d love to see this feature running on a desktop!

    October 13th, 2009 at 02:36

  7. Staś Małolepszy

    @Lloyd: Bug tracks this, and AFAICT, the second patch fixes the behavior for at least some of the new MBPs.

    October 13th, 2009 at 03:04

  8. Staś Małolepszy

    Sorry, the link didn’t get posted above. The bug in question is https://bugzilla.mozilla.org/show_bug.cgi?id=521848

    October 13th, 2009 at 04:50

  9. koniczynek

    Will it also detect if user’s head is tilted along with the display? Because if not if I will be laying on the side with my notebook tilted I won’t be able to read anything. Maybe you should include webcam support to detect face position?

    October 13th, 2009 at 05:47

  10. […] de Firefox, se puede apreciar perfectamente en un vídeo de demostración que podrás ver aquí. En donde fácilmente se podrán hacer una idea del gran potencial que esta función puede tener en […]

    October 13th, 2009 at 05:55

  11. […] nice little trick appeared on the Mozilla hacks blog. Firefox 3.6 will be able to use your device orientation (if the information is available) and […]

    October 13th, 2009 at 05:56

  12. Antoine

    Please don’t hurt the web (and me), use open standards (like HTML(), OGG Theora, etc.) !

    October 13th, 2009 at 09:10

  13. […] stosowanego np. w iPhone’ie. O jej wprowadzeniu poinformował Christopher Blizzard z Mozilli. Na stronie hacks.mozilla.org zamieścił on wpis, w którym czytamy, że jedną z nowości, które są dołączone do Firefox 3.6 jest umożliwienie […]

    October 13th, 2009 at 10:51

  14. […] tirar partido de aplicações e jogos baseados na Web, cuja experiência pode sair valorizada pela orientação em que se encontra o dispositivo usado para aceder à Internet. Veja um vídeo com um exemplo das […]

    October 13th, 2009 at 12:23

  15. […] finely enough to play simple physics games, which you’ll evidently be able to do in the next version of Firefox: Originally built as something that we would include for our upcoming mobile browser release, […]

    October 13th, 2009 at 13:22

  16. Reasons

    First: is it really need it?.

    Second: Mozilla should be fixing others things(bugs) rather than making this type of “feature”.

    3.5 is not a stable one, so it’s better to make it stable first.

    October 13th, 2009 at 13:56

  17. […] added support for Linux, Macs and some Thinkpads where drivers and devices are available.” wrote Christopher Blizzard, a Mozilla […]

    October 13th, 2009 at 14:44

  18. […] finely enough to play simple physics games, which you’ll evidently be able to do in the next version of Firefox: Originally built as something that we would include for our upcoming mobile browser release, […]

    October 13th, 2009 at 15:09

  19. Christopher Blizzard

    For those of you concerned about stability, we’re working full steam on that issue for 3.6. We know that 3.5 wasn’t as stable as it should have been. We haven’t talked about it much but it’s our most important project around 3.6.

    Features like this are included as well but we’ve backed away from a lot of things to work on stability instead. We’ll have a post about that nearer to the end of the beta cycle when we have a little bit more data, so stay tuned!

    October 13th, 2009 at 15:30

  20. […] is support for webpages to access machine orientation information if it’s available,” wrote Christopher Blizzard, a Mozilla evangelist. “Many modern MacBooks and ThinkPads contain devices and drivers that […]

    October 13th, 2009 at 16:37

  21. […] Os dejamos con el vídeo demostración de Christopher Blizzard: […]

    October 13th, 2009 at 16:54

  22. […] new device API for Firefox 3.6: orientation Firefox 3.6 will support accelerometers so your browser knows your orientation. [hacks.mozilla] […]

    October 13th, 2009 at 17:31

  23. […] For more details you can visit official post on Mozilla blog http://hacks.mozilla.org/2009/10/orientation-for-firefox/ […]

    October 13th, 2009 at 21:26

  24. […] can read more about it here : Mozilla Hacks Tags: accelerometer, akselerometer, lenovo, t400, thinkpad Posted by oyvind Technology […]

    October 14th, 2009 at 04:39

  25. […] can view more information from here. A beta release of Firefox 3.6 may come out later today, if a Mozilla development schedule we saw […]

    October 14th, 2009 at 05:26

  26. […] Firefox 3.6 jej sám o sobě zatím používat nebude (to v budoucnu spíše Fennec), ale má pro tvůrce webových stránek připravené API, které umožní s akcelerometrem spolupracovat. Webové aplikace třeba půjde pomocí pár řádků kódu upravit tak, aby automaticky vyrovnávaly naklonění notebooku, což nezní úplně jako hloupý nápad. Ostatně podívejte se sami na video, které připravil Christopher Blizzard: […]

    October 14th, 2009 at 05:48

  27. […] e di conseguenza adattare la visione delle pagine web. La notizia l’ho potuta leggere su hack mozilla e guardando il video sottostante sono sicuro che anche voi rimmarete a bocca […]

    October 14th, 2009 at 07:44

  28. […] to figure out if the machine is moving and what direction it’s facing more can be found here at http://hacks.mozilla.org/interesting times along with more things to think about when developing the next generation of […]

    October 14th, 2009 at 07:51

  29. […] Il Panda Rosso di casa Mozilla, in occasione della prossima versione 3.6, sarà in grado di rilevare eventuali accelerometri (presenti in alcuni recenti device) e sfruttarli a dovere. Niente più torcicollo quindi per numerossissimi utenti che utilizzano il pc portatile con lo schermo orientato verticalmente. La notizia, che sta facendo velocemente il giro della blogosfera, è stata rilasciata qualche giorno fa dal portale Hacks.Mozilla.org. […]

    October 14th, 2009 at 08:18

  30. […] : new device API for Firefox 3.6: orientation […]

    October 14th, 2009 at 09:25

  31. Alston

    It would be awesome if this was also coded to use the accelerometer features in some of Toshiba’s laptops, which use a different API from IBM/Lenovo and Apple.

    October 14th, 2009 at 11:02

  32. […] New device API for Firefox 3.6 : Orientation (hacks.mozilla.org vía FayerWayer […]

    October 14th, 2009 at 12:00

  33. […] New device API for Firefox 3.6 : Orientation (hacks.mozilla.org vía FayerWayer […]

    October 14th, 2009 at 13:52

  34. […] via Mozilla Hacks […]

    October 14th, 2009 at 14:18

  35. […] some very interesting activity at hacks.mozilla.org lately. As Christopher Blizzard said in the according blog post “One new feature that we’re including as part of Firefox 3.6 is support for web […]

    October 14th, 2009 at 15:09

  36. […] Read | Permalink | Email this | Comments Rate this topic: (No Ratings Yet) Popularity: 0 You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed. […]

    October 14th, 2009 at 15:29

  37. […] información en: Mozilla Lee más sobre: Firefox, Video Noticias relacionadasVideo: Blu-ray para autos, Snow Leopard y […]

    October 14th, 2009 at 15:42

  38. Syd Lawrence

    I have been playing around with the accelerometer in firefox 3.6b, its wicked, really easy to use. check out my youtube video: http://www.youtube.com/watch?v=M5GMWaGiV1g or try out the webpage itself http://playground.marmaladeontoast.co.uk/ff3.6

    Might work on a little game for it, if I get any time.

    October 16th, 2009 at 08:40

  39. […] En OhMyGeek! #038 Matthew ya mencionó que está disponible la nueva beta del navegador del panda rojo de fuego. 3.6b viene con muchas y grandes funcionalidades como esta API que es tiene  soporte de acelerómetro que se ve reflejado en el siguiente video, donde prueban al navegador surfeando en variadas pruebas en un MacBook unibody (los nuevos), que incluyen acelerómetro equipado. La Api es muy fácil de usar y se puede conocer más, ACÁ. […]

    October 17th, 2009 at 06:32

  40. […] zu Entwicklern pflegt und diese zum Teil sehr kreativ sind, gibts jetzt was neues. Einfach klicken und lächeln Kategorien:Apple Kommentare (0) Trackbacks (0) Kommentieren […]

    October 17th, 2009 at 11:29

  41. Volvox

    Looks funny, but i can’t see any use for this technology in webbrowser. Who will make website using this technollogy if only very small % of peoples have computers with ‘machine orientation information’

    October 18th, 2009 at 02:54

  42. Andrey

    Well, as it was written in the comment above, it might be useful for mobile devices.

    And yes, _a lot_ of mobile phones have accelerometer.

    October 20th, 2009 at 10:48

  43. Christopher Blizzard

    @Audrey – Yep! This will be in Fennec 1.0 as well since it’s based on the same code as 3.6.

    October 20th, 2009 at 10:52

  44. Ryan

    How will you go about adding support for more accelerometers? I have a HP Mini 2133 which has accelerometer in it and I would love to play around with the orientation API.

    October 21st, 2009 at 19:43

  45. […] test the feature yet. If you do not own an accelerometer, you might probably consider watching the demo video for the Orientation […]

    October 29th, 2009 at 22:42

  46. […] WebGL is based on Canvas3D work we pioneered, we’re scripting hardware with geolocation and orientation. We’re helping to standardize and implement some new CSS capabilities that are being […]

    November 8th, 2009 at 16:47

  47. […] 我们把在Mozilla的工作都设定在这个前提下。我们第一个使提速JavaScript成为可能,CORS(跨域XHR请求),混合使用HTML和SVG,最先提出的基于Canvas3D的WebGL,支持硬件设备的地理定位和重力感应。我们正在帮助实现和标准化一些全新的CSS规则,这些规则可能被其他浏览器实现;我们带领互联网朝着现代的字体系统前进;我们提供互联网网站作者和用户更多的安全工具。我们的工作就是帮助保证互联网变得更加丰富多彩并勇往直前──这也是我们公司公共利益使命中非常重要的一条。这是五年中Firefox提供给我们的机遇。 […]

    November 9th, 2009 at 05:03

  48. Frank

    Looks vaguely amusing… but I’m just saying, it better be possible to turn this function off or I will not upgrade my browser. The way I use my laptop this would be much more irritating than useful.

    November 14th, 2009 at 10:13

  49. Syd Lawrence

    People seemed to like my video, so I have now created an open source labyrinth game. Will make a video of it soon.

    Site
    http://playground.marmaladeontoast.co.uk/labyrinth/

    Src
    http://github.com/sydlawrence/FF3.6-Labyrinth

    November 24th, 2009 at 14:08

  50. […] : Le billet de Christopher Blizzard et la vidéo de démo de […]

    December 30th, 2009 at 04:01

  51. […] duruma göre vazife çıkaracak ve görünümünü ayarlayacak. Nasıl olduğunu görmek için videoyu izleyin. Çoğunlukla Mac kullanıcılarının kullanacağı bir özellik […]

    January 21st, 2010 at 15:11

  52. […] на копмјутерот во 3Д светот благодарение на новото API. Исто така можете да ги користите drag&drop функциите […]

    January 21st, 2010 at 15:18

  53. sakrist

    Nice!

    look my version http://www.developers-life.com/use-matrix-of-rotate.html

    January 24th, 2010 at 08:18

  54. Melroy van den Berg

    Very nice :|

    January 27th, 2010 at 13:43

  55. […] stimulate discussion. I talked about HTML5 (inclusive of the WebApps APIs, such as the File API and Orientation Events), CSS3’s @font-face property, and discussed the potential this had for Indic fonts. We closed […]

    March 11th, 2010 at 03:59

  56. […] ever since the introduction of onclick back in JavaScript’s infancy. And then, there’s Orientation Events, supported in Firefox 3.6 (with a really compelling demo — try it on the MacBook Pro and Fx […]

    March 12th, 2010 at 11:50

  57. Clement Deschesnes

    comment configurer facebook affin de pouvoir gérer le java-script et le flash qui
    m’empêche de jouer a toutes les applications

    March 13th, 2010 at 16:08

  58. James Duncombe

    Love it guys, nice one! :)

    November 24th, 2010 at 07:56

  59. adipex

    it sounds like a really great feature , anyone knows how can one without a location device can manually input his coordinates? maybe there’s a plugin for that ?

    December 28th, 2010 at 02:51

  60. Martin Kliehm

    I got a new laptop (Dell Latitude E6510) that has a ST Micro Accelerometer built in. Alas the demo pages stay static. Does anybody know if it’s possible to access that accelerometer’s data using the orientation API?

    February 11th, 2011 at 11:18

  61. […] some very interesting activity at hacks.mozilla.org lately. As Christopher Blizzard said in the according blog post “One new feature that we’re including as part of Firefox 3.6 is support for web […]

    May 28th, 2011 at 13:45

Comments are closed for this article.