Schnellstart: Abrufen von Quaternionen und Drehungsmatrizen
Language: HTML | XAML

Schnellstart: Abrufen von Quaternionen und Drehungsmatrizen (HTML)

[ 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 Ausrichtungssensors können Sie Quaternionen und Drehungsmatrizen mit einer App abrufen, die in JavaScript geschrieben wurde. Diese Daten werden von Entwicklern in der Regel verwendet, um komplexe Spiele zu steuern.

Eine Quaternion können Sie sich am einfachsten vorstellen als die Drehung eines Punkts [x,y,z] um eine beliebige Achse. Dies steht im Gegensatz zu einer Drehungsmatrix, die Drehungen um drei Achsen darstellt. Die Mathematik hinter Quaternions ist recht exotisch, da sie die geometrischen Eigenschaften komplexer Zahlen und die mathematischen Eigenschaften imaginärer Zahlen umfasst. Das Arbeiten mit ihnen ist jedoch einfach, und sie werden von Frameworks wie DirectX unterstützt.

Ziel: Nach Abschluss dieser Schnellstartanleitung verstehen Sie, wie Sie mithilfe des Ausrichtungssensors eine Quaternion und eine Drehungsmatrix abrufen.

Voraussetzungen

Sie sollten mit HTML, JavaScript und Ereignissen vertraut sein.

Das verwendete Gerät oder der Emulator muss einen Ausrichtungssensor 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 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. 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">
   Quaternion: <a id="txtQuaternion">no data</a>
   <br />
   Rotation Matrix: <a id="txtRotationMatrix">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.

Zusammenfassung und nächste Schritte

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

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


orientationSensor = Windows.Devices.Sensors.OrientationSensor.getDefault();

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


orientationSensor.addEventListener("readingchanged", onDataChanged);

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


<div class="item" id="scenario1Output">
   Quaternion: <a id="txtQuaternion">no data</a>
   <br />
   Rotation Matrix: <a id="txtRotationMatrix">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 3D-App entwickeln, würden Sie in den nächsten Schritten die Werte der Quaternion oder der Drehungsmatrix in die grafische Ausgabe Ihrer App integrieren.

Verwandte Themen

OrientationSensor class
OrientationSensor-Beispiel

 

 

Anzeigen:
© 2016 Microsoft