Device Orientation - websockets

Overview

This is the fourth post in a series of four posts on experiments with the JavaScript deviceorientation event:

• One: Device Orientation - Vertical
• Two: Device Orientation - 360
• Three: Device Orientation - 3d
• Four: Device Orientation - websockets

This lab is an example of displaying 3d representations of devices’ current orientation using the deviceorientation event reported by mobile devices.

The logic behind the event values is explained by these Dev.Opera and MDN articles.

Three values are returned by the event - alpha (α), beta (β) and gamma (γ) - that relate to the orientation of the device.

1
2
3
4
window.addEventListener('deviceorientation', handleOrientationEvent);
function handleOrientationEvent(event) {
  console.log(event.alpha, event.beta, event.gamma);
}

For this lab, a Node.js Express server uses socket.io to listen for devices connecting. A host web page displays the current orientation of each connected device. This data is passed from device to server and on to the host in real-time via websockets.

For each device, the three device orientation values (alpha, beta and gamma) are used as rotation values for the X, Y and Z coordinates of their on-screen device.

The JavaScript file contains plenty of comments to describe the logic that calculates these values.

This is a basic implementation that doesn’t use Euler angles or Quaternions (etc) and therefore suffers from Gimbal Lock. (Read More Here).

Example video