Inicio rápido: responder al movimiento del usuario con el acelerómetro (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 acelerómetro para responder al movimiento de usuario en una aplicación escrita en JavaScript. Una aplicación basada en un acelerómetro suele usar uno o dos ejes de entrada. Sin embargo, también suele usar el evento shake como otra fuente de entrada.
Objetivo: Al finalizar este inicio rápido, sabrás cómo usar el acelerómetro para detectar cambios en el movimiento.
Requisitos previos
Deberás estar familiarizado con HTML, JavaScript y los eventos.
El dispositivo o emulador que estés usando debe tener un acelerómetro.
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 accelerometer;
var app = WinJS.Application;
// This function responds to all app activations.
app.onactivated = function (eventObject) {
if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
if (accelerometer == null) {
accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
// Establish the report interval
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
// Establish the event handler
accelerometer.addEventListener("readingchanged", onDataChanged);
}
WinJS.UI.processAll();
}
};
// This function is called each time an accelerometer event
// is fired by the driver.
function onDataChanged(e) {
var reading = e.reading;
var accelX = reading.accelerationX;
var accelY = reading.accelerationY;
var accelZ = reading.accelerationZ;
id('eventOutputX').innerHTML = accelX.toFixed(2);
id('eventOutputY').innerHTML = accelY.toFixed(2);
id('eventOutputZ').innerHTML = accelZ.toFixed(2);
}
// This function is invoked within onDataChanged to
// retrieve the given identifier from the HTML document.
function id(elementId) {
return document.getElementById(elementId);
}
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="scenarioOutput">
X: <a id="eventOutputX">no data</a>
<br />
Y: <a id="eventOutputY">no data</a>
<br />
Z: <a id="eventOutputZ">no data</a>
<br />
</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 los datos de entrada del acelerómetro en la aplicación.
La aplicación establece una conexión con el acelerómetro predeterminado en la función onactivated. Esto se produce en la siguiente línea.
accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
Los nuevos datos del aceleró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.
accelerometer.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="scenarioOutput">
X: <a id="eventOutputX">no data</a>
<br />
Y: <a id="eventOutputY">no data</a>
<br />
Z: <a id="eventOutputZ">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 sencilla, normalmente en los siguientes pasos tendrás que integrar los datos de entrada del acelerómetro con los resultados gráficos.
Por ejemplo, puedes crear un podómetro con una pantalla gráfica que muestra los movimientos del usuario.