Inicio rápido: recuperar el cuaternión y la matriz de rotación (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
Puedes usar el sensor de orientación para recuperar un cuaternión y la matriz de rotación con una aplicación escrita en JavaScript. Normalmente los desarrolladores usan estos datos para controlar juegos complejos.
Un cuaternión puede entenderse como una rotación de un punto [x,y,z] sobre un único eje arbitrario. Es diferente de una matriz de rotación, que representa las rotaciones sobre tres ejes. Las operaciones matemáticas en torno a los cuaterniones son bastante complejas porque implican las propiedades geométricas de números complejos y las propiedades matemáticas de números imaginarios. Sin embargo, es fácil trabajar con ellas y son compatibles con marcos como DirectX.
Objetivo: Al finalizar este inicio rápido, sabrás cómo usar un sensor de orientación para recuperar un cuaternión y una matriz de rotación.
Requisitos previos
Deberás estar familiarizado con HTML, JavaScript y los eventos.
El dispositivo o emulador que estés usando debe tener un sensor de orientación.
Tiempo para finalizar: 15 minutos.
Instrucciones
1. Abrir Microsoft Visual Studio
Abre una sesión de Visual Studio.
2. Crear un nuevo proyecto
Crea un nuevo proyecto. Para ello, elige una Aplicación vacía en los tipos de proyecto JavaScript/de la Tienda Windows.
3. Reemplaza el código JavaScript:
Abre el archivo default.js del proyecto y reemplaza el código existente con lo siguiente.
// For an introduction to the Blank template, see the following documentation:
// https://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
"use strict";
var orientationSensor;
function id(elementId) {
return document.getElementById(elementId);
}
function onDataChanged(e) {
var reading = e.reading;
id('txtQuaternion').innerHTML = "W: " + reading.quaternion.w.toFixed(6)
+ "X: " + reading.quaternion.x.toFixed(6)
+ "Y: " + reading.quaternion.y.toFixed(6)
+ "Z: " + reading.quaternion.z.toFixed(6);
id('txtRotationMatrix').innerHTML = "M11: " + reading.rotationMatrix.m11.toFixed(6)
+ "M12: " + reading.rotationMatrix.m12.toFixed(6)
+ "M13: " + reading.rotationMatrix.m13.toFixed(6)
+ "M21: " + reading.rotationMatrix.m21.toFixed(6)
+ "M22: " + reading.rotationMatrix.m22.toFixed(6)
+ "M23: " + reading.rotationMatrix.m23.toFixed(6)
+ "M31: " + reading.rotationMatrix.m31.toFixed(6)
+ "M32: " + reading.rotationMatrix.m32.toFixed(6)
+ "M33: " + reading.rotationMatrix.m33.toFixed(6);
}
var app = WinJS.Application;
// This function responds to all app activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Retrieve the default orientation sensor
orientationSensor = Windows.Devices.Sensors.OrientationSensor.getDefault();
// Choose a report interval supported by the sensor
var minimumReportInterval = orientationSensor.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
orientationSensor.reportInterval = reportInterval;
// Set the event handler
orientationSensor.addEventListener("readingchanged", onDataChanged);
WinJS.UI.processAll();
}
};
app.start();
})();
4. Agregar el código HTML para las aplicaciones
Abre el archivo default.html de los proyectos de Windows y Windows Phone, y copia el siguiente HTML dentro de las etiquetas BODY del archivo.
<div class="item" id="scenario1Output">
Quaternion: <a id="txtQuaternion">no data</a>
<br />
Rotation Matrix: <a id="txtRotationMatrix">no data</a>
</div>
5. Crear, implementar y ejecutar la aplicación
Presiona F5 (o selecciona Depurar > Iniciar depuración) para crear, implementar y ejecutar la aplicación.
Con la aplicación en ejecución, puedes cambiar los valores de acelerómetro moviendo el dispositivo o usando herramientas del emulador.
6. Detener la aplicación
- Presiona ALT+Tab para regresar a Visual Studio.
- Presiona Mayús+F5 (o selecciona Depurar > Detener depuración) para detener la aplicación.
Resumen y siguientes pasos
En el ejemplo anterior, se muestra el poco código que debes escribir para poder integrar el sensor de orientación en la aplicación.
La aplicación establece una conexión con el sensor de orientación en la función onactivated. Esto se produce en la siguiente línea.
orientationSensor = Windows.Devices.Sensors.OrientationSensor.getDefault();
Los nuevos datos se capturan en la función onDataChanged. Cada vez que el controlador del sensor recibe nuevos datos del sensor, pasa los valores a la aplicación mediante esta función (o controlador de eventos). La aplicación registra este controlador de eventos en la siguiente línea.
orientationSensor.addEventListener("readingchanged", onDataChanged);
Estos nuevos valores se escriben en la pantalla mediante actualizaciones en los elementos de DOM, como se muestra aquí.
<div class="item" id="scenario1Output">
Quaternion: <a id="txtQuaternion">no data</a>
<br />
Rotation Matrix: <a id="txtRotationMatrix">no data</a>
</div>
La aplicación establece el intervalo de informes en la función onactivated. Este código recupera el intervalo mínimo admitido por el dispositivo y lo compara con un intervalo solicitado de 16 milisegundos (el cual se aproxima a una frecuencia de actualización de 60 Hz). Si el intervalo mínimo admitido es mayor que el intervalo solicitado, el código establece el valor en el mínimo. De lo contrario, establece el valor en el intervalo solicitado.
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
Si estás escribiendo una aplicación en 3D, normalmente en los siguientes pasos tendrás que integrar los valores del cuaternión o la matriz de rotación con el resultado gráfico de la aplicación.