Jython

16. Webserver / EV3 mit Smartphone steuern

Durch den Einbau von kleinen WLAN-fähigen Microcontrollern können Geräte über ein Netzwerk mit übergeordneten Systemen kommunizieren. In der Industrie werden Transportroboter bequem per WLAN gesteuert. Immer häufiger können Roboter, auch Haushaltsroboter über das Internet ferngesteuert werden.

Auch der Microcontroller, der im EV3 eingebaut ist, kann für die WLAN-Steuerung verwendet werden. Mit Tools und Befehlen, die in der Bibliothek ev3robot integriert sind, kann man auf dem EV3 sogar einen einfachen Webserver einrichten und mit interaktiven Webseiten, die auch Smartphone fähig sind, den Roboter über das WLAN steuern.

Falls Sie bis jetzt ihre Programme über das Bluetooth heruntergeladen haben, brauchen Sie zusätzlich einen USB-WLAN-Adapter (Edimax EW 7811UN), den man vor dem Einschalten des EV3 in die USB-Schnittstelle einstecken muss. Die Kommunikation erfolgt über einen Accesspoint. In grösseren Institutionen oder im Klassenverband ist es vorteilhaft, eigenen, billigen WLAN-Router zu verwenden [mehr...]. Sie können aber auch WLAN- Hotspot Ihres Smartphones nutzen. Die SSID und Passwort des Accesspoints stellen Sie im EV3-Menü unter WiFi ein.

Der EV3 dient als Webserver, der Webseiten zur Verfügung stellen und auf die eingehenden Anfragen (Requests) der Benutzer (Clients) reagieren kann. Die Clients (Smartphone, PC) können mit einem Webbrowser auf diese Webseiten zugreifen.

Beispiel 1: LEDs des EV3 über das WLAN ein- und ausschalten
Der EV3 erhält seine IP-Adresse vom Accesspoint. Sie ist beim Einschalten des EV3 auf dem Display sichtbar (z.B. 192.168.0.27). Mit Ihrem Programm starten Sie auf dem EV3 einen Webserver und laden den HTML-Code einer einfachen Webseite hoch. Diese enthält nur eine Überschrift und zwei Links. Minimale HTML-Vorkenntnisse sind vorteilhaft. Eine kurze Einführung finden Sie unter html.pdf.

Um die Webseite anzuzeigen, muss der Client auf einem Smartphone oder PC Internetbrowser starten und in der Adressleiste die IP-Adresse des EV3 eingeben. Da die Kommunikation über den Port 81* erfolgt, muss man zusätzlich ":81" eingeben (z.B. 192.168.0.27:81).

Der Zugriff auf die Webseite erfolgt Eventgesteuert. Wenn der Benutzer die IP-Adresse des Servers wählt, wird die Callbackfunktion onRequest() aufgerufen. Diese wird beim Erzeugen des HTTPServers registriert. Wenn der Client den Link Light ON wählt, wird "/ON" als sogenannter URL-Parameter zum Server zurückgeschickt, dieser führt den im Programm festgelegten Befehl aus und schaltet die LEDs ein.

#Ro16a.py 

from ev3robot import *
from time import sleep

html = """
<!DOCTYPE html>
<html>
  <head> 
   <meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
  <body> 
  <h2>WebRobot</h2> 
     <p>Press to change the state:</p>
     <p><a href="on">Light ON</a></p>
     <p><a href="off">Light OFF</a></p>
  </body> 
</html>
"""

def onRequest(clientIP, state, params):
    if state == "/on":
        robot.setLED(2)
    elif state == "/off":
        robot.setLED(0)
    return html

robot = LegoRobot()
server = HTTPServer(requestHandler = onRequest, port = 81)

while not robot.isEscapeHit():
    sleep(1)  
server.terminate()
robot.exit()

Programmcode markieren (Ctrl+C kopieren)

Erklärungen zum Programmcode:

	html = """ .... """ : der HTML-Code wird in einem Python-Programm als ein mehrzeiliger String zwischen zwei dreifachen Anführungszeichen """ …""" eingegeben
	<meta name="viewport" ...>: mit dieser Zeile wird die Webseite an die Breite des Gerätes angepasst. So erscheint sie auch auf dem Smartphone korrekt
	onRequest(clientIP, state, params): diese Callbackfunktion wird aufgerufen, wenn der Benutzer die IP-Adresse des Servers wählt
	server = HTTPServer(requestHandler = onRequest, port = 81): die Callbackfunktion wird registriert

Beispiel 2: Roboter mit Smartphone steuern
In diesem einfachen Beispiel stehen für die Steuerung nur zwei Befehle zur Verfügung. Mit dem ersten Link wird der Roboter in die Vorwärtsbewegung versetzt, mit Klick auf den zweiten Link wird er gestoppt. Im Browser, der auf einem Smartphone gestartet wird, gibt man, wie im Beispiel 1, die IP-Adresse des EV3, ergänzt mit":81".

Mit wenig Aufwand können Sie das Programm mit den Befehlen "backward", "left" und "right" ergänzen und eine vollständige Steuerung programmieren (siehe Aufgabe 1).

#Ro16b.py 

from ev3robot import *
from time import sleep

html = """
<!DOCTYPE html>
<html>
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
  <body> 
  <h2>WebRobot</h2> 
     <p>Press to change the state:</p>
     <p><a href="forward">forward</a></p>
     <p><a href="stop">stop</a></p>
  </body> 
</html>
"""

def onRequest(clientIP, state, params):
    if state == "/forward":
        gear.forward()
    elif state == "/stop":
        gear.stop()
    return html

robot = LegoRobot()
gear = Gear()
robot.addPart(gear)
gear.setSpeed(30)
server = HTTPServer(requestHandler = onRequest, port = 81)

while not robot.isEscapeHit():
    sleep(1)  
server.terminate()
robot.exit()

Programmcode markieren (Ctrl+C kopieren)

Erklärungen zum Programmcode:

while not robot.isEscapeHit(): mit Drücken der ESCAPE-Taste auf dem EV3 oder durch Schliessen des Terminalfensters wird die Verbindung zum Server unterbrochen und das Programm beendet. sleep(1) bewirkt, dass die while-Schleife nur einmal pro Sekunde aktualisiert wird

Beispiel 3: Webseite mit Buttons
Mit Buttons wird die Webseite benutzerfreundlicher dargestellt. In diesem einfachen Beispiel stehen wieder nur zwei Befehle zur Steuerung zur Verfügung.

Mit wenig Aufwand können Sie das Programm mit den Buttons "backward", "left" und "right" ergänzen und eine vollständige Steuerung programmieren (siehe Aufgaben 2 und 3).

#Ro16c.py 

from ev3robot import *
from time import sleep

html = """
<!DOCTYPE html>
<html>
  <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
  <body> 
  <h2>WebRobot</h2> 
    <form method="get">
       <p><input type="submit" style="font-size:18px; height:40px; 
           width:110px" name="btn" value="forward"/>&nbsp;
        <input type="submit" style="font-size:18px; height:40px;
           width:110px" name="btn" value="stop"/></p>         
    </form>
  </body> 
</html>
"""

def onRequest(clientIP, state, params):    
    if "btn" in params:
        state = params["btn"]
        if state == "forward":
            gear.forward()         
        elif state == "stop":
            gear.stop()
    return html

robot = LegoRobot()
gear = Gear()
robot.addPart(gear)
gear.setSpeed(30)
state = "stop"
server = HTTPServer(requestHandler = onRequest, port = 81)

while not robot.isEscapeHit():
    sleep(1)  
server.terminate()
robot.exit()

Programmcode markieren (Ctrl+C kopieren)

Erklärungen zum Programmcode:

	if "btn" in params : das Drücken des Buttons wird in der Callbackfunktion über die Parameterliste params registriert
	state = params["btn"]: der Wert des Parameters btn wird in der Variablen state, die zu beginn den Wert "stop" hat, gespeichert

Aufgaben: Serie 16

Ergänze das Programm im Beispiel 2 mit den Links "backward", "left" und "right". Mit Klick auf den Link "left" soll sich der Robiter auf einem Linksbogen mit dem Radius 0.1 , mit Klick auf den Link "right" auf einem Rechtsbogen mit dem Radius 0.1 bewegen.

Ergänze das Programm im Beispiel 3 mit den Schaltflächen "backward", "left" und "ight". Bei der Links- bzw. Rechtsdrehung soll sich der Roboter auf einem Links- bzw. Rechtsbogen mit dem Radius 0.1 bewegen. Passe die Geschwindigkeit an, so dass sich der Roboter mit einem Smartphone leicht steuern lässt.

Mit der Anordnung der Buttons in einer Tabelle, kannst du eine elegantere Benutzeroberfläche erstellen. Informiere dich im Internet oder in der Kurzanleitung HTML, wie man im HTML Elemente in einer Tabelle anordnen kann.

*Fachlicher Hinweis:

Ein Netzwerkport ist ein Teil einer Netzwerkadresse. Mit seiner Hilfe wird dem Datenpaket die richtige Anwendung zugeordnet. Die Standardportnummer für http ist Port 80. Diese muss nicht explizit angegeben werden. Da beim EV3 bereits der Programmdownload vom Entwicklungscomputer zum EV3 über den Port 80 läuft, wird hier für die Server-Client-Kommunikation der Port 81 verwendet.