Device Orientation events
Internet Explorer 11 adds support for DOM events that provide information about the physical orientation and motion of a device, as defined in the emerging W3C DeviceOrientation Event Specification. Using device orientation and motion events in IE11, you can use modern device sensors to 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.
Important This feature is not supported in IE11 on Windows 7.
The W3C DeviceOrientation Events specification defines two different types of sensor data: orientation and motion.
Device orientation events
When the physical orientation of the device has changed (when the user tilts or rotates it) by 0.01 degrees or more, Internet Explorer fires the DeviceOrientationEvent object at the window. The data provided by the DeviceOrientationEvent object specifies the orientation of the host device in relation to a coordinate frame fixed on the Earth. Specifically, this Earth coordinate frame has the following three axes:
- East (X) is in the ground plane, perpendicular to the north axis and positive towards the East.
- North (Y) is in the ground plane and positive towards true north (towards the North Pole).
- Up (Z) is perpendicular to the ground plane and positive upwards.
These X, Y, and Z axes correspond to the beta, gamma, and alpha properties of the DeviceOrientationEvent, respectively..png)
The following code shows how to use the deviceorientation event to guide the user to point their device northward.
<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>
Device motion events
When a device is being moved or rotated (or more accurately, accelerated), the DeviceMotionEvent object is fired at the window and provides acceleration data (both with and without the effects of gravitational acceleration on the device, expressed in m/s²) in the x, y, and z axes as well as rotational rate of change data in the alpha, beta, and gamma rotation angles (expressed in deg/s). Rotations use the right-hand rule, such that positive rotation around an axis is clockwise when viewed looking towards the positive direction of the axis.
The following sample demonstrates how to use the ondevicemotion event to detect and report any movement of the device above a specified threshold.
<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>
Calibrating the compass
The compassneedscalibration event fires when the host device compass requires calibration by the user in order to provide more accurate data from the DeviceOrientationEvent.
The IE implementation of this event fires whenever the host device magnetometer changes to a state of unreliable or approximate accuracy, as defined by the MagnetometerAccuracy enumeration of the Windows.Devices.Sensors namespace.