Intel XDK: Zugriff auf Sensoren (Hands-on-Lab)

Tags

Einführung in die Cross-Plattform Entwicklung


Zugriff auf Sensoren mit dem Intel XDK
 

[ Video-Training und weitere Artikel ]

Dieser Kurs steht am Ende von diesem Artikel auch als PDF-Datei zur Verfügung.

Einführung

Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Zugriff auf Sensoren vertraut. Es wird Schritt für Schritt eine Hybrid-App entwickelt und getestet.

Voraussetzungen

Die folgenden Voraussetzungen sind notwendig für die nächsten Schritte:

  • Das Intel XDK kostenlos Downloaden unter http://xdk.intel.com und installieren.
  • Es wird Windows, Mac OS X oder Linux benötigt.
  • Grundkenntnisse in HTML und JavaScript.

Die Sensoren

Ein besonderer Vorteil von einer App gegenüber einer Webseite ist der verbesserte Zugriff auf die Hardware. Die Kombination Software und Hardware bietet dem Benutzer ein besonderes Anwendungserlebnis und der Nutzen wird ebenfalls gesteigert.

Ein bekanntes Beispiel wäre hierbei die Taschenlampen-App, die das Blitzlicht dauerhaft aktiviert und somit in der Nacht ein gutes Hilfsmittel geworden ist. Des Weiteren behelfen ebenfalls die Wasserwaagen- oder Kompass-App. Die Software verschmilzt mit der Plattform und wird für den Anwender zum Schweizer-Taschenmesser. Sensoren sind also ein wesentlicher Bestandteil, weshalb Smartphones und Tablets so erfolgreich geworden sind. Ein weiterer Erfolgs Faktor ist der Multi-Touch-Sensor, der gerade bei mobilen Spielen einen großen Mehrwert bietet.

Es gibt beim Intel XDK zwei unterschiedliche Möglichkeiten auf die Sensoren zuzugreifen. Die erste wäre direkt mit der Apache Cordova API. Diese kann man allerdings dann nur per remote Debugging testen. Für das Testen innerhalb der Emulatoren, dient die zweite Möglichkeit mittels Intel XDK JavaScript Bridge API. Diese ist daher nur ein Vermittler zur darunterliegenden Cordova API, die eine Schnittstelle zu den Emulatoren bietet. Die Beschränkung liegt derzeit noch auf den Accelerometer-, Vibration- und Geolocation-Sensor.

Die beiden APIs werden innerhalb vom Intel XDK angeboten. Es reicht in diesem Fall nur eine einfache JavaScript-Referenz zu intelxdk.js oder cordova.js. Beide bieten einen einheitlichen Zugriff. Für die Abfrage zum aktuellen Zustand eines Sensors beginnt diese immer mit einer JavaScript get-Funktion. Soll der Sensor dauerhaft zu einem bestimmten Zeitabstand abgefragt werden, beginnt diese mit der watch-Funktion.

Weitere Informationen zur Apache Cordova API:

http://cordova.apache.org/docs/en/2.9.0/guide_overview_index.md.html#Overview

Weitere Informationen zur Intel XDK JavaScript Bridge API:

http://software.intel.com/en-us/node/492826

Übung – Die eigene Hybrid-App mit Zugriff auf Sensoren

Für die Übung wählen wir die „Start with App Designer“-Vorlage aus und geben „SensorAppBeispiel“ als Projektnamen ein. Wir erzeugen das Projekt per Klick auf den blauen Create-Button.


Abbildung 1 – Ein neues Projekt mit „SensorAppBeispiel“ erzeugen

Es öffnet sich anschließend der App Designer mit einem Dialog. Dieses fragt welches JavaScript UI-Framework verwendet werden soll. In dieser Übung wird mit dem App Framework gearbeitet und wird mit einem Klick auf den Select-Button bestätigt.


Abbildung 2 – JavaScript UI-Framework auswählen

Intel XDK JavaScript Bridge API und der Beschleunigungssensor

Der Beschleunigungssensor (Accelerometer) dient zur Messung von Geschwindigkeit. Dieser kann außerdem noch Vibrationen, Bewegungen und Kräfte messen. Die Emulatoren vom Intel XDK unterstützen diesen Sensor und daher kann dieser mittels Intel XDK JavaScript Bridge API angesprochen werden. Das ermöglicht dann einen angenehmeren Entwicklungsprozess.

Bei dem bereits erzeugten Projekt platzieren wir nun ein Textarea-Steuerelement auf die Oberfläche. Die Eigenschaften passen wir wie folgt an, das Label erhält den Wert „Accelerometerdaten“ und die Label Position wird auf „top left“ gesetzt. Die Id erhält den Namen „accelerometerBox“.


Abbildung 3 – Textarea-Steuerelement platzieren und Eigenschaften setzen

Wir wechseln nun zum HTML Code-Editor via Code-Button im Menü. In der Regel sollte passend zur Oberfläche die Index.html-Datei geöffnet sein. Die wichtige Referenz zu Intel.xdk.js ist bereits über der onDeviceReady-Funktion gesetzt und innerhalb dieser erfolgt nun der nötige JavaScript-Code.

Der Zugriff erfolgt immer über intel.xdk.sensorname. Für dieses Beispiel wäre es dann intel.xdk.accelerometer. Der Sensor soll dauerhaft nach einem festgelegten Zeitabstand abgefragt werden. Dazu dient dann die watchAcceleration-Funktion. Der komplette JavaScript-Code wird unter Listing 1 gezeigt.

Die Rückgabewerte beinhalten das Koordinatensystem von X, Y und Z. Die X-Achse verläuft von rechts nach links, die Y-Achse von vorne nach hinten und die Z-Achse von oben nach unten. Die Werte können im Plus- und Minusbereich liegen.

<script type="text/javascript">

       /* This code is used to run as soon as Intel activates */
       var onDeviceReady=function(){

       //hide splash screen
       intel.xdk.device.hideSplashScreen();

       function onAccelerationChanged(acceleration){

               $("#accelerometerBox").html('X: ' + acceleration.x + '\n' +
                                     'Y: ' + acceleration.y + '\n' +
                                     'Z: ' + acceleration.z + '\n' +
                                     'Timestamp: ' + acceleration.timestamp);
       };

       // Update alle 3 Sekunden
       var options = { frequency: 3000, adjustForRotation: true  };

       intel.xdk.accelerometer.watchAcceleration(onAccelerationChanged, options);
       };

       document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>

Listing 1 – Zugriff auf den Accelerometer-Sensor via Intel XDK JavaScript Bridge API

Innerhalb vom Emulator kann die fertige Hybrid-App getestet werden. Dazu einfach zum Emulate-Tab wechseln und auf der linken Seite unter ACCELEROMETER das abgebildete 3D-Smartphone durch gedrückter Maustaste bewegen. Die Koordinatendaten können auch manuell gesetzt werden.


Abbildung 4 – Beschleunigungssensor im Emulator testen

Eine ausführliche Dokumentation unter:

http://software.intel.com/en-us/node/492838

Apache Cordova API und der Kompass

Der Kompass besteht aus mikroelektromechanischen Komponenten. Diese messen die aktuelle Richtung, in die das Gerät positioniert ist. Der Emulator unterstützt aktuell noch keine Testmöglichkeit und der Zugriff muss direkt über die Apache Cordova API erfolgen.

In diesem Beispiel wird ein weiteres Textarea-Steuerelement auf die Oberfläche platziert. Dann werden die nötigen Eigenschaften gesetzt. Das Label erhält den Wert „Kompassdaten“, die Label Position auf „top left“ und die Id erhält den Namen „compassBox“.


Abbildung 5 – Eine weitere Textarea platzieren und die Eigenschaften festlegen

Wir wechseln nun zum HTML Code-Editor via Code-Button im Menü. In der Regel sollte passend zur Oberfläche die Index.html-Datei geöffnet sein. Der Zugriff erfolgt diesmal direkt über die Apache Cordova API. Dazu wird nach der intel.xdk.js-Referenz eine weitere zu cordova.js benötigt. Das Intel XDK stellt diese automatisch im Hintergrund zur Verfügung. So muss keine JavaScript-Datei zum Projekt manuell hinzugefügt werden.

Der Zugriff erfolgt immer über navigator.sensorname. Für dieses Beispiel wäre es dann navigator.compass. Der Sensor soll dauerhaft nach einem festgelegten Zeitabstand abgefragt werden. Dazu dient die watchHeading-Funktion. Der komplette JavaScript-Code wird unter Listing 2 gezeigt.

<script src="cordova.js"></script>

...

function onCompassChanged(heading){

       $("#compassBox").html(heading.magneticHeading);

};

function onError(error){
       alert(error.code);   
};

var compassOptions = { frequency: 3000 };

navigator.compass.watchHeading(onCompassChanged, onError, options);

Listing 2 – Zugriff auf den Compass-Sensor via Apache Cordova API

Die fertige Hybrid-App kann nun mittels Test-Tab direkt auf dem Gerät getestet werden. Wichtig dabei ist, dass vorher die Intel XDK App Preview vom Store des jeweiligen Plattform-Anbieters installiert wurde. Zusätzlich wird ein kostenloser Entwickler Account bei Intel benötigt.

Die letzten Abbildungen zeigen den Start der Intel XDK App Preview und der soeben erzeugten App im Test. Die Kompassdaten werden erfolgreich in der zweiten Textarea angezeigt.

            
Abbildung 6 – Die Intel XDK App Preview starten und die hochgeladene Hybrid-App auswählen

 

                                              
Abbildung 7 – Ein Standard Splashscreen wird kurz angezeigt und dann erscheint die Hybrid-App zum Testen

Programmiersprache

Zone

Format

Publikum

Betriebssysteme