Wie man Zugang Beschleunigungsmesser / Kreisel Daten von Javascript?

Question

Ich habe über ein paar Websites vor kurzem gekommen, dass das Beschleunigungsmesser oder Kreisel auf meinem Laptop zugreifen scheint, Veränderungen in der Orientierung oder Bewegung erfaßt wird.

Wie wird das gemacht? Muss ich auf irgendeine Art von Ereignis auf dem window Objekt abonnieren?

Auf welchen Geräte (Laptops, Handys, Tablets) ist diese Arbeit bekannt?

---

^{NB : Ich weiß eigentlich schon (teilweise) die Antwort auf diese Frage, und ich werde es sofort veröffentlichen. Der Grund, dass ich die Frage hier bin Entsendung, ist jeder andere, dass die Beschleunigungssensordaten wissen zu lassen, is in Javascript (auf bestimmten Geräten) und die Gemeinschaft herauszufordern neue Erkenntnisse über das Thema zu schreiben. Derzeit gibt fast keine Dokumentation dieser Features zu sein scheint.}

Answer 1

Es gibt zur Zeit drei verschiedene Ereignisse, die bei dem Client-Geräten bewegen oder auch nicht ausgelöst werden. Zwei von ihnen konzentrieren sich um Orientierung und der letzte auf Bewegung :

• ondeviceorientation an Arbeit auf dem Desktop-Version von Chrome bekannt und die meisten Apple-Laptops scheint die Hardware für diese Arbeit erforderlich zu haben. Es funktioniert auch auf Mobile Safari auf dem iPhone 4 mit iOS 4.2. In der Event-Handler-Funktion können Sie alpha, beta, gamma Werte auf den Ereignisdaten geliefert als einziges Argument auf die Funktion zugreifen zu können.

• onmozorientation auf Firefox 3.6 und höher unterstützt. Auch dies ist auf den meist Apple-Laptops zur Arbeit bekannt, könnte aber auch auf Windows oder Linux-Rechnern mit Beschleunigungsmesser arbeiten. In der Event-Handler-Funktion, sucht x, y, z Felder auf den Ereignisdaten als erstes Argument geliefert wird.

• ondevicemotion zum Arbeiten auf iPhone 3GS bekannt + 4 und iPad (beide mit IOS 4.2) und liefert an die aktuellen Beschleunigung des Client-Geräts bezogenen Daten. Die Ereignisdaten an die Prozedurfunktion übergeben hat acceleration und accelerationIncludingGravity, die beide drei Felder für jede Achse: x, y, z

Die „erdbebennachweis“ sample Webseite verwendet eine Reihe von Aussagen if um herauszufinden, welches Ereignis zu befestigen (in einer etwas priorisierten Reihenfolge) und übergibt die empfangenen Daten an eine gemeinsamen tilt Funktion:

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

Die konstanten Faktoren 2 und 50 sind mit „align“ die Messwerte aus den beiden zuletzt genannten Ereignisse mit den aus der ersten verwendet, aber diese sind keineswegs präzise Repräsentationen. Für diesen einfachen „Spielzeug“ projizieren es funktioniert gut, aber wenn man die Daten für etwas etwas ernstere verwenden müssen, werden Sie mit den Einheiten der Werte, die in den verschiedenen Ereignissen und sie mit Respekt behandeln vertraut haben :)

Answer 2

Kann keinen Kommentar zu der ausgezeichneten Erklärung im anderen Beitrag hinzufügen, aber wollte, dass eine große Dokumentation Quelle nennen kann hier .

Es ist genug, um eine Event-Funktion für Beschleunigungsmesser registriert etwa so:

if(window.DeviceMotionEvent){
  window.addEventListener("devicemotion", motion, false);
}else{
  console.log("DeviceMotionEvent is not supported");
}

mit dem Handler:

function motion(event){
  console.log("Accelerometer: "
    + event.accelerationIncludingGravity.x + ", "
    + event.accelerationIncludingGravity.y + ", "
    + event.accelerationIncludingGravity.z
  );
}

Und für Magnetometer eines folgender Event-Handler hat registriert werden:

if(window.DeviceOrientationEvent){
  window.addEventListener("deviceorientation", orientation, false);
}else{
  console.log("DeviceOrientationEvent is not supported");
}

mit einem Handler:

function orientation(event){
  console.log("Magnetometer: "
    + event.alpha + ", "
    + event.beta + ", "
    + event.gamma
  );
}

Es gibt auch in dem Bewegungsereignis für einen Gyroskop angegebene Felder, aber das scheint nicht allgemein unterstützt werden (zum Beispiel nicht die Arbeit an einem Samsung Galaxy Note tut).

Es gibt einen einfachen Arbeits Code auf GitHub

Answer 3

Die Art und Weise dies in 2019+ zu tun ist, DeviceOrientation API . Dies funktioniert in die meisten modernen Browsern auf Desktop-und mobilen .

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

Nach dem Ereignis-Listener registriert (in diesem Fall ein JavaScript Funktion namens handleOrientation ()), Ihre Listener-Funktion regelmäßig mit aktualisierten Orientierungsdaten aufgerufen wird.

Die Orientierung Ereignis enthält vier Werte:

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

Die Event-Handler-Funktion kann wie folgt aussehen:

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;
  // Do stuff with the new orientation data
}

Answer 4

Nützliche Rückfall hier: https://developer.mozilla.org/ en-US / docs / Web / Events / MozOrientation

function orientationhandler(evt){


  // For FF3.6+
  if (!evt.gamma && !evt.beta) {
    evt.gamma = -(evt.x * (180 / Math.PI));
    evt.beta = -(evt.y * (180 / Math.PI));
  }

  // use evt.gamma, evt.beta, and evt.alpha 
  // according to dev.w3.org/geo/api/spec-source-orientation


}

window.addEventListener('deviceorientation',  orientationhandler, false);
window.addEventListener('MozOrientation',     orientationhandler, false);