Accelerometer Test

Test of using the accelerometer with the HTML5 API

by Stephen Killingsworth

HTML

<!--Perspective div-->
<div id="container">
    <!--Actual oriented div-->
    <div id="orienter">Accelerometer</div>
</div>

CSS

/*Perspective helps us see the rotation*/
 div#container {
    -webkit-perspective: 500px;
}
div#orienter {
    text-align: center;
    width: 10em;
    background-color: lightcoral;
    font-family: Arial;
    font-size: 2em;
    padding: 2em;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
}
div#orienter.tilt {
    background-color: red;
}

JavaScript

// Check for device orientation support
if (window.DeviceOrientationEvent) {
    var
    // The Orientation when we last checked for tilt
    lastOrientation,
    // The current Orientation
    currentOrientation,
    // How often we check for a tilt
    tiltTime = 100,
        // How much we must rotate to tilt
        tiltThreshold = 100,
        // The div that shows the rotation
        odiv = document.getElementById("orienter"),
        // The interval that updates the tilt
        tiltInterval = setInterval(tiltCheck, tiltTime);

    // Class to hold orientation information
    function Orientation(x, y, z) {
        this.x = x || 0;
        this.y = y || 0;
        this.z = z || 0;
    }
    // Member to get difference between two Orientations
    Orientation.prototype.diff = function (o) {
        return new Orientation(
        this.x - o.x,
        this.y - o.y,
        this.z - o.z);
    };
    // Member to find magnitude of Orientation
    Orientation.prototype.mag = function () {
        return Math.sqrt(
        (this.x * this.x) + (this.y * this.y) + (this.z * this.z));
    };

    // Function to handle when titled
    function tiltHandler() {
        console.log("tilt");
        // Visualize the tilt
        odiv.className = "tilt";
        // Reset after a time
        setTimeout(function () {
            odiv.className = "";
        }, 2000);
    }

    // The function that checks for tilts
    function tiltCheck() {
        // If we have an orientation to compare to
        if (lastOrientation) {
            // Get how much we rotated
            var mag = currentOrientation.diff(lastOrientation).mag();
            // If it's more than the threshold
            if (mag > tiltThreshold) {
                // We tilted
                tiltHandler();
            }
        }
        // Always update the last orientation
        lastOrientation = currentOrientation;
    }

    // Add an orientation listener
   ...