Erkennen der Geräteausrichtung

Alles, was Sie tun müssen, um Veränderungen der Ausrichtung zu empfangen, ist das Zuhören auf das deviceorientation Ereignis:

window.addEventListener("deviceorientation", handleOrientation, true);

Nachdem Sie Ihren Ereignis-Listener registriert haben (in diesem Fall eine JavaScript-Funktion namens handleOrientation()), wird Ihre Listener-Funktion periodisch mit aktualisierten Ausrichtungsdaten aufgerufen.

Das Ausrichtungsereignis enthält vier Werte:

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

Die Event-Handler-Funktion kann 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
}

Der für jede Achse gemeldete Wert gibt die Rotationsmenge um eine bestimmte Achse in Bezug auf ein standardmäßiges Koordinatensystem an. Diese werden im Artikel Orientation and motion data explained ausführlicher beschrieben, welcher unten zusammengefasst ist.

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

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

Stellen Sie sich nun 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, er ist ein kleiner), und der Ball befindet sich im Zentrum:

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

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

Nun, wenn wir 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);

Hier klicken, um dieses Beispiel in einem neuen Fenster zu öffnen; da deviceorientation in einem Cross-Origin <iframe> in allen Browsern nicht funktioniert.

Bewegungsevents werden auf die gleiche Weise wie die Ausrichtungsevents behandelt, mit dem Unterschied, dass sie ihren eigenen Ereignisnamen haben: devicemotion

window.addEventListener("devicemotion", handleMotion, true);

Was sich tatsächlich ändert, sind die Informationen innerhalb des DeviceMotionEvent Objektes, 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

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

Für acceleration und accelerationIncludingGravity entsprechen diese Achsen den folgenden:

x

Repräsentiert die Achse von West nach Ost

y

Repräsentiert die Achse von Süd nach Nord

z

Repräsentiert die Achse, die senkrecht zum Boden steht

Für rotationRate ist die Situation etwas anders; die Informationen entsprechen in jedem Fall den folgenden:

alpha

Repräsentiert eine Rotationsrate entlang der Achse, die senkrecht zum Bildschirm (oder zur Tastatur bei Desktops) ist.

beta

Repräsentiert eine Rotationsrate entlang der Achse, die von links nach rechts über die Ebene des Bildschirms (oder der Tastatur bei Desktops) verläuft.

gamma

Repräsentiert eine Rotationsrate entlang der Achse, die von unten nach oben über die Ebene des Bildschirms (oder der Tastatur bei Desktops) verläuft.

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

• DeviceOrientationEvent
• DeviceMotionEvent
• Orientation and motion data explained
• Using deviceorientation in 3D Transforms
• Cyber Orb: 2D maze game with device orientation