Testing the Compass API

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html#//apple_ref/javascript/instp/DeviceOrientationEvent/webkitCompassHeading

by HYEONGJINKIM

HTML

<div id="holder">
    <img src="http://www.usuhs.mil/afrrianniversary/images/Compass.gif" id="compass"/>
</div>
<table>
        <tr>
            <td>API</td>
            <td id="e"></td>
        </tr>
        <tr>
            <td>Gamma</td>
            <td id="g"></td>
        </tr>
        <tr>
            <td>Beta</td>
            <td id="b"></td>
        </tr>
        <tr>
            <td>Alpha</td>
            <td id="a"></td>
        </tr>      
        <tr>
            <td>Compass</td>
            <td id="c"></td>
        </tr>
        <tr>
            <td>Compass accuracy</td>
            <td id="ca"></td>
        </tr>   
    </table>
<p>made by <a href="http://twitter.com/sidonaldson">sidonaldson</a></p>

CSS

*{margin:0;padding:0;font-family:arial;}
table{width:100%;border-collapse:collapse;}
td{border:solid 1px #000; padding:2px 10px;}
tr td:first-child,p{text-align:right;}
img{margin:0 auto;display:block;width:75%;height:auto;}

JavaScript

function $(el) {
    return document.getElementById(el);
}

function deviceOrientationHandler(g, b, a, c, ca) {
    $("g").innerHTML = g;
    $("b").innerHTML = b;
    $("a").innerHTML = a;
    $("c").innerHTML = c;
    $("ca").innerHTML = ca;
    $("holder").style.webkitTransform = "rotate3d(1,0,0, " + (b * -1) + "deg)";
    $("compass").style.webkitTransform = "rotate(" + -c + "deg)";
}

(function() {
    if (window.DeviceOrientationEvent) {
        $("e").innerHTML = "DeviceOrientationEvent";
        window.addEventListener('deviceorientation', function(e) {
            // y-axis - yaw
            var g = e.gamma || 0;
            // x-axis - tilt
            var b = e.beta || 0;
            // z=axis - swivel
            var a = e.alpha || 0;
            // degree north
            var c = e.compassHeading || e.webkitCompassHeading || 0;
            // accuracy in deg
            var accuracy = e.compassAccuracy || e.webkitCompassAccuracy || 0;
            deviceOrientationHandler(g, b, a, c, accuracy);
        }, false);
    } else {
        $("e").innerHTML = "NOT SUPPORTED #FAIL";
    }
})();