Orientacja urządzenia i ruch

Zdarzenia ruchu i orientacji urządzenia zapewniają dostęp do wbudowanego akcelerometru, żyroskopu i kompasu na urządzeniach mobilnych.

Zdarzenia te mogą służyć do wielu celów, np. w grach do sterowania kierunkiem lub działaniem postaci. W połączeniu z lokalizacją geograficzną mogą one ułatwiać tworzenie dokładniejszych wskazówek nawigacyjnych lub dostarczać informacji o konkretnej lokalizacji.

  • wykryć, która strona urządzenia jest skierowana ku górze i jak urządzenie się obraca;
  • Dowiedz się, kiedy i jak reagować na zdarzenia związane z ruchu i orientacji.

Który koniec jest górą?

Aby korzystać z danych zwracanych przez zdarzenia związane z orientacją urządzenia i ruchu, musisz zrozumieć podawane wartości.

Układ współrzędnych Ziemi

Układ współrzędnych Ziemi opisany wartościami X, YZ jest wyrównany na podstawie grawitacji i standardowego ułożenia magnetycznego.

Układ współrzędnych
X Reprezentuje kierunek wschód-zachód (gdzie wschód jest liczbą dodatnią).
Y Reprezentuje kierunek północ-południe (gdzie północ jest dodatnia).
Z Reprezentuje kierunek od dołu do góry, prostopadły do podłoża (gdzie góra jest dodatnia).

Ramka współrzędnych urządzenia

Ilustracja ramki współrzędnych urządzenia
Ilustracja układu współrzędnych urządzenia

Ramka współrzędnych urządzenia, opisana wartościami x, yz, jest wyrównana względem środka urządzenia.

Układ współrzędnych
X W płaszczyźnie ekranu dodatnia w prawo.
Y W płaszczyźnie ekranu, dodatni w górę.
Z prostopadle do ekranu lub klawiatury, dodatnie w stronę od siebie;

Na telefonie lub tablecie orientacja urządzenia jest określana na podstawie typowej orientacji ekranu. W przypadku telefonów i tabletów jest to zależne od tego, czy urządzenie jest ustawione w orientacji pionowej. W przypadku komputerów stacjonarnych i laptopów orientacja jest określana w odniesieniu do klawiatury.

Dane rotacji

Dane obrotu są zwracane jako kąt Eulera, który reprezentuje liczbę stopni różnicy między układem współrzędnych urządzenia a układem współrzędnych Ziemi.

Alfa

Ilustracja alfa w układzie współrzędnych urządzenia
Ilustracja alfa w układzie współrzędnych urządzenia

Obrót wokół osi Z. Wartość alpha wynosi 0°, gdy górna część urządzenia jest skierowana dokładnie na północ. Gdy urządzenie jest obracane w przeciwnym kierunku niż wskazówki zegara, wartość alpha wzrasta.

Beta

Ilustracja ramki współrzędnych urządzenia
Ilustracja przedstawiająca beta w ramach układu współrzędnych urządzenia

Obrót wokół osi X. Wartość beta wynosi 0°, gdy góra i dół urządzenia znajdują się w równej odległości od powierzchni Ziemi. Wartość ta rośnie, gdy górna część urządzenia jest skierowana w kierunku powierzchni Ziemi.

Gamma

Ilustracja ramki współrzędnych urządzenia
Ilustracja gamma w układzie współrzędnych urządzenia

Obrót wokół osi y. Wartość gamma wynosi 0°, gdy lewy i prawy brzeg urządzenia znajdują się w równej odległości od powierzchni Ziemi. Wartość ta rośnie, gdy prawa strona jest nachylona w kierunku powierzchni Ziemi.

Orientacja urządzenia

Zdarzenie orientacji urządzenia zwraca dane dotyczące jego orientacji, w tym to, jak bardzo jest ono nachylone do przodu lub tyłu oraz na boki. Jeśli telefon lub laptop ma kompas, zwraca też kierunek, w jakim jest skierowany.

Używaj oszczędnie. Testowanie pod kątem bezpieczeństwa. Nie aktualizuj interfejsu użytkownika przy każdym zdarzeniu orientacyjnym. Zamiast tego zsynchronizuj go z requestAnimationFrame.

Kiedy używać zdarzeń orientacji urządzenia

Zdarzenia orientacji urządzenia można wykorzystywać na wiele sposobów. Przykłady:

  • aktualizować mapę w miarę przemieszczania się użytkownika.
  • subtelne zmiany w interfejsie, np. dodanie efektów paralaksy;
  • W połączeniu z geolokalizacją może służyć do nawigacji krok po kroku.

Sprawdzanie obsługi i nasłuchiwanie zdarzeń

Aby nasłuchiwać zdarzeń DeviceOrientationEvent, najpierw sprawdź, czy przeglądarka obsługuje te zdarzenia. Następnie dodaj do obiektu window detektor zdarzeń, który będzie nasłuchiwać zdarzeń deviceorientation.

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

Obsługa zdarzeń orientacji urządzenia

Zdarzenie orientacji urządzenia jest wywoływane, gdy urządzenie się porusza lub zmienia orientację. Zwraca dane o różnicy między bieżącą pozycją urządzenia a układem współrzędnych Ziemi.

Zdarzenie zwraca zwykle 3 właściwości: alpha, beta i gamma. W Safari na urządzeniach mobilnych z danymi kompasu zwracany jest dodatkowy parametr webkitCompassHeading.

Ruch urządzenia

Zdarzenie orientacji urządzenia zwraca dane dotyczące jego orientacji, w tym to, jak bardzo jest ono nachylone do przodu lub tyłu oraz na boki. Jeśli telefon lub laptop ma kompas, zwraca też kierunek, w jakim jest skierowany.

Używaj ruchu urządzenia, gdy potrzebny jest aktualny ruch urządzenia. Wartość rotationRate jest podana w stopniach na sekundę. Wartości accelerationaccelerationWithGravity są podane w m/s2. Zwróć uwagę na różnice między implementacjami w przeglądarkach.

Kiedy używać zdarzeń ruchu urządzenia

Zdarzenia związane z ruchu urządzenia można wykorzystywać na wiele sposobów. Przykłady:

  • Potrząśnij urządzeniem, aby odświeżyć dane.
  • W grach, aby postacie skakały lub się poruszały.
  • Aplikacje związane ze zdrowiem i kondycją.

Sprawdzanie obsługi i nasłuchiwanie zdarzeń

Aby nasłuchiwać zdarzeń DeviceMotionEvent, najpierw sprawdź, czy są one obsługiwane w przeglądarce. Następnie dodaj do obiektu window detektor zdarzeń, który będzie nasłuchiwać zdarzeń devicemotion.

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

Obsługa zdarzeń ruchu urządzenia

Zdarzenie ruchu urządzenia jest wywoływane w regularnych odstępach czasu i zwraca dane o obrocie (w stopniach na sekundę) i przyspieszeniu (w m/s2) urządzenia w danym momencie. Niektóre urządzenia nie mają sprzętu, który wyklucza wpływ grawitacji.

Zdarzenie zwraca 4 właściwości: accelerationIncludingGravity, acceleration, która wyklucza efekty grawitacji, rotationRateinterval.

Weźmy na przykład telefon leżący na płaskim stole ekranem do góry.

Stan Obrót Przyspieszenie (m/s2) Przyspieszenie grawitacyjne (m/s2)
Brak ruchu [0, 0, 0] [0, 0, 0] [0, 0, 9.8]
Przesuwanie się w górę w kierunku nieba [0, 0, 0] [0, 0, 5] [0, 0, 14.81]
Przesuwanie tylko w prawo [0, 0, 0] [3, 0, 0] [3, 0, 9.81]
Przesuwanie w górę i w prawo [0, 0, 0] [5, 0, 5] [5, 0, 14.81]

Jeśli telefon jest trzymany tak, że ekran jest prostopadły do ziemi i widoczny bezpośrednio dla widza:

Stan Obrót Przyspieszenie (m/s2) Przyspieszenie grawitacyjne (m/s2)
Brak ruchu [0, 0, 0] [0, 0, 0] [0, 9.81, 0]
Przesuwanie się w górę w kierunku nieba [0, 0, 0] [0, 5, 0] [0, 14,81, 0]
Przesuwanie tylko w prawo [0, 0, 0] [3, 0, 0] [3, 9.81, 0]
Przesuwanie w górę i w prawo [0, 0, 0] [5, 5, 0] [5, 14.81, 0]

Przykład: obliczanie maksymalnego przyspieszenia obiektu

Jednym ze sposobów korzystania ze zdarzeń ruchu urządzenia jest obliczanie maksymalnego przyspieszenia obiektu. Na przykład: jaka jest maksymalna przyspieszenie osoby skaczącej?

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

Po kliknięciu przycisku „Go!” użytkownik zostaje poproszony o skoczenie. W tym czasie strona przechowuje maksymalne (i minimalne) wartości przyspieszenia, a po skoku informuje użytkownika o maksymalnym przyspieszeniu.

Prześlij opinię