Javascript'ten ivmeölçer / jiroskop verilerine nasıl erişilir?

Geçenlerde, dizüstü bilgisayarımdaki ivmeölçere veya jiroskopa erişerek yönelim veya hareketteki değişiklikleri tespit eden birkaç web sitesine rastladım.

Bu nasıl yapılır? windowNesnedeki bir tür etkinliğe abone olmam gerekir mi?

Hangi cihazlarda (dizüstü bilgisayarlar, cep telefonları, tabletler) çalıştığı biliniyor?

^{NB : Aslında bu sorunun cevabını (bir kısmını) zaten biliyorum ve hemen göndereceğim. Burada soru ilanıyla nedeni, herkes o ivmeölçer verileri bildirmek için ise (bazı cihazlarda) JavaScript mevcut ve konuyla ilgili yeni bulgular göndermek için topluluk meydan. Şu anda, bu özelliklerle ilgili neredeyse hiçbir dokümantasyon yok gibi görünüyor.}

2019'da bunu yapmanın yolu DeviceOrientationAPI kullanmaktır . Bu , masaüstü ve mobil cihazlardaki çoğu modern tarayıcıda çalışır .

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

Olay dinleyicinizi kaydettikten sonra (bu durumda handleOrientation () adında bir JavaScript işlevi), dinleyici işleviniz düzenli olarak güncellenmiş yönlendirme verileriyle çağrılır.

Orientation olayı dört değer içerir:

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

Olay işleyici işlevi şöyle görünebilir:

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
}

Şu anda istemci aygıtlar hareket ettiğinde tetiklenebilecek veya tetiklenmeyebilecek üç farklı olay vardır. Bunlardan ikisi yönelim ve sonuncusu hareket üzerine odaklanmıştır :

• ondeviceorientation, Chrome'un masaüstü sürümünde çalıştığı biliniyor ve Apple dizüstü bilgisayarlarının çoğunun çalışması için gereken donanıma sahip olduğu görülüyor. Ayrıca iOS 4.2 ile iPhone 4'teki Mobile Safari'de de çalışır. Olay işleyicisi işlevinde, erişebilir alpha, beta, gammaişlevine yalnızca argüman olarak verilen olay verilerine değerler.

• onmozorientationFirefox 3.6 ve daha yeni sürümlerde desteklenir. Yine, çoğu Apple dizüstü bilgisayarda çalıştığı bilinmektedir, ancak ivmeölçer içeren Windows veya Linux makinelerinde de çalışabilir. Olay işleyici işlevine yönelik bir görünüm olarak x, y, zolay verilerine alanlar ilk argüman olarak verilen.

• ondevicemotioniPhone 3GS + 4 ve iPad'de (her ikisi de iOS 4.2 ile) çalıştığı biliniyor ve istemci cihazın mevcut hızlandırmasıyla ilgili veriler sağlıyor. İşleyici işlevine sahip geçirilen etkinlik verileri accelerationve accelerationIncludingGravityher ikisi de her bir eksen için üç alan bilgisi,: x, y,z

"Deprem tespiti" örnek web sitesi ifhangi olaya ekleneceğini (biraz öncelik sırasına göre) belirlemek için bir dizi ifade kullanır ve alınan verileri ortak bir tiltfonksiyona aktarır:

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

Sabit faktörler 2 ve 50, iki son olaydan gelen okumaları birinciden olanlarla "hizalamak" için kullanılır, ancak bunlar hiçbir şekilde kesin gösterimler değildir. Bu basit "oyuncak" proje için gayet iyi çalışıyor, ancak verileri biraz daha ciddi bir şey için kullanmanız gerekiyorsa, farklı etkinliklerde sağlanan değerlerin birimlerine aşina olmanız ve onlara saygı göstermeniz gerekir :)

Diğer gönderideki mükemmel açıklamaya bir yorum ekleyemiyorum, ancak burada harika bir dokümantasyon kaynağının bulunabileceğinden bahsetmek istedim .

İvmeölçer için aşağıdaki gibi bir olay işlevi kaydetmek yeterlidir:

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

işleyici ile:

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

Ve manyetometre için aşağıdaki olay işleyicinin kaydedilmesi gerekir:

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

bir işleyici ile:

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

Bir jiroskop için hareket olayında belirtilen alanlar da vardır, ancak evrensel olarak desteklenmiyor gibi görünmektedir (örneğin, bir Samsung Galaxy Note'da çalışmadı).

GitHub'da basit bir çalışma kodu var

Burada faydalı geri dönüş: https://developer.mozilla.org/en-US/docs/Web/Events/Moz

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