Erkennen der Geräteorientierung

Erlaubnis anfordern

Einige User Agents erfordern eine ausdrückliche Erlaubnis vom Benutzer, bevor auf Geräteorientierungs- und Bewegungsdaten zugegriffen werden kann. In Umgebungen, in denen dies erforderlich ist, können die statischen Methoden DeviceOrientationEvent.requestPermission() und DeviceMotionEvent.requestPermission() verwendet werden, um diese Erlaubnis anzufordern. Beide Methoden geben ein Promise zurück, das mit "granted" oder "denied" aufgelöst wird, und beide müssen innerhalb einer Benutzeraktion (wie einem click-Ereignishandler) aufgerufen werden.

Da nicht alle User Agents diese Methoden implementieren, sollten Sie diese vor dem Aufrufen überprüfen. Das folgende Beispiel zeigt, wie Sie beide Erlaubnisse von einem Button-Klick-Handler anfordern können:

function handleClick() {
  if (typeof DeviceMotionEvent.requestPermission === "function") {
    // The API requires permission — request it
    Promise.all([
      DeviceMotionEvent.requestPermission(),
      DeviceOrientationEvent.requestPermission(),
    ]).then(([motionPermission, orientationPermission]) => {
      if (
        motionPermission === "granted" &&
        orientationPermission === "granted"
      ) {
        window.addEventListener("devicemotion", handleMotion);
        window.addEventListener("deviceorientation", handleOrientation);
      }
    });
  } else {
    // No permission needed, add event listeners directly
    window.addEventListener("devicemotion", handleMotion);
    window.addEventListener("deviceorientation", handleOrientation);
  }
}

Verarbeitung von Orientierungsevents

Alles, was Sie tun müssen, um Orientierungänderungen zu empfangen, ist das deviceorientation-Ereignis zu überwachen:

window.addEventListener("deviceorientation", handleOrientation);

Nach der Registrierung Ihres Event-Listeners (in diesem Fall eine JavaScript-Funktion namens handleOrientation()) wird Ihre Listener-Funktion periodisch mit aktualisierten Orientierungsdaten aufgerufen.

Das Orientierungsevent enthält vier Werte:

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

Die Event-Handler-Funktion könnte folgendermaßen aussehen:

function handleOrientation(event) {
  const absolute = event.absolute;
  const alpha = event.alpha;
  const beta = event.beta;
  const gamma = event.gamma;

  // Do stuff with the new orientation data
}

Erklärung der Orientierungswerte

Der für jede Achse gemeldete Wert gibt die Menge der Rotation um eine gegebene Achse in Bezug auf einen Standardkoordinatenrahmen an. Diese werden im Artikel Orientation and motion data explained ausführlicher beschrieben, der unten zusammengefasst ist.

• Der Wert DeviceOrientationEvent.alpha repräsentiert die Bewegung des Geräts um die z-Achse, angegeben in Grad mit Werten von 0 (einschließlich) bis 360 (ausschließlich).
• Der Wert DeviceOrientationEvent.beta repräsentiert die Bewegung des Geräts um die x-Achse, angegeben in Grad mit Werten von -180 (einschließlich) bis 180 (ausschließlich). Dies stellt eine Vorwärts-Rückwärts-Bewegung des Geräts dar.
• Der Wert DeviceOrientationEvent.gamma repräsentiert die Bewegung des Geräts um die y-Achse, angegeben in Grad mit Werten von -90 (einschließlich) bis 90 (ausschließlich). Dies stellt eine Links-Rechts-Bewegung des Geräts dar.

Orientierungsbeispiel

Dieses Beispiel funktioniert in jedem Browser, der das deviceorientation unterstützt und auf einem Gerät läuft, das seine Ausrichtung erkennen kann.

Stellen wir uns also einen Ball in einem Garten vor:

<div class="garden">
  <div class="ball"></div>
</div>
Hold the device parallel to the ground. Rotate along its x and y axes to see the
ball move up/down and left/right respectively.
<pre class="output"></pre>

Dieser Garten ist 200 Pixel breit (ja, es ist ein kleiner), und der Ball befindet sich in der Mitte:

.garden {
  position: relative;
  width: 200px;
  height: 200px;
  border: 5px solid #cccccc;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top: 90px;
  left: 90px;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

Wenn wir jetzt unser Gerät bewegen, wird sich der Ball entsprechend bewegen:

const ball = document.querySelector(".ball");
const garden = document.querySelector(".garden");
const output = document.querySelector(".output");

const maxX = garden.clientWidth - ball.clientWidth;
const maxY = garden.clientHeight - ball.clientHeight;

function handleOrientation(event) {
  let x = event.beta; // In degree in the range [-180,180)
  let y = event.gamma; // In degree in the range [-90,90)

  output.textContent = `beta: ${x}\n`;
  output.textContent += `gamma: ${y}\n`;

  // Because we don't want to have the device upside down
  // We constrain the x value to the range [-90,90]
  if (x > 90) {
    x = 90;
  }
  if (x < -90) {
    x = -90;
  }

  // To make computation easier we shift the range of
  // x and y to [0,180]
  x += 90;
  y += 90;

  // 10 is half the size of the ball
  // It centers the positioning point to the center of the ball
  ball.style.left = `${(maxY * y) / 180 - 10}px`; // rotating device around the y axis moves the ball horizontally
  ball.style.top = `${(maxX * x) / 180 - 10}px`; // rotating device around the x axis moves the ball vertically
}

window.addEventListener("deviceorientation", handleOrientation);

Klicken Sie hier, um dieses Beispiel in einem neuen Fenster zu öffnen; weil deviceorientation in einem cross-origin <iframe> in allen Browsern nicht funktioniert.

Verarbeitung von Bewegungsevents

Bewegungsevents werden auf die gleiche Weise wie Orientierungsevents verarbeitet, mit dem Unterschied, dass sie ihren eigenen Eventnamen haben: devicemotion

window.addEventListener("devicemotion", handleMotion);

Was sich wirklich geändert hat, sind die Informationen, die innerhalb des DeviceMotionEvent-Objekts bereitgestellt werden, das als Parameter des Event-Listeners (handleMotion() in unserem Beispiel) übergeben wird.

Das Bewegungsevent enthält vier Eigenschaften:

• DeviceMotionEvent.acceleration
• DeviceMotionEvent.accelerationIncludingGravity
• DeviceMotionEvent.rotationRate
• DeviceMotionEvent.interval

Erklärung der Bewegungswerte

Die DeviceMotionEvent-Objekte liefern Webentwicklern Informationen über die Geschwindigkeit der Änderungen für die Position und Ausrichtung des Geräts. Die Änderungen werden entlang dreier Achsen bereitgestellt (siehe Orientation and motion data explained für Details).

Bei acceleration und accelerationIncludingGravity entsprechen diese Achsen den folgenden:

x

Repräsentiert die Achse von Westen nach Osten

y

Repräsentiert die Achse von Süden nach Norden

z

Repräsentiert die Achse senkrecht zum Boden

Bei rotationRate ist die Situation etwas anders; die Informationen entsprechen den folgenden Fällen:

alpha

Repräsentiert eine Rotationsrate entlang der Achse senkrecht zum Bildschirm (oder der Tastatur für Desktop).

beta

Repräsentiert eine Rotationsrate entlang der Achse von links nach rechts der Ebene des Bildschirms (oder der Tastatur für Desktop).

gamma

Repräsentiert eine Rotationsrate entlang der Achse von unten nach oben der Ebene des Bildschirms (oder der Tastatur für Desktop).

Schließlich repräsentiert interval das Zeitintervall in Millisekunden, in dem Daten vom Gerät abgerufen werden.

Spezifikationen

Browser-Kompatibilität

api.DeviceMotionEvent

api.DeviceOrientationEvent

Siehe auch

• DeviceOrientationEvent
• DeviceMotionEvent
• Orientation and motion data explained
• Using deviceorientation in 3D Transforms
• Cyber Orb: 2D Maze-Spiel mit Geräteorientierung