device-orientation-and-motion-events.md

ms.assetid	description	title	author	ms.author	ms.date	ms.topic	ms.prod	keywords
a5730687-eb0c-4d79-94df-194071b08e70	Learn how device orientation and motion events can provide event info about the physical orientation and motion of your user’s device.	Dev guide - Device orientation and motion events	abbycar	abigailc	02/08/2017	article	microsoft-edge	edge, web development, html, css, javascript, developer

Device orientation and motion events

Microsoft Edge supports DOM events that provide info about the physical orientation and motion of a device, as defined in the World Wide Web Consortium (W3C) DeviceOrientation Event spec. This spec defines two different types of sensor data: orientation and motion. By using device orientation and motion events, you can take advantage of 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.

Device orientation events

When a user tilts or rotates their device by 0.01 degrees or more, Microsoft Edge 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:

Axis	Description
X (East)	In the ground plane, perpendicular to the north axis, and positive towards the East.
Y (North)	In the ground plane and positive towards true north (towards the North Pole).
Z (Up)	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.

The following code snippet 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 in the form of two DeviceAcceleration objects. The acceleration data provided is for both with and without the effects of gravitational acceleration on the device(expressed in m/s²) on the x, y, and z axes.

Rotational rate of change data is represented by the DeviceRotationRate object, which contains data on the rotation angles (expressed in deg/s) of alpha, beta, and gamma. 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 code snippet 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 Microsoft Edge 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.

DEMO: Detect an OrientationChange Event on Mobile Devices

For mobile devices with a built-in accelerometer, try this CodePen demo and see the text change from "North!" when held straight up, or "Turn Left" if < 180, otherwise text will read "Turn Right".

See this example by Microsoft Edge Docs on CodePen.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

API reference

DeviceOrientationEvent

DeviceMotionEvent

Specification

DeviceOrientation Event Specification