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

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Calendario de cubo

Calendario de cubo

3D Box Control conTweenMax

3D Box Control conTweenMax

Algunos artículos que te pueden interesar

¿Cómo obtener la resolución de pantalla con JavaScript?

¿Cómo obtener la resolución de pantalla con JavaScript?

En esta entrada veremos como obtener la resolución de una pantalla con JavaScript nativo.

Andrés Cruz 04-08-2014

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

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz en JavaScript: speechRecognition()

La API de Reconocimiento de Voz da la capacidad a nuestras aplicaciones de reconocer la voz según el idioma configurado a través del micrófono de la PC o dispositivo móvil.

Andrés Cruz 10-10-2017