Guia de início rápido: determinando a direção atual com a bússola (HTML)

Artigo
12/12/2015

[ 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 a bússola para determinar a direção atual com um aplicativo escrito em JavaScript.

Os aplicativos de navegação usam a bússola para determinar a direção que um dispositivo tem e orientar o mapa de acordo.

Objetivo: Depois de concluir este guia de início rápido, você entenderá como usar a bússola para detectar mudanças na direção.

Pré-requisitos

Você deve estar familiarizado com HTML, JavaScript e eventos.

O dispositivo ou emulador que você está usando deve ter suporte para uma bússola.

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 compass;

    var app = WinJS.Application;

    // This function is invoked within onDataChanged to
    // retrieve the given identifier from the HTML document.
    function id(elementId) {
        return document.getElementById(elementId);
    }

    // This function is called each time a compass event
    // is fired by the driver.
    function onDataChanged(e) {
        var reading = e.reading;
        id('txtMagNorth').innerHTML = reading.headingMagneticNorth.toFixed(2);
        if (reading.headingTrueNorth != null) {
            id('txtTrueNorth').innerHTML = reading.headingTrueNorth.toFixed(2);
        }
    }

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            // Retrieve the default compass and
            compass = Windows.Devices.Sensors.Compass.getDefault();

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

            // Establish the event handler
            compass.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">
        Magnetic North: <a id="txtMagNorth">no data</a>
        <br />
        True North: <a id="txtTrueNorth">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 quão pouco código você precisará para escrever a fim de integrar a entrada da bússola em seu aplicativo.

O aplicativo estabelece conexão com o acelerômetro padrão na função onactivated. Isso ocorre na seguinte linha:

compass = Windows.Devices.Sensors.Compass.getDefault();

Os novos dados da bússola 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 este manipulador de eventos na seguinte linha:

compass.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">
        Magnetic North: <a id="txtMagNorth">no data</a>
        <br />
        True North: <a id="txtTrueNorth">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. 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ê estiver escrevendo um aplicativo de navegação, as próximas etapas envolverão o uso da entrada de bússola para controlar a orientação do mapa.

Tópicos relacionados

Compass class

Exemplo de bússola

Compartilhar via