What Web Can Do Today: Device Position

Device Position

The first-generation device position support is a part of Device Orientation API. It allows Web applications to access the gyroscope and compass data in order to determine the static orientation of the user's device in all the three dimensions, expressed in degrees of divergence from the "natural" northbound lie flat position.

The newer specification based on the Generic Sensor API also exists - the Orientation Sensor APIs (in absolute and relative variants). Contrary to the previous specification it provides readings expressed as quaternions what makes it directly compatible with drawing environments like WebGL.

For the detection of the device's movements, see Device Motion.

API glimpse

As a part of Device Orientation API

window.addEventListener('deviceorientation', listener): An event fired when the significant changes in the device's orientation has occured.
event.alpha: Returns device's current heading (direction) in degrees, counted counterclockwise from the North (0) through West (90), South (180) and East (270).
event.beta: Returns device's current front/back tilt in degrees, 0 when lying horizontally upward facing, 90 when in vertical position, -90 in vertical upside down, -180 when horizontal upside down.
event.gamma: Returns device's current left/right tilt in degrees, from -90 when turned left to 90 when turned right.

Absolute Orientation Sensor API

sensor = new AbsoluteOrientationSensor(): Creates an object serving as an accessor to the orientation readings in relation to the Earth’s reference coordinate system, based on accelerometer, gyroscope and magenetometer readings.
sensor.addEventListener('reading', listener): An event fired when the orientation reading has changed, indicating that the sensor object contains updated quaternion representing the device's orientation.
sensor.start(): Starts listening for the sensor readings.
sensor.quaternion: Returns the last available reading expressed as quaternion representing the device's orientation.

Relative Orientation Sensor API

sensor = new RelativeOrientationSensor(): Creates an object serving as an accessor to the orientation readings in relation to a stationary reference coordinate system, based on accelerometer and gyroscope readings.
sensor.addEventListener('reading', listener): An event fired when the orientation reading has changed, indicating that the sensor object contains updated quaternion representing the device's orientation.
sensor.start(): Starts listening for the sensor readings.
sensor.quaternion: Returns the last available reading expressed as quaternion representing the device's orientation.

Live Demo

Tilt Left/Right [gamma]
Tilt Front/Back [beta]
Direction [alpha]

Demo from HTML5 Rocks article.

JavaScript

if ('DeviceOrientationEvent' in window) {
  window.addEventListener('deviceorientation', deviceOrientationHandler, false);
} else {
  document.getElementById('logoContainer').innerText = 'Device Orientation API not supported.';
}

function deviceOrientationHandler (eventData) {
  var tiltLR = eventData.gamma;
  var tiltFB = eventData.beta;
  var dir = eventData.alpha;
  
  document.getElementById("doTiltLR").innerHTML = Math.round(tiltLR);
  document.getElementById("doTiltFB").innerHTML = Math.round(tiltFB);
  document.getElementById("doDirection").innerHTML = Math.round(dir);

  var logo = document.getElementById("imgLogo");
  logo.style.webkitTransform = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";
  logo.style.MozTransform = "rotate(" + tiltLR + "deg)";
  logo.style.transform = "rotate(" + tiltLR + "deg) rotate3d(1,0,0, " + (tiltFB * -1) + "deg)";
}

HTML

<table>
  <tr>
    <td>Tilt Left/Right [gamma]</td>
    <td id="doTiltLR"></td>
  </tr>
  <tr>
    <td>Tilt Front/Back [beta]</td>
    <td id="doTiltFB"></td>
  </tr>
  <tr>
    <td>Direction [alpha]</td>
    <td id="doDirection"></td>
  </tr>
</table>

<div id="logoContainer">
  <img src="https://www.w3.org/html/logo/downloads/HTML5_Badge_512.png" id="imgLogo">
</div>

<p><small>Demo from <a href="https://www.html5rocks.com/en/tutorials/device/orientation/" target="_blank" rel="noopener">HTML5 Rocks</a> article.</small></p>

CSS

.container {
  perspective: 300;
  -webkit-perspective: 300;
}

#imgLogo {
  width: 275px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding: 15px;
}

What Web Can Do Today?

Device Position

API glimpse

Live Demo

Browser support

Resources

Get in touch