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, fitur ini dapat membantu menciptakan navigasi belokan demi belokan yang lebih akurat atau memberikan informasi tentang lokasi tertentu.
Ringkasan
- Deteksi sisi mana perangkat yang di atas dan bagaimana rotasi perangkat.
- Pelajari kapan dan cara merespons peristiwa gerakan dan orientasi.
Sisi mana yang di atas?
Untuk menggunakan data yang ditampilkan oleh orientasi perangkat dan peristiwa gerakan, penting untuk memahami nilai yang diberikan.
Bingkai koordinat Earth
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
Frame koordinat perangkat, yang dijelaskan oleh nilai x, y, dan z, disejajarkan
berdasarkan pusat perangkat.
| Sistem koordinat | |
|---|---|
X |
Pada bidang layar, positif di sebelah kanan. |
Y |
Pada bidang layar, positif ke arah atas. |
Z |
Tegak lurus dengan layar atau keyboard, positif memanjang. |
Pada ponsel atau tablet, orientasi perangkat didasarkan pada orientasi umum pada layar. Untuk ponsel dan tablet, didasarkan pada perangkat yang berada dalam mode potret. Untuk komputer {i>desktop<i} atau laptop, orientasi dipertimbangkan sehubungan dengan {i>keyboard<i}.
Data rotasi
Data rotasi ditampilkan sebagai sudut Euler, yang mewakili jumlah derajat perbedaan antara bingkai koordinat perangkat dan frame koordinat Bumi.
Alfa
Rotasi di sekitar sumbu z. Nilai alpha adalah 0° jika bagian atas
perangkat mengarah langsung ke utara. Saat perangkat diputar berlawanan arah jarum jam,
nilai alpha akan meningkat.
Beta
Rotasi di sekitar sumbu x. Nilai beta adalah 0° jika bagian atas dan
bawah perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya
bertambah saat bagian atas perangkat dimiringkan ke arah permukaan bumi.
Gamma
Rotasi di sekitar sumbu y. Nilai gamma adalah 0° jika tepi kiri dan
kanan perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya
meningkat saat sisi kanan dimiringkan ke arah permukaan bumi.
Orientasi perangkat
Peristiwa orientasi perangkat menampilkan data rotasi, yang berisi seberapa besar perangkat miring dari depan ke belakang, dari sisi ke sisi, dan, jika ponsel atau laptop memiliki kompas, arahnya ke hadapan perangkat.
Gunakan seperlunya.
Uji dukungan.
Jangan mengupdate UI pada setiap peristiwa orientasi; sebagai gantinya, sinkronkan ke requestAnimationFrame.
Kapan harus menggunakan peristiwa orientasi perangkat
Ada beberapa penggunaan kejadian orientasi perangkat. Contohnya mencakup:
- Memperbarui peta saat pengguna bergerak.
- Penyesuaian UI yang halus, misalnya, menambahkan efek paralaks.
- Bila digabungkan dengan geolokasi, bisa digunakan untuk navigasi belokan demi belokan.
Memeriksa dukungan dan memproses peristiwa
Untuk memproses DeviceOrientationEvent, pertama-tama periksa apakah browser mendukung peristiwa tersebut. Kemudian, tambahkan 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 aktif saat perangkat bergerak atau berubah orientasi. Fungsi ini menampilkan data tentang perbedaan antara perangkat di posisi saat ini sehubungan dengan bingkai koordinat Bumi.
Peristiwa ini biasanya menampilkan tiga properti: alpha,
beta, dan gamma. Pada Mobile Safari, parameter tambahan webkitCompassHeading ditampilkan bersama arah kompas.
Gerakan perangkat
Peristiwa orientasi perangkat menampilkan data rotasi, yang berisi seberapa besar perangkat miring dari depan ke belakang, dari sisi ke sisi, dan, jika ponsel atau laptop memiliki kompas, arahnya ke hadapan perangkat.
Gunakan gerakan perangkat ketika gerakan perangkat saat ini diperlukan.
rotationRate disediakan dalam °/dtk.
acceleration dan accelerationWithGravity tersedia dalam m/dtk2.
Perhatikan perbedaan di antara implementasi browser.
Kapan harus menggunakan peristiwa gerakan perangkat
Ada beberapa kegunaan kejadian gerakan perangkat. Contohnya mencakup:
- Gerakkan goyang untuk menyegarkan data.
- Untuk menyebabkan karakter melompat atau bergerak dalam game.
- Untuk aplikasi kesehatan dan kebugaran.
Memeriksa dukungan dan memproses peristiwa
Untuk memproses DeviceMotionEvent, periksa terlebih dahulu apakah peristiwa tersebut
didukung di browser. Kemudian, tambahkan 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 pada interval yang teratur dan menampilkan data tentang rotasi (dalam °/detik) dan akselerasi (dalam m/detik2) perangkat, pada saat tersebut. Beberapa perangkat tidak memiliki perangkat keras sehingga 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/s2) |
|---|---|---|---|
| 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 bergerak ke kanan | [0, 0, 0] | [3, 0, 0] | [3, 0, 9,81] |
| Bergerak 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 penonton:
| Negara Bagian | Rotasi | Akselerasi (m/d2) | Akselerasi dengan gravitasi (m/s2) |
|---|---|---|---|
| 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 bergerak ke kanan | [0, 0, 0] | [3, 0, 0] | [3, 9,81, 0] |
| Bergerak ke atas dan ke kanan | [0, 0, 0] | [5, 5, 0] | [5, 14,81, 0] |
Contoh: Menghitung percepatan maksimum objek
Salah satu cara untuk menggunakan peristiwa gerakan perangkat adalah dengan menghitung akselerasi 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 diminta untuk melompat. Selama waktu tersebut, halaman menyimpan nilai akselerasi maksimum (dan minimum), dan setelah melompat, memberi tahu pengguna akselerasi maksimum mereka.