HTML 5 Accelerometer

Wat is een Accelerometer

Volgens wikipedia is een accelerometer (versnellingsmeter in het Nederlands):

Een versnellingsmeter is een meetapparaat dat een versnelling kan registreren en meten. Het maakt gebruikt van het traagheidsprincipe.

Tegenwoordig is bijna elke smartphone uitgerust met een accelerometer. Met de accelerometer is het mogelijk de rotatie digitaal uit te lezen.

Jules Verne Google Logo


Op 8 februari 2011 stond het logo op de homepage van Google in het teken van de geboortedag van Jules Verne. Het interactieve logo was die dag geïnspireerd op het boek “Twintigduizend mijlen onder zee”. De onderzeeër Nautilus was zelf te besturen met de muis of via het toetsenbord.

Wat mij het meest verbaasde, was dat de onderzeeër ook te besturen was door de MacBook te kantelen. “Blijkbaar zit er dus een accelerometer in de laptop en is deze uit te lezen in de browser” dacht ik toen.

Accelerometer Uitlezen in JavaScript

Het uitlezen van de data in JavaScript is niet moeilijk.

  1. Registreer een event listener met de naam “deviceorientation”.
  2. Elke wijziging van oriëntatie vuurt een event af, handel dit event af.

In JavaScript ziet dit er als volgt uit:

function handleEvent(event) {

    var x = event.beta;
    var y = event.gamma;

    window.console && console.info('Raw Position: x, y: ', x, y);
}

window.addEventListener("deviceorientation", handleEvent, true);

In Mozilla Firefox is is het uitlezen van de accelerometer gegevens ook mogelijk, alleen wijkt de implementatie iets af van de standaard. Zie de sourcecode van de demo, of de documentatie voor details.

Demo

http://sandbox.juurlink.org/accelerometer/

Leave a Reply

Your email address will not be published.