Aufbauend auf meinen Blogpost vom 10.12.2010 habe ich mich mal wieder mit der Steuerung von Motoren mit Hilfe des Arduino-Boards beschäftigt.

Ziel war es, eine über das WLAN-gesteuerte fahrende Robot-Plattform zu entwickeln, die in Echtzeit über ein aufmontiertes Smartphone Live-Bilder an das User-Interface zurückgibt.

Um sowohl die Steuerung des Robots im Browser am PC, als auch auf mobilen Plattformen wie Smartphones oder Tablets zu gewährleisten, habe ich ein kleines Frontend mit dem easle-Framework in HTML5 geschrieben, welches sowohl Maus als auch Touchgesten unterstützt.

Über einen kleinen Track-Point kann so, ähnlich wie bei einem Joystick, der Roboter in die jeweilige Richtung gesteuert werden.

Screenshot HTML5 Arduino Robot

Um die Robot-Plattform über das WLAN steuern zu können benötigen wir drei Module.

Der Arduino dient als Stamm-Modul und steuert die Kommunikation zwischen dem RedFly-Shield, welches als Schnittstelle zum WLAN dient, sowie die des Motor-Shields, welche es ermöglicht, Schrittmotoren, Servors oder AC-Motoren anzusteuern.

Arduino Robot Shields

Einer kleiner, selbstprogrammierter Webserver auf dem Arduino-Board interpretiert eingehende GET-Variablen. Je nach Wert leitet dieser die Informationen an die Pins des Motor-Shields weiter, welche letztendlich die Motoren ansteuern.

Hierbei kann die Richtung und Spannung für jeden angeschlossenen Motor separat anprogrammiert werden.

Die IP des Webservers kann im Code definiert werden und sollte dem Stamm des verwendeten W-LANs entsprechen. Somit ist die Robot-Plattform über die IP-des RedFly-Shields erreichbar und kann über das Userinterface gesteuert werden.

Die Bilder des aufmontierten Smartphones werden über eine IP-CAM-App als JPG-Stream in Echtzeit übertragen.

Leider war mein Netz nicht das schnellste, weshalb die Latez und Übertragungsqualität der Bilder nicht die Beste ist. Dies lässt sich aber noch optimieren.

Arduino Robot Plattform

Die Robot Plattform ist somit theoretisch von überall aus dem www steuerbar.

Sourcecode – Arduino Motorshield Webserver

In letzter Zeit habe ich mich mal wieder ein bisschen mit HTML / Javascript, bzw. jQuery beschäftigt und dabei eine sehr interessante JS-Library gefunden.

Sie ermöglicht es, nach Vorbild der Displaylist verschiedenste Objekte (Canvas-Sprites / Bitmapdaten) etc. über Javascript zu animieren.

Die Tween-JS-Libary ist hierbei sehr verwand zur der schon in Flash verwendeten GS-Tween-Engine.

Eventhandling und Umgang mit der Displaylist lehnen hierbei auch sehr an Java oder Actionscript an, was das Programmieren sehr komfortabel gestaltet;)

Eine gute Dokumentation, sowie alle Infos findet Ihr unter easeljs.com.

Im folgenden Beispiel programmierte ich mal angelehnt an meine Android-Kick-App, ein kleines Fussballspiel in HTML5 mit Hilfe der oben genannten Klassen.

Sourcecodes

HTML5 Beispielapplikation (in Firefox, Chrome, Safari)

Inspiriert durch das Starling Particle Effects – Tutorial auf gotoandlearn.com, habe ich mich mal ein wenig mit dem Starling-Framework beschäftigt.

Starling ist eine AS3 – Library, in der alle gezeichneten oder Animierten Objekte direkt über die GPU gerendert werden. Hierdurch ergibt sich eine enorme Performanceverbesserung, die insbesondere beim Animieren von sehr vielen Partikeln, oder physikalischen Animationen große Vorteile bietet.

Besonders in der Spieleentwicklung ist Starling jetzt schon z.B. bei der Entwicklung einer neuer Versionen von Angry-Birds ein fester Bestandteil.

Im Framework wurden diverse TouchEvents, sowie ein simulierter Multitouch-Modus integriert, um auch am Entwicklungsrechner Touches oder Gestures simulieren zu können und auch für mobile Endgeräte entwickeln zu können.

Ein weitere Vorteil des Starling-Frameworks liegt außerdem in einer sehr verwanden Syntax zu der ursprünglichen Flash Display-List, was keine große Umstellung des Projektaufbaues voraussetzt.

Im folgenden Beispiel habe ich mich an die Starling-Introduction-PDF gehalten, in der schon einige gut dokumentierte Beispiele und Anregungen zu finden sind.

Die Implementierung von Partikeleffekten, Box2d- oder diversen Grafik-Objekte & Spritesheets wird hier sehr schön beschrieben.

Ich habe drei verschiedene Objekte benutzt, um eine Ausgangsspektrum einer MP3 zu visualisieren.

256 von den sogenannten Quad-Objekten im Starling-Framework wurden hierbei als Stammequalizer im Hintergrund animiert.

Über die Physik-Engine Box2D werden ebenfalls 256 Boxen erzeugt, welche in einem Gravitationsfeld liegen und ja nach durchschnittlichem Amplitudenauschlag der MP3 vom Boden-Objekt nach Oben katapultiert werden.

Um das Implementieren von Partikeleffekten zu testen wurde noch eine Partikel-Animation im Partikeleditor erstellt. Sie erhöht die Anzahl an Partikeln je nach Amplitudenauschlag der MP3.

Für alle, die noch keinen Flashplayer 11 installiert haben, gibt es hier ein kleines Beispielvideo als Preview.

Sourcecodes

Beispielapplikation

Für ein aktuelles Projekt habe ich mich mal wieder ein bisschen mit der Flint-Particle-Engine beschäftigt.

Ziel war es hierbei ein Bitmap in einzelne Partikel zu zerlegen und diese anschließend zu Animieren.

Über das Particle2DUtil-Objekt der Engine konnte ich ein beliebiges Bitmap in einzelne Partikel einer gewissen Größe zerteilen.

Ich habe im aktuellen Beispiel eine Größe von 25x25px gewählt. Diese kann je nach Performance und Animations-Komplexität angepasst werden.

Das Animieren der Partikel habe ich über die sogenannten GravityWell-Objekte gelöst, also Anziehungspunkte der Engine. Hier ein Beispiel für ein GravityWell mit negativer Anziehung. Dies stößt die Partikel also von sich ab.

Der “epsilon” Wert, steht default-mäßig auf 100 und gibt die Anziehungsgeschwindigkeit zum Objekt in Abhängigkeit der Entfernung an.

Je kleiner dieser Wert ist, desto schneller bewegen sich die Objekte zum Anziehungspunkt.

Ich habe nach einem Zeitlichem-Intervall noch je zwei Gravity-Well-Objekte implementiert, die die Partikel auseinanderziehen und eine leichte Verwirbelung dieser erzeugen.

Wichtig bei mehreren Anziehungspunkten ist es, diese, ähnlich wie beim Arbeiten mit der Displaylist immer nach der Verwendung zu entfernen.

Die einzelnen Partikel können während der Animation auch noch individuell angepasst werden. Flint bietet hierbei vielerlei Möglichkeiten (Skalieren, Rotieren, Matrix-Transformation, Color-Transformatione…etc.).

Ich habe die Partikel lediglich am Ende der Animationen gegen 0 skaliert.

Beispiel-Applikation

Download Main.as

Ich habe mir endlich mal wieder ein neues Smartphone zugelegt, das HTC Desire HD.

Da Lee Brimlow auf gotoandlearn ein schönes Tutorial veröffentlichte, wie man relativ einfach Air-Apps über die Flash-CS5-IDE kompilieren kann, machte ich mich mal auf die Suche, wie man das Ganze direkt per ANT auch in FDT4 umsetzen und auf die jeweiligen Devices installieren kann.

Hierfür habe ich mir, in Anlehnung an ein älteres Kundenprojekt, eine kleine Physik-Applikation gebastelt, in der man einen Fußball per Druck auf das Toutchpad hochhalten kann.

Androidkick on HTC Desire HD

Hier nun die einzelnen Steps, die man beim Einrichten von Eclipse bzw. FDT4 beachten sollte:

SDK – Installation

Als erstes sollten die benötigten SDKs heruntergeladen werden, die Ihr für die Entwicklung benötigt:

Flex 4.1 SDK

Air 2.5 SDK

Android SDK

Google Android Development Tool (ADT)

Als nächstes installieren wir über das Softwarepanel  ( Help > Install New Software… ) in Eclipse ADT. ADT ermöglicht es uns später Emulatoren für diverse Android-Systeme und Phones zu simulieren.

Diese können über die URL: “https://dl-ssl.google.com/android/eclipse/” installiert bzw. geupdatet werden.

Nach erfolgreicher Installation sollte der Android-Bot in unsere Arbeitsleiste erscheinen. Die ADT Ansicht kann also über den Bot oder die bekannte Ansichtsauswahl gestartet werden ( Window > Open Perspective > Other… ).

Nach dem Start des ADT sollten wir zuerst den Pfad der vorerst heruntergeladenen Android SDK angeben. Ist der SDK-Pfad richtig angegeben worden, können wir unter „Available Packages“ die benötigten Pakete und APIs anzeigen lassen und herunterladen.

Wichtig ist hierbei die SDK Plattform, sowie die Google API.

Erstellen eines Emulators

Nachdem alle wichtigen SDKs installiert sind können wir einen Emulator erstellen, auf dem wir später unsere AIR-Apps testen können.

Ein Emulator kann über “Virtual Devices – New” erstellt werden.

Hierbei sollte man darauf achten, die verwendete API des Phones anzugeben, sowie die Auflösung dessen Bildschirmes.

Nun können wir den Emulator starten. Dies kann einige Minuten dauern auch bei schnellen Rechnern. Also ist Geduld angesagt.

Danach solltet Ihr in etwa folgenden Screen sehen.

Konfigurieren von Ant und FDT

So, nun können wir uns an die eigentliche Entwicklung unsere App in FDT machen.

Mit Hilfe von Ant ist es uns möglich, Kommando Zeilen-Aufrufe auszuführen, um z.B. Compilerskripte aufzurufen, oder Dateien zu kopieren.

In Marvin Blase‘s blog post über Air 2 / FDT 4 walkthrough gibt es hierbei eine solches Ant-Skript, um Air-Applikationen zu kompilieren, an dem ich mich orientierte.

Neben dieser eigentlichen build.xml erstellen wir für das Kompilieren von Android-Apps jedoch noch eine weitere Applikation.xml, in der wir sämtliche Informationen über unsere App schreiben (MenuIcons, Name, Größe, Passwort etc.).

Die beiden XMLs findet Ihr im root-Verzeichniss meines Projektes:

build.xml

AndroidKick-app.xml (muss immer den Namen der Applikation beinhalten – Name-app.xml)

In der ANT-Ansicht sehen wir nun unser Build-Skript mit den jeweiligen Unterpunkten ( Windows > Show View > Ant ).

Nun können wir den Punkt „Util-1“ ausführen, um die AIR-SDK auf unserem Emulator zu installieren. Dies kann einen Moment dauern, ja nach Device. Wenn alles komplett installiert wurde, wird in der Konsole “[exec] Success” zurückgegeben.

Wenn bis hier hin alles funktioniert hat, ist unser Emulator nun bereit auch eine Air Applikation zu installieren.

Installation der AIR Applikation

Die Installation unsere App können wir nun ebenfalls über das Ant-Skript automatisieren. Über den Punkt „5.Install Applikation on Emulator“ werden die vorher generierten apk-Files im Emulator installiert.

Anschließend solltet ihr unter euren Apps die „AndroidKick“-App finden.

Ich habe im Sourcecode auch noch einen Listener integriert, damit die App auch über den Menu- oder Back-Button geschlossen werden kann. Ansonsten läuft die Applikation dauerhaft im Hintergrund, was den Speicher somit belastet.

Installation der AIR Applikation auf unserem Device

Um das Ganze nun auf unserem Phone Testen zu können, muss zuerst die Treibersoftware des HTC installiert werden. Diese findet sich auf dem SD-Speicher des Handys.

Einfach mal nach „HTCSync“ suchen. Das Programm dient eigentlich der Synchronisierung zwischen dem Phone und dem PC, installiert aber auch die benötigten Treiber, um eine Verbindung zwischen dem ADT-Panel und unserem Phone aufzubauen.

Alternativ bekommt man diese auch über die HTC-Homepage.

Wichtig ist, darauf zu achten, dass unser Smartphone im Debug-Mode läuft, um die apk-Files installieren zu können.

Ihr könnt das HTC über “Einstellung/Anwendungen/Entwicklung” auf USB-Debugging = true stellen.

Nachdem das HTC erkannt wurde können wir die Punkte „Util – 2 Install Air On Device“ & ” Android 7 – Install Application on Device“ ausführen. Nun sollt die App auch auf unserem Handy sichbar sein und steht zum Testen bereit.

AndroidKickGame

Das Spiel basiert auf einer einfachen Gravitationsberechnung. Es kann per Touch-Druck der Fussball in die Höhe geschossen werden. Solange dies gelingt, ohne dass der Ball den Boden berührt werden die Anzahl der Kicks mitgezählt. Das Abspeichern des Highscores konnte hierbei über die schon aus AS3 bekannten “SharedObjects”,  also die Cookies am Phone abgespeichert werden.

Ich habe auch eine einfache Gesture-Erkennung implementiert, die das Zoomen des Balls ermöglicht.

Download Sourcecodes

Am Wochenende hatte ich mal wieder ein bisschen Zeit mal ein neues Experiment mit meinem Arduino-Board umzusetzen.

Da auf meinem Schreibtisch immer ein kleines Miniatur-RC-Car stand, kam mir die Idee, dieses doch mal mit einer Flash-App über den Computer zu steuern.

Wie schon in meinem Blogpost vom 02.12.2010 beschrieben nutze ich hierzu wieder einen Serverproxy als Kommunikationsbrücke zwischen meiner Flashapplikation und dem Arduino-Board.

Die Verbindungen zwischen dem Board und dem Sender des RC-Cars liefen über die digitalen Pins des Arduino (Pin 2-5).

Jeder Pin steht hierbei für eine anzusteuernde Aktion des Senders.  Also wurde z.B. für Pin 1 die Aktion “Turn Left” definiert.

Da es sich bei dem Sender des Miniatur-RC-Cars auch nur um eine digitale Steuerung handelt, reichten also vier digitale Ports aus, um die Steuerbefehle an den Sender zu übergeben (“left”, “right”, “backwards”, “forward”).

Wie bei einer Trasistorschaltung mussten also nur die einzelnen “Schalter” im Sender hierzu überbrückt werden.

Arduino RC-Sender

Arduino Flash RC-Car

Leider ist das digital gesteuerte Mini-RC-Car nicht wirklich gut steuerbar und die zeitweise aufmontieret Webcam beanspruchte den schwachen Motor doch sehr.

Von daher werde ich das Projekt noch einmal für eine analoge Steuerung mit einem größeren RC-Car erweitern und dieses dann mit einer Wireless-Webcam ausstatten.

Das Projekt soll also nur ein kleiner Vorgeschmack sein. Über die Weihnachtsfeiertage wird es wohl dann noch mal ein ausführlicheres Projekt geben, mit stärkerem RC-Car und Sender, um vom Rechner aus auch das Auto im Innenhof steuern zu können;)

Eine ausführlichere Doku sowie alle Sourcecodes werden dann auch noch folgen.

TO BE CONTINUED…..

So, dank einem verregneten Sonntag in Aachen, habe ich jetzt endlich mal ein paar Stündchen Zeit gefunden, mich mit meinen Arduino-Microcontroller noch mal intensiver auseinanderzusetzen.
Hier war anfangs die Frage, was für eine Art Projekt man umsetzen könnte.
Da ich ja noch von diversen Webcamprojekten einige Motion-Tracking-Klassen rummfliegen hatte, kam mir die Idee, eine bewegungsgesteuerte Webcam zu programmieren, die je nach erkannter Bewegung im Raum sich in Richtung des bewegten Objekts dreht.

Arduino Interactive Webcam

1. Als erstes muss natrülich eine Schnistelle zwischen Laptop und einem Motor oder Servo hergestellt werden, der später dann die Webcam steuern soll. Wie schon in meinem Blogpost vom 11.08.10 beschrieben eigenet sich hierzu ein Arduino-Microcontroller-Board. Die Anschlüsse des Servos habe ich hierbei über wie folgt angeschlossen:

Arduino Servo

2. Den Mircocontroller können wir jetzt über die mitgelieferte SDK beschreiben. Die Syntax basiert hierbei auf C und ist relativ leicht zu verstehen. Über die Klasse „servo.h“ kann ein Servoobjekt instanziiert und somit im Code angesprochen werden. Ein Servo könnte also mit dem Befehl:

in eine in den Klammern übergebene Gradzahl gedreht werden (Beim Model RS-2 liegt dieser Bereich ziwschen 0 – 180°).

Servo RS-2

3. Das Webcam-Tracking soll jedoch über eine Flex- oder Flashapplikation ausgewertet werden und je nach Ergebnis verschiedene Befehle an den Servo bzw. MC senden. Hierzu kann man einen Proxyserver verwenden, der als Controller zwischen Applikation und MC dient.

4. Für die Kommunikation zwischen Flex/Flash und dem Proxy habe ich mir eine kleine Klasse geschrieben (ArduinoConnection.as). Diese muss nur instanziiert werden. Über die Methode

kann dann ein Zeichen übergeben werden, welches über den Proxy an den MC gesendet und hier weiter interpretiert werden kann.

5. Jetzt muss eine demenstsprechende Klasse geschrieben werden, die es dem Microcontroller ermöglicht, auch eingehende Signale vom Proxy zu empfangen und bei gesendetem Buchstaben „l“ oder „r“ den Servo nach Links bzw. Rechst dreht.

6. Sobald der geschriebene Code über die Uploadfunktion der Ardiuno-SDK auf unser MC-Board hochgeladen wurde, kann man über das Flash-Interface den Servo gradweise nach Links bzw. Rechts bewegen.

Arduino Upload

7. Da jedoch bei jeder Bewegung des Servos, die darauf installierte Kamera ebenfalls in Bewegung gesetzt wird, werden die neuen Bildinformationen als eine bewegte Fläche interpretiert. Dies würde die Ergebnisse verfälschen. Die Lösung lag hier in einem timergesteuertem MotionTracker. Bewegt sich die Kamera, wird das Tracking für einen Zeitintervall X gestoppt. Dieser kann variabel gehalten werden und hängt natürlich auch von der Verzögerung der Kamera ab. Wenn der Intervall also richtig angepasst ist, werden erst vom MotionTracker die Bewegungspunkte im Raum erkannt, dann der Servo in Richtung der Bewegungspunkte gedreht und anschließend erst wieder die Trackingpunkte im jeweiligen Frame untersucht.

8. Wichtig beim Tracking ist, dass man den Mittelwert aller Trackingpunkte berechnet und so den eigentlichen Bewegungsmittelpunkt im getrackten Bild findet. Ist dieser dann > Screen/2 wird die Kamera nach Rechts bewegt, ansonsten nach Links.

9. Um das Zusammenspiel zwischen getracktem Mittelpunkt und der Steuerung des Servos zu verbessern, habe ich außerdem den Abstand des getrackten Puktes zum Mittelpunkt in Relation zur Drehgeschwindigkeit des Servos gesetzt. Bedeutet also, dass sich die Kamera schneller zum erkannten Objekt dreht, bzw. einen größeren Winkel überbrückt, je weiter die Bewegungen im Raum vom Mittelpunkt der Kamera entfernt sind.

Download AS3 Sourcecodes

Downlad Arduino Classes

Download Proxy

Arduino

Zusammen mit meinen Kollegen der bplusd-interactive in Köln durfte ich nun auch die erste Microsite für SonyEricsson livestellen.

Sony Ericsson in Ischgl:
Die Seite wurde auf Basis von Robotlegs aufgesetzt, ein sehr ähnlich zu handhabendes Framework wie PureMVC.
Dies ermöglicht sehr modulares Programmieren und gewährleistet das Wiederverwenden der einzelnen Komponenten.

Die Seite wurde für 5 Länder optimiert.
Neben einer Wetterschnittstelle, die immer die aktuelle Wetterlage aus Ischgl übergibt, wurde ein QR-Code-Generator für die Mobile-Links implementiert.
Einige Teile, wie z.B der Xperia-Reporter-Blog, oder die Fotogalerie wurden hierbei in HTML erstellt und als IFRame oder extrener Link eingebunden.
Die Xperia Smartphones wurden in einer 360°-Ansicht eingebunden.
Über SWF-Adressing konnte hierdurch ein Deeplinking implementiert werden, das es erleichterte, die verschiedenen Seiten miteinander zu verknüpfen, und es ermöglicht die Seite auch über die Browsernavigation zu steuern.
So konnte für jedes Smartphone auf die jeweilige Unterseite der einzelnen Apps direkt verlinkt werden.

Um was es genau bei der Kampagne geht und was Sony Ercisson und Ischgl verbindet findet ihr hier:

Zur Kampagne
Mein Arbeitsplatz



Für ein Flash AS3-Projekt brauchte ich ein animiertes Kabel, welches man per Drag und Drop über den Bildschirm ziehen kann.
Es gab zwar schon einige Ansätze im Netz, doch ich wollte mal einen anderen Weg gehen und das Kabel über die uns schon bekannte APE-Klasse animieren.
Angefangen habe ich mit einem Beispiel von sogenannten Spring-Constraints, mit denen sich einzelene Objekte/Partikel miteinander verbinen lassen.
Somit entstandt eine Kette, die mit Hilfe der APE-Physik-Engine auf Gravitation reagiert.
Ich habe die Anzahl der Kettenelemente über Schleifen variabel gehalten, somit kann man im Quellcode angeben, wieviele Elemente man animieren möchte.

Das Kabel selbst lasse ich mir dann über die graphics.curveTo()-Methode zeichnen. Über Bezierkurven würde das Ergebniss noch verbessert, was jedoch zu Lasten der Performance liefe.

Der Klinkenstecker reagiert auf seine Zielbuchse und dreht sich dementsprechend in deren Richtung. So ensteht ein gewisses Gefühl der Eigendynamik des Kabels.

DynamicCable-Applikation

Sourcecodes
Klassen:  APE,  TweenMax

Ich habe Heute mal ein bisschen mit  JigLib herumexperementiert eine 3D-Physic-Engine für Flash AS3.
Die Klasse selbst beinhaltet schon einige Beispiele, die die verschiednen Modelle veranschaulichen sollen.
So gibt es schon vorgefertige Basismodelle, die mit ein wenig Know How in der demenstsprechenden 3D-Library umgeskinned werden können (Ragdolls, Car-Models, Spring-Constrains).
Des weiteren können über sogenannte Bumb-Maps einfache Planes in Landschaften verwandelt werden. Alles was man hierfür benötigt, ist ein Graustufenbild, welches die Höhen und Tiefen in den verschiednen Helligkeitswerten auf die 3D-Plane umrechnet.
Die Car-Simulation in den Beispielen der Klassen veranschaulicht dies sehr schön.

Ich habe in meinem Beispiel einfach ein paar Flächen instanziert, welche ich über einen Phongshader rendern lasse.
Texturiert wurde das ganze über externe JPGs, die als BitmapTexture reingeladen werden.

Da das Projekt für den Flashplayer 9 optimiert wurde, habe ich als 3D-Engine Papervision benutzt.
Per Drag&Drop können die Polaroids vom Tisch geworfen werden um danach neu instatziert zu werden.
Der “Wind”-Button verändert noch einmal das Gravitationsfeld.

JiglibCards – Application

SourceCodes