martedì 19 febbraio 2013

Angoli di inclinazione in PhoneGap/HTML5

Sempre utilizzando PhoneGap e' possibile in modo molto semplice ottenere gli angoli di rotazione del dispositivo mobile nello spazio mediante la notazione di Eulero
Angoli di Eulero (Wikipedia)
Gli angoli sono anche definiti come
alfa = yaw (imbardata) in giallo
beta = roll (rollio) in rosso
gamma =  pitch (beccheggio) in viola

Fonte Wikipedia

il codice e' semplicemente autoesplicativo
----------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <title>Angoli</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" charset="utf-8">

    
    window.addEventListener('deviceorientation', function(event) {

    var alpha = 360 - event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;

    // Display Euler angles
    document.getElementById("alpha").innerHTML = "Alpha : " + alpha;
    document.getElementById("beta").innerHTML = "Beta  : " + beta;
    document.getElementById("gamma").innerHTML = "Gamma : " + gamma;

}, false);
    </script>
  </head>

  <body>
<p id="alpha">Alpha : </p><br>
<p id="beta" >Beta  : </p><br>
<p id="gamma">Gamma : </p><br>
    
  </body>
</html>


----------------------------------------------------