06.012014

Webseite mit Gyro Sensor steuern lassen

Einen wunderschönen guten Morgen und ein frohes neues Jahr, wünsch ich euch erstmal hier an dieser Stelle. Zu Weihnachten war der Weihnachtsmann sehr lieb zu mir und hat mir direkt einen Raspberry Pi gebracht mit Bausatz für ein Auto. Nun wollte ich das Auto schön über mein Tablett steuern, was für mich als Softwareentwickler nicht gerade abwegig ist und habe mir gedacht: "Wieso nicht gleich über den Gyrosensor des Tabletts die Steuerung abwickeln lassen?" Das Resultat wollte ich euch hier mal etwas näher bringen, auf welche Probleme ich hierbei gestoßen bin.

Angefangen habe ich erstmal natürlich mit Recherche und bin dabei auf die gyro.js gestoßen von Tom Gallacher gestoßen, die ich dann noch etwas angepasst und mit weiteren Funktionen erweitert habe.

Ich habe folgende Funktionen bei der gyro.js erweitert:

gyro.switchOrientation = function(orientation) {
  calibration[orientation] = calibration[orientation] * -1;
};

gyro.isSwitched = function() {
  if (calibration["x"] < 0) {
    return true;
  }
  return false;
};

Die Kalibrierung auf der X Achse habe ich initial auf 6 gesetzt, da ich dies am angenehmsten empfand das Tablett zu halten für eine 0-Stellung, aber das könnt ihr ja machen, wie ihr es gerne hättet.

Was mir aufgefallen ist, dass ein iPhone, Android oder Windows Phone / Tablett immer unterschiedlich gehalten werden. Darum habe ich die Funktion switchOrientation eingebaut, damit man ab einem bestimmten Wert, die Orientierung bereinigen muss.

Nun muss man nur noch die gyro.js in seine Seite einbauen und kann über folgende Funktion das Tracking für Gyro starten:

function initGyro() {
  gyro.startTracking(function(o) {
    if (o.x > 10 || o.x < -10) {
      gyro.switchOrientation("x");
    }
    result = "gyro x: " + o.x  + "<br />";
    result += "gyro y: " + o.y + "<br />";
    output.innerHTML = result;
  });
}

Wenn man nun ein DIV mit der id "output" hat, wird man live sehen können, wie der Gyro des Smartphones sich ändern lässt und ihr solltet hiermit nun keinerlei Probleme mehr haben, eure Sachen zu steuern.

Evtl. werde ich als nächstes ein Video machen, wenn ich komplett fertig bin, damit man sehen kann, wie das Gesamte dann funktioniert mit dem Auto am Ende.

Bis dahin, euer Mark.