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.

Diagram showing the alpha, beta, and gamma angles of rotation returned in the deviceorientation event related to 3D X, Y, and Z axes: alpha = rotate around the Z axis, beta = X axis, and gamma = Y axis.

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.

API reference

DeviceOrientationEvent

DeviceMotionEvent

Specification

DeviceOrientation Event Specification