Orientasi & Gerakan Perangkat

Peristiwa orientasi dan gerakan perangkat menyediakan akses ke akselerometer, giroskop, dan kompas bawaan di perangkat seluler.

Peristiwa ini dapat digunakan untuk berbagai tujuan; dalam game, misalnya, untuk mengontrol arah atau tindakan karakter. Jika digunakan dengan geolokasi, kejadian ini dapat membantu membuat navigasi belokan demi belokan yang lebih akurat atau memberikan informasi tentang lokasi tertentu.

  • Mendeteksi sisi mana pada perangkat yang di atas dan bagaimana rotasi perangkat.
  • Pelajari kapan dan bagaimana merespons peristiwa gerakan dan orientasi.

Sisi mana yang di atas?

Untuk menggunakan data yang dikembalikan oleh orientasi perangkat dan peristiwa gerakan, penting untuk memahami nilai yang diberikan.

Bingkai koordinat bumi

Bingkai koordinat Bumi, yang dijelaskan oleh nilai X, Y, dan Z, disejajarkan berdasarkan gravitasi dan orientasi magnetik standar.

Sistem koordinat
X Menyatakan arah timur-barat (timur adalah positif).
Y Menyatakan arah utara-selatan (utara adalah positif).
Z Mewakili arah atas-bawah, tegak lurus dengan tanah (atas adalah positif).

Bingkai koordinat perangkat

Ilustrasi bingkai koordinat perangkat
Ilustrasi bingkai koordinat perangkat

Bingkai koordinat perangkat, yang dijelaskan oleh nilai x, y, dan z, disejajarkan berdasarkan pusat perangkat.

Sistem koordinat
X Dalam bidang layar, positif ke kanan.
Y Dalam bidang layar, positif ke arah atas.
Z Tegak lurus dengan layar atau keyboard, positif memanjang ke luar.

Di ponsel atau tablet, orientasi perangkat didasarkan pada orientasi umum layar. Untuk ponsel dan tablet, didasarkan pada perangkat yang berada dalam mode potret. Untuk komputer desktop atau laptop, orientasi dipertimbangkan berkaitan dengan keyboard.

Data rotasi

Data rotasi ditampilkan sebagai sudut Euler, yang mewakili jumlah derajat perbedaan antara bingkai koordinat perangkat dan bingkai koordinat Bumi.

Alfa

Ilustrasi alfa dalam bingkai koordinat perangkat
Ilustrasi alfa dalam bingkai koordinat perangkat

Rotasi di sekitar sumbu z. Nilai alpha adalah 0° saat bagian atas perangkat mengarah langsung ke utara. Saat perangkat diputar berlawanan arah jarum jam, nilai alpha akan meningkat.

Beta

ilustrasi bingkai koordinat perangkat
Ilustrasi beta dalam bingkai koordinat perangkat

Rotasi di sekitar sumbu x. Nilai beta adalah 0° saat bagian atas dan bawah perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya bertambah saat bagian atas perangkat dimiringkan ke arah permukaan bumi.

Gamma

ilustrasi bingkai koordinat perangkat
Ilustrasi gamma dalam bingkai koordinat perangkat

Rotasi di sekitar sumbu y. Nilai gamma adalah 0° saat tepi kiri dan kanan perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya bertambah saat sisi kanan dimiringkan ke arah permukaan bumi.

Orientasi perangkat

Peristiwa orientasi perangkat menampilkan data rotasi, yang mencakup seberapa besar perangkat miring depan-ke-belakang, sisi-ke-sisi, dan, jika ponsel atau laptop memiliki kompas, arah perangkat.

Gunakan seperlunya. Pengujian untuk dukungan. Jangan perbarui UI pada setiap peristiwa orientasi; sebagai gantinya, sinkronkan ke requestAnimationFrame.

Kapan harus menggunakan peristiwa orientasi perangkat

Ada beberapa penggunaan peristiwa orientasi perangkat. Contohnya mencakup:

  • Memperbarui peta saat pengguna berpindah tempat.
  • Menghaluskan penataan UI, misalnya menambahkan efek paralaks.
  • Dikombinasikan dengan geolokasi, dapat digunakan untuk navigasi belokan demi belokan.

Memeriksa dukungan dan memproses peristiwa

Untuk memproses DeviceOrientationEvent, pertama-tama periksa apakah browser mendukung peristiwa tersebut. Kemudian, sematkan pemroses peristiwa ke objek window yang memproses peristiwa deviceorientation.

if (window.DeviceOrientationEvent) {
  window
.addEventListener('deviceorientation', deviceOrientationHandler, false);
  document
.getElementById('doeSupported').innerText = 'Supported!';
}

Menangani peristiwa orientasi perangkat

Peristiwa orientasi perangkat diaktifkan saat perangkat bergerak atau mengubah orientasi. Peristiwa ini menampilkan data tentang perbedaan antara perangkat dalam posisi saat ini sehubungan dengan bingkai koordinat Bumi.

Peristiwa ini biasanya menampilkan tiga properti: alpha, beta, dan gamma. Di Mobile Safari, parameter tambahan webkitCompassHeading ditampilkan dengan arah kompas.

Gerakan perangkat

Peristiwa orientasi perangkat menampilkan data rotasi, yang mencakup seberapa besar perangkat miring depan-ke-belakang, sisi-ke-sisi, dan, jika ponsel atau laptop memiliki kompas, arahnya ke hadapan perangkat.

Gunakan gerakan perangkat ketika memerlukan data tentang gerakan perangkat saat ini. rotationRate diberikan dalam °/dtk. acceleration dan accelerationWithGravity diberikan dalam m/dtk2. Perhatikan perbedaan masing-masing implementasi browser.

Kapan harus menggunakan peristiwa gerakan perangkat

Ada beberapa penggunaan peristiwa gerakan perangkat. Contohnya mencakup:

  • Isyarat goyang untuk memuat ulang data.
  • Untuk menyebabkan karakter melompat atau bergerak dalam game.
  • Untuk aplikasi kesehatan dan kebugaran.

Memeriksa dukungan dan memproses peristiwa

Untuk memproses DeviceMotionEvent, pertama-tama periksa apakah peristiwa tersebut didukung di browser. Kemudian, sematkan pemroses peristiwa ke objek window yang memproses peristiwa devicemotion.

if (window.DeviceMotionEvent) {
  window
.addEventListener('devicemotion', deviceMotionHandler);
  setTimeout
(stopJump, 3 * 1000);
}

Menangani peristiwa gerakan perangkat

Peristiwa gerakan perangkat diaktifkan dengan interval waktu yang teratur dan menampilkan data tentang rotasi (dalam °/detik) dan akselerasi (dalam m/detik2) perangkat, pada saat tersebut. Beberapa perangkat tidak memiliki hardware untuk mengecualikan efek gravitasi.

Peristiwa ini menampilkan empat properti, accelerationIncludingGravity, acceleration, yang mengecualikan efek gravitasi, rotationRate, dan interval.

Misalnya, mari kita lihat sebuah ponsel, tergeletak di atas meja datar, dengan layar menghadap ke atas.

Negara Bagian Rotasi Akselerasi (m/d2) Akselerasi dengan gravitasi (m/d2)
Tidak bergerak [0, 0, 0] [0, 0, 0] [0, 0, 9.8]
Bergerak ke atas menuju langit [0, 0, 0] [0, 0, 5] [0, 0, 14,81]
Hanya berpindah ke kanan [0, 0, 0] [3, 0, 0] [3, 0, 9,81]
Berpindah ke atas dan ke kanan [0, 0, 0] [5, 0, 5] [5, 0, 14.81]

Sebaliknya, jika ponsel dipegang sehingga layar tegak lurus dengan tanah, dan langsung terlihat oleh pengguna:

Negara Bagian Rotasi Akselerasi (m/d2) Akselerasi dengan gravitasi (m/d2)
Tidak bergerak [0, 0, 0] [0, 0, 0] [0, 9.81, 0]
Bergerak ke atas menuju langit [0, 0, 0] [0, 5, 0] [0, 14.81, 0]
Hanya berpindah ke kanan [0, 0, 0] [3, 0, 0] [3, 9.81, 0]
Berpindah ke atas dan ke kanan [0, 0, 0] [5, 5, 0] [5, 14.81, 0]

Contoh: Menghitung percepatan maksimum objek

Salah satu cara menggunakan peristiwa gerakan perangkat adalah untuk menghitung percepatan maksimum objek. Misalnya, berapa percepatan maksimum orang yang melompat?

if (evt.acceleration.x > jumpMax.x) {
  jumpMax
.x = evt.acceleration.x;
}
if (evt.acceleration.y > jumpMax.y) {
  jumpMax
.y = evt.acceleration.y;
}
if (evt.acceleration.z > jumpMax.z) {
  jumpMax
.z = evt.acceleration.z;
}

Setelah mengetuk tombol Go!, pengguna diberi tahu untuk melompat. Selama waktu tersebut, halaman menyimpan nilai percepatan maksimum (dan minimum), dan setelah lompatan, memberi tahu pengguna percepatan maksimum mereka.

Masukan