giovedì 14 febbraio 2013

Angoli di tilt in HTML5

Anche con il solo utilizzo di HTML5 (con un browser moderno) e' possibile determinare gli angoli di tilt di un dispositivo mobile. Un esempio puo' essere trovato a questo link




Attenzione: questo metodo non funziona con il browser stock di Android 2.3.6 perche' il browser non gestisce queste API di HTML5

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

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
  
  
  <div align=center id="gamma">Left Right (Gamma) </div>
  <div align=center id="beta">Front Back (Beta)</div>
  <div align=center id="alpha">Direzione (Alpha)</div>

<script type="text/javascript">
if (window.DeviceOrientationEvent) {
  console.log("DeviceOrientation is supported");
  window.addEventListener('deviceorientation', function(eventData) {
        var LR = eventData.gamma;
        var FB = eventData.beta;
        var DIR = eventData.alpha;
var gamma_element = document.getElementById('gamma');
var beta_element = document.getElementById('beta');
var alpha_element = document.getElementById('alpha');
       gamma_element.innerHTML = 'Left Right (Gamma) : ' + LR;
beta_element.innerHTML = 'Front Back (Beta) : ' + FB;
alpha_element.innerHTML = 'Direzione (Alpha) ' + DIR;
        
}, false);
} else {
alert("Not supported on your device or browser.  Sorry.");
}

</script>

</body>
</html>

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