Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Inicio rápido: Determinar la rotación alrededor del eje x (pitch), el giro y la rotación alrededor del eje y (yaw) con el inclinómetro (aplicaciones de la Tienda Windows con JavaScript y HTML)

Puedes usar el inclinómetro para determinar la rotación alrededor del eje x, el giro y la rotación alrededor del eje y con una aplicación escrita en JavaScript. Un ejemplo común es un simulador de vuelos, que asigna los tres ejes del inclinómetro (X, Y y Z) a los datos de entrada del timón de profundidad, el alerón y el timón de dirección del avión.

Objetivo: Al finalizar este inicio rápido, sabrás cómo usar el inclinómetro para detectar cambios en el movimiento.

Requisitos previos

Deberás estar familiarizado con HTML, JavaScript y los eventos.

El dispositivo que estés usando debe tener un inclinómetro.

Tiempo para finalizar: 15 minutos.

Instrucciones

1. Abrir Microsoft Visual Studio Express 2012 for Windows 8

Abre una instancia de Visual Studio Express 2012 para Windows 8.

2. Crear un nuevo proyecto

Para crear un nuevo proyecto, haz clic en Archivo > Nuevo proyecto. En Plantillas, selecciona Aplicación vacía en los tipos de proyecto JavaScript.

3. Insertar la aplicación 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:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var inclinometer;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onDataChanged(e) {
        var reading = e.reading;
        var pitch = reading.pitchDegrees;
        var roll = reading.rollDegrees;
        var yaw = reading.yawDegrees;

        id('txtXAngle').innerHTML = pitch.toFixed(2);
        id('txtYAngle').innerHTML = roll.toFixed(2);
        id('txtZAngle').innerHTML = yaw.toFixed(2);
    }

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

            // Choose a report interval supported by the sensor
            var minimumReportInterval = inclinometer.minimumReportInterval;
            var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
            inclinometer.reportInterval = reportInterval;

            // Set the event handler
            inclinometer.addEventListener("readingchanged", onDataChanged);

            WinJS.UI.processAll();
        }
    };

    app.start();
})();



4. Insertar la aplicación HTML

Abre el archivo Default.htm y copia el siguiente HTML en el archivo (y reemplaza su contenido original).


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Application1</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <!-- Application1 references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <div class="item" id="scenario1Output">
       X: <a id="txtXAngle">no data</a>
       <br />
       Y: <a id="txtYAngle">no data</a>
       <br />
       Z: <a id="txtZAngle">no data</a>
       <br />
    </div>
</body>
</html>


5. Crear, implementar y ejecutar la aplicación

Presiona F5 (o haz clic en Depurar > Iniciar depuración) para crear, implementar y ejecutar la aplicación.

6. Detener la aplicación

  1. Presiona ALT+Tab para regresar a Visual Studio.
  2. Presiona Mayús+F5 (o Depurar > Detener depuración) para detener la aplicación.

Resumen y next steps

En el ejemplo anterior, se muestra el poco código que debes escribir para poder integrar los datos de entrada del inclinómetro en la aplicación.

La aplicación establece una conexión con el inclinómetro predeterminado en la función onactivated. Esto se produce en la siguiente línea.


inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

Los nuevos datos del inclinómetro 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.


inclinometer.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">
       X: <a id="txtXAngle">no data</a>
       <br />
       Y: <a id="txtYAngle">no data</a>
       <br />
       Z: <a id="txtZAngle">no data</a>
       <br />
    </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 de juegos, normalmente en los siguientes pasos tendrás que integrar los datos de entrada del inclinómetro con los resultados gráficos.

Por ejemplo, si estuvieras escribiendo una aplicación para un simulador de vuelos, usarías los valores del eje Z para alterar los datos de entrada del timón de dirección, usarías los valores del eje X para alterar los datos de entrada del timón de profundidad, y usarías los valores del eje Y para alterar los datos de entrada del alerón del avión.

Temas relacionados

Inclinometer class
Muestra de inclinómetro

 

 

Mostrar:
© 2018 Microsoft