Schnellstart: Bestimmen der Drehung an den drei Achsen mit dem Neigungsmesser (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Mithilfe des Neigungsmessers können Sie die Drehung an den drei Achsen mit einer App erkennen, die in JavaScript geschrieben wurde. Ein beliebtes Beispiel hierfür ist ein Flugsimulator, der die drei Achsen des Neigungsmessers (X, Y und Z) dem Höhenleitwerk sowie Quer- und Seitenruder des Flugzeugs zuordnet.

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

Voraussetzungen

Sie sollten mit HTML, JavaScript und Ereignissen vertraut sein.

Das verwendete Gerät oder der Emulator muss einen Neigungsmesser 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:
// 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. 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">
       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. 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

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

Zusammenfassung und nächste Schritte

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

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

inclinometer = Windows.Devices.Sensors.Inclinometer.getDefault();

Die neuen Neigungsmesserdaten 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.

inclinometer.addEventListener("readingchanged", onDataChanged);

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

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

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 Spiele-App entwickeln, würden Sie in den nächsten Schritten die Eingabe vom Neigungsmesser in die grafische Ausgabe integrieren.

Wenn Sie beispielsweise eine Flugsimulator-App erstellen, verwenden Sie die Werte der z-Achse zum Ändern der Seitenrudereingaben, die Werte der x-Achse zum Ändern der Höheneingaben und die Werte der y-Achse zum Ändern der Seitenrudereingaben.