Remote Control mit ESP32 – Schritt für Schritt Anleitung

by Patrick Arnold 22. Februar 2025· 8 Min. lesen

0 Copy link Share on X Share on Facebook Share on LinkedIn

In der heutigen, vernetzten Welt ist die Möglichkeit, Geräte aus der Ferne zu steuern, von unschätzbarem Wert. Ob in der Heimautomatisierung oder der Industrie, Remote Controls erleichtern die Überwachung und Steuerung von Geräten. Auch im Alltag als Softwareentwickler bringen sie Vorteile.

In diesem Beitrag wird gezeigt, wie sich in nur wenigen Minuten ein Remote Control mit einem ESP32-Entwicklungsboard einrichten lässt. Dafür wird auf dem ESP32 ein Webserver in der Programmiersprache MicroPython implementiert. Anschließend erfolgt das Senden von Kommandos über eine HTML- und eine lokal ausgeführte grafische Benutzeroberfläche (GUI).

Vorteile von Remote Controls

Die Entwicklung eines eigenen Remote-Control-Systems kann langfristig erhebliche Zeiteinsparungen mit sich bringen. Fernbedienungen sind äusserst praktisch und bieten zahlreiche Vorteile. Hier einige der Wichtigsten:

Bequemlichkeit/Zugänglichkeit: Steuerung von Geräten ohne physische Präsenz.
Effizienz: Ermöglicht Benutzern, mehrere Geräte gleichzeitig zu steuern, was Zeit spart und die Nutzung effizienter gestaltet.
Flexibilität: Anpassung von Funktionen und Einstellungen in Echtzeit.

Bei Remote Controls denkt man häufig an, komplexe UI-Systemlandschaften, die mit grossem Entwicklungsaufwand verbunden sind. Dabei lässt sich bereits durch einfache Aufgaben, wie das Schalten einiger GPIOs, eine hohe Funktionalität erreichen. Dies ermöglicht es, trotz geringem Implementationsaufwand, einen erheblichen Nutzen zu erzielen. Mögliche Anwendungsbeispiele dafür sind z.B. die Automatisierung eines Labor Arbeitsplatzes oder eines Testsystems. Ein weiterer spezifischer Vorteil hierbei könnte auch sein, dass am Target selber kein Nutzerinterface wie z.B. Tasten oder Bildschirme nötig sind.

Voraussetzungen zur Umsetzung

Damit die folgenden Beschriebe auch selbst umgesetzt werden können, sind die folgenden Voraussetzungen zu beachten.

Basiswissen MicroPyhton von Vorteil
Um die folgenden Codefragemente zu verstehen, ist ein Basiswissen in der Programmierung mit Python und MicroPython hilfreich. Für Personen, welche noch nie mit MicroPython gearbeitet haben bietet der Blogbeitrag Prototyping mit MicroPython einen guten und allgemeinen Einstieg in das Thema.

ESP32-Entwicklungsboard (ESP-WROOM-32)
Der ESP32 ist ein leistungsstarker und kosteneffizienter Mikrocontroller mit integrierter WiFi- und Bluetooth-Funktionalität. Oft verwendet man diesen auch für IoT-Projekte (Internet of Things). In der folgenden Anleitung kommt ein ESP-WROOM-32 zum Einsatz, auf dem die Entwicklung mit MicroPython erfolgt. Dies erlaubt schnelle Entwicklungszyklen mit intuitiver Syntax und mächtigen High-Level-Funktionen von Python.

Komfortable IDE oder Editor
Eine IDE oder ein guter Editor erleichtern das Entwickeln von jeglichem Code enorm. Für MicroPython eignen sich beispielsweise Mu Editor, VS Code mit Pymakr oder PyCharm. In diesem Beitrag erfolgt die Arbeit mit der Thonny IDE.

MicroPython installieren

Bevor die ersten Codefragmente auf das Entwicklungsboard geladen werden, ist es wichtig, dass MicroPython bereits auf dem ESP32 installiert ist. Falls dies nicht der Fall ist, ist es möglich MicroPython direkt über die Kommandozeile und dem Python-Package «esptool» oder mithilfe einer IDE zu installieren. Die folgenden Abbildungen veranschaulichen die einzelnen Schritte zur Installation von MicroPython mit der Thonny IDE.

Nachdem nun MicroPython erfolgreich auf dem Mikrocontroller installiert ist, stehen alle Voraussetzungen bereit, um die folgenden Anleitungen umzusetzen.

Webserver mit HTML-Benutzeroberfläche

In den folgenden Codeabschnitten entsteht ein einfacher Webserver, der die Steuerung einer LED ermöglicht, die an einem GPIO-Pin des Entwicklungsboards angeschlossen ist. Über die resultierende HTML-Oberfläche lässt sich die LED ein- und ausschalten. Ein grosser Vorteil dieser Methode liegt darin, dass kein Programmcode direkt auf dem Rechner ausgeführt wird, was die Anwendung auch für Benutzer mit wenig Programmierkenntnissen erleichtert.

Bevor der vollständige Code präsentiert wird, erfolgt zunächst eine detaillierte Betrachtung einzelner Codeabschnitte, um deren Funktionalitäten besser zu verstehen. Danach lädt man den Code auf den Mikrocontroller und führt ihn aus.

Webserver

Zusammengefasst richtet der folgende Code eine WLAN-Verbindung ein und bereitet den Mikrocontroller darauf vor, als Webserver zu fungieren, der Anfragen über HTTP empfangen kann. Genauer importiert der Code zuerst alle erforderlichen Bibliotheken. Anschliessend konfiguriert er Pin 5, an dem eine externe LED angeschlossen ist, als Ausgang und schaltet ihn aus. Danach erfolgt die WLAN-Konfiguration. Der Benutzer muss in den Zeilen 14 und 15 die SSID und das Passwort des lokalen WLANs ergänzen. Das ESP32 versucht nun eine Verbindung mit dem lokalen Netzwerk herzustellen. Den Fortschritt dieses Vorgangs zeigt die Applikation in der Konsole an. Nach erfolgreicher Verbindung gibt der Code ausserdem die IP-Adresse des Webservers über die serielle Schnittstelle aus. Schlussendlich wird ein TCP-Socket erstellt, an Port 80 gebunden um eingehende Verbindungen zu akzeptieren.

import network
import time
import machine
import socket

# Init led pin
led = machine.Pin(5,machine.Pin.OUT)
led.off()

# ************************
# Configure the ESP32 wifi

# WLAN configuration
ssid = 'my_wifi_ssid'
password = 'my_wifi_password'

sta = network.WLAN(network.STA_IF)
if not sta.isconnected():
    print('connecting to network...')
    sta.active(True)
    sta.connect(ssid, password)
    while not sta.isconnected():
        pass
    
# Print IP adress of the web server
print('network config:', sta.ifconfig())

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('',80))
s.listen(5)

Webpage

Die Funktion web_page() definiert eine einfache HTML-Benutzeroberfläche zur Steuerung der vorhin konfigurierten LED. Ausserdem fragt der Code den aktuellen Zustand der LED ab und gibt eine entsprechende Nachricht in der Konsole aus. Die Zeilen 10 bis 26 erzeugen eine HTML-Benutzeroberfläche mit dem Titel «ESP32 LED Control». Die Seite enthält zwei Schaltflächen: eine zum Einschalten der LED und eine zum Ausschalten. Zudem zeigt ein Label den aktuellen Zustand der LED an. Am Ende der Funktion wird die generierte HTML-Seite zurückgegeben, sodass sie an den Client (z.B. einen Webbrowser) gesendet werden kann.

# Creating the web page
def web_page():
    if led.value()==1:
        led_state = 'ON'
        print('led is ON')
    elif led.value()==0:
        led_state = 'OFF'
        print('led is OFF')

    html_page = """    
    <html>    
    <head>    
     <meta content="width=device-width, initial-scale=1" name="viewport"></meta>    
    </head>    
    <body>    
     <center><h2>ESP32 LED Control </h2></center>    
     <center>    
      <form>    
      <button name="LED" type="submit" value="on"> LED ON </button>    
      <button name="LED" type="submit" value="off"> LED OFF </button>  
      </form>    
     </center>    
     <center><p>LED is <strong>""" + led_state + """</strong>.</p></center>    
    </body>    
    </html>"""  
    return html_page

Verarbeitung der Kommandos

Der folgende Codeausschnitt implementiert die Hauptschleife des Webservers. In dieser Endlosschleife wartet der Server kontinuierlich mit s.accept() auf eine eingehende Verbindung. Wenn eine Verbindung hergestellt wird, gibt der Server ein Verbindungsobjekt conn und die Adresse des Clients addr zurück. Eine Nachricht über die eingehende Verbindung erscheint in der Konsole. Der Code empfängt bis zu 1024 Bytes an Daten von der Verbindung mit conn.recv(1024) und der empfangene Inhalt wird ebenfalls in der Konsole ausgegeben.

Anschliessend prüft der Code, ob die Anfrage den Text /?LED=on oder /?LED=off enthält und schaltet die LED entsprechend ein oder aus. Danach ruft die Applikation die zuvor betrachtete Funktion web_page() auf, um die aktuelle HTML-Seite zu erstellen. Der Server sendet nun eine HTTP-Antwort mit dem Statuscode 200 (OK) und den entsprechenden Headern, einschliesslich des Inhalts-Typs (HTML). Darauf sendet der Server die generierte HTML-Seite an den Client und schliesst anschliessend die Verbindung mit conn.close(), um die Ressourcen freizugeben.

while True:
    # Socket accept() 
    conn, addr = s.accept()
    print("Got connection from %s" % str(addr))
    
    # Socket receive()
    request=conn.recv(1024)
    print("Content %s" % str(request))

    # Socket send()
    request = str(request)
    led_on = request.find('/?LED=on')
    led_off = request.find('/?LED=off')
    
    if led_on == 6:
        print('LED ON')
        led.value(1)
        
    elif led_off == 6:
        print('LED OFF')
        led.value(0)
        
    response = web_page()
    conn.send('HTTP/1.1 200 OK\n')
    conn.send('Content-Type: text/html\n')
    conn.send('Connection: close\n\n')
    conn.sendall(response)
    
    # Socket close()
    conn.close()

Vollständiger Code

Um das mühselige Zusammenkopieren der einzelnen Codeblöcke zu vermeiden, enthält der folgende Abschnitt den vollständigen Code, der die gesamte Funktionalität auf dem ESP32 bereitstellt.

import network
import time
import machine
import socket

# Init led pin
led = machine.Pin(5,machine.Pin.OUT)
led.off()

# ************************
# Configure the ESP32 wifi

# WLAN configuration
ssid = 'my_wifi_ssid'
password = 'my_wifi_password'

sta = network.WLAN(network.STA_IF)
if not sta.isconnected():
    print('connecting to network...')
    sta.active(True)
    sta.connect(ssid, password)
    while not sta.isconnected():
        pass
    
# Print IP adress of the web server
print('network config:', sta.ifconfig())

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('',80))
s.listen(5)

# Creating the web page
def web_page():
    if led.value()==1:
        led_state = 'ON'
        print('led is ON')
    elif led.value()==0:
        led_state = 'OFF'
        print('led is OFF')

    html_page = """    
    <html>    
    <head>    
     <meta content="width=device-width, initial-scale=1" name="viewport"></meta>    
    </head>    
    <body>    
     <center><h2>ESP32 LED Control </h2></center>    
     <center>    
      <form>    
      <button name="LED" type="submit" value="on"> LED ON </button>    
      <button name="LED" type="submit" value="off"> LED OFF </button>  
      </form>    
     </center>    
     <center><p>LED is <strong>""" + led_state + """</strong>.</p></center>    
    </body>    
    </html>"""  
    return html_page   

while True:
    # Socket accept() 
    conn, addr = s.accept()
    print("Got connection from %s" % str(addr))
    
    # Socket receive()
    request=conn.recv(1024)
    print("Content %s" % str(request))

    # Socket send()
    request = str(request)
    led_on = request.find('/?LED=on')
    led_off = request.find('/?LED=off')
    
    if led_on == 6:
        print('LED ON')
        led.value(1)
        
    elif led_off == 6:
        print('LED OFF')
        led.value(0)
        
    response = web_page()
    conn.send('HTTP/1.1 200 OK\n')
    conn.send('Content-Type: text/html\n')
    conn.send('Connection: close\n\n')
    conn.sendall(response)
    
    # Socket close()
    conn.close()

Code auf ESP32 laden und ausführen

Der MicroPython-Code lässt sich auf unterschiedliche Arten auf den Mikrocontroller laden. Eine einfache und benutzerfreundliche Variante ist es, wenn man dafür eine IDE wie beispielsweise Thonny IDE verwendet. Der folgende Screenshot zeigt die drei nötigen Schritte in der Thonny IDE, um ein Python-File auf das ESP32 zu laden.

Nachdem erfolgreichen Flashen des ESP32, muss dieses noch neu gestartet werden. Ein Reset des Mikrocontrollers ist über die Konsole, indem man Ctrl+D eintippt oder durch das Drücken des Reset-Knopfes auf dem Entwicklungsboard möglich.

Der implementierte Webserver auf dem ESP32 hat nun nach dem Reset automatisch gestartet. Um die HTML-Benutzeroberfläche zu öffnen, muss die IP-Adresse des Webservers, in diesem Fall 192.168.0.33, in die Adresszeile eines Webbrowsers eingefügt werden. Zur Erinnerung, das ESP32 schreibt jeweils beim Startvorgang die IP-Adresse des Webservers auf die serielle Schnittstelle. Die Ausgabe kann beispielsweise mit PuTTY oder direkt über die Shell in der Thonny IDE gelesen werden. Wenn der Benutzer die korrekte IP-Adresse des Webservers im Browser eingibt, erscheint nach kurzer Ladezeit die folgende HTML-Benutzeroberfläche.

Durch das Betätigen der beiden Buttons in der Benutzeroberfläche kann die externe LED nun remote ein- und ausgeschalten werden. Der aktuelle Status der LED erscheint ebenfalls im Fenster.

Webserver mit lokalem GUI

Für die Ansteuerung des Webservers kann der Benutzer anstelle einer HTML-Oberfläche auch eine lokal ausgeführte GUI verwenden. Tkinter, die Standard-GUI-Bibliothek für Python, ermöglicht die einfache Erstellung grafischer Benutzeroberflächen und bietet Plattformunabhängigkeit sowie Flexibilität. Der folgende Codeabschnitt zeigt dieselbe Funktionalität, wie die HTML-Benutzeroberfläche. Durch das Klicken der Buttons „LED ON“ und „LED OFF“ sendet die Anwendung entsprechende GET-Anfragen an die IP-Adresse des ESP32. Der Status der LED erscheint textuell und aktualisiert sich, beim ein- oder ausgeschalten der LED.

Zuerst importiert der Code die benötigten Bibliotheken, darunter tkinter für die GUI und requests für die HTTP-Anfragen. Der Benutzer speichert die IP-Adresse des ESP32 in der Variable ESP_IP, die gegebenenfalls angepasst werden muss. Die Funktionen led_on() und led_off() senden jeweils eine HTTP-GET-Anfrage an den ESP32 und aktualisieren das Label status_label, um den Benutzer über den aktuellen LED-Zustand zu informieren. Aus den Zeilen 14 bis 27 entsteht ein neues Fenster mit dem Titel «ESP32 LED Control» . Dieses enthält die beiden Schaltflächen und das Label zur Anzeige des LED-Zustands. Schlussendlich startet der Code die GUI mit root.mainloop(), um die Interaktion zu ermöglichen.

import tkinter as tk
import requests

# IP-Adress of your ESP32
ESP32_IP = 'http://192.168.0.33'

def led_on():
    requests.get(f'{ESP32_IP}/?LED=on')
    status_label.config(text="LED is ON")
def led_off():
    requests.get(f'{ESP32_IP}/?LED=off')
    status_label.config(text="LED is OFF")

# Configure GUI
root = tk.Tk()
root.title("ESP32 LED Control")

# Configure buttons
on_button = tk.Button(root, text="LED ON", command=led_on)
on_button.grid(row=0, column=0, padx=40, pady=10)

off_button = tk.Button(root, text="LED OFF", command=led_off)
off_button.grid(row=0, column=1, padx=40, pady=10)

# Configure status label
status_label = tk.Label(root, font=('Arial', 12, 'bold'))
status_label.grid(row=1, column=0, columnspan=2, pady=10)

# Start GUI
root.mainloop()

Sobald das Python-Paket «requests» installiert ist, ist es möglich den Python-Code auszuführen. Anschliessend öffnet sich eine einfach gestaltete GUI, die dieselben Funktionen wie die HTML-Benutzeroberfläche bietet. Die folgende Abbildung zeigt die GUI, die aus den vorhergehenden Codezeilen resultiert.

Ausblick

Das Schalten von LEDs bietet ein einfaches Beispiel für die Nutzung einer Remote Control und dient hauptsächlich zur Veranschaulichung. Natürlich ist es möglich eine Remote Control ganz nach den eigenen Bedürfnissen aufzusetzen, etwa durch die Steuerung von Aktoren oder das Auslesen von Sensordaten. Wie in jedem Softwareprojekt, ist der Sicherheitsaspekt nicht zu vernachlässigen. Die Sicherheit der Datenübertragung erfordert besondere Aufmerksamkeit, um unbefugten Zugriff und ähnliche Risiken zu minimieren.

Kommentare