Web API Device Orientation Events

Last Updated : 05 Dec, 2023

Web API Device Orientation Events provide a mechanism to access a device’s orientation data, including alpha, beta, and gamma angles, representing yaw, pitch, and roll. These events are triggered when there is a change in the device’s orientation. Developers can utilize this information to create immersive and responsive web applications that adapt to the device’s spatial positioning.

Web API Concepts and Usage

Mobile devices offer feature built-in sensors like gyroscopes, compasses, and accelerometers. These sensors empower applications to sense a device’s orientation and movement. Device orientation events allow crafting applications that dynamically adapt to the device’s orientation, responding seamlessly to user movements, all without relying on artificial intelligence.

Interactive 3D Content Navigation: It facilitates the exploration of 3D content on websites by allowing users to tilt and rotate their devices for a more immersive viewing experience.
Camera Control in Augmented Reality: Users can have device orientation to control the virtual camera in augmented reality, by creating a more dynamic and interactive environment.
Web-based Gaming: Intuitive control of character motion in web-based games via device tilting.

Web API Interfaces

Device orientation events in interfaces enable responsive design based on how users tilt or move their devices, enhancing interaction without relying on artificial intelligence.

DeviceOrientationEvent: It tracks changes in a device’s physical orientation, allowing web applications to respond to tilting or rotation.
DeviceMotionEvent: It monitors shifts in a device’s acceleration and rotation rate, providing data for responsive and dynamic web interactions.
DeviceMotionEventAcceleration: It measures the device’s acceleration along three axes, aiding in the precise understanding of movement and responsiveness.
DeviceMotionEventRotationRate: It Captures the rate of rotation around three axes, enabling web applications to adapt to the device’s rotational dynamics for enhanced user experiences.

Web API Events

Device orientation events track physical device movements, enabling interactive web experiences based on tilting and rotation.

deviceorientation: It reports device orientation changes for interactive web experiences.
devicemotion: It provides real-time data on device acceleration and rotation.
deviceorientationabsolute: It activates on absolute device orientation shifts for responsive interfaces.

Example: In this example, we will see the implementation of the above approach with an example.

HTML

<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Web API Device Orientation Events</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
        }
 
        #orientationData,
        #motionData {
            margin-bottom: 20px;
        }
    </style>
</head>
 
<body>
    <h1>
          GeeksForGeeks | Device 
          Orientation and Motion Example
      </h1>
 
    <div id="orientationData">
        <h2>Device Orientation Data:</h2>
       
        <!-- Display values of alpha, beta, 
            gamma, and absolute -->
        <p>Alpha: <span id="alpha">0</span></p>
        <p>Beta: <span id="beta">0</span></p>
        <p>Gamma: <span id="gamma">0</span></p>
        <p>Absolute: <span id="absolute">false</span></p>
    </div>
 
    <div id="motionData">
        <h2>Device Motion Data:</h2>
       
        <!-- Display values of acceleration along 
             X, Y, Z axes, and interval -->
        <p>Acceleration X: <span id="accelerationX">
          0</span>
          </p>
        <p>Acceleration Y: <span id="accelerationY">
          0</span>
          </p>
        <p>Acceleration Z: <span id="accelerationZ">
          0</span>
          </p>
        <p>Interval: <span id="interval">
          0</span> ms
          </p>
    </div>
 
    <!-- JavaScript to handle device 
         orientation and motion events -->
    <script>
        // Add event listeners for device 
          // orientation and motion
        window.addEventListener(
              'deviceorientation', handleOrientation);
        window.addEventListener(
              'devicemotion', handleMotion);
 
        // Function to handle device orientation events
        function handleOrientation(event) {
            // Update HTML elements with device orientation data
            document.getElementById('alpha').innerText = 
              event.alpha.toFixed(2);
            document.getElementById('beta').innerText = 
              event.beta.toFixed(2);
            document.getElementById('gamma').innerText = 
              event.gamma.toFixed(2);
            document.getElementById('absolute').innerText = 
              event.absolute;
        }
 
        // Function to handle device motion events
        function handleMotion(event) {
            // Update HTML elements with device motion data
            document.getElementById('accelerationX').innerText = 
              event.acceleration.x.toFixed(2);
            document.getElementById('accelerationY').innerText = 
              event.acceleration.y.toFixed(2);
            document.getElementById('accelerationZ').innerText = 
              event.acceleration.z.toFixed(2);
            document.getElementById('interval').innerText = 
              event.interval;
        }
    </script>
</body>
 
</html>

Output: Open inspect tool > Click on three dots > More tools > choose sensor then scroll down and turn on orientation and it will enable a mobile frame then try to move.

device-orientation-event-output