Orientasi Perangkat & Gerakan

Pete is a Developer Advocate

Kejadian orientasi dan gerakan perangkat menyediakan akses ke akselerometer, giroskop, dan kompas terintegrasi di perangkat seluler.

Kejadian ini bisa digunakan untuk berbagai tujuan; dalam game, misalnya, untuk mengontrol arah atau aksi lakon. Bila digunakan bersama geolokasi, kejadian ini bisa membantu menciptakan navigasi belokan-demi-belokan yang lebih akurat atau memberikan informasi tentang lokasi tertentu.

Perhatian: Tidak semua browser menggunakan sistem koordinat yang sama, dan mungkin melaporkan nilai yang berbeda pada situasi yang serupa. Hal ini telah diperbaiki dari waktu ke waktu, namun pastikan menguji situasi Anda.

TL;DR

Deteksilah sisi mana pada perangkat yang di atas dan bagaimana rotasi perangkat.
Ketahui kapan dan bagaimana merespons kejadian gerakan dan orientasi.

Sisi mana yang di atas?

Untuk menggunakan data yang dikembalikan oleh kejadian gerakan dan orientasi perangkat, maka penting untuk memahami nilai-nilai yang disediakan.

Bingkai koordinat Earth.

Kerangka koordinat Bumi, yang dijelaskan oleh nilai-nilai X, Y, dan Z, diluruskan berdasar gravitasi dan orientasi magnetik standar.

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

Bingkai koordinat perangkat

Bingkai koordinat perangkat, yang dijelaskan melalui nilai-nilai x, y dan z, diluruskan berdasarkan pusat perangkat.

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

Pada ponsel atau tablet, orientasi perangkat didasarkan pada orientasi umumnya layar. Untuk ponsel dan tablet, didasarkan saat perangkat berada di mode potret. Untuk komputer desktop atau laptop, orientasi dipertimbangkan berkaitan dengan keyboard.

Data rotasi

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

Alpha

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

Beta

Rotasi sekeliling sumbu x. Nilai beta adalah 0° bila 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 sekeliling sumbu y. Nilai gamma adalah 0° bila tepi kiri dan kanan perangkat memiliki jarak yang sama dari permukaan bumi. Nilainya bertambah saat sisi kanan dimiringkan ke arah permukaan bumi.

Orientasi perangkat

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

Gunakan sekadarnya. Uji dukungannya. Jangan perbarui UI pada setiap kejadian orientasi; melainkan sinkronkan ke requestAnimationFrame.

Kapan menggunakan kejadian orientasi perangkat

Ada beberapa penggunaan kejadian orientasi perangkat. Contohnya antara lain berikut ini:

Memperbarui peta ketika pengguna berpindah tempat.
Menghaluskan penataan UI, misalnya menambahkan efek paralaks.
Bila dikombinasikan dengan geolokasi, bisa digunakan untuk navigasi belokan demi belokan.

Memeriksa dukungan dan mendengarkan kejadian

Untuk mendengarkan DeviceOrientationEvent, pertama, periksa apakah browser mendukung kejadian tersebut. Kemudian, sematkan event listener ke objek window untuk mendengarkan kejadian deviceorientation.

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

Menangani kejadian orientasi perangkat

Kejadian orientasi perangkat terpicu bila perangkat bergerak atau berubah orientasi. Kejadian itu mengembalikan data tentang perbedaan antara perangkat di posisi saat ini dibandingkan dengan bingkai koordinat Bumi.

Kejadian ini biasanya mengembalikan tiga properti: alpha, beta, dan gamma. Pada Mobile Safari, parameter tambahan webkitCompassHeading dikembalikan bersama arah kompas.

Gerakan perangkat

Gunakan gerakan perangkat ketika memerlukan gerakan perangkat saat ini. rotationRate disediakan dalam °/dtk. acceleration dan accelerationWithGravity disediakan dalam m/dtk². Perhatikan perbedaan antar implementasi browser.

Kapan menggunakan kejadian gerakan perangkat

Ada beberapa kegunaan kejadian gerakan perangkat. Contohnya antara lain berikut ini:

Isyarat goyang untuk menyegarkan data.
Untuk menyebabkan lakon melompat atau bergerak dalam game.
Untuk aplikasi kesehatan dan kebugaran.

Memeriksa dukungan dan mendengarkan kejadian

Untuk mendengarkan DeviceMotionEvent, pertama, periksa apakah kejadian tersebut didukung dalam browser. Kemudian, sematkan listener kejadian ke objek window untuk mendengarkan kejadian devicemotion.

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

Menangani kejadian gerakan perangkat

Kejadian gerakan perangkat dipicu pada interval waktu yang teratur dan mengembalikan data tentang rotasi (dalam °/detik) dan akselerasi (dalam m/detik²) dari perangkat, pada saat tersebut. Beberapa perangkat tidak memiliki perangkat keras sehingga mengecualikan efek gravitasi.

Kejadian mengembalikan 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.

Status	Rotasi	Akselerasi (m/s²)	Akselerasi dengan gravitasi (m/s²)
Tidak bergerak	[0, 0, 0]	[0, 0, 0]	[0, 0, 9.8]
Bergerak naik ke arah 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 pengguna:

Status	Rotasi	Akselerasi (m/s²)	Akselerasi dengan gravitasi (m/s²)
Tidak bergerak	[0, 0, 0]	[0, 0, 0]	[0, 9.81, 0]
Bergerak naik ke arah 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 menggunakan kejadian gerakan perangkat adalah untuk menghitung akselerasi maksimum sebuah objek. Misalnya, berapa akselerasi 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, laman menyimpan nilai percepatan maksimum (dan minimum), dan setelah melompat, memberi tahu pengguna percepatan maksimum mereka.