Schnellstart: Reagieren auf Benutzerbewegungen mit dem Beschleunigungsmesser (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 Beschleunigungsmessers können Sie auf Bewegungsänderungen des Benutzers mit einer App reagieren, die in JavaScript geschrieben wurde. Apps, die auf dem Beschleunigungsmesser basieren, nutzen i. d. R. nur eine der beiden Achsen als Eingabe. Sie können aber das Schüttelereignis als weitere Eingabequelle verwenden.

Ziel: Nach Abschluss dieses Schnellstarts verstehen Sie, wie Sie mithilfe des Beschleunigungsmessers Bewegungsänderungen erkennen können.

Voraussetzungen

Sie sollten mit HTML, JavaScript und Ereignissen vertraut sein.

Das verwendete Gerät oder der Emulator muss einen Beschleunigungsmesser 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 accelerometer;

    var app = WinJS.Application;

    // This function responds to all app activations.
    app.onactivated = function (eventObject) {
        if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
            if (accelerometer == null) {
                accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

                // Establish the report interval
                var minimumReportInterval = accelerometer.minimumReportInterval;
                var reportInterval = minimumReportInterval > 16 ? minimumReportInterval : 16;
                accelerometer.reportInterval = reportInterval;

                // Establish the event handler
                accelerometer.addEventListener("readingchanged", onDataChanged);
            }
            WinJS.UI.processAll();
        }
    };

    // This function is called each time an accelerometer event
    // is fired by the driver.
    function onDataChanged(e) {
        var reading = e.reading;
        var accelX = reading.accelerationX;
        var accelY = reading.accelerationY;
        var accelZ = reading.accelerationZ;

        id('eventOutputX').innerHTML = accelX.toFixed(2);
        id('eventOutputY').innerHTML = accelY.toFixed(2);
        id('eventOutputZ').innerHTML = accelZ.toFixed(2);
    }

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

    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="scenarioOutput">
    X: <a id="eventOutputX">no data</a>
    <br />
    Y: <a id="eventOutputY">no data</a>
    <br />
    Z: <a id="eventOutputZ">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 Beschleunigungsmessereingaben in Ihre App zu integrieren.

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

accelerometer = Windows.Devices.Sensors.Accelerometer.getDefault();

Die neuen Beschleunigungsmesserdaten 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:

accelerometer.addEventListener("readingchanged", onDataChanged);

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

    <div class="item" id="scenarioOutput">
    X: <a id="eventOutputX">no data</a>
    <br />
    Y: <a id="eventOutputY">no data</a>
    <br />
    Z: <a id="eventOutputZ">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 einfache App entwickeln, würden Sie in den nächsten Schritten die Eingabe vom Beschleunigungsmesser in die grafische Ausgabe integrieren.

Beispielsweise können Sie einen Schrittzähler mit einer grafischen Anzeige erstellen, um die Fortbewegung des Benutzers darzustellen.