Reutlingen University

Hochschule ReutlingenReutlingen University

– Studiengang Mechatronik Master –

Laborprojekt Ausarbeitung

Implementierung eines Webservers auf einemESP-8266 NodeMCU zur Steuerung eines

Lego-Autos

Martin ParidonSteinachstraße 2872770 Reutlingen

Matrikelnummer : 751497

Betreuer: Prof. Stefan MackAbgabedatum: 31.07.2016

”Der Fortschritt geschieht heute so schnell, dass, während jemand eine Sache fürgänzlich undurchführbar erklärt, er von einem anderen unterbrochen wird, der sie schonrealisiert hat.“Albert Einstein

Abstract

Eingebettete Systeme gewinnen in Zeiten des ’Internets der Dinge’ immer mehr an Bedeu-tung. Vernetzung derselben, sowie einfach Benutzer-Interaktion stellen große Ansprüchean die Designer dieser Systeme.Dass dies nicht nur Schlagworte sind, sondern was dahinter steckt, soll dieses Labor-

projekt zeigen. Es wird ein unabhängiges mechatronisches System aufgebaut in dem eineingebetteter Webserver die zentrale Rolle spielt.Die Frage lautet: Lässt sich ein System wie ein Lego-Auto inklusive Servoantrieb

autonom und intuitiv durch den Nutzer per Smartphone ansteuern? Dies soll mit einemauf einem IC realisierten Webserver realisiert werden. Im Vordergrund stehen dabei:Auswahl der für diesen Fall passenden Hardware, Programmierung des Servers und desMikrocontrollers, HTTP-Kommunikation. Hauptanliegen ist, die schon vorhandene Mo-torsteuerung von einer Bluetooth-basierten Android-App auf ein plattformunabhängigesFormat zu bringen. Es soll dann keine Rolle mehr spielen, ob der Nutzer ein Smartpho-ne, Tablet, oder einen Computer benutzt, da die Nutzerinteraktion mit dem Browserstattfindet, der nur die Darstellung des Inhaltes übernehmen soll.

Inhaltsverzeichnis

Abbildungsverzeichnis III

Tabellenverzeichnis IV

1. Warum Webserver auf eingebettetem System? 1

2. Möglichkeiten eines Webservers mittels Arduino 22.1. Vergleich verschiedener Embedded Webserver . . . . . . . . . . . . . . . 22.2. Vergleich verschiedener ESP8266-breakout-Boards . . . . . . . . . . . . . 3

3. Struktur des Systems 53.1. Beschreibung der Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.1.1. Gesamtsystem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.1.2. Versorgung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73.1.3. Kommunikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3.2. Arduino IDE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

4. Webserver einrichten 94.1. Flussdiagramm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94.2. Beschreibung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

4.2.1. Arduino IDE herunterladen und einrichten . . . . . . . . . . . . . 10

5. Der Legoino 15

6. System Inbetriebnehmen 176.1. DIP-Schalter betätigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176.2. Akku anschalten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176.3. In das Netz “Legoino“ einwählen . . . . . . . . . . . . . . . . . . . . . . 186.4. Webseite aufrufen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186.5. Legoino steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

6.5.1. Fehlerbehandlung . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

7. Ausblick 227.1. Legoino allgemein . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

7.1.1. Erhöhung der Kompatibilität . . . . . . . . . . . . . . . . . . . . 22

I

7.1.2. Latenzzeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227.1.3. Grafische Aufbereitung . . . . . . . . . . . . . . . . . . . . . . . . 237.1.4. Einbindung von weiteren Elementen . . . . . . . . . . . . . . . . . 23

7.2. NodeMCU/ESP8266 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

A. Anhang 25A.1. Arduino-Code (ArduinoCodeFinal.ino) . . . . . . . . . . . . . . . . . . . 25A.2. Website-Code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

A.2.1. Header (header.txt) . . . . . . . . . . . . . . . . . . . . . . . . . . 37A.2.2. Webseite mit Sensorsteuerung (accel.txt) . . . . . . . . . . . . . . 37A.2.3. Webseite mit Maus-/Touchevent (mouse.txt) . . . . . . . . . . . . 42

A.3. Kompatible Smartphones . . . . . . . . . . . . . . . . . . . . . . . . . . . 47A.4. Vergleich verschiedener ESP8266 Boards . . . . . . . . . . . . . . . . . . 48A.5. Linkliste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48

II

Abbildungsverzeichnis

2.1. NodeMCU . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

3.1. Blockdiagramm des Systems . . . . . . . . . . . . . . . . . . . . . . . . . 6

4.1. Flussdiagramm des Systems . . . . . . . . . . . . . . . . . . . . . . . . . 94.2. IDE Einstellungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124.3. Flash Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134.4. Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

5.1. Legoino . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155.2. Legoino oben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155.3. Legoino vorne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165.4. Legoino hinten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

6.1. DIP-Schalter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176.2. Steuerfeld . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 196.3. Smartphone . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

III

Tabellenverzeichnis

2.1. Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

4.1. Flash Layout 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

A.1. Smartphones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47A.2. Vergleich verschiedener Breakout-Boards . . . . . . . . . . . . . . . . . . 48

IV

1. Warum Webserver auf eingebettetemSystem?

Eingebettete Systeme werden in der Industrie häufig in schwer zugänglichen Berei-chen eingesetzt. In diesen Fällen kann die Möglichkeit einer Fernwartung entscheidendeKostenvorteile bringen. [3]Das Internet als Infrastruktur-Netzwerk zu benutzen bietet sich an, weil es sehr weit

verbreitet ist und mit TCP/IP über ein erprobtes und robustes Kommunikationsprotokollverfügt. Anwendungen dieser Art benutzt fast jeder Mensch auf der Welt täglich unddie Hardware ist leicht zu beschaffen. Einige Ansprüche an eingebettete Server sind diefolgenden: [5]

• Sparsamer Umgang mit eingeschränktem Speicherplatz und geringer Rechenleistungdes eingebetteten Systems

• Kleiner memory footprint

• Plattformunabhängigkeit

• Modularität

Einfach gesprochen, was ein eingebetteter Server macht ist: [2]

• HTML-Seite an Client senden

• Zustand des mechatronischen Systems darstellen, in welchem er verbaut ist

• Dieses System steuern

Martin Paridon 1 Laborprojekt Ausarbeitung

2. Möglichkeiten eines Webservers mittelsArduino

2.1. Vergleich verschiedener Embedded Webserver

Tabelle 2.1.: Übersicht [1]

Lösungen wie der Raspberry Pi bieten die Möglichkeit, einen Server unter Linuxzu programmieren. Damit ist beispielsweise die Programmierung von Datei-/Drucker-/Cloudservern möglich, der Einplatinencomputer ist aber eher weniger für den Einsatz ineinem eingebetteten System wie in diesem Projekt geeignet.

Die Anwendung in diesem Projekt erfordert einen minimalistischen Server. Das betrifftBaugröße und -Gewicht, Stromaufnahme und nicht zuletzt Aufwand der Programmierungund Inbetriebnahme. Hauptsächlich sollen Sensordaten vom Smartphone zum Server undvom Server zum Smartphone gesendet werden. Echtzeit wird nicht gefordert, es genügteinfache digitale Input-Output-Logik. Um diese Steuerung zu realisieren reicht dahereine Lösung ohne Betriebssystem aus.

Um eine sprichwörtliche Brücke zwischen einfacher Programmierung und umfachreicherFunktionalität zu schlagen wurde der Arduino Yún entwickelt. Mithilfe der "Bridge-Bibliothek kann dieser auch bequem mit der Arduino IDE programmiert werden, derprogrammierte Webserver läuft aber wie beim Raspberry auf Linux. [4]


2.2. Vergleich verschiedener ESP8266-breakout-BoardsDer einfache Zugriff auf die GPIOs und die Tatsache, dass die bisherigen Projekte derLegoino-Reihe bereits für Arduino geschrieben wurden, legen die Wahl eines Arduino-kompatiblen Boards nahe. Der Yún scheidet aus oben genannten Gründen aus.Aufgrund der Fülle an mittlerweile verschiedenen erhältlichen Breakout-Boards des

ESP8266, findet sich im Anhang eine Auflistung einiger der im Internet erhältlichenESP8266-Breakout-Boards. Für einen umfangreichen Überblick, siehe [6].Für dieses Projekt ist die Wahl allerdings auf den ESP8266 (genauer: NodeMCU,

Abbildung 2.1) gefallen. Die Hauptvorteile:

• Größe des Flash-Speichers (4MB)

• 11 nutzbare digitale GPIOs und ein analoger Eingang

• Relativ klein und leicht

• Volle WLAN-Funktionalität

• Stabile Verbindung und hohe Reichweite

• Viele Projekte im Internet zu finden

Dazu kommt, dass der ESP8266-Chip zum Programmieren erst in den Flash Modusgebracht werden muss. Dafür muss zum Programmieren beim Anlegen der Versorgungs-spannung ein bestimmter Pin low sein. Bei den meisten anderen Breakoutboards mussdies manuell durch eine kleine Schaltung realisiert werden, beim NodeMCU ist dies durchBauteile auf der Platine realisiert. Über die USB-Schnittstelle kann das Board direktprogrammiert werden.


Abbildung 2.1.: Der NodeMCU


3. Struktur des Systems

Hinweis: In dieser Ausarbeitung wird vom speziellen Fall eines Smartphones als Gerät desEndnutzers ausgegangen. Nutzbar sind natürlich alle Geräte, die WLAN-Funktionalitätund einen Browser besitzen. Der Fokus liegt hier bei Geräten mit internen Beschleuni-gungssensoren wie Tablets und Smartphones, es existiert aber auch eine Version, dieauf Geräten ohne Beschleunigungssensoren lauffähig ist. Wie die beiden Versionen zubehandeln sind, wird weiter unten näher erläutert.


Abbildung 3.1.: Blockdiagramm

Martin

Paridon6

LaborprojektA

usarbeitung

3.1. Beschreibung der Struktur

3.1.1. Gesamtsystem

In Bild 3.1 ist die Struktur des realisierten Systems als Blockdiagramm dargestellt. DieWellenlinien zwischen Smartphone und NodeMCU stehen für die WLAN-Verbindung. DasSmartphone (vielmehr der Browser des Nutzers) sendet aufbereitete Werte des internenBeschleunigungssensors an den NodeMCU. Dieser macht daraus PWM-Signale zur An-steuerung der umgebauten Servos. Parallel werden zyklisch Werte des Ultraschallsensorsin den NodeMCU eingelesen und aufbereitet, sowie zum Smartphone gesendet.

3.1.2. Versorgung

Die Servos, sowie der Ultraschallsensor, die LED-Matrix und der NodeMCU selber,werden von einer Powerbank versorgt. Diese besitzt einen Ausgang mit 1A, 5V. Es hatsich gezeigt, dass dies ausreicht um alle genannten Komponenten zu versorgen. Gegenüberherkömmlichen Akkus hat eine Powerbank den Vorteil, dass die interne LadeelektronikKuzschlüsse verhindert und für konstante Ausgangsspannung über die gesamte Entladezeitsorgt. Außerdem wird der Akku vor Tiefenentladung geschützt.Die Versorgung von Node und den Servos hat gut funktioniert, zu keiner Zeit ist ein

unerwarteter Reset aufgetreten. Der externe Akku ist einfach über ein handelsüblichesHandy-Ladegerät aufladbar (Micro USB) und hat mit 2000mAh eine ausreichend hoheKapazität für diese Anwendung.

3.1.3. Kommunikation

Die Kommunikation zwischen Smartphone und dem NodeMCU ist unten im Bild nochmalsgetrennt schematisch dargestellt: Der Browser im Smartphone wählt sich als Client indas Netz des Servers (Acces Point Mode, mehr dazu und ein Beispiel hier) auf dem µCan. Mit einem GET-Request (HTTP-Protokoll, mehr Infos hier) werden dem Serverzyklisch Anfragen gesendet. Es gibt zwei mögliche Fälle: Im Falle einer leeren Anfrage(die Adresse wird in den Browser eingegeben und “Enter“ wird gedrückt), liefert derServer die Webseite aus. Im HTML-Code dieser Webseite ist mittels Javascript definiert,dass der Browser zyklisch (alle 400ms) einen GET-Request an den Server sendet (zweiterFall). Inhalt dieses GET-Requests sind die Daten, die der Browser aus dem Sensor desSmartphones ausliest. Diese werden damit an den Server und somit an den Mikrocontroller


https://learn.sparkfun.com/tutorials/esp8266-thing-hookup-guide/example-sketch-ap-web-server

http://www.elektronik-kompendium.de/sites/net/0902231.htm

übergeben, der die Servos entsprechend ansteuert. Der Server reagiert außerdem miteiner Antwort, in der der Wert des Ultraschallsensors an den Client gesendet wird.Um es deutlich zu machen: Es wird zu Anfang der gesamte JavaScript-Code, der die

Kommunikation zwischen Client und Server ermöglicht, beim Aufrufen der Webseite vomNodeMCU an den Client gesendet. Die Ausführung des JavaScript-Codes findet also aufdem Client statt. Die oben beschriebenen GET-Requests zwischen Server und Client sindalle im JavaScript-Code definiert.

3.2. Arduino IDEDer NodeMCU ist über die Skriptsprache lua programmierbar. In diesem Projekt wurdeallerdings zur Programmierung die Arduino IDE gewählt, die mithilfe einer speziellenBibliothek direkt in die IDE integriert werden kann und eine ähnliche Funktionalitätbesitzt. Dieser Weg wurde gewählt, da die Vorgängerprojekte ebenfalls für den Arduinoprogrammiert wurden. Somit sollte eine möglichst umfassende Portierbarkeit und Er-weiterbarkeit geschaffen werden. Zudem ist der leichte Einstieg in die Arduino-Umgebungideal für Schülerprojekte.


4. Webserver einrichten

4.1. Flussdiagramm

Abbildung 4.1.: Flussdiagramm


4.2. BeschreibungHier wird beschrieben, wie der Nutzer Hard- und Software startbereit macht. Anders alsandere Breakout-Boards auf Basis des ESP8266-Moduls, ist die Anbindung des Boardsan den Computer denkbar einfach. Bei vielen anderen Boards ist noch ein USB-to-Serial-Converter und im Betrieb noch ein Levelshifter notwendig. Hintergrund: USB liefert5V, der ESP8266 verträgt aber nur 3,3V (siehe hier). Der NodeMCU hat allerdingsbeides schon an Board. Er kommt mit einer Micro-USB-Buchse und kann so mit einemhandelsüblichen Smartphone-Ladekabel mit der USB-Buchse des Computers verbundenwerden.

Die Software-Inbetriebnahme gestaltet sich im Gegensatz dazu eher mühselig.

4.2.1. Arduino IDE herunterladen und einrichten

Die Arduino IDE kann hier heruntergeladen werden. Ich empfehle ausdrücklich mitVersion 1.6.5 zu arbeiten.

Als nächstes muss der ’Arduino core for ESP8266 WiFi chip’ eingestellt werden. Dazusollte man die Bearbeitungsschritte auf dieser Seite, unter dem Abschnitt ’Installingwith Boards Manager’ durchgehen. Im Grunde muss man nur navigieren zu Datei->Voreinstellungen und dort bei ’Additional Boards Manager URLs: ’ diese URL einge-ben: http://arduino.esp8266.com/stable/package_esp8266com_index.json. Dannunter Werkzeuge->Platine(...)->Boards Manager in der Suche ’esp8266’ eingeben undVersion 2.0.0 installieren

Nochmals der Hinweis: Die Software wurde mit Arduino IDE Version 1.6.5 undESP8266 Board Version 2.0.0 getestet. Der Upload der Skripte lief damit so gut wieimmer problemlos. Mit anderen Versionen mag es funktionieren, eine andere Konstellationhat bei mir allerdings zu unerklärlichen Stack-Fehlern geführt.

Welches Board und welche Einstellungen in der IDE zu wählen sind, ist ein Abbildung4.2 angegeben.

Wichtig ist noch, dass man die benötigten Arduino-Bibliotheken herunterläd. Das sinddie folgenden:

• SPIFFS Filesystem (s.o.)

– Ermöglicht das Abspeichern von Dateien im internen Dateisystem

• WiFi (s.o.)


http://dalpix.com/blog/connecting-your-arduino-wifi-esp-8266-module

https://www.arduino.cc/en/Main/Software

https://github.com/esp8266/Arduino

http://arduino.esp8266.com/stable/package_esp8266com_index.json

– Benötigt um die WLAN-Funktionen nutzen zu können

• Wire

– Benötigt für die I2C-Kommunikation. In diesem Projekt für das LED-Arraygebraucht

• Adafruit_LEDBackpack

– Für das LED-Array

• Adafruit_GFX

– Für das LED-Array

• Servo

– Sehr einfache Ansteuerung der Servos, sonst über PWM

• pins_arduino

– Mapping der Pins NodeMCUs (Bezeichnet als D0, D1, ...) auf die GPIOs desESP8266. Die Nummerierung der Pins D0, D1 ... des NodeMCU entsprichtnämlich nicht GPIO0, GPIO1, ... des ESP8266

• Bitmaps

– Eigens erstellte Bitmaps zur Ausgabe auf dem LED-Array

Bis auf “Bitmaps“ können alle Bibliotheken im Internet gefunden und heruntergeladenwerden. Sie stehen aber auch im Rahmen dieses Projektes als Kopie zur Verfügung. DieDatei “Bitmaps.h“ wurde selber geschrieben und muss daher im Rahmen der Kopie imAnhang an dieses Projektes kopiert werden. Alle Ordner mit Bibliotheken müssen in denOrdner ...\Arduino\libraries gespeichert werden.

Zuletzt muss noch das SPIFFS Filesystem initialisiert werden. Dazu müssen die Schritteunter ’Uploading files to file system’ auf dieser Seite durchgeführt werden. Im Ordner’data’, welcher sich auf der gleichen Ebene befinden muss wie der Arduino code, könnennun Dateien von bis zu 3MB abgelegt werden. Dieses Filesystem wird nachher verwendetum die HTML-Dateien ’bequem’ abspeichern zu können.

Wenn die oben beschriebenen Installationen durchgeführt wurden, kann der Arduino-Code hochgeladen werden. Das ’startfertige’ IDE-Fenster sollte nun wie folgt aussehen:


https://github.com/esp8266/Arduino/blob/master/doc/filesystem.md

Abbildung 4.2.: IDE Einstellungen

Der Upload der Dateien aus dem ’data’-Ordner wird ausgeführt durch einen Klick auf’ESP8266 Sketch Data Upload’. In Bild 4.3 ist zu erkennen, wo die Dateien innerhalbdes Speichers des ESP abgelegt werden. Verschiedene ESP-breakouts haben verschiedengroße File System-Größen, Eine Aufstellung ist in Abbildung 4.4 zu sehen.Als Upload Speed kann getrost ein sehr hoher Wert genommen werden. Der hier

gezeigte Wert von 921600 Baud hat stets ohne Probleme funktioniert. Der Upload vonwenigen kB Daten in das Filesystem kann selbst bei dieser Geschwindigkeit bis zu Minutendauern, daher ist eine kleinere Baudrate nicht ratsam.


Abbildung 4.3.: Flash Layout

Erklärung: Von Haus aus besitzt der ESP8266 keinen Flash-Speicher, sondern nurinternen ROM. Wie in Abbildung 4.4 zu sehen, haben aber alle Breakout-Boards einenFlash-Chip eingebaut, der über die SPI-Schnittstelle mit dem Board kommuniziert.InAbbildung 4.1 ist ein genaues memory mapping dargestellt. Es sind die oben dargestelltenBereiche genauer aufgeschlüsselt. “Over The Air“ bedeutet das Programmieren überdie WLAN-Schnittstelle. “SDK library“ beschreibt die Firmware des Chips. Unter “userapplication slot 2“ sind hier 64kB angegeben. Dies entspricht der “File system chip size“eines “Generic module“ in Abbildung 4.4. Im NodeMCU stehen dementsprechend indiesem Bereich deutlich mehr Speicherplatz zur verfügung (1 bzw. 3 MB).

Tabelle 4.1.: Flash Layout genauer


Abbildung 4.4.: Flash


5. Der Legoino

Auf den Bildern ist das Lego-Auto mitsamt NodeMCU, Akku, Sensoren, LED-Array undServomotoren zu sehen.

Abbildung 5.1.: Legoino

Abbildung 5.2.: Legoino oben


Abbildung 5.3.: Legoino vorne

Abbildung 5.4.: Legoino hinten

Videos zur Inbetriebnahme des Systems sind auf hier auf youtube zu finden.


https://www.youtube.com/watch?v=9ac78nGS2kE&list=PLuMTFTzFFJFRod_8VWF2yGW8O_mN4ydqd

6. System Inbetriebnehmen

Der Ablauf um den programmierten Controller mit dem Legoino inbetriebzunehmen,Kabel verbinden wie ganz oben im Arduino Code (siehe Anhang) angegeben.

6.1. DIP-Schalter betätigenMit dem Betätigen des Schalters 1 werden die Servos auf Vin gelegt. Mit dem Betätigender Schalter 3 oder 4 (inklusives/logisches ODER) wird ausgewählt, welche Versionder Steuerung an den Browser geschickt werden soll. Steht einer der beiden oder beideSchalter auf ON, so wird die Steuerung mittels Auslesen des Drehratensensors ausgewählt.Ansonsten, also wenn BEIDE NICHT auf ON stehen, wird die Steuerung per Mouse-/Touch-Event ausgewählt. Die Auswahl wird beim Starten des Programms, in der Setup-Phase des Controller-Codes wirksam.

Abbildung 6.1.: DIP-Schalter

6.2. Akku anschaltenDie Power-Bank im Mittelteil des Autos kann an- und abgeschaltet werden. DurchBetätigung des großen Knopfes auf der Oberseite wird die Spannungsquelle angeschaltet.Das Licht leuchtet nun blau. Wenn alles richtig gemacht wurde, ist nach Betätigung des


Knopfes ein kurzes Zucken der Servos zu hören, gefolgt vom typischen Ruckeln. Außerdemfährt jetzt der Mikrocontroller hoch. Jetzt wird auch ein WLAN-Acces Point erstellt.Sobald die Initialisierung des Controllers fertig ist, wird “OKAY“ auf dem 8x8-LED-Arrayangezeigt. Jetzt kann mit dem nächsten Schritt fortgefahren werden.

6.3. In das Netz “Legoino“ einwählenIn der Liste der WLAN-Netze muss jetzt “Legoino“ auftauchen. Dies ist ein offenesNetzwerk auf das man sich folglich ohne Passwort einwählen kann.

6.4. Webseite aufrufenDie Webseite des Servers kann aufgerufen werden, indem der Nutzer die Adresse“192.168.4.1“ eingibt. Durch Betätigung der Eingabetaste wird die erste Anfrage desBrowsers (Client) an den Server gesendet, der hierauf mit Auslieferung der Webseitereagiert. Je nach dem, welche Stellung die DIP-Schalter 3/4 haben, wird nun dem Nutzerdie ausgewählte Version der Webseite angezeigt (siehe oben).

6.5. Legoino steuernIn Abbildung 6.2 ist das Steuerfeld dargestellt. Die Zahlen bedeuten folgendes:1: Kurve vorne links, aber nicht auf der Stelle2: Geraudeaus3: Kurve vorne rechts, aber nicht auf der Stelle4: Drehung links auf der Stelle5: Stopp6: Drehung rechts auf der Stelle7: Kurve hinten links, aber nicht auf der Stelle8. Rückwärts9: Kurve hinten rechts, aber nicht auf der Stelle

Es handelt sich also um verschiedene Zustände und keine kontinuierliche Steuerung.Diese könnte aufgrund der Auflösung des Sensors wohl erreicht werden, hat aber seineBeschränkung eher in den Grenzen der Servoregelung.


Abbildung 6.2.: Steuerfeld

Die Werte unterhalb des Feldes sind die Werte des “Balls“ innerhalb des Feldes, aufeinem gedachten x/y-Koordinatensystem. Unter diesen erscheint außerdem der Wert desUltraschallsensors als Entfernung des Sensor zu einem Objekt vor ihm in cm.In beiden ist die Steuerung des Motors dieselbe. Der Unterschied liegt nur darin, wie

der Ball bewegt wird. Nämlich, wie beschrieben, einmal mittels Bewegungen mit demSmartphone und einmal über Maus-/Touchevents.

1. Mittels Beschleunigungssensor

Die Steuerung ist so intuitiv wie möglich. Die in Abbildung 6.2 zu sehenen Felderwerden durch die richtige Verkippung des Smarphones/Tablets erreicht. Legt mandas Smartphone wie in Abbildung 6.3 flach auf eine Ebene, so befindet sich der “Ball“im Steuerfeld am obersten Rand. Der Legoino fährt vorwärts. Verkippt man dasSmartphone um 90° gegen den Uhrzeigersinn um die dargestellte x-Achse, so fährtder Legoino rückwärts. In der 45°-Stellung steht er entsprechend still. Bewegungennach rechts und links werden über Verkippungen um die y-Achse realisiert. Hierbeiwäre eine Verkippung um 90° vom dargestellten Zustand jeweils der maximaleAusschlag (Ball ganz rechts/links). Die Steuerung mittels Beschleunigungssensor


funktionierte bei einigen Geräten (vor allem Android in Verbindung mit GoogleChrome) zuverlässig. Allerdings gibt es aufgrund des experimentellen Charakters derJavaScript-API einige Ungereimtheiten bei der Kompatibilität mit anderen Gerätenund Browsern. Speziell das iPhone und der Browser Safari machen Probleme. Mehrdazu, siehe Tabelle im Anhang.

Abbildung 6.3.: Smartphone

2. Mittels Maus-/Touch-Event

Sollte eine Steuerung mit dem internen Sensor des benutzten Endgerätes nichtmöglich sein, existiert eine prinzipiell genau gleich aufgebaute Steuerung, dieallerdings mit Maus- bzw. Touch-Events arbeitet. Die grafische Oberfläche istdie gleiche, aber die Steuerung des Balles geschieht beim Computer über Klickenund Ziehen der Maus innerhalb des Feldes, beim Smartphone über Berühren undLoslassen des Feldes mit einem Finger. Der Rest ist genau gleich wie oben.

6.5.1. Fehlerbehandlung

• Netz Legoino konnte nicht gefunden werden, oder wird gefunden, man kann sichaber nicht verbinden, oder Webseite ist unerreichbar

– WLAN-Fehler. WLAN des Smartphones aus- und anschalten. Stromverbindungdes Boards prüfen. Strom wegnehmen und neu verbinden.

• Im Beschleunigungssensor-Modus wird Seite angezeigt, “Ball“ kann aber nichtbewegt werden


– Inkompatibles Smartphone/Browser. Anderen Browser verwenden (GoogleChrome wird empfohlen). Anderes Smartphone verwenden. Javascript inSmartphone einschalten! “Zur Not“ Version mit Touchevent verwenden.

• Ultraschallsensorwert ist 86 obwohl er höher sein müsste oder wird gar nichtangezeigt

– Das erstgenannte ist kein Fehler! 86cm ist die maximal mögliche Strecke. Wirdder Wert gar nicht angezeigt, kann das am Smartphone liegen (im Test hatz.B. iPhone 6 Probleme gemacht). Anderes Smartphone benutzen.

• Browserfenster dreht sich automatisch und Displaybeleuchtung erlischt nach einigenSekunden

– Automatisches Drehen ausschalten. Zeit für Displaybeleuchtung höher stellen.

• Servos ruckeln im Stillstand

– Das ist normal, kein Fehlerzustand. Das Ruckeln liegt daran, dass hier Mo-dellbauservos in volldrehende Antriebe umgebaut wurde.

• Powerbank schaltet sich ab, trotz mehrmaliger Betätigung des Knopfes leuchtetblaue Leuchte nicht mehr

– Eventuell kurzzeitiger Strompeak. Power Bank muss durch anstecken an eineSpannungsquelle reaktiviert werden. Wenn die Bank läd, leuchtet die LEDrot. Am besten ganz aufladen.


7. Ausblick

7.1. Legoino allgemein

7.1.1. Erhöhung der Kompatibilität

Die Geräteübergreifende Kompatibilität (Smartphone, Browser) könnte durch einbindender JQuery Library erhöht werden. Im momentanen Skript stellt das eine große Heraus-forderung dar, da die Library als reine Textdatei über 80kB groß ist. Interessant wäre esherauszufinden, wie man so große Dateien ohne größere Probleme in den Arduino-Codeeinbinden kann. Die Erwartung wäre, dass der JQuery-Code zumindest plattformunab-hängiger ist als der momentane herkömmliche JavaScript-Code.Die Vorteile von JQuery sind unter anderem:

• Einfachere und dadurch schnellere und übersichtlichere Programmierung

• Animationen und Effekte sind einfacher umsetzbar als mit herkömmlichem JavaS-cript

• AJAX wird unterstützt, für einfache asynchrone Datenübertragung zwischen Serverund Browser (zum Beispiel Daten neu laden ohne Seite neu laden zu müssen)

Dabei ist JQuery eine öffentliche Bibliothek, die bei der Erstellung eines HTML-Codes (theoretisch) einfach eingebunden werden kann. Der limitierende Faktor in diesemProjekt ist, dass der Server zur Laufzeit keine Verbindung mit dem Internet hat, dieLibrary müsste daher lokal gespeichert werden, was aus oben genannten Gründen keinenunerheblichen Aufwand darstellt.

7.1.2. Latenzzeit

Die Latenzzeit zwischen Steuersignal und Reaktion des Aktors in dem hier dargestelltenSystem ist gegeben durch:

• Warten auf Rückkehr des Pulses vom Ultraschallsensor

– Interrupt statt Polling des Ultraschallsignals. Erste Versuche damit warenunbefriedigend, daran kann noch gearbeitet werden.


• Zyklisches Senden von GET-Requests des Clients zum Server

– Fest eingestellte Zeit von 400ms ist empirisch gewachsen. Schnelleres Sendenhat zu Serverfehlern geführt. Intelligenter wäre ein asynchroner Betrieb, dererkennt, zu welchen Zeitpunkten gesendet werden kann ohne den Server zuüberlasten.

• Rampensteilheit der Servo-Ansteuerung

– Um Stromspitzen zu vermeiden, wird der Sollwert der Servos mit einer Rampeangefahren. Ob diese wirklich nötig sind, oder ob die Power Bank ggf. wenigerempfindlich ist, wäre noch zu testen.

Insbesondere wäre die momentane Latenzzeit zwischen Fahrbefehl und Aktorre-aktion zu messen und die einzelnen Maßnahmen bezüglich ihrer Wirksamkeit zubewerten.

7.1.3. Grafische Aufbereitung

Die vorliegende Arbeit hat zunächst demonstrativen Charakter. Kommunikations-protokolle und Mikrocontroller-Algorithmen wurden getestet und implementiert.Ein nutzerfreundliches System würde noch etwas Designarbeit benötigen.

7.1.4. Einbindung von weiteren Elementen

Weitere Ultraschallsensoren zur Rundumsicht, oder Sensoren anderer Art könntenverbaut werden. Damit könnte die Intelligenz des Systems weiter ausgebaut werden(Hindernisvermeidung etc.). Auch ist vorstellbar, mehrere Legoinos miteinanderper WLAN kommunizieren zu lassen.

7.2. NodeMCU/ESP8266

Im Internet existieren zahlreiche Ideen und Projekte, die bereits mit dem WLAN-Board ESP8266 und speziell mit dem NodeMCU erfolgreich durchgeführt wurden.Im Zusammenhang mit der Seite www.thingspeak.com kann man den NodeMCUdazu nutzen, um zyklisch Daten an einen Server zu senden. Im Nutzerbereich dergenannten Webseite können Kanäle zur Darstellung der Daten erstellt werden. Der


www.thingspeak.com

Nutzer kann sich so eine Wetterstation mit dem NodeMCU basteln. Die hierzubenötigten Sensoren wie Regensensor, Luftfeuchtesensor und Temperatursensor(ggf. Helligkeitssensor, CO2-Sensor...) sind in den meisten Fällen für Cent-Beträgezu erhalten. Für dias Auslesen dieser Sensoren bestehen auch einige Anleitungen,die der Nutzer im Internet abrufen kann.


A. Anhang

A.1. Arduino-Code (ArduinoCodeFinal.ino)

1 /∗−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−2 Pinbe l egung :3

4 Vin Rot1 ( Vcc U l t r a s c h a l l s e n s o r )5 Gnd ( e g a l wo) Schwarz1 (Gnd U l t r a s c h a l l s e n s o r )6

7 Vin Rot2 ( Vcc LEDs )8 Gnd ( e g a l wo) Schwarz2 (Gnd LEDs )9

10 DIP 1 ( s . o . ) Rot3 ( Servo l i n k s )11 Gnd ( e g a l wo) Schwarz3 ( Servo l i n k s )12

13 DIP 2 ( s . o . ) Rot4 ( Servo r e c h t s )14 Gnd ( e g a l wo) Schwarz4 ( Servo r e c h t s )15

16 D0 Unten am Board FEST mit S c h a l t e r 3 und 4verbunden

17 D1 Orange kurz (SCL LEDs )18 D2 Blau (SDA LEDs)19 D5 Grau l ang ( T r i g g e r U l t r a s c h a l l s e n s o r )20 D6 Blau l ang ( Echo U l t r a s c h a l l s e n s o r )21 D7 Wei ß ( Servo r e c h t s )22 D8 Grün ( Servo l i n k s )23

24 V o r s i c h t : D0−GPIO16 , D1−GPIO5 , D2−GPIO4 , D3−GPIO0 , D4−GPIO2 , D5−GPIO14 , D6−GPIO12 , D7−GPIO13 , D8−GPIO15 , D9−GPIO3 , D10−GPIO1 , LED :GPIO12 , SDA: GPIO4−>D2 , SCL : GPIO5−>D1

25 Auf NodeMCUs−Pins (Dx) kann d i r e k t mit h i e r genannten Namenz u g e g r i f f e n werden ( s i e h e " p i n s_a rdu i no . h " )

26 D3 und D4 werden au ß erdem benut z t beim F la shen . Können b e l e g t werden, mü s s en abe r zum F la shen he rausgezogen werden .

27

28 DIP−S c h a l t e r :29 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! VOR DER FAHRT30 − Beide S t r om l e i t ungen de r Se r vo s au f Eing ä nge von 1 l e g e n


31 −> Durch Scha l t en von 1 wi rd d i e Versorgung de r Se r vo s au f Ving e s c h a l t e t

32 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! SONST KEIN LOSFAHREN MÖGLICH ! !33

34 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! VOR DER FAHRT AUSWÄHLEN35 −> Durch Scha l t en von 3 oder 4 w i rd zw i s chen Steuerung m i t t e l s

B e s c h l e u n i g u n g s s e n s o r oder m i t t e l s Maus/ Touchevent gewä h l t36 −−> Steht 3 oder 4 au f on , w i rd D0 au f low gezogen −−> Steuerung

m i t t e l s dem B e s c h l e u n i g u n g s s e n s o r37 −−> Stehen be i d e au f 0 i s t D0 h igh ( ü be r i n t e r n e n Pu l lup , s i e h e unten

) −−> Steuerung mit Touch−/Mausevent38 ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! VOR DER FAHRT AUSWÄHLEN39

40 1 : Eingang gebr ü ck t mit 2 , Ausgang i s t unten verbunden mit Vin41 2 : k e i n e Funkt ion42 3 : Eingang i s t unten verbunden mit D0 , Ausgang i s t verbunden mit Gnd43 4 : gebr ü ckt , wie 344

45 Webse i te :46 1 9 2 . 1 6 8 . 4 . 1 i n Browser ö f f n e n ( Vorzugswe i s e Google Chrome )47

48 −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−∗/49

50 // F i l e s y s t e m I n i t51 #i n c l u d e "FS . h"52

53 // WiFi I n i t54 #i n c l u d e <ESP8266WiFi . h>55 con s t cha r ∗ s s i d = " Lego ino " ;56 con s t cha r ∗ password = " " ;57 S t r i n g WebsiteBody , Webs i teHeader ;58 WiF iSe rve r s e r v e r (80) ;59

60 // LED−Array I n i t61 #i n c l u d e <Wire . h>62 #i n c l u d e " Adafruit_LEDBackpack . h"63 #i n c l u d e " Adafruit_GFX . h"64 Ada f r u i t_8x8mat r i x mat r i x = Ada f r u i t_8x8mat r i x ( ) ;65

66 // Servo I n i t67 #i n c l u d e <Servo . h>68 con s t i n t se rvoZeroR = 90 , s e r voZe roL = 90 ;

69 con s t i n t s e r v o D e l t a = 30 ;70 i n t se rvoSpeedL = servoZeroR , servoSpeedR = servoZeroR ;71 i n t d i r e c F l a g A c t = 0 ;72 Servo myservoL , myservoR ;73

74 // I n i t i a l w e r t e f ü r d i e Steuerung75 doub l e x_va l =0, y_va l =0;76 // Richtungen77 // 1 2 3 vorne78 // 4 5 6 m i t t e79 // 7 8 9 h i n t e n80 // l i n k s −mitte−r e c h t s81 i n t R i ch tungswah l =5;82

83 // U l t r a s c h a l l s e n s o r84 i n t T r i g g e r = D5 ;85 i n t EchoPin = D6 ;86 uns i gned long echo = 0 ;87 i n t senso rWer t = 0 ;88 uns i gned long l e t z t e r Z e i t w e r t = 0 ;89 i n t l e t z t e r S e n s o r W e r t =0;90 // Warte au f Echo . 5000 e n t s p r i c h t 86 cm Hö c h s t l ä nge . F a l l s mehr gewü

nscht , r e a g i e r t Steuerung en t sp r e chend langsamer91 i n t wa i t ingTime =5000;92 i n t Z e i t A u s r u f e z e i c h e n =0;93

94 // A l l g eme ine I n i t s95 // E igen s d e f i n i e r t e Bitmaps96 #i n c l u d e <Bitmaps . h>97 // Min−Operato r98 #d e f i n e min ( a , b ) ( ( a )<(b ) ?( a ) : ( b ) )99 // Debug : Wenn t r u e : Ausgaben S e r i a l

100 boo l debug=f a l s e ;101 // Webse i te s e r i e l l a n z e i g en102 boo l Webse i t eAnze igen=f a l s e ;103 // GET−Request anz e i g en104 boo l C l i entReques tShow=f a l s e ;105 // P ins können "D0 . . . Dn" gennant werden und werden automat i s ch i n

GPIO−Pins umgewandelt106 #i n c l u d e 107

108 vo i d s e tup ( )

109 {110 // U l t r a s c h a l l −Pins111 pinMode ( Tr i gge r ,OUTPUT) ;112 pinMode ( EchoPin , INPUT) ;113

114 // S e r i e l l e n Kanal ö f f n e n115 S e r i a l . b eg i n (9600) ;116 d e l a y (1 ) ;117

118 // S r v e r i n AP Modus s t a r t e n119 WiFi . mode (WIFI_AP) ;120 WiFi . softAP ( s s i d , password ) ;121 s e r v e r . beg in ( ) ;122

123 // HTML−S e i t e aus S p e i c h e r ho l en124 SPIFFS . beg in ( ) ;125 F i l e f= SPIFFS . open ( "/ heade r . t x t " , " r " ) ;126 Websi teHeader = f . r e a d S t r i n g ( ) ;127 f . c l o s e ( ) ;128 pinMode (D0 , INPUT_PULLUP) ;129

130 // D0 i s t de fau l tm ä ß i g h igh . Kann au f Bet ä t i gung von Tas t e r 3 oder4 low gezogen werden .

131 i f ( d i g i t a l R e a d (D0)==LOW) {132 f= SPIFFS . open ( "/ a c c e l . t x t " , " r " ) ;133 WebsiteBody = f . r e a d S t r i n g ( ) ;134 f . c l o s e ( ) ;135 i f ( debug ) S e r i a l . p r i n t l n ( "\ n a c c e l " ) ;136 }137 // Ansonsten : Maus/TouchEvent−Ve r s i on l aden138 e l s e {139 f= SPIFFS . open ( "/mouse . t x t " , " r " ) ;140 WebsiteBody = f . r e a d S t r i n g ( ) ;141 f . c l o s e ( ) ;142 i f ( debug ) S e r i a l . p r i n t l n ( "\nmouse " ) ;143 }144

145

146 // Webse i te anz e i g en147 i f ( debug&&Webse i t eAnze igen ) {148 S e r i a l . p r i n t l n ( WebsiteBody ) ;149 }


150

151 // Attach Servos , au f 0 s e t z e n152 myservoR . a t t a ch (D7) ;153 myservoL . a t t a ch (D8) ;154 myservoL . w r i t e ( s e r voZe roL ) ;155 myservoR . w r i t e ( se rvoZeroR ) ;156 d e l a y (100) ;157

158 // LED−Matr i x s t a r t e n159 mat r i x . b eg in (0 x70 ) ;160 mat r i x . s e t R o t a t i o n (3 ) ;161

162 // Okay−Bitmap z e i g e n163 mat r i x . c l e a r ( ) ;164 mat r i x . drawBitmap (0 , 0 , okay_bmp , 8 , 8 , LED_ON) ;165 mat r i x . w r i t e D i s p l a y ( ) ;166

167 }168

169 vo i d l oop ( )170 {171 // I s t e i n C l i e n t vorhanden ?172 W i F i C l i e n t c l i e n t = s e r v e r . a v a i l a b l e ( ) ;173 i f ( ! c l i e n t )174 {175 r e t u r n ;176 }177

178 // C l i e n t bekommt Z e i t f e n s t e r um Daten zu senden179 i f ( debug ) S e r i a l . p r i n t l n ( "new c l i e n t " ) ;180 uns i gned long u l t i m e o u t = m i l l i s ( ) +250;181 w h i l e ( ! c l i e n t . a v a i l a b l e ( ) && ( m i l l i s ( )u l t i m e o u t )186 {187 i f ( debug ) S e r i a l . p r i n t l n ( " c l i e n t conne c t i on time−out ! " ) ;188 r e t u r n ;189 }190

191 // Read the f i r s t l i n e o f the r e q u e s t

192 S t r i n g C l i e n t R e q u e s t = c l i e n t . r e a d S t r i n g U n t i l ( ’ \ r ’ ) ;193 i f ( debug ) S e r i a l . p r i n t l n ( C l i e n t R e q u e s t ) ;194 c l i e n t . f l u s h ( ) ;195

196 // Wandle S t r i n g i n Char−Array um d a r i n mit s t r s t r suchen zu können197 i n t l a enge=C l i e n t R e q u e s t . l e n g t h ( ) ;198 char C l i e n tReque s tCha r [ l a eng e ] ;199 s t r c p y ( C l i en tReque s tCha r , C l i e n t R e q u e s t . c_s t r ( ) ) ;200

201

202

203 // GET−Request enth ä l t <<KEINEN>> S t r i n g " param "204 i f ( ! s t r s t r ( C l i en tReque s tCha r , " param " ) ) {205 i f ( debug ) S e r i a l . p r i n t l n ( "No pa ramete r s " ) ;206 // c l i e n t . p r i n t ( Webs i teHeader+WebsiteBody . l e n g t h ( ) +"\n\n"+

WebsiteBody ) ;207 c l i e n t . p r i n t ( Webs i teHeader+WebsiteBody . l e n g t h ( )+"\n\n"+

WebsiteBody ) ;208 i f ( debug && Webse i t eAnze igen ) {209 S e r i a l . p r i n t ( Webs i teHeader+WebsiteBody . l e n g t h ( )+"\n\n"+

WebsiteBody ) ;210 }211 }212 // GET−Request ENTHÄLT S t r i n g " param "213 e l s e {214 // Nach r i ch t kommt i n de r Form :215 // GET /?param=x :X .XXXX, y :Y .YYYY; HTTP/1 .1 −> XPOS und YPOS s i n d

d i e im Browser a n g e z e i g t e n Zah len216 // x und y aus C l i e n t R e q u e s t h e r a u s f i s c h e n217 S e r i a l . p r i n t l n ( " Parameter ge funden " ) ;218 S t r i n g x_Str=C l i e n t R e q u e s t . s u b s t r i n g ( C l i e n t R e q u e s t . i ndexOf ( " x : " )

+2, C l i e n t R e q u e s t . i ndexOf ( " , " ) ) ;219 doub l e x_va l=x_Str . t o F l o a t ( ) ;220 S t r i n g y_Str=C l i e n t R e q u e s t . s u b s t r i n g ( C l i e n t R e q u e s t . i ndexOf ( " y : " )

+2, C l i e n t R e q u e s t . i ndexOf ( " ; " ) ) ;221 doub l e y_va l=y_Str . t o F l o a t ( ) ;222

223 // Anze igen l a s s e n zum Debuggen224 i f ( debug && Cl i entReques tShow ) {225 S e r i a l . p r i n t l n ( " x : " + C l i e n t R e q u e s t . s u b s t r i n g ( C l i e n t R e q u e s t .

i ndexOf ( " x : " ) +2, C l i e n t R e q u e s t . i ndexOf ( " , " ) ) ) ;

226 S e r i a l . p r i n t l n ( " y : " + C l i e n t R e q u e s t . s u b s t r i n g ( C l i e n t R e q u e s t .i ndexOf ( " y : " ) +2, C l i e n t R e q u e s t . i ndexOf ( " ; " ) ) ) ;

227 }228

229 // Move j e nach X und Y230 x_va l ∗=90;231 y_va l ∗=90;232

233 // Richtungen234 // 1 2 3 vorne235 // 4 5 6 m i t t e236 // 7 8 9 h i n t e n237 // l i n k s −mitte−r e c h t s238 i f ( y_val <−20){239 i f ( x_val <−20) R ich tungswah l =1;240 e l s e i f ( x_val >=−20 && x_va l <=20) R ich tungswah l =2;241 e l s e i f ( x_val >20) R ich tungswah l =3;242 }243 e l s e i f ( y_val >=−20 && y_va l <=20){244 i f ( x_val <−20) R ich tungswah l =4;245 e l s e i f ( x_val >=−20 && x_va l <=20) R ich tungswah l =5;246 e l s e i f ( x_val >20) R ich tungswah l =6;247 }248 e l s e i f ( y_val >20){249 i f ( x_val <−20) R ich tungswah l =7;250 e l s e i f ( x_val >=−20 && x_va l <=20) R ich tungswah l =8;251 e l s e i f ( x_val >20) R ich tungswah l =9;252 }253

254 // Ze i chne Richtungwah l au f LED−Array255 mat r i x . c l e a r ( ) ;256 sw i t ch ( R i ch tungswah l ) {257 ca se 1 :258 mat r i x . drawBitmap (0 , 0 , vor_l inks_bmp , 8 , 8 , LED_ON) ;259 break ;260 ca se 2 :261 mat r i x . drawBitmap (0 , 0 , vor_bmp , 8 , 8 , LED_ON) ;262 break ;263 ca se 3 :264 mat r i x . drawBitmap (0 , 0 , vor_rechts_bmp , 8 , 8 , LED_ON) ;265 break ;266 ca se 4 :

267 mat r i x . drawBitmap (0 , 0 , l inks_bmp , 8 , 8 , LED_ON) ;268 break ;269 ca se 5 :270 mat r i x . drawBitmap (0 , 0 , stehen_bmp , 8 , 8 , LED_ON) ;271 break ;272 ca se 6 :273 mat r i x . drawBitmap (0 , 0 , rechts_bmp , 8 , 8 , LED_ON) ;274 break ;275 ca se 7 :276 mat r i x . drawBitmap (0 , 0 , zurueck_l inks_bmp , 8 , 8 , LED_ON) ;277 break ;278 ca se 8 :279 mat r i x . drawBitmap (0 , 0 , zurueck_bmp , 8 , 8 , LED_ON) ;280 break ;281 ca se 9 :282 mat r i x . drawBitmap (0 , 0 , zurueck_rechts_bmp , 8 , 8 , LED_ON) ;283 break ;284 }285

286 // Fahrzeug s e h r nah an Wand : A u s r u f e z e i c h e n malen und s t ehenb l e i b e n

287 // A l l e 500 ms wi rd zw i s chen " l e e r " und " A u s r u f e z e i c h e n "g ewech s e l t

288 // V o r s i c h t : Sen so rwe r t 0 : ungü l t i g289 i f ( sensorWert >0&&sensorWert <=20&&(Richtungswah l <=3)) {290 Richtungswah l =5;291 mat r i x . c l e a r ( ) ;292 mat r i x . drawBitmap (0 , 0 , ausruf_bmp , 8 , 8 , LED_ON) ;293 i f ( m i l l i s ( )−Z e i t A u s r u f e z e i c h e n >=500){294 Z e i t A u s r u f e z e i c h e n=m i l l i s ( ) ;295 mat r i x . c l e a r ( ) ;296 mat r i x . drawBitmap (0 , 0 , a l l_of f_bmp , 8 , 8 , LED_ON) ;297 }298 }299 mat r i x . w r i t e D i s p l a y ( ) ;300 moove ( R i ch tungswah l ) ;301

302 // Senso r nur au s l e s en , wenn 300ms s e i t de r l e t z t e n Messung303 // Warum? Senso rwe r t w i rd nur a l l e 400ms vom S e r v e r a n g e f r a g t −>

Öf t e r e Messung n i c h t e r f o r d e r l i c h304 i f ( ( m i l l i s ( )− l e t z t e r Z e i t w e r t >=300) )305 {

306 l e t z t e r Z e i t w e r t=m i l l i s ( ) ;307 l e t z t e r S e n s o r W e r t=sensorWert ;308 senso rWert = p ing ( ) ;309 i f ( debug ) S e r i a l . p r i n t l n ( senso rWert ) ;310 }311 // F a l l s Senso rwe r t=0 −> Wert ungü l t i g , Sen so rwe r t n i c h t updaten312 i f ( s enso rWert !=0) c l i e n t . p r i n t ( senso rWer t ) ;313 // F i l t e r u n g , f a l l s k e i n Senso rwe r t ankommt314 e l s e i f ( l e t z t e r S e n s o r W e r t >0){315 c l i e n t . p r i n t ( l e t z t e r S e n s o r W e r t ) ;316 senso rWert=l e t z t e r S e n s o r W e r t ;317 }318 }319

320 // C l i e n t s c h l i e ß en321 c l i e n t . s top ( ) ;322 i f ( debug ) S e r i a l . p r i n t l n ( " C l i e n t d i s o n n e c t e d " ) ;323 }324

325 // F a h r f u n k t i o n326 vo i d moove ( i n t d i r e c F l a g ) {327 //Nur e i n g r e i f e n , wenn s i c h d i e S o l l f a h r t r i c h t u n g ge ä nde r t hat .328 i f ( d i r e c F l a g != d i r e c F l a g A c t ) {329 sw i t ch ( d i r e c F l a g ) {330 ca se 1 :331 // vorne l i n k s332 w h i l e ( ( servoSpeedR != ( se rvoZeroR+s e r v o D e l t a ) ) | | ( se rvoSpeedL !=

se r voZe roL ) ) {333 servoSpeedR = servoSpeedR + 3∗ s i g n ( ( se rvoZeroR+s e r v o D e l t a )−

servoSpeedR ) ;334 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( se rvoZeroL −se rvoSpeedL ) ;335

336 myservoR . w r i t e ( servoSpeedR ) ;337 myservoL . w r i t e ( se rvoSpeedL ) ;338 d e l a y (50) ;339 }340 d i r e c F l a g A c t = 1 ;341 break ;342 ca se 2 :343 // vorw ä r t s344 w h i l e ( ( servoSpeedR != ( se rvoZeroR+s e r v o D e l t a ) ) | | ( se rvoSpeedL !=

( se rvoZeroL −s e r v o D e l t a ) ) ) {


345 servoSpeedR = servoSpeedR + 3∗ s i g n ( ( se rvoZeroR+s e r v o D e l t a )−servoSpeedR ) ;

346 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( ( se rvoZeroL −s e r v o D e l t a )−se rvoSpeedL ) ;

347

348 myservoR . w r i t e ( servoSpeedR ) ;349 myservoL . w r i t e ( se rvoSpeedL ) ;350 d e l a y (50) ;351 }352 d i r e c F l a g A c t = 2 ;353 break ;354 ca se 3 :355 // vorne r e c h t s356 w h i l e ( ( servoSpeedR != servoZeroR ) | | ( se rvoSpeedL != ( se rvoZeroL −

s e r v o D e l t a ) ) ) {357 servoSpeedR = servoSpeedR + 3∗ s i g n ( servoZeroR−servoSpeedR ) ;358 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( ( se rvoZeroL −s e r v o D e l t a )−

se rvoSpeedL ) ;359

360 myservoR . w r i t e ( servoSpeedR ) ;361 myservoL . w r i t e ( se rvoSpeedL ) ;362 d e l a y (50) ;363 }364 d i r e c F l a g A c t = 3 ;365 break ;366 ca se 4 :367 // v o l l l i n k s368 w h i l e ( ( servoSpeedR != ( se rvoZeroR+s e r v o D e l t a ) ) | | ( se rvoSpeedL !=

( se r voZe roL+s e r v o D e l t a ) ) ) {369 servoSpeedR = servoSpeedR + 3∗ s i g n ( ( se rvoZeroR+s e r v o D e l t a )−

servoSpeedR ) ;370 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( ( s e r voZe roL+s e r v o D e l t a )−

se rvoSpeedL ) ;371

372 myservoR . w r i t e ( servoSpeedR ) ;373 myservoL . w r i t e ( se rvoSpeedL ) ;374 d e l a y (50) ;375 }376 d i r e c F l a g A c t = 4 ;377 break ;378 ca se 5 :379 // stopp


380 w h i l e ( ( servoSpeedR != servoZeroR ) | | ( se rvoSpeedL != se r voZe roL ) ){

381 servoSpeedR = servoSpeedR + 3∗ s i g n ( servoZeroR−servoSpeedR ) ;382 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( se rvoZeroL −se rvoSpeedL ) ;383

384 myservoR . w r i t e ( servoSpeedR ) ;385 myservoL . w r i t e ( se rvoSpeedL ) ;386 d e l a y (50) ;387 }388 d i r e c F l a g A c t = 5 ;389 break ;390 ca se 6 :391 // v o l l r e c h t s392 w h i l e ( ( servoSpeedR != ( servoZeroR−s e r v o D e l t a ) ) | | ( se rvoSpeedL !=

( se rvoZeroL −s e r v o D e l t a ) ) ) {393 servoSpeedR = servoSpeedR + 3∗ s i g n ( ( servoZeroR−s e r v o D e l t a )−

servoSpeedR ) ;394 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( ( se rvoZeroL −s e r v o D e l t a )−

se rvoSpeedL ) ;395

396 myservoR . w r i t e ( servoSpeedR ) ;397 myservoL . w r i t e ( se rvoSpeedL ) ;398 d e l a y (50) ;399 }400 d i r e c F l a g A c t = 6 ;401 break ;402 ca se 7 :403 // zu r ück l i n k s404 w h i l e ( ( servoSpeedR != servoZeroR ) | | ( se rvoSpeedL != ( se r voZe roL+

s e r v o D e l t a ) ) ) {405 servoSpeedR = servoSpeedR + 3∗ s i g n ( servoZeroR−servoSpeedR ) ;406 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( ( s e r voZe roL+s e r v o D e l t a )−

se rvoSpeedL ) ;407

408 myservoR . w r i t e ( servoSpeedR ) ;409 myservoL . w r i t e ( se rvoSpeedL ) ;410 d e l a y (50) ;411 }412 d i r e c F l a g A c t = 7 ;413 break ;414 ca se 8 :415 // v o l l zu r ück


416 w h i l e ( ( servoSpeedR != ( servoZeroR−s e r v o D e l t a ) ) | | ( se rvoSpeedL !=( se r voZe roL+s e r v o D e l t a ) ) ) {

417 servoSpeedR = servoSpeedR + 3∗ s i g n ( ( servoZeroR−s e r v o D e l t a )−servoSpeedR ) ;

418 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( ( s e r voZe roL+s e r v o D e l t a )−se rvoSpeedL ) ;

419

420 myservoR . w r i t e ( servoSpeedR ) ;421 myservoL . w r i t e ( se rvoSpeedL ) ;422 d e l a y (50) ;423 }424 d i r e c F l a g A c t = 8 ;425 break ;426 ca se 9 :427 // zu r ück r e c h t s428 w h i l e ( ( servoSpeedR != ( servoZeroR−s e r v o D e l t a ) ) | | ( se rvoSpeedL !=

se r voZe roL ) ) {429 servoSpeedR = servoSpeedR + 3∗ s i g n ( ( servoZeroR−s e r v o D e l t a )−

servoSpeedR ) ;430 se rvoSpeedL = servoSpeedL + 3∗ s i g n ( se rvoZeroL −se rvoSpeedL ) ;431

432 myservoR . w r i t e ( servoSpeedR ) ;433 myservoL . w r i t e ( se rvoSpeedL ) ;434 d e l a y (50) ;435 }436 d i r e c F l a g A c t = 9 ;437 break ;438 }439 }440 }441

442 // Signum−Funkt ion443 i n t s i g n ( i n t a ) {444 i f ( a ==0) r e t u r n 0 ;445 e l s e r e t u r n ( a/ abs ( a ) ) ;446 }447

448 // Ping−Funkt ion449 uns i gned long p ing ( )450 {451 d i g i t a l W r i t e ( Tr i gge r , LOW) ; // Send low p u l s e


452 de l a yM i c r o s e cond s (2 ) ; // Wait f o r 2m ic ro s econds

453 d i g i t a l W r i t e ( Tr i gge r , HIGH) ; // Send h igh p u l s e454 de l a yM i c r o s e cond s (5 ) ; // Wait f o r 5

m ic ro s econds455 d i g i t a l W r i t e ( Tr i gge r , LOW) ; // Ho l do f f456 d i g i t a l W r i t e ( Tr i gge r , HIGH) ; // Turn on p u l l u p

r e s i s t o r457 echo = p u l s e I n ( EchoPin , HIGH , wa i t ingTime ) ; // L i s t e n f o r echo458 senso rWert = ( echo / 58 .138) ; // c o n v e r t to CM459 r e t u r n senso rWer t ;460 }

A.2. Website-Code

Hinweis: Beim Test funktionierten die Webseiten inklusive den Kommentarennicht. Das liegt möglicherweise an der Angabe “Content-length“ im http-header,die aufgrund der Kommentare nicht mehr mit der wahren Länge der HTML-Seiteübereinstimmt und deshalb zu einem length-missmatch führt. Im Ordner “data“sind daher die Webseiten ohne die hier zu sehenden Kommentare gespeichert. Derhier zu sehende Code befindet sich im Ordner “Webseiten kommentiert“.

A.2.1. Header (header.txt)

1

2 HTTP/1 .1 200 OK3 Content−Type : t e x t / html4 Connect ion : c l o s e5 Content−Length :

Diese Angaben gehören zum HTTP-header und werden für das Protokoll gebraucht.Die Content-length wird im Arduino-Skript eingefügt.

A.2.2. Webseite mit Sensorsteuerung (accel.txt)

1

2 <!DOCTYPE html>

3 <html l ang=" en ">4 <head> <!−−

Head : E n t h a e l t im w e s e n t l i c h e n Metadaten uebe r d i e Nutzdaten−−>5 <meta c h a r s e t="UTF−8"> <!−− Text i s t UTF−8

c o d i e r t ( Standard )−−>6 < t i t l e>ESP</ t i t l e> <!−− T i t e l f u e r

Browser−−>7 <l i n k r e l=" s h o r t c u t i c on " h r e f=" data : image /x−i c on ; , " type=" image/

x−i c on "> <!−− Hie rm i t umgeht man e i n en " f a v i c o n notfound "−e r r o r−−>

8 <s t y l e> /∗L e i t e t e i n en I n l i n e −Css−Abschn i t t e i n ( ande re Syntax a l sHTML, f u e r das Layout z u s t a e n d i g ) .∗/

9 . garden { /∗Hie r werden d i e Parameter f u e r den b lauen H in t e r g rundg e s e t z t ∗/

10 p o s i t i o n : r e l a t i v e ;11 width : 300 px ;12 h e i g h t : 300 px ;13 background−c o l o r : L i gh tSkyB lue ;14 /∗ bo rde r : 5px s o l i d #CCC;15 border −r a d i u s : 10 px ;∗/16 }17

18 . b a l l { /∗Hie r werden d i e Parameter f u e r den " B a l l " g e s e t z t ∗/

19 p o s i t i o n : a b s o l u t e ;20 top : 90 px ;21 l e f t : 90px ;22 width : 30 px ;23 h e i g h t : 30px ;24 border −r a d i u s : 100%;25 bo rde r : 1 px b l a ck s o l i d ;26 }27 </ s t y l e> <!−−

Css Ende−−>28

29 <meta con t en t =’ width=dev i c e −width , i n i t i a l −s c a l e =1.0 , maximum−s c a l e =1.0 , use r −s c a l a b l e =0’ name=’ v i ewpor t ’ />

30 <!−− Fuer Smartphone−D a r s t e l l u n g : 100P i x e l e n t s p r e ch en 100 P i x e l n wie

d e f i n i e r t ( i n i t i a l −s c a l e ) ,

31 maximum s c a l e i s t auch 1 .0und u s e r d a r f n i c h t s e l b s t

s k a l i e r e n ( use r −s c a l a b l e ),−−>

32

33 </head>34

35 <body> <!−−Hie r f a e n g t d i e e i g e n t l i c h e HTML−S e i t e n b e s c h r e i b u n g an−−>

36

37 <d i v c l a s s=" garden "> <!−− E in fuegen de roben d e f i n i e r t e n Css−Elemente−−>

38 <d i v c l a s s=" b a l l "></ d i v> <!−− Fuege " B a l l " i n" Garten " e i n−−>

39 </ d i v>40

41 <pre c l a s s=" output "></ pre> <!−− S t e l l e V a r i a b l e" output " ( x− und y−Werte f u e r Steuerung , s i e h e unten ) a l sf o r m a t i e r t e n Text au f de r S e i t e dar .−−>

42

43 <d i v i d=" s e n s o rVa l u e "></ d i v> <!−− S t e l l e V a r i a b l e "s e n s o r Va l u e " ( Wert des U l t r a s c h a l l s e n s o r s , s i e h e unten ) au f de rS e i t e dar .−−>

44

45 <!−− I n l i n e −J a v a s c r i p t −> D e f i n i e r t " F u n k t i o n a l i t a e t " des S e r v e r s−−>46 <!−− Es wurde das B e i s p i e l au f S e i t e h t t p s : // d e v e l o p e r . m o z i l l a . o rg /en

−US/ docs /Web/API/ D e t e c t i n g _ d e v i c e _ o r i e n t a t i o n genommen undw e i t e r e n t w i c k e l !−−>

47 <s c r i p t type=" t e x t / j a v a s c r i p t ">48 va r b a l l = document . q u e r y S e l e c t o r ( ’ . b a l l ’ ) ; //

G ib t das im HTML−Abschn i t t i n i t i a l i s i e r t e " b a l l "−Elementzu rueck

49 va r garden = document . q u e r y S e l e c t o r ( ’ . garden ’ ) ; //G ib t das im HTML−Abschn i t t i n i t i a l i s i e r t e " garden "−Element

zu rueck50 va r output = document . q u e r y S e l e c t o r ( ’ . output ’ ) ; //

G ib t das im HTML−Abschn i t t i n i t i a l i s i e r t e " output "−Elementzu rueck

51

52 va r maxX = garden . c l i e n t W i d t h − b a l l . c l i e n t W i d t h ;53 va r maxY = garden . c l i e n t H e i g h t − b a l l . c l i e n t H e i g h t ;54

55 va r x F i n a l = 0 ;56 va r y F i n a l = 0 ;57

58 va r xLas t =0;59 va r yLas t =0;60

61 f u n c t i o n h a n d l e O r i e n t a t i o n ( even t ) {// Wird z y k l i s c h mit neuen Sensor−Daten

au f g e ru f en , s oba l d Event−L i s t e n e r a u f g e r u f e n wurde ( s i e h eunten )

62 va r x = even t . gamma ; // I n deg r ee i n therange [ −90 ,90] ( B e i s p i e l von I n t e r n e t s e i t e )

63 va r y = even t . beta ; // I n deg r ee i n therange [ −180 ,180] ( B e i s p i e l von I n t e r n e t s e i t e )

64 y=2∗y −90;65

66 // Werte be sch raenken au f zw i s chen −90 und 9067 // Feh lwe r t e r a u s f r i e m e l n aus x . F e h l e r am Rand ( B a l l

s p r i n g t au f ande re S e i t e )68 i f ( x >= 90) { x = 90} ;69 i f ( x <= −90) { x = −90};70 i f (Math . abs ( xLast−x )>=150) {x=xLas t } ;71 xLas t=x ;72 i f ( y >= 90) { y = 90} ;73 i f ( y <= −90) { y = −90};74 i f (Math . abs ( yLast−y )>=150) {y=yLas t } ;75 yLas t=y ;76

77 // Fuer Ausgabe : Werte zw i s chen −1 und 178 x F i n a l = ( x /90) . t oF i x ed (4 ) ;79 y F i n a l = ( y /90) . t oF i x ed (4 ) ;80

81 // S c h r e i b e i n V a r i a b l e n f u e r d i e Ausgabe i n HTML−S e i t e82 output . innerHTML = x F i n a l + "\n" ;83 output . innerHTML += y F i n a l ;84

85 // S h i f t e n de r Werte au f den Be r e i c h [ 0 180 ]86 x += 90 ;87 y += 90 ;88

89 // P o s i t i o n i e r u n g des B a l l s90 b a l l . s t y l e . l e f t = (maxY∗x /180) + " px " ;

91 b a l l . s t y l e . top = (maxX∗y /180) + " px " ;92 }93 a d d E v e n t L i s t e n e r ( ’ d e v i c e o r i e n t a t i o n ’ , h a n d l e O r i e n t a t i o n ) ;

// Ab h i e r w i rd au f d e v i c e o r i e n t a t i o ne v e n t s g ehoe r t

94 s e t I n t e r v a l ( cyc l eSend , 400 ) ;// Fuehre

nachs tehende Funkt ion a l l e 400ms aus95 f u n c t i o n cyc l eSend ( ) {96 // V a r i a b l e i n dem der GET−Request i n de r Form s t e h t :97 // ?param=x :X .XXXX, y :Y .YYYY;98 // wobei nach x : und y : j e w e i l s de r P o s i t i o n s w e r t des

B a l l s uebergeben w i rd99 va r toSend = document . l o c a t i o n . hos t . s u b s t r (0 , document

. l o c a t i o n . hos t . l a s t I n d e x O f ( "/" ) −1) + " ?param=" +100 " x : " + x F i n a l +101 " , y : " + y F i n a l + " ; " ;102 // He rz s tueck des S e r v e r s ! ! Nach fo l gende s Objekt

e r m o e g l i c h t das A k t u a l i s i e r e n von Daten ohne d i eS e i t e neu l aden zu muessen

103 va r xhr = new XMLHttpRequest ( ) ;104 // Immer wenn e i n e Anf rage zum S e r v e r ge s ende t wurde

( h i e r : Anf rage w i rd vom uC automat i s ch ge s ende tund e r h a e l t den Wert des U l t r a s c h a l l s e n s o r s )

105 // Mehr dazu s i e h e im Ardu ino Code Z e i l e 315 : " e l s ei f ( l e t z t e r S e n s o r W e r t >0){ c l i e n t . p r i n t (l e t z t e r S e n s o r W e r t ) ; . . . } "

106 // −> D i e s e r B e f eh l w i rd im S e r v e r durch nachs tehendeFunkt ion abge fangen .

107 xhr . on r e ady s t a t e change = f u n c t i o n ( ) {108 i f ( xh r . r e a d y S t a t e == XMLHttpRequest .DONE) {109 // S c h r e i b e neuen Wert i n d i e

V a r i a b l e s e n s o r Va l u e ( Ausgabe au fde r Webse i te w i rd automat i s changepa s s t )

110 document . getE lementBy Id ( " s en s o rV a l u e ") . innerHTML = xhr . r e s p o n s e ;

111 }112 }113 // Sende nun den oben d e f i n i e r t e n S t r i n g114 xhr . open ( ’GET’ , toSend , t r u e ) ;115 xhr . send ( n u l l ) ;


116 }117

118 </ s c r i p t>119

120

121 </body>122 </ html>

A.2.3. Webseite mit Maus-/Touchevent (mouse.txt)

1

2 <!DOCTYPE html>3 <html l ang=" en ">4 <head> <!−−

Head : E n t h a e l t im w e s e n t l i c h e n Metadaten uebe r d i e Nutzdaten −−>5 <meta c h a r s e t="UTF−8"> <!−− Text i s t UTF−8

c o d i e r t ( Standard ) −−>6 < t i t l e>ESP</ t i t l e> <!−− T i t e l f u e r

Browser −−>7 <l i n k r e l=" s h o r t c u t i c on " h r e f=" data : image /x−i c on ; , " type=" image/

x−i c on "> <!−− Hie rm i t umgeht man e i n en " f a v i c o n notfound "−e r r o r −−>

8 <s c r i p t type=" t e x t / j a v a s c r i p t "> // I n l i n e −J a v a s c r i p t −>F u n k t i o n a l i t a e t . Fuer S e i t e n i n h a l t s i e h e un t e r d iesemAbs chn i t t

9

10

11 f u n c t i o n i n i t ( ) { // Wird beimAu f ru f de r S e i t e a u f g e r u f e n

12 va r13 mousedown = f a l s e , x = 0 , y = 0 , w = 300 , h = 300 ,

// I n i t i a l i s i e r e S tanda rdwer t e14 canvas = document . getE lementBy Id ( " c o n t r o l " ) ,

// uebernehme Werte aus V a r i a b l e n von Webse i te15 l a b e l X = document . getE lementBy Id ( " xpos " ) ,

// uebernehme Werte aus V a r i a b l e n vonWebse i te

16 l a b e l Y = document . getE lementBy Id ( " ypos " ) ,// uebernehme Werte aus V a r i a b l e n von

Webse i te

17 c t x = canvas . ge tContex t ( "2d" ) ;// K r e i e r e e i n 2D−g e r e n d e r t e s

Canvas (Rahmen)−Objekt −> b laue Box18

19 f u n c t i o n l i m i t ( va l , min , max) {// Z e i c h e n b e r e i c h e ab s t e cken

20 r e t u r n Math . min (Math . max( va l , min ) , max) ;21 }22 f u n c t i o n onDown( even t ) {

// Waehrend Maus/ Touchscreenged rueck t −> mousedown b l e i b t g e s e t z t ( damit B a l l s i c h mitbewegt )

23 mousedown = t r u e ;24 // c o n s o l e . l o g ( even t . t ype ) ;

// Ausgabe des Even t t yp s25 }26 f u n c t i o n onMove ( even t ) {27 i f ( e ven t . changedTouches ) {

// F a l l s s i c h Touch−Parameter g eaende r t haben ( x− und y−Pos ) . . .

28 even t = even t . changedTouches [ 0 ] ;29 }30 x = l i m i t ( even t . pageX − canvas . o f f s e t L e f t , 0 , w) ;

// Se tze neues X, b e r e i n i g t um den O f f s e t de rdurch den Rahmen e n t s t e h t

31 y = l i m i t ( even t . pageY − canvas . o f f s e tTop , 0 , h ) ;// Se tze neues Y, b e r e i n i g t um den O f f s e t de r

durch den Rahmen e n t s t e h t32 update ( ) ;33 }34 f u n c t i o n onUp ( even t ) {35 mousedown = f a l s e ;

// Wenn Maus/Touchscreen l o s g e l a s s e n −> mousedown aufgehoen

36 }37 f u n c t i o n update ( r e c t o n l y ) {38 i f ( mousedown | | r e c t o n l y ) {39 c t x . f i l l R e c t (0 , 0 , canvas . width , canvas . h e i g h t ) ;

// Canvas z e i c hnen40 }41 i f ( ! mousedown ) {


42 r e t u r n ;//

Wenn Mouse/ Touchscreen n i c h t ged rueck t43 }44 // S c h r e i b e P o s i t i o n des B a l l s i n n e r h a l b des F e l d e s

au f HTML−S e i t e45 l a b e l X . innerHTML = (2 ∗ x / w − 1) . t oF i x ed (4 ) ;46 l a b e l Y . innerHTML = (2 ∗ y / h − 1) . t oF i x ed (4 ) ;47 // Ze i chne " B a l l " i n n e r h a l b des Canvas48 c t x . beg inPath ( ) ;49 c t x . a r c ( x , y , 15 , 0 , 2 ∗ Math . PI , f a l s e ) ;50 c t x . s t r o k e ( ) ;51 }52

53

54 s e t I n t e r v a l ( cyc l eSend , 400 ) ;// Fuehre

nachs tehende Funkt ion a l l e 400ms aus55 f u n c t i o n cyc l eSend ( ) {56 // V a r i a b l e i n dem der GET−Request i n de r Form s t e h t :57 // ?param=x :X .XXXX, y :Y .YYYY;58 // wobei nach x : und y : j e w e i l s de r P o s i t i o n s w e r t des

B a l l s uebergeben w i rd59 va r toSend = document . l o c a t i o n . hos t . s u b s t r (0 , document

. l o c a t i o n . hos t . l a s t I n d e x O f ( "/" ) −1) + " ?param=" +60 " x : " + l a b e l X . innerHTML +61 " , y : " + l a b e l Y . innerHTML + " ; " ;62 // He rz s tueck des S e r v e r s ! ! Nach fo l gende s Objekt

e r m o e g l i c h t das A k t u a l i s i e r e n von Daten ohne d i eS e i t e neu l aden zu muessen

63 va r xhr = new XMLHttpRequest ( ) ;64 // Immer wenn e i n e Anf rage zum S e r v e r ge s ende t wurde

( h i e r : Anf rage w i rd vom uC automat i s ch ge s ende tund e r h a e l t den Wert des U l t r a s c h a l l s e n s o r s )

65 // Mehr dazu s i e h e im Ardu ino Code Z e i l e 315 : " e l s ei f ( l e t z t e r S e n s o r W e r t >0){ c l i e n t . p r i n t (l e t z t e r S e n s o r W e r t ) ; . . . } "

66 // −> D i e s e r B e f eh l w i rd im S e r v e r durch nachs tehendeFunkt ion abge fangen .

67 xhr . on r e ady s t a t e change = f u n c t i o n ( ) {68 i f ( xh r . r e a d y S t a t e == XMLHttpRequest .DONE) {


69 // S c h r e i b e neuen Wert i n d i eV a r i a b l e s e n s o r Va l u e ( Ausgabe au fde r Webse i te w i rd automat i s changepa s s t )

70 document . getE lementBy Id ( " s en s o rV a l u e ") . innerHTML = xhr . r e s p o n s e ;

71 }72 }73 // Sende nun den oben d e f i n i e r t e n S t r i n g74 xhr . open ( ’GET’ , toSend , t r u e ) ;75 xhr . send ( n u l l ) ;76 }77

78 // Weise den j e w e i l i g e n E v e n t l i s t e n e r n d i e oben d e f i n i e r t e nFunkt ionen zu

79 document . a d d E v e n t L i s t e n e r ( " t o u c h s t a r t " , onDown) ;80 document . a d d E v e n t L i s t e n e r ( " touchmove " , onMove ) ;81 document . a d d E v e n t L i s t e n e r ( " touchend " , onUp ) ;82 document . a d d E v e n t L i s t e n e r ( "mousedown" , onDown) ;83 document . a d d E v e n t L i s t e n e r ( "mousemove " , onMove ) ;84 document . a d d E v e n t L i s t e n e r ( " mouseup " , onUp ) ;85

86 // Setze Paramenter f u e r den Rahmen87 canvas . w idth = w;88 canvas . h e i g h t = h ;89 c t x . f i l l S t y l e ="#87CEFA" ;90 c t x . l i n eWid th = 1 ;91 update ( t r u e ) ;92 }93

94 </ s c r i p t>95 <meta con t en t =’ width=dev i c e −width , i n i t i a l −s c a l e =1.0 , maximum−

s c a l e =1.0 , use r −s c a l a b l e =0’ name=’ v i ewpor t ’ />96 <!−− Fuer Smartphone−D a r s t e l l u n g : 100 P i x e l e n t s p r e ch en 100

P i x e l n wie d e f i n i e r t ( i n i t i a l −s c a l e ) ,97 maximum s c a l e i s t auch 1 .0

und u s e r d a r f n i c h t s e l b s ts k a l i e r e n ( use r −s c a l a b l e )

, −−>98 </head>99

100 <!−− E i g e n t l i c h e r I n h a l t de r S e i t e−−>

101 <body on load=" i n i t ( ) "> <!−− i n i t −Funkt ion beim Laden de r S e i t e au s f u eh r en−−>

102

103 <canvas i d=" c o n t r o l "></ canvas> <!−− c o n t r o l −Elemente i n f u e g e n−−>

104 <!−−x−P o s i t i o n s c h r e i b e n−−>

105 <!−−y−P o s i t i o n s c h r e i b e n−−>

106

107 <d i v i d=" s e n s o rVa l u e "></ d i v> <!−−U l t r a s c h a l l s e n s o r w e r t s c h r e i b e n−−>

108

109 </body>110 </ html>

A.3. Kompatible Smartphones

Tabelle A.1.: Kompatible Smartphones

Legende:

– f: funktioniert einwandfrei

– ng: nicht getestet

– fn: funktioniert nicht

– fb: funktioniert bedingt (siehe Kommentar)


A.4. Vergleich verschiedener ESP8266 BoardsBoard Preis Link1 Link2 Speicher In-/Outputs Sonstiges Breadboard-

freundlich?ESP 8266-201 ∼4€ Link Link 512 MB 11 digitale IOs, 1 ana-

log inputExterne Antenne,die allerdings keinnennenswert besserenEmpfang liefert

nicht, aber Adapterund Testboard erhält-lich

ESP 8266-12 ∼2-4€ Link Link 512 MB 11 digitale IOs, 1 ana-log input

nicht, aber Adapterund Testboard erhält-lich

ESP 8266-01 ∼3€ Link Link 200kb of ROM (for per-menant library functi-ons); 32kb sram; 80kbdram

2 GPIOs, nur digital! Klein und leicht gar nicht

Adafruit HUZ-ZAH

∼15€ Link 4 MB 9 digitale IOs, 1 analoginput

sehr benutzerfreund-lich gestaltet

JA

SparkFun WiFiShield - ESP8266

∼22US$ Link 1 MB Wie Arduino Arduino benötigt siehe “Sonstiges“

ESP-05 ∼2-3€ Link Flash Size 1 MB 2 GPIOs(?) Sehr klein NeinNodeMCU ∼4-7€ Link Link Memory: 20KB, Stora-

ge: 4MB11 digitale IOs, 1 ana-log input

Eingebauter FTDIund 5V-Converter->sehr programmier-freundlich, außerdembis zu 921600 Baud

Ja

NanoESP/ Pret-zelboard

30 Link Flash memory: 32KB (including 0,5KB for the Bootloa-der)SRAM: 2KBEE-PROM: 1KB

Analog in: 6, Digital12, davon 6 mit PWM

Per Micro-USB pro-grammierbar, KeinFTDI, Levelshifteroder Arduino nötig

Ja

Tabelle A.2.: Vergleich verschiedener Breakout-Boards

A.5. Linkliste

– Einstieg in ESP8266: http://www.mikrocontroller.net/articles/ESP8266

– ESP8266 mit Arduino: https://github.com/esp8266/Arduino

– SPIFFS Filesystem: https://github.com/esp8266/Arduino/blob/master/doc/filesystem.md

– Beschleunigungssensor auslesen mit Beispiel: https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

– Videos zur Inbetriebnahme: http://tinyurl.com/j4vcm2p


http://www.banggood.com/ESP8266-ESP-201-Remote-Serial-Port-WIFI-Transceiver-Wireless-Module-p-964288.html

http://de.aliexpress.com/item/1-pcs-x-ESP-201-ESP8266-remote-WiFi-Serial-Transceiver-Module-with-IPX-antenna-ESP-201/32308861449.html

http://www.banggood.com/WIFI-ESP8266-ESP-12-Serial-Module-Full-IO-Port-Leads-p-972891.html

http://de.aliexpress.com/item/Esp8266-WiFi-series-of-model-ESP-12-ESP-12F-esp12F-esp12-authenticity-guaranteed/32468324806.html

http://www.banggood.com/ESP8266-Remote-Serial-Port-WIFI-Transceiver-Wireless-Module-p-947259.html?p=6R31122484684201508S

http://de.aliexpress.com/item/1-pcs-x-ESP-01-ESP8266-remote-WiFi-Serial-Transceiver-Module-ESP-01-UNO-ROBOT-COMPONENT/32309891581.html

http://de.aliexpress.com/item/2471-HUZZAH-ESP8266-Breakout-module-development-board-Adafruit-Adafruit/32463631654.html

http://de.aliexpress.com/item/Development-board-module-SparkFun-WiFi-shields-ESP8266-WRL-13287/32576917020.html

http://de.aliexpress.com/item/Free-Shipping-ESP-05-WiFi-module-ESP8266-serial-WIFI-AP-and-STA-and-AP-STA-wireless/32251544410.html

http://www.banggood.com/Geekcreit-Doit-NodeMcu-Lua-ESP8266-ESP-12E-WIFI-Development-Board-p-985891.html

http://de.aliexpress.com/item/D1-mini-Mini-NodeMcu-4M-bytes-Lua-WIFI-Internet-of-Things-development-board-based-ESP8266/32529101036.html

http://www.franzis.de/elektronik/arduino-platinen/pretzel-board

http://www.mikrocontroller.net/articles/ESP8266

https://github.com/esp8266/Arduino



https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation

http://tinyurl.com/j4vcm2p

Literaturverzeichnis

Verzeichnis aller verwendeten Quellen aus Büchern, Artikeln und dem World Wide Web:

[1] Erik Bartmann. Die elektronische Welt mit Arduino entdecken: (mit demArduino messen, steuern und spielen ; Elektronik leicht verstehen ; 44 Arduino-Projekte für den Selbstbau). O’Reilly, Köln u.a., stark erw. 2. aufl., 1. korr.nachdr edition, 2015.

[2] Colin Walls. Using an embedded web server. http://www.embedded.com/design/connectivity/4439644/Using-an-embedded-Web-server/, 2015.

[3] Real Time Logic. What is an embedded application server? embedded webservers and application servers: What’s the difference? (a primer for embeddeddevelopers). https://realtimelogic.com/blog/2012/09/.

[4] Mattias Schlenker. Hausautomation mit ardui-no. http://www.arduino-hausautomation.de/2015/bruecken-bauen-bridge-bibliothek-arduino-yun/.

[5] Wikipedia. Embedded http server. http://tinyurl.com/zxqsz6j/.

[6] Wikipedia. Esp8266. https://en.wikipedia.org/wiki/ESP8266.


http://www.embedded.com/design/connectivity/4439644/Using-an-embedded-Web-server/

http://www.embedded.com/design/connectivity/4439644/Using-an-embedded-Web-server/

https://realtimelogic.com/blog/2012/09/

http://www.arduino-hausautomation.de/2015/bruecken-bauen-bridge-bibliothek-arduino-yun/

http://www.arduino-hausautomation.de/2015/bruecken-bauen-bridge-bibliothek-arduino-yun/

http://tinyurl.com/zxqsz6j/

https://en.wikipedia.org/wiki/ESP8266

Reutlingen University

Documents

Transcript of Reutlingen University