Schnellstart: Bestimmen der Geräteausrichtung
Language: HTML | XAML

Schnellstart: Bestimmen der Geräteausrichtung (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 SimpleOrientation-Sensors können Sie die Geräteausrichtung mit einer App erkennen, die in JavaScript geschrieben wurde.

Dieser Sensor gibt keine Eigenschaft, wie "Portrait-Up" oder "Landscape left", zurück, sondern einen Rotationswert: "Not rotated", "Rotated90DegreesCounterclockwise" usw. In der folgenden Tabelle werden die allgemeinen Ausrichtungseigenschaften ("Portrait Up" usw.) den entsprechenden Sensorwerten zugeordnet.

AusrichtungEntsprechender Sensorwert
Portrait UpNotRotated
Landscape LeftRotated90DegreesCounterclockwise
Portrait DownRotated180DegreesCounterclockwise
Landscape RightRotated270DegreesCounterclockwise

 

Ziel: Nach Abschluss dieses Schnellstarts verstehen Sie, wie Sie mithilfe des SimpleOrientation-Sensors die Geräteausrichtung 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:
// http://go.microsoft.com/fwlink/p/?linkid=232509
(function () {
    "use strict";
    var orientationSensor;
    var app = WinJS.Application;

    function id(elementId) {
        return document.getElementById(elementId);
    }

    function onOrientationChanged(e) {
        switch (e.orientation) {
            case Windows.Devices.Sensors.SimpleOrientation.notRotated:
                id('txtOrientation').innerHTML = "Not Rotated";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated90DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 90";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated180DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 180";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.rotated270DegreesCounterclockwise:
                id('txtOrientation').innerHTML = "Rotated 270";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.faceup:
                id('txtOrientation').innerHTML = "Face Up";
                break;
            case Windows.Devices.Sensors.SimpleOrientation.facedown:
                id('txtOrientation').innerHTML = "Face Down";
                break;
            default:
                id('txtOrientation').innerHTML = "Undefined orientation " + e.orientation;
                break;
        }
    }



    // 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.SimpleOrientationSensor.getDefault();

            // Set the event handler
            orientationSensor.addEventListener("orientationchanged", onOrientationChanged);
            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">
    Orientation: <a id="txtOrientation">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 Eingaben vom SimpleOrientation-Sensor in Ihre App zu integrieren.

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


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

Die neuen Sensordaten werden in der onOrientationChanged-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("orientationchanged", onOrientationChanged);

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


<div class="item" id="scenario1Output">
    Orientation: <a id="txtOrientation">no data</a>
</div>

Sie können mit dem faceup-Wert und dem facedown-Wert bestimmen, wann Sie den aktuellen Zustand der App speichern und diese beenden.

Mit den anderen Werten können Sie die Bildschirmausrichtung anpassen.

Beachten Sie, dass sich der faceup-Wert und der facedown-Wert und die Rotationswerte gegenseitig ausschließen.

Verwandte Themen

SimpleOrientation Sensor class
Beispiel für den SimpleOrientation-Sensor

 

 

Anzeigen:
© 2017 Microsoft