Erkennung der Geräteausrichtung

Verarbeitung von Ausrichtungsereignissen

Alles, was Sie tun müssen, um Änderungen der Ausrichtung zu empfangen, ist, das deviceorientation-Ereignis abzuhören:

window.addEventListener("deviceorientation", handleOrientation);

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

Das Ausrichtungsereignis enthält vier Werte:

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

Die Ereignis-Handler-Funktion kann wie folgt 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 Ausrichtungswerte

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

• Der DeviceOrientationEvent.alpha-Wert repräsentiert die Bewegung des Geräts um die z-Achse, dargestellt in Gradwerten 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 Gradwerten von -180 (einschließlich) bis 180 (ausschließlich). Dies stellt eine Vorwärts- und Rückwärtsbewegung des Geräts dar.
• Der DeviceOrientationEvent.gamma-Wert repräsentiert die Bewegung des Geräts um die y-Achse, dargestellt in Gradwerten von -90 (einschließlich) bis 90 (ausschließlich). Dies stellt eine Links- und Rechtsbewegung des Geräts dar.

Ausrichtungsbeispiel

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

Also stellen wir uns 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%;
}

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);

Klicken Sie hier um dieses Beispiel in einem neuen Fenster zu öffnen; da deviceorientation nicht in einem fremdursprünglichen <iframe> in allen Browsern funktioniert.

Verarbeitung von Bewegungsevents

Bewegungsevents werden auf die gleiche Weise wie Ausrichtungsereignisse behandelt, haben jedoch ihren eigenen Ereignisnamen: 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 Ereignis-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 der 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 Folgendem:

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 verläuft

Für rotationRate ist die Situation etwas anders; die Information entspricht Folgendem in jedem Fall:

alpha

Repräsentiert eine Rotationsrate entlang der Achse, die senkrecht zum Bildschirm verläuft (oder zur Tastatur bei Desktop-Geräten).

beta

Repräsentiert eine Rotationsrate entlang der Achse, die von links nach rechts der Bildschirmfläche verläuft (oder zur Tastatur bei Desktop-Geräten).

gamma

Repräsentiert eine Rotationsrate entlang der Achse, die von unten nach oben der Bildschirmfläche verläuft (oder zur Tastatur bei Desktop-Geräten).

Schließlich stellt interval das Zeitintervall in Millisekunden dar, in dem Daten vom Gerät bezogen 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äteausrichtung