DeviceOrientation

by amindunited

HTML

<div class="compass">
    <div id="compassArrow" class="icon-arrow-up"></div>
</div>
<br/>
<br/>
<div id="motion_msg">|</div>
<div id="orientation_msg">|</div>

CSS

.ball {
    background-color: red;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    position: absolute;
    
}

.compass {
    height: 25px;
    width: 25px;
    line-height: 25px;
    font-size: 25px;
    position:absolute;
}



@font-face {
	font-family: 'icomoon';
	src: url('fonts/icomoon.eot');
}
@font-face {
	font-family: 'icomoon';
	src:...

JavaScript

(function(){
    var tilts = function(){
        this.rego = "2014 - Amindunited "
    }
    
    tilts.prototype.init = function(){
        console.log("blap");
        window.addEventListener('devicemotion', this.deviceMotionListener);
        window.addEventListener('deviceorientation', this.deviceOrientationListener);
        window.addEventListener('deviceorientation', this.compass);
    }
    
    tilts.prototype.devicemotionListener = function(e){
        var x = e.acceleration.x;
        var y = e.acceleration.y;
        var z = e.acceleration.z;
        
        document.getElementById("motion_msg").innerHTML = "X: "+x+" , Y:"+y+" , Z:"+z;
        console.log("It mooves !! ", e);
        
    }
    tilts.prototype.deviceOrientationListener = function(e){
        var alpha = e.alpha;
        var beta = e.beta;
        var gamma = e.gamma;
        
        document.getElementById("orientation_msg").innerHTML = "Alpha: "+alpha+" , Beta:"+beta+" , gamma:"+gamma;
        
        //tilts.compass(e);
        console.log('har', this, tilts);
        
        
    }
    
    tilts.prototype.compass = function(e) {
        var element = document.getElementById('compassArrow');
        var alpha = e.alpha;
        
        //Reset the arrow
        element.style.Transform = 'rotate(0deg)';
        element.style.WebkitTransform = 'rotate(0deg)';
        //Rotation is reversed in firefox
        element.style.MozTransform = 'rotate(-0deg)';
        
        
        //ios has its own compass
        if (e.webkitCompassHeading) {
            
            alpha = e.webkitCompassHeading;
            //compassHeading is the reverse of alpha (I dont know why)
            alpha = alpha * (-1);
            
        } else {
            alpha = e.alpha;
            webkitAlpha = alpha;
            
            //The stock android browser is 'off' by 270 degrees
            if (!window.chrome) {
                webkitAlpha = alpha - 270;
            }
        }
        
    ...