Device Orientation | User Agents | Standards Based Development

• recognizes all angles
• requires much larger processing resources and code skills
• provides a dynamic look
• can be extremely useful for special functionality

An example would be a native game that allows users to control events simply by changing the angle of the device.

DeviceOrientation Event specifies several dom events that provide information about the physical orientation and motion of a hosting device (read: user agent?).

iOS Support

All iOS devices have accelerometer sensors (and some also have plusmagnetometer and gyroscope), and as of iOS 4.2, Safari supports the DeviceOrientation api.

The api detects/delivers accelerometer data 50 times per second; we can acquire them by capturing the ondevicemotion event on the window globcal object (or using addEventListener with devicemotion as the event name) and then use the accelerationIncludingGravity property on the DeviceOrientationEvent parameter. The DeviceOrientationEvent parameter has three values: x, y, and z., representing the acceleration in m/s^2 (that's supposed to be squared) for each axis. Typical acceleromater math should be used for games, effects or css transformations.

Note: if the devices is iPhone 4 or iPod Touch 4G (read: has a gyroscope) we can use acceleration instead of accelerationIncludingGravity, like so:

window.ondevicemotion = function(event) {
// event.accelerationIncludingGravity.x
// event.accelerationIncludingGravity.y
// event.accelerationIncludingGravity.z
}

Note: gyroscope requries ondeviceorientation capture, and reading alpha, beta, and gamma properties from the event parameter. This is how to get the angles (between 0 and 360) for detecting rotation changes. iPods < iPod 4G, and iPad/iPhone 3GS or older will not receive this kind of event.

window.ondeviceorientation = function(event) {
// event.alpha
// event.beta
// event.gamma
}

Events

DeviceMotionEvent

DeviceMotionEvent fires when a significant change in motion occurs; it's event object encapsulates the measurements of the interval, rotation rate, and the acceleration of the device.

The accelerometer measures the sum of two acceleration vectors: gravity and user acceleration. User acceleration is the acceleration imparted by the user to the device. The gyroscope and acceleromter enable the system to track the device's geometric attitude, it differentiates between gravity and user acceleration.

These events are registerable using the window's addEventListener method by passing devicemotion as the event type.

DeviceOrientationEvent

An iOS device must have a gyroscope in order to fire the DeviceOrientationEvent class; DeviceOrientationEvent is only fired while the user is changing the orientation. The DeviceOrientationEvent class encapsulates the angles of rotation in degrees and heating.

Angles of Rotation

Three angles of rotation: alpha, beta, and gamma properties; they're defined as an offset from an arbitrary direction, which is the direction in which the device was held when the orientation was first obtained. Because of this, we can only use the angles to track changes in orientation; we cannot derive the direction in which the device is currently facing. Tracking changes can be done by saving the first device orientation event and then using it as a reference point for subsequent values.

Note: the angles of rotation do not represent real world orientation.

Note: use the webkitCompassHeading if you want a real world heading.

By listening for the DeviceOrientationEvent, we can detect whether or not the device has a gyroscope; if not (read: DeviceOrientationEvent does not occur), use the DeviceMotionEvent class to receive raw accelerometer events. Approximate orientation is determinable from these events.

Register for device orientation events using the window's addEventListener method by passing deviceorientation as the event type.

References and Resources

• DeviceOrientation Event Specification
• DeviceOrientationEvent Event Specification
• DeviceOrientationEvent Class Reference
• DeviceMotionEvent Class Reference and DeviceOrientation Class Reference
• Safari on iPhone & iPad 4.2