Guia de início rápido: recuperando o quatérnion e a matriz de rotação (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 sensor de orientação para recuperar o quatérnion e a matriz de rotação com um aplicativo compilado em JavaScript. Os desenvolvedores normalmente usam estes dados para controlar jogos complexos.
Um quatérnion pode ser compreendido mais facilmente como uma rotação de um ponto [x,y,z] sobre um eixo arbitrário simples. É diferente de uma matriz de rotação, que representa rotações ao redor de três eixos. A matemática oculta nos quatérnions é um pouco exótica, pois envolve as propriedades geométricas de números complexos e as propriedades matemáticas de números imaginários, mas trabalhar com elas é simples e estruturas como DirectX têm suporte para elas.
Objetivo: Depois de concluir esse guia de início rápido, você compreenderá como usar o Sensor de orientação para recuperar um quatérnion e uma matriz de rotação.
Pré-requisitos
Você deve estar familiarizado com HTML, JavaScript e eventos.
O dispositivo ou emulador que você está usando deve ter suporte para um sensor de orientação.
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 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. 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">
Quaternion: <a id="txtQuaternion">no data</a>
<br />
Rotation Matrix: <a id="txtRotationMatrix">no data</a>
</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 o Sensor de orientação no aplicativo.
O aplicativo estabelece conexão com o sensor de orientação padrão na função onactivated. Isso ocorre na seguinte linha:
orientationSensor = Windows.Devices.Sensors.OrientationSensor.getDefault();
Os novos dados 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:
orientationSensor.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">
Quaternion: <a id="txtQuaternion">no data</a>
<br />
Rotation Matrix: <a id="txtRotationMatrix">no data</a>
</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. Do contrário, ele definirá o valor para o intervalo solicitado.
var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;
Se você está gravando um aplicativo 3-D, as próximas etapas geralmente envolvem a integração dos valores de quatérnion ou da matriz de rotação com a saída do gráfico do seu aplicativo.