Guia de início rápido: respondendo a um movimento do usuário com o acelerômetro (HTML)
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente]
Você pode usar o acelerômetro para responder o movimento do usuário em um aplicativo escrito em JavaScript. Um aplicativo com base em um acelerômetro geralmente usa apenas um ou dois eixos para entrada. No entanto, ele também pode usar o evento de aperto como outra fonte de entrada.
Objetivo: Depois de concluir esse guia de início rápido, você compreenderá como usar o acelerômetro para detectar alterações em movimento.
Pré-requisitos
Você deve estar familiarizado com HTML, JavaScript e eventos.
O dispositivo ou emulador que você está usando deve ter suporte para um acelerômetro.
Tempo para conclusão: 15 minutos.
Instruções
1. Abrir o Microsoft Visual Studio
Abra uma instância do Visual Studio.
2. Criar um novo projeto
Crie um novo projeto, escolhendo um Aplicativo em Branco nos tipos de projetos de Aplicativos JavaScript/Store.
3. Substituir o código JavaScript
Abra o arquivo default.js do projeto e substitua o código existente pelo seguinte.
// 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. Adicionar o HTML para os aplicativos
Abra o arquivo default.html dos projetos do Windows e do Windows Phone e copie o seguinte HTML para dentro das marcas BODY do arquivo.
<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. Criar, implantar e executar o aplicativo
Pressione F5 ou selecione Depurar > Iniciar Depuração) para criar, implantar e executar o aplicativo.
Quando o arquivo está executando, você pode alterar os valores do acelerômetro movendo o dispositivo ou usando as ferramentas do emulador.
6. Parar o aplicativo
- Pressione Alt+Tab para retornar ao Visual Studio.
- Pressione Shift-F5 ou selecione Depurar > Parar Depuração) para parar o aplicativo.
Resumo e próximas etapas
O exemplo anterior demonstra a codificação mínima que será necessária gravar para integrar a entrada do acelerômetro no aplicativo.
O aplicativo estabelece conexão com o acelerômetro padrão na função onactivated. Isso ocorre na seguinte linha:
accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();
Os novos dados do acelerômetro são capturados na função onDataChanged. Toda vez que o driver do sensor recebe novos dados do sensor, ele transmite os valores para seu aplicativo usando esta função (ou o manipulador de eventos). O aplicativo registra este manipulador de eventos na seguinte linha:
accelerometer.addEventListener("readingchanged", onDataChanged);
Esses novos valores são gravados na tela por meio de atualizações nos elementos DOM mostrados a seguir.
<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>
O aplicativo estabelece o intervalo de relatório dentro da função onactivated. Este código recupera o intervalo mínimo suportado pelo dispositivo e o compara com um intervalo solicitado de 16 milissegundos (aproximadamente a uma taxa de atualização de 60-Hz). Se o intervalo mínimo suportado for maior que o intervalo solicitado, o código definirá valor mínimo. Caso contrário, ele define o valor como o intervalo solicitado.
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
Se você está gravando um aplicativo simples, as próximas etapas geralmente envolvem a integração da entrada do acelerômetro com a saída do gráfico.
Por exemplo, você pode criar um hodômetro com a exibição gráfica exibindo os movimentos do usuário.