Luz Caballero (@gerbille) war früher Dev Relations bei Opera und sprach über die mathematische Welt der Geräteausrichtung auf Mobilgeräten.
Dies sind meine Notizen von ihrem Vortrag auf der W3Conf in San Francisco im Rahmen von dieser Live-Blog-Serie.
Geräteausrichtung. Das ist nicht nur „Hochformat“ und „Querformat“. Es besteht aus drei Dingen
- deviceorientation – In welchem Winkel hält jemand das Gerät?
- devicemotion – Bewegt es sich? Beschleunigt es?
- compassneedscalibration – In welche Richtung zeigt es? (Dieses spezielle Ereignis wird ausgelöst, wenn das Gerät neu kalibriert werden muss)
Es gibt verschiedene Arten von Apps, die diese Informationen nutzen können
Statische Anwendung = Dinge messen und diese Informationen einmalig nutzen (wie eine Karten-App)
Dynamische Anwendung = ständige Bewegung des Geräts, Nutzung dieser Informationen, um die App zu beeinflussen (wie ein Rennspiel)
Luz zeigte eine coole Demo einer Teekanne, die in WebGL gezeichnet wurde, und drehte sie, indem sie einfach ihr Handy bewegte, in 3D herum. Die Verbindung wurde über Web Sockets vom Handy zum Web hergestellt.
Die Ausrichtung ist mathematisch etwas komplex (Tait-Bryan-Winkel). Es gibt drei Achsen und dann verschiedene Kombinationen davon. Alpha, Beta und Gamma (sie haben auch andere Namen, wie „Neigung“).
Vorsicht vor der Alpha/Gamma-Singularität! (Ich glaube, das ist wie das Überqueren der Strahlen).
„Beschleunigungsmesser funktionieren nicht, wenn das Gerät nach oben zeigt“ Alpha Gamma Singularität @gerbille #W3Conf
— Nicole Sullivan (@stubbornella) 22. Februar 2013
Einiges davon kann mit Remote.js vereinfacht werden. Der Code für die Teekannen-Demo, die wir zuvor gesehen haben, sieht viel machbarer aus. Wenn eine WebSocket-Nachricht empfangen wird,
avalue = data.alpha / 180 * Math.PI;
/* etc */
teapot.rotation.set(gvalue, avalue, -bvalue);Wie üblich gibt es einige Browser-Inkonsistenzen. Luz hat eine Testsuite für diese Dinge auf GitHub. Es gibt auch Unterschiede zwischen Geräten, die „nativ“ Hoch- oder Querformat sind. Firefox und Opera haben unterschiedliche Vorstellungen davon, wie man seine Querformat-Geräte halten sollte (Kabel auf verschiedenen Seiten).
Eine Möglichkeit, diese Unterschiede zu berücksichtigen, besteht darin, die Benutzer zu bitten, einen schnellen Test auf ihrem aktuellen Gerät durchzuführen. Dann merkt man es sich und nutzt es bei Bedarf in der Mathematik.
Es scheint, dass die Bitte an den Benutzer, sein Gerät bei der Arbeit mit Geräteausrichtung zu kalibrieren, die einzige zuverlässige Lösung ist. #w3conf
— Tim Hettler (@timhettler) 22. Februar 2013
Hier ist eine 3D-Kompass-Engine, die Pufferung (für flüssigere Bewegungen) handhabt.
Die Unterstützung ist auch lückenhaft für Beschleunigung (Safari), Beschleunigung inklusive Schwerkraft (Safari, Opera, Firefox), Rotationsrate (Safari) und Intervall. Sie können if() Tests verwenden, um die Unterstützung relativ einfach zu prüfen.