Offline, Fullscreenable HTML5 Compass with SVG [Part 3 - Orienting Yourself]

Part 1 - Drawing Things

Part 2 - Animating Things

Now that we have a SVG compass that we know how to animate, we want to direct it towards compass north. Like most shiny new HTML5 standards, we can get this data by hooking ourselves into a page event:

function orientationHandler(ori) {  
  // ori.alpha - current angle between screen-up and North
  // ori.beta - current angle between screen-up 
  //  and level plane
  // ori.gamma - current angle between screen-left
  //  and level plane


Demo: Orientation Handlers

Cannot determine whether your device supports orientation right now.

It looks like we really only want the Alpha value- we can put our knowledge of Beta and Gamma to use in a future project- who knows when we might want to know the tilt of a device?

One thing we want to be aware of: orientation events fire as soon as we get them, and we don't necessarily want all that data to be incorporated in the render cycle. At the shortest, we want to re-render about once every 33ms, which is about 30 frames per second. Note: If you want to target a specific FPS number, divide 1000 over it

var direction = 0;  
var needle = document.getElementById('needle');

function orientationHandler(event) {  
  direction = event.alpha || 0;

function directNeedle() {  
   translate(50 50) rotate('+
   ') translate(-50 -50)'

window.addEventListener('deviceorientation', orientationHandler);  
var needleDirector = setInterval(directNeedle, 50);  

And now we have a working compass! In the next post, I'll walk you through offline caching technologies so you don't have to find 4G signal if you get lost in the woods with nothing but your offline web apps...

How to Cite Republished Information

Do not use this information as legal advice.
If you need advice, call or email a licensed attorney.
No attorney-client relationship is created by your use of this site, including any communication with the author in comments.