Invoering

De meeste moderne mobiele apparaten zijn uitgerust met versnellingsmeters, gyroscopen en kompassen. In mijn vorige artikel over de Geolocation-API heb ik beschreven hoe ontwikkelaars de gegevens van de Geolocation API kunnen gebruiken om de gebruikerservaring te verbeteren. Een andere interessante API is de Device Orientation API, die de focus heeft op deze zelfstudie.

Het detecteren van de oriëntatie van een apparaat is handig voor een breed scala aan toepassingen, van navigatie-applicatie tot games. Heb je ooit een racespel gespeeld op een mobiel apparaat waarmee je de auto kunt besturen door het apparaat te kantelen?

Een andere toepassing van de API is het bijwerken van de gebruikersinterface van een toepassing wanneer de oriëntatie van het apparaat verandert om de gebruiker de best mogelijke ervaring te bieden door gebruik te maken van het volledige scherm. Ben je een fan van YouTube, dan heb je zeker gebruik gemaakt van deze functie.

In dit artikel zal ik u voorstellen aan de Device Orientation API, die uitlegt welk type gegevens ons kan worden aangeboden en hoe u deze kunt gebruiken in uw toepassingen.

1. Wat is het??

Om de W3C-specificatie van de Device Orientation API te noemen, definieert de API "[...] verschillende nieuwe DOM-gebeurtenissen die informatie bieden over de fysieke oriëntatie en beweging van een hostingapparaat." De gegevens die door de API worden verstrekt, zijn afkomstig van verschillende bronnen, zoals de gyroscoop van het apparaat, de versnellingsmeter en het kompas. Dit verschilt van apparaat tot apparaat, afhankelijk van welke sensoren beschikbaar zijn.

Deze API is een W3C Working Draft, wat betekent dat de specificatie niet stabiel is en we wellicht enkele wijzigingen in de toekomst verwachten. Het is ook vermeldenswaard dat deze API enkele bekende inconsistenties vertoont in verschillende browsers en op een aantal besturingssystemen. De implementatie in Chrome en Opera, gebaseerd op de Blink-renderingengine, heeft bijvoorbeeld een compatibiliteitsprobleem met Windows 8 voor de deviceorientation evenement. Een ander voorbeeld is dat de interval eigenschap is niet constant in Opera Mobile.

2. Implementatie

De API geeft drie gebeurtenissen weer die informatie bieden over de richting van het apparaat:

• deviceorientation
• devicemotion
• compassneedscalibration
  

Deze evenementen worden geschoten op de venster object, wat betekent dat we een handler moeten koppelen aan de venster voorwerp. Laten we naar elk van deze gebeurtenissen kijken.

deviceorientation

De deviceorientation gebeurtenis wordt geactiveerd wanneer de accelerometer een verandering van de oriëntatie van het apparaat detecteert. Zoals ik eerder al zei, kunnen we naar deze gebeurtenis luisteren en reageren op eventuele wijzigingen door een gebeurtenishandler aan de venster voorwerp. Wanneer de gebeurtenishandler wordt aangeroepen, ontvangt deze een argument van het type DeviceOrientationEvent, die vier eigenschappen bevat:

• alpha is de hoek rond de z-as. De waarde varieert van 0 naar 360 graden. Wanneer de bovenkant van het apparaat naar het Ware noorden wijst, is de waarde van deze eigenschap dat 0.
• beta is de hoek rond de x-as. De waarde varieert van -180 naar 180 graden. Wanneer het apparaat evenwijdig is aan het oppervlak van de aarde, is de waarde van deze eigenschap 0.
• gamma is de hoek rond de y-as. De waarden variëren van -90 naar 90 graden. Wanneer het apparaat evenwijdig is aan het oppervlak van de aarde, is de waarde van deze eigenschap 0.
• absoluut geeft aan of het apparaat oriëntatiegegevens levert die relatief zijn ten opzichte van het coördinatensysteem van de aarde, in welk geval de waarde ervan is waar, of naar een willekeurig coördinatensysteem.

De volgende afbeelding, overgenomen uit de officiële specificatie, toont de x-, y- en z-assen vermeld ten opzichte van het apparaat.

devicemotion

De devicemotion de gebeurtenis wordt afgevuurd telkens wanneer het apparaat versnelt of vertraagt. Je kunt luisteren naar deze gebeurtenis, net zoals we deden voor de deviceorientation evenement. Wanneer de gebeurtenishandler wordt aangeroepen, ontvangt deze een argument van het type DeviceMotionEvent, welke vier eigenschappen heeft:

• versnelling specificeert de versnelling van het apparaat ten opzichte van het frame van de aarde op de x-, y- en z-assen, toegankelijk via zijn X, Y, en z eigenschappen. De waarden zijn uitgedrukt in m / s².
• accelerationIncludingGravity heeft dezelfde waarden als de versnelling eigendom, maar het houdt rekening met de zwaartekracht van de aarde. De waarden van deze eigenschap moeten worden gebruikt in situaties waarin de hardware van het apparaat niet weet hoe de zwaartekracht uit de versnellingsgegevens moet worden verwijderd. In dergelijke gevallen is de versnelling eigenschap mag niet worden aangeboden door de user-agent.
• rotationRate geeft de snelheid aan waarmee het apparaat rond elk van zijn assen in graden per seconde roteert. We hebben toegang tot de individuele waarden van rotationRate via zijn alpha, beta, en gamma eigenschappen.
  
• interval geeft het interval aan waarmee gegevens worden verkregen. Deze waarde mag niet veranderen als deze eenmaal is ingesteld. Het wordt uitgedrukt in milliseconden.

compassneedscalibration

Deze gebeurtenis wordt geactiveerd wanneer de user-agent bepaalt dat het kompas moet worden gekalibreerd. De specificatie stelt ook dat "user agents alleen de gebeurtenis moeten activeren als het kalibreren van het kompas de nauwkeurigheid van de door de deviceorientation evenement. "Deze gebeurtenis moet worden gebruikt om de gebruiker te informeren dat het kompas moet worden gekalibreerd en moet de gebruiker ook instrueren hoe dit moet worden gedaan.

3. Detecteren van ondersteuning

Om te detecteren of de browser of user-agent een van de eerste twee gebeurtenissen ondersteunt, deviceorientation en devicemotion, is net zo eenvoudig als een triviale voorwaardelijke verklaring opnemen. Bekijk het volgende codefragment waarin we ondersteuning voor de deviceorientation evenement:

if (window.DeviceOrientationEvent) // We kunnen luisteren naar wijzigingen in de oriëntatie van het apparaat ... else // Niet ondersteund

Om te testen voor de compassneedscalibration evenement gebruiken we het volgende codefragment:

if (! ('oncompassneedscalibration' in venster)) // Event supported else // Event not supported

4. Browserondersteuning

Hoewel de ondersteuning voor de Device Orientation-API goed is, moeten we een paar dingen in gedachten houden wanneer we met de API werken. Afgezien van de in de inleiding genoemde voorbehouden, is de absoluut eigendom is onbepaald in Mobile Safari.

Het echte probleem is echter dat elke browser die de Device Orientation API ondersteunt het slechts gedeeltelijk ondersteunt. Op het moment van schrijven ondersteunen heel weinig browsers het compassneedscalibration evenement. Voer het bovenstaande codefragment uit in Chrome of Firefox om het probleem te illustreren.

Met dit in gedachten zijn de browsers die de Device Orientation API ondersteunen Chrome 7+, Firefox 6+, Opera 15+ en Internet Explorer 11. Ondersteuning door mobiele browsers is nog beter. Naast degene die ik al heb genoemd, wordt de API ook ondersteund door de browser van BlackBerry 10, Opera Mobile 12+, Mobile Safari 4.2+ en Chrome 3+ op Android.

Voor een actueel en juist beeld van de ondersteuning voor de Device Orientation API, raad ik aan te bezoeken Kan ik gebruiken ... .

5. Demo

We weten nu wat we nodig hebben om een ​​demotoepassing te maken die gebruikmaakt van de Device Orientation-API. Het doel van deze demo is om een ​​kubus te maken, met gebruik van gewone HTML en CSS, en deze te draaien terwijl de oriëntatie van het apparaat verandert.

We geven ook de informatie weer die we ophalen uit de API, die het type gegevens weergeeft dat we terug krijgen van de Device Orientation API. We tonen ook de informatie in onbewerkte tekst aangezien sommige browsers de Device Orientation API kunnen ondersteunen, maar niet de CSS-eigenschappen om de kubus weer te geven. Dit is bijvoorbeeld het geval voor Opera Mobile.

Omdat we weten dat niet elke browser de API ondersteunt, testen we ook voor ondersteuning van elk kenmerk van de API en geven dit weer aan de gebruiker.

De broncode voor de demotoepassing wordt hieronder weergegeven, maar u kunt deze ook in actie zien.

          
Device Orientation API
 deviceorientation-event niet ondersteund devicemotion-gebeurtenis niet ondersteund compassneedscalibration event wordt niet ondersteund 
 
 
1
 
2
 
3
 
4
 
5
 
6
 
 
 
 Coördinaten: (nul, nul, nul) 
 Positie absoluut? niet beschikbaar 
 
 
 
 Versnelling: (nul, nul, nul) Mevrouw2 
 
 Versnelling inclusief zwaartekracht: (nul, nul, nul) Mevrouw2 
 
 Rotatiesnelheid: (nul, nul, nul) 
 
 Interval: 0 milliseconden 
 
 
  Demo gemaakt door Aurelio De Rosa (@AurelioDeRosa)    

Conclusie

In dit artikel hebben we de Device Orientation-API onderzocht door een kijkje te nemen naar de bijbehorende functies en mogelijke use cases. Ondersteuning van de API is op het moment van schrijven niet geweldig, maar ik ben er zeker van dat u het ermee eens bent dat dit veel mogelijkheden biedt voor mobiele ontwikkelaars, in het bijzonder game-ontwikkelaars. Vergeet niet om met de demo te spelen om de API in actie te zien.