Podgląd orientacji urządzenia

Podgląd orientacji urządzenia – dane żyroskopu w przeglądarce

DeviceOrientationEvent i DeviceMotionEvent to API przeglądarki umożliwiające odczyt danych z żyroskopu, akcelerometru i magnetometru urządzenia mobilnego. Narzędzie wyświetla aktualne wartości alpha (obrót Z), beta (przód/tył), gamma (lewo/prawo) i przyspieszenia – bez instalacji, prosto z przeglądarki.

Jak działa podgląd orientacji urządzenia

Przeglądarka nie odczytuje kątów alpha, beta i gamma z jednego czujnika. DeviceOrientationEvent jest wynikiem fuzji trzech źródeł: akcelerometru, który daje wektor grawitacji i informację, gdzie jest dół, żyroskopu, który mierzy prędkość obrotu w stopniach na sekundę, oraz magnetometru, który wyznacza kierunek północy. Sterownik urządzenia łączy te pomiary w kwaternion opisujący obrót w przestrzeni, a przeglądarka przelicza go na kąty Eulera w ustalonej kolejności. Kąty nie są więc niezależne – zmiana jednego wpływa na interpretację pozostałych.

Kąty beta i gamma wynikają bezpośrednio z wektora grawitacji. Gdy telefon leży płasko ekranem do góry, wypadkowa przyspieszenia działa wzdłuż osi Z i oba kąty są bliskie zeru. Po podniesieniu urządzenia do pionu składowa grawitacji przenosi się na oś Y i beta zmierza do 90°. Alpha liczona jest inaczej, bo opiera się na magnetometrze wspieranym żyroskopem – dlatego jako jedyna pokazuje kierunek względem północy, ale jest wrażliwa na zakłócenia magnetyczne.

Odczyty przychodzą w rytm pętli odświeżania. Pole interval w DeviceMotionEvent podaje odstęp między próbkami w milisekundach; typowo jest to 16 ms, co odpowiada 60 Hz na nowoczesnych urządzeniach, ale na starszych lub obciążonych telefonach wartość bywa większa. Narzędzie subskrybuje zdarzenia i wypisuje ostatnią otrzymaną wartość bez wygładzania, więc widoczne drgania to normalny szum czujników, a nie błąd wyświetlania.

Przykład: sprawdzenie orientacji telefonu krok po kroku

1. Otwórz /podglad-device-orientation na telefonie, nie na komputerze, i naciśnij przycisk zezwolenia na dostęp. Na iOS 13 i nowszych to uprawnienie wymaga kliknięcia, więc bez tego kroku pola pozostaną puste.
2. Połóż telefon płasko na stole, ekranem do góry, górną krawędzią skierowaną na północ. Na ekranie powinny pojawić się wartości zbliżone do alpha 0°, beta 0° i gamma 0°.
3. Nie podnosząc telefonu, obróć go w płaszczyźnie stołu o 90° w prawo. Zmieni się wtedy tylko alpha i wzrośnie w stronę 90°, a beta oraz gamma pozostaną bliskie zeru, bo grawitacja nadal działa wzdłuż tej samej osi.
4. Podnieś telefon do pionu, tak aby ekran był skierowany na wprost oczu. Beta przesunie się w kierunku 90°, a gamma pozostanie blisko 0°, dopóki nie przechylasz urządzenia na boki.
5. Przechyl telefon w prawo, nie zmieniając jego pionowej pozycji. Beta pozostanie w okolicach 90°, a gamma zmieni się o kilkadziesiąt stopni w jedną ze stron – jej zakres to od -90° do 90°.
6. Odłóż telefon z powrotem płasko i sprawdź pole interval. Jeśli pokazuje około 16 ms, odczyty odświeżają się z częstotliwością bliską 60 Hz; większa wartość oznacza rzadsze próbki i wolniejszą reakcję podglądu.

Parametry odczytywane przez narzędzie

Praktyczne wskazówki

• Kalibruj na płaskiej powierzchni – przed odczytem połóż telefon nieruchomo na kilka sekund, żeby żyroskop i magnetometr ustabilizowały wskazania.
• Testuj na docelowym urządzeniu – desktop nie ma żyroskopu ani akcelerometru, więc wartości pozostaną puste lub zerowe niezależnie od przeglądarki.
• Zezwolenie na iOS wywołaj w zdarzeniu – requestPermission() musi być wywołane w obsłudze kliknięcia, na przykład onclick; próba poza interakcją użytkownika kończy się odmową dostępu.
• Sprawdzaj interval, nie zakładaj 60 Hz – przy cięższej stronie lub słabszym telefonie próbki przychodzą rzadziej niż co 16 ms i animacja sterowana orientacją będzie szarpać.
• Używaj HTTPS albo localhost – poza bezpiecznym kontekstem przeglądarka może w ogóle nie udostępnić danych z czujników.

Ograniczenia i źródła zniekształceń

• Brak czujników na desktopie – komputery stacjonarne i większość laptopów nie mają akcelerometru ani żyroskopu, więc podgląd nie ma z czego czytać danych.
• Zakłócenia magnetyczne psują alpha – metalowe biurka, magnesy, głośniki i etui z magnesem przekłamują wskazania magnetometru, a wraz z nimi kierunek północy.
• Kąty Eulera mają osobliwość – przy beta blisko ±90° osie alpha i gamma pokrywają się, przez co jeden kąt przestaje być jednoznacznie wyznaczony i odczyty skaczą.
• Dane są surowe, bez filtracji – narzędzie nie wygładza przebiegów ani nie kompensuje dryftu żyroskopu, więc krótkie szarpnięcia i powolne przesuwanie zera są widoczne w wynikach.

Najczęstsze pytania

Powiązane narzędzia: tester Web Bluetooth, detektor cech CSS i walidator JSON Schema.