Skip to main
Table of Contents

JavaScript Sensor Access

This page demonstrates browser access to mobile motion and orientation sensors using the deviceorientation and devicemotion events.

  • Best tested on a real phone or tablet.
  • Some browsers require a secure context (https) and a user gesture before access is granted.
  • Sensor values shown here stay in the browser and are not sent anywhere by this demo.

Expected behavior: desktop browsers may report unsupported or zero values, while mobile browsers may prompt for permission after pressing Start.

Live Sensor Readout

This render demonstrates a permission-gated sensor reader with grouped numeric readouts. Start/stop controls and runtime status are provided in a dedicated control panel directly above the render.

Status: Idle. Press Start demo on a supported mobile browser.

Observed events: 0

Orientation

  • X-axis (beta)0.0000000000 deg
  • Y-axis (gamma)0.0000000000 deg
  • Z-axis (alpha)0.0000000000 deg

Accelerometer

  • X-axis0.0000000000 m/s2
  • Y-axis0.0000000000 m/s2
  • Z-axis0.0000000000 m/s2
  • Interval0.00 ms

Accel + Gravity

  • X-axis0.0000000000 m/s2
  • Y-axis0.0000000000 m/s2
  • Z-axis0.0000000000 m/s2

Gyroscope

  • X-axis0.0000000000 deg/s
  • Y-axis0.0000000000 deg/s
  • Z-axis0.0000000000 deg/s

Code for This Render

The readout render is simple HTML targets. A dedicated control panel block hosts the button, status, and observed event count while the page script handles permission requests, listener binding, and value updates.

<!-- control panel above the render -->
<button id="start_demo" type="button">Start demo</button>
<span id="sensor-status">Idle...</span>
<span id="num-observed-events">0</span>

<!-- render targets -->
<span id="Orientation_b">0</span>
<span id="Accelerometer_x">0</span>
<span id="Gyroscope_x">0</span>
<!-- repeat targets for each sensor value -->
// asset/js/content/example/javascript-sensor-access.js
// - request permission when required (iOS Safari)
// - start/stop devicemotion + deviceorientation listeners
// - update DOM targets only when values are present
// - show support / error / running state messages

Gyroscope Layered Parallax Demo

This render shows a practical use of orientation data: a two-layer image composition where the foreground and background move at different rates to create depth.

Press Start demo above, then tilt your device to move the layers. Orientation values from the first render drive this visual demo.

Two image layers are composited here: a forest background layer and a foreground squirrel/tree cutout layer. Sources: Pexels Photo 1586883 (forest) and Pexels Photo 1571117 (squirrel/tree), with full links in Attribution.

Code for This Render

The same deviceorientation data can drive UI motion by mapping beta/gamma to layer transforms and using different multipliers per layer.

<div class="sensor-parallax__stage sensor-parallax__stage--image-ratio aspect_ratio__sensor_parallax_forest_squirrel">
  <img id="sensor-parallax-back" src="/asset/image/content/example/javascript-sensor-access/gyroscope-forest-squirell-bottom.0-25x.png" alt="">
  <img id="sensor-parallax-front" src="/asset/image/content/example/javascript-sensor-access/gyroscope-forest-squirell-top.0-25x.png" alt="">
</div>
// inside handleOrientation(event)
// map beta/gamma to small x/y offsets
// apply slower movement to background, faster movement to foreground
// optional: clamp values to avoid extreme jumps

Support and Implementation Notes

  • DeviceMotionEvent.requestPermission() is primarily an iOS Safari requirement and must be called from a user gesture.
  • Some browsers expose only part of the event payload (for example, missing gyroscope or acceleration values).
  • Always handle unsupported browsers and denied permissions with a visible status message instead of failing silently.
  • Use predictable IDs for display targets so the update logic stays simple.
  • For sensor-driven visuals, clamp orientation values and use small transform ranges to avoid jitter and disorienting motion.

Files for This Page

  • Page HTML: in/example/javascript-sensor-access.html
  • Page SCSS: in/asset/css/content/example/javascript-sensor-access.scss
  • Page JS: in/asset/js/content/example/javascript-sensor-access.js

Attribution