Exploring Device Orientation and Motion
Today, we released a prototype implementation of the W3C DeviceOrientation Event Specification draft on HTML5Labs.com. This specification defines new DOM events that provide information about the physical orientation and motion of a device. Such APIs will let Web developers easily deliver advanced Web user experiences leveraging modern devices' sensors.
How This Helps Developers
With the Device Orientation API, developers can explore new input mechanisms for games, new gestures for apps (such as “shake to clear the screen” or “tilt to zoom”) or even augmented reality experiences. The prototype’s installation includes a sample game to get you started in understanding the API.
Video showing the concepts explained in this post in action
How This Works
The Device Orientation API exposes two different types of sensor data: orientation and motion.
When the physical orientation of the device is changed (e.g. the user tilts or rotates it), the deviceorientation event is fired at the window and supplies the alpha, beta, and gamma angles of rotation (expressed in degrees):
<div id="directions"></div>
<script>
window.addEventListener("deviceorientation", findNorth);
function findNorth(evt) {
var directions = document.getElementById("directions");
if (evt.alpha < 5 || evt.alpha > 355) {
directions.innerHTML = "North!";
} else if (evt.alpha < 180) {
directions.innerHTML = "Turn Left";
} else {
directions.innerHTML = "Turn Right";
}
}
</script>
When a device is being moved or rotated (more accurately, accelerated), the devicemotion event is fired at the window and provides acceleration (both with and without the effects of gravitational acceleration on the device, expressed in m/s2) in the x, y, and z axis as well as the rate of change in the alpha, beta, and gamma rotation angles (expressed in deg/s):
<div id="status"></div>
<script>
window.addEventListener("devicemotion", detectShake);
function detectShake(evt) {
var status = document.getElementById("status");
var accl = evt.acceleration;
if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {
status.innerHTML = "EARTHQUAKE!!!";
} else {
status.innerHTML = "All systems go!";
}
}
</script>
Trying Out The Prototype
You can download the prototype at HTML5Labs. This prototype requires Internet Explorer 10 running on devices with accelerometer sensors supported by Windows 8. The prototype works as an extension to Internet Explorer on the desktop, where developers can get a first-hand look at the APIs. To get started building your own pages with the prototype, all you need to do is install the prototype and then include a reference to the DeviceOrientation.js script file (copied to the desktop after installing the prototype):
<script type="text/javascript" src="DeviceOrientation.js"></script>
We Want Your Feedback
We want to hear from developers on this prototype implementation of the W3C Device Orientation Event Specification, so please let us know what you think by commenting on this post or sending us a message.
—Abu Obeida Bakhach, Program Manager, Microsoft Open Technologies Inc.
—Jacob Rossi, Program Manager, Internet Explorer
Comments
Anonymous
August 30, 2012
Dear IEBlog, When can we test out IE10 on Windows 7?Anonymous
August 30, 2012
why tracking protection list is not sync beetween computers in Windows 8?Anonymous
August 30, 2012
@Arieta: Forget about it, they'll never comment on this.Anonymous
August 30, 2012
im starting to think they are abandoning the idea of ie 10 on windows 7 etherway it will help firefox and chrome overtake ieAnonymous
August 30, 2012
The comment has been removedAnonymous
August 30, 2012
Coupling this device orientation technology with HTML5 WebGL will produce great things. Kudos to the IE team!Anonymous
August 30, 2012
@Remy Sharp - Nice idea! Looks like lacks either the unprefixed or -ms prefixed version of CSS 3D transforms (possibly a couple other minor things, but that's what struck me first). So it's not quite working in IE10 yet. See: http://bit.ly/JMf3Tk For basic testing on devices that don't have accelerometers, the HTML5 Labs prototype will let you simulate the motion/acceleration using your mouse. Though it doesn't go as far as remote control like yours--cool stuff!Anonymous
August 30, 2012
The comment has been removedAnonymous
August 30, 2012
Consumer Preview? You mean "the thing" that's actually obsoleted by the Release Preview and the RTM Version? o.O Actually, I haven't had any of these problems either on the RP or on the RTM.Anonymous
August 31, 2012
The comment has been removedAnonymous
August 31, 2012
@Edward It's a specification draft....Anonymous
August 31, 2012
The comment has been removedAnonymous
August 31, 2012
The image is not at all clear and unambiguous. The rotational arrows for the x and z axis can still be interpreted as clockwise or counter-clockwise depending on the way you look at it (or how someone's brain works, appearantly.)Anonymous
August 31, 2012
The comment has been removedAnonymous
August 31, 2012
The comment has been removedAnonymous
August 31, 2012
The comment has been removedAnonymous
September 01, 2012
The comment has been removedAnonymous
September 01, 2012
The comment has been removedAnonymous
September 01, 2012
The comment has been removedAnonymous
September 02, 2012
The comment has been removedAnonymous
September 02, 2012
The comment has been removedAnonymous
September 02, 2012
The comment has been removedAnonymous
September 02, 2012
The comment has been removedAnonymous
September 03, 2012
The comment has been removedAnonymous
September 03, 2012
The comment has been removedAnonymous
September 03, 2012
The comment has been removedAnonymous
September 03, 2012
The comment has been removedAnonymous
September 04, 2012
Internet Explorer is opening every .mp3 in media player and i want the user to download this file instead of opening. I cannot modify headers. Please share some trick if any.Anonymous
September 04, 2012
Actually, it might be already 0.00003% since I know a couple of people (including me) who use Windows 8 on a tablet. But joking aside, you KNOW that Windows tablets WILL have more market share than the PlayBook. Citing Wikipedia: "Much of the 700,000 units shipped to retailers remained on the shelves for months". How does Immersive violate any patent? Immersive IE10 as in "no toolbars, no menus, no controls visible, just the user and the HTML document"; Immersive != Tiles... Actually, IE is the only Immersive app so far. If you fail to get that, then I feel sorry for you. "Incredibly ugly" - that's pretty subjective. I find the interface quite appealing and I'm glad Microsoft got rid of Aero, since it was simply a memory hog. If you want eye candy, there are plenty of third party options. Also, Windows 7 will be supported until 2020, so you have plenty of time to find "viable alternatives". And if you're not happy with Microsoft, you have other options (though I doubt your productivity would actually be any better). Anyway, I know it's useless trying to make you use your brain efficiently. It appears that you're always the same b*tthurt guy, just posting under different names on this blog. And I'm frustrated that this blog does not allow flagging for spam, since you annoy interested readers. @ashutosh khanna - Right-click the link to the mp3 and select "Save target as..."; that will allow you to choose a folder where to save the mp3.Anonymous
September 04, 2012
The comment has been removedAnonymous
September 05, 2012
The comment has been removedAnonymous
September 05, 2012
The comment has been removedAnonymous
September 05, 2012
I feel like I have to defend Windows Vista! Window Vista was plagued by initial performance issues, bad driver/hardware support and some software bugs. But Vista provided some really good architectural and usability improvements to Windows. Those improvements were refined in Windows 7, which turned out to be a great OS. Windows 8, on the other hand, is much worse than Vista. Compared to Vista, Windows 8 is a usability nightmare. It is unintuitive! Bugs can be fixed, but bad UI decisions cannot. I am sure that if Windows 8 was released as a for-touch-only OS, Windows 8 would not have recieved any negative feedback at all. Instead Microsoft will force the OS on every new computer!Anonymous
September 06, 2012
Personally, I did not have ANY problems with Vista. And it was thanks to Vista that manufacturers stopped the mass production of sh*tty PCs - it was the version of Windows that stepped up the bar on hardware. And except for the CPU, hardware requirements have been the same in Windows Vista, 7 and 8.Anonymous
September 06, 2012
I know it's unrelated, but I'd like to ask if anybody else got the BrowserChoice Screen today. I'm running Windows 8 RTM and I think it appeared due to an update, but I don't know how to uninstall it completely. Any ideas?Anonymous
September 06, 2012
The comment has been removedAnonymous
September 06, 2012
The comment has been removedAnonymous
September 06, 2012
The biggest complaint I heard about vista was the security confirmation messages, which is a bit silly considering it took 5 seconds to turn off in the control panel. But that didn't stop everyone I know from saying thats why they hated vista.Anonymous
September 06, 2012
It's funny to see people still arguing for an IE10 release for Windows 7. That won't happen. PERIOD.Anonymous
September 06, 2012
If they do not produce an IE10 for Windows 7 there will be lawsuits. Quite a few of them actually. The promise of an update for IE was part of several strategic descisions to roll out Windows 7 troughout companies for next year. We like many already started application update programs for browser based apps from IE8 to IE10 which will roll out in 2013 after the Windows 7 upgrading has completed.Anonymous
September 07, 2012
You can say it all you want but it doesn't make it true, their plans haven't changed: the Windows 7 version will come out.Anonymous
September 07, 2012
>2012 >Still waiting for non-existant IE10 for Win7 I SURE HOPE YOU GUYS DON'T DO THATAnonymous
September 07, 2012
The comment has been removedAnonymous
September 07, 2012
The comment has been removedAnonymous
September 07, 2012
The comment has been removedAnonymous
September 07, 2012
Thx, we'll look at thatAnonymous
September 08, 2012
The comment has been removedAnonymous
September 08, 2012
The comment has been removedAnonymous
September 08, 2012
The comment has been removedAnonymous
September 08, 2012
The comment has been removedAnonymous
September 09, 2012
The comment has been removedAnonymous
September 09, 2012
ie10 for windows7 to be released 24 September ?Anonymous
September 09, 2012
The comment has been removedAnonymous
September 09, 2012
news.cnet.com/.../apache-web-software-overrides-ie10-do-not-track-setting ppl who use ie10 with dnt enabled will not be honered nowAnonymous
September 09, 2012
Apache are making a big mistake. People do not wan to be tracked by default. Apache is now part of the anti-privacy lobby. I wonder how much Google and other advertising companies are paying them... Living in the EU I am inclined to send a letter the EU commission to ask them to make it mandatory to obide by the 'Do Not Track' setting which should be on by default.Anonymous
September 09, 2012
The comment has been removedAnonymous
September 09, 2012
"Microsoft deliberately violates the standard." Firstly, shame on those that are involved in the standard for bowing to the advertisers and not making our privacy having priority number one. Secondly Microsoft has made it a installation choice. That could wel be in the realm of the spec. It might be a wide interpretation of an opt-in but is aty least an interpretation that respect their customers privacy. Apache now looks to be deep in the pocket of the anti-privacy lobby headed by the biggest privacy violator of them all, Google.Anonymous
September 10, 2012
@Daved - Then tell me, in wich way Microsoft doesn't follow the standard. DNT doesn't have a standard-setting. The only thing is that is have to be the chose of the user. Installing Windows 8 or creating a new account, you can see "Turn Do Not Track on in Internet Explorer", so IE give an announcment of the feature and it's then te chose of the user. The other browser doesn't so actually, they're not following the standard.Anonymous
September 10, 2012
@Yannick what is the default for that setting when using IE for the first time? - if the user did not explicitly turn it on themselves then it was NOT a user specified setting - period. You can be a Microsoft FanBoy all you want but you can't argue against cold hard facts! FAIL!Anonymous
September 10, 2012
The comment has been removedAnonymous
September 11, 2012
The comment has been removedAnonymous
September 11, 2012
The comment has been removed