Guia de início rápido: determinando densidade, rolagem e rotação sobre o eixo y com o inclinô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 inclinômetro para determinar a arfagem, a rolagem e a guinada com um aplicativo escrito em JavaScript. Um exemplo comum é o simulador de voo, que mapeia os eixos do inclinômetro (X, Y e Z) para as entradas de elevador, aileron e leme da aeronave.
Objetivo: Depois de concluir este guia de início rápido você entenderá como usar o inclinômetro para detectar mudanças de 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 inclinô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 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. 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="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>
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 quão pouco código você precisará para escrever a fim de integrar a entrada do giroscópio em seu aplicativo.
O aplicativo estabelece conexão com o inclinômetro padrão na função onactivated. Isso ocorre na seguinte linha:
inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();
Os novos dados do inclinômetro são capturados na função onDataChanged. Cada vez que o driver do sensor receber novos dados do sensor, ele passa os valores para o seu aplicativo usando esta função (ou manipulador de eventos). O aplicativo registra esse manipulador de eventos na seguinte linha:
inclinometer.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="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>
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 com 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, se você estivesse codificando um simulador de voo, você usaria os valores do eixo Z para alterar após as entradas do leme, você usaria os valores do eixo X para alterar as entradas do elevador e você usaria os valores do eixo Y para alterar as entradas do aileron.