DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
08-04-2014

Con esta API podemos obtener información sobre la orientación de un dispositivo, en específico, esta API nos provee un evento con la cual reportamos data que indica la orientación del dispositivo; podemos usar esta información para rotar elementos en nuestra web; veamos.

El evento addEventListener()

Primero lo primero; es necesario definir el evento que detectará la orientación del dispositivo (deviceorientation):

window.addEventListener("deviceorientation", handleOrientation, true);

Los parámetros son los siguientes:

Obteniendo la data según la orientación del dispositivo

El siguiente paso (luego de registrado el manejador llamado handleOrientation()) consiste en desarrollar el handleOrientation(); el que obtendrá periódicamente data acerca de la orientación del dispositivo:

El objeto event nos provee de esta data; es decir; de los grados de rotación gamma, beta y alpha.

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;

  // resto del codigo, aqui se rotaran elementos u otra operacion
}

Ejemplo: Usando el evento DeviceOrientation

Veamos un pequeño ejemplo en donde se rotará una imagen y visualizará la información acerca de la orientación del dispositivo.

Consideraciones generales

1. Verificar la compatibilidad

Verificamos la compatibilidad con el navegador.

	if (!window.DeviceOrientationEvent)
		alert("Device Orientation no soportadas por tu navegador");

2. Escuchar el evento Device Orientation

window.addEventListener("deviceorientation", handleOrientation, true);

3. Obtener los elementos del DOM

	var beta = event.beta; //X
	var gamma = event.gamma;//Y
	var alpha = event.alpha; //Z

	var img = document.querySelector('img');
	
	var alphaTag = document.getElementById('alpha');
	var betaTag = document.getElementById('beta');
	var gammaTag = document.getElementById('gamma');
	
	var blockAlpha = document.getElementById('blockAlpha');
	var blockBeta = document.getElementById('blockBeta');
	var blockGamma = document.getElementById('blockGamma');

4. Rotar la imagen

Finalmente aplicamos la rotación a la imagen.

		// rotamos
		if (!blockBeta.checked) {
			img.style.webkitTransform = "rotateX(" + beta + "deg)";
			betaTag.innerHTML = beta;
		}
		if (!blockGamma.checked) {
			img.style.webkitTransform = "rotateZ(" + gamma + "deg)";
			gammaTag.innerHTML = gamma;
		}
		if (!blockAlpha.checked) {
			img.style.webkitTransform = "rotateY(" + alpha + "deg)";
			alphaTag.innerHTML = alpha;
		}

5. HTML

El HTML del ejemplo:

  
	<img src="/public/images/example/html/html5-logo.png"/>
	<h1>Alpha: <span id="alpha"></span> <input id="blockAlpha" type="checkbox" /></h1>
	<h1>Beta: <span id="beta"></span> <input id="blockBeta" type="checkbox" /></h1>
	<h1>Gamma: <span id="gamma"></span> <input id="blockGamma" type="checkbox" /></h1>

Ejemplo completo

Puedes probar el ejemplo completo dando click aquí.

Fuentes


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Flat Module con puro CSS

Flat Module con puro CSS

Librería para gestos

Librería para gestos

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

Cómo copiar contenidos en el portapapeles con JavaScript

Cómo copiar contenidos en el portapapeles con JavaScript

En esta entrada se explica cómo acceder o copiar texto en un elemento HTML en el portapapeles empleando solo JavaScript.

Andrés Cruz 21-09-2017

Guía rápida sobre el elemento br en HTML

Guía rápida sobre el elemento br en HTML

El elemento br sirve para dar un salto de línea, se usa la siguiente etiqueta.

Andrés Cruz 21-02-2014

Detectando los eventos de teclado con Canvas

Detectando los eventos de teclado con Canvas

En esta entrada veremos un pequeño experimento en donde con el Canvas mediante los eventos de teclados específicamente emplearemos las flechas de direcciones del teclado.

Andrés Cruz 07-12-2015