Language: HTML | XAML

Schnellstart: Bestimmen der aktuellen Richtung mit dem Kompass (Windows-Runtime-Apps mit JavaScript und HTML)

Applies to Windows and Windows Phone

Mithilfe des Kompasses können Sie die aktuelle Richtung mit einer App erkennen, die in JavaScript geschrieben wurde.

Navigations-Apps bestimmen mit dem Kompass die Richtung, in die das Gerät weist, und passen damit die Karte an.

Ziel: Nach Abschluss dieser Schnellstartanleitung verstehen Sie, wie Sie mithilfe des Kompasses Richtungsänderungen erkennen können.

Voraussetzungen

Sie sollten mit HTML, JavaScript und Ereignissen vertraut sein.

Das verwendete Gerät oder der Emulator muss einen Kompass unterstützen.

Zeitaufwand: 15 Minuten.

Anweisungen

1. Öffnen von Microsoft Visual Studio

Öffnen Sie eine Instanz von Visual Studio.

2. Erstellen eines neuen Projekts

Erstellen Sie ein neues Projekt, und wählen Sie aus den Projekttypen unter JavaScript/Store-Apps den Typ Leere App aus.

3. Ersetzen des JavaScript-Codes

Öffnen Sie die Datei "Default.js" des Projekts, und ersetzen Sie den vorhandenen Code durch den folgenden.



// For an introduction to the Blank template, see the following documentation:
// http://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. Hinzufügen des HTML-Codes für die Apps

Öffnen Sie die Datei default.html für die Windows- und Windows Phone-Projekte, und kopieren Sie den folgenden HTML-Code zwischen die "BODY"-Tags der Datei.




    <div class="item" id="scenario1Output">
        Magnetic North: <a id="txtMagNorth">no data</a>
        <br />
        True North: <a id="txtTrueNorth">no data</a>
    </div>


5. Erstellen, Bereitstellen und Ausführen der App

Drücken Sie F5, oder klicken Sie auf Debuggen > Debugging starten, um die App zu erstellen, bereitzustellen und auszuführen.

Wenn die App ausgeführt wird, können Sie die Beschleunigungsmesserwerte ändern, indem Sie das Gerät bewegen oder die Emulatortools verwenden.

6. Beenden der App

  1. Drücken Sie ALT+TAB, um zu Visual Studio zu wechseln.
  2. Drücken Sie UMSCHALT+F5, oder klicken Sie auf Debuggen > Debugging beenden, um die App zu beenden.

Im vorherigen Beispiel wird gezeigt, wie wenig Code Sie schreiben müssen, um Kompasseingaben in Ihre App zu integrieren.

Die App stellt eine Verbindung mit dem Standardkompass in der onactivated-Funktion her. Dies findet in der folgenden Zeile statt.


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

Die neuen Kompassdaten werden in der onDataChanged-Funktion erfasst. Wenn der Sensortreiber neue Daten vom Sensor empfängt, übergibt er mithilfe dieser Funktion (oder des Ereignishandlers) die Werte der App. Die App registriert diesen Ereignishandler in der folgenden Zeile:


compass.addEventListener("readingchanged", onDataChanged);

Diese neuen Werte werden über Aktualisierungen der unten gezeigten DOM-Elemente auf den Bildschirm geschrieben.


    <div class="item" id="scenario1Output">
        Magnetic North: <a id="txtMagNorth">no data</a>
        <br />
        True North: <a id="txtTrueNorth">no data</a>
    </div>

Die App legt das Berichtsintervall in der onactivated-Funktion fest. Mit diesem Code wird das vom Gerät unterstützte Mindestintervall abgerufen und mit einem angeforderten Intervall von 16 Millisekunden verglichen (entspricht etwa einer Aktualisierungsrate von 60 Hz). Wenn das unterstützte Mindestintervall größer als das angeforderte Intervall ist, legt der Code den Wert auf das Minimum fest. Andernfalls wird der Wert auf das angeforderte Intervall festgelegt.


var minimumReportInterval = accelerometer.minimumReportInterval;
var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
accelerometer.reportInterval = reportInterval;


Wenn Sie eine Navigations-App erstellen, können Sie in den nächsten Schritten Informationen zur Verwendung von Kompasseingaben zur Steuerung der Kartenausrichtung finden.

Verwandte Themen

Compass class
Kompassbeispiel

 

 

Anzeigen:
© 2014 Microsoft