ESP32 – Steuert Servomotor über das Web
Dieses Tutorial zeigt dir, wie du den ESP32 verwendest, um einen Servomotor über das Web von einem Browser auf deinem Smartphone oder PC aus zu steuern. Wir verwenden WebSocket, um den Servomotor über eine grafische Web-Benutzeroberfläche sanft und dynamisch zu steuern.
Das untenstehende Video ist eine Demonstration:
Nun, warum WebSocket verwenden? Hier ist die Idee:
- Ohne WebSocket musst du jedes Mal, wenn du den Winkel des Servos ändern möchtest, die Seite neu laden. Nicht so gut!
- Aber mit WebSocket richten wir eine spezielle Verbindung zwischen der Webseite und dem ESP32 ein. Das bedeutet, wir können den Winkelwert im Hintergrund an den ESP32 senden, ohne die Seite neu zu laden. Das Servo bewegt sich flüssig und in Echtzeit. Ziemlich cool, oder?
Lass uns anfangen!
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (30 Sensoren/Displays) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Über Servomotor und WebSocket
Wir haben spezielle Tutorials zu Servomotoren und WebSocket. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Pinbelegung, zum Funktionsprinzip, zur Verkabelung mit dem ESP32 und zum ESP32-Code... Erfahren Sie mehr darüber in den folgenden Links:
- ESP32 - Servo Motor tutorial
- ESP32 - WebSocket tutorial
Wie es funktioniert
Der ESP32-Code erstellt sowohl einen Webserver als auch einen WebSocket-Server. So funktioniert es:
- Wenn Sie die IP-Adresse des ESP32 in einen Webbrowser eingeben, fordert der ESP32 die Webseite (Benutzeroberfläche) vom ESP32 an.
- Der Webserver des ESP32 antwortet, indem er den Inhalt der Webseite (HTML, CSS, JavaScript) sendet.
- Ihr Webbrowser zeigt dann die Webseite an.
- Der JavaScript-Code in der Webseite stellt eine WebSocket-Verbindung zum WebSocket-Server auf dem ESP32 her.
- Sobald diese WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code, wenn Sie den Regler auf der Webseite drehen, den Winkelwert über diese WebSocket-Verbindung im Hintergrund an den ESP32.
- Der WebSocket-Server auf dem ESP32 steuert den Servomotor entsprechend dem empfangenen Winkelwert.
Kurz gesagt ermöglicht die WebSocket-Verbindung die nahtlose Echtzeitsteuerung des Servomotorwinkels.
Verdrahtungsdiagramm zwischen Servomotor und ESP32
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.
Aus Gründen der Einfachheit wird das oben gezeigte Verdrahtungsdiagramm zu Test- oder Lernzwecken sowie für einen Servomotor mit geringem Drehmoment verwendet. In der Praxis empfehlen wir dringend die Verwendung einer externen Stromversorgung für den Servomotor. Das unten gezeigte Verdrahtungsdiagramm zeigt, wie der Servomotor an eine externe Stromquelle angeschlossen wird.
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Nachstehend wird eine echte Verdrahtung zwischen Servomotor und ESP32 gezeigt.
ESP32-Code
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Daher werden wir zwei Code-Dateien in der Arduino-IDE haben:
- Eine .ino-Datei, die ESP32-Code enthält und einen Webserver sowie einen WebSocket-Server erstellt und einen Servo-Motor steuert
- Eine .h-Datei, die den Webseiteninhalt enthält
Schnelle Schritte
- Wenn Sie ESP32 zum ersten Mal verwenden, sehen Sie sich an, wie Sie die Umgebung für ESP32 in der Arduino IDE einrichten wie man die Umgebung für ESP32 in der Arduino IDE einrichtet.
- Schließen Sie die Verkabelung wie im obigen Bild an.
- Schließen Sie das ESP32-Board über ein Micro-USB-Kabel an Ihren PC an.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige ESP32-Board (z. B. ESP32 Dev Module) und den COM-Port aus.
- Öffnen Sie den Library Manager-Bereich, indem Sie auf das Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “ESPAsyncWebServer”, und finden Sie den von lacamera erstellten ESPAsyncWebServer.
- Klicken Sie auf die Schaltfläche Install, um die ESPAsyncWebServer-Bibliothek zu installieren.
- Sie werden aufgefordert, die Abhängigkeit zu installieren. Klicken Sie auf die Schaltfläche Alle installieren.
- Suche “WebSockets”, und finde anschließend die von Markus Sattler erstellte WebSockets-Bibliothek.
- Klicke auf die Schaltfläche Installieren, um die WebSockets-Bibliothek zu installieren.
- Geben Sie ServoESP32 in das Suchfeld ein, dann suchen Sie nach der Servo-Bibliothek von Jaroslav Paral. Bitte beachten Sie, dass sowohl Version 1.1.1 als auch 1.1.0 von Fehlern betroffen sind. Bitte wählen Sie eine andere Version.
- Klicken Sie auf die Schaltfläche Install, um die Servo-Motor-Bibliothek für den ESP32 zu installieren.
- In der Arduino-IDE erstelle eine neue Skizze, gib ihr einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino-IDE
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define SERVO_PIN 26 // ESP32 pin GPIO26 connected to servo motor
Servo servo;
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
AsyncWebServer server(80);
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocket server on port 81
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
//Serial.printf("[%u] Received text: %s\n", num, payload);
String angle = String((char*)payload);
int angle_value = angle.toInt();
Serial.println(angle_value);
servo.write(angle_value);
break;
}
}
void setup() {
Serial.begin(9600);
servo.attach(SERVO_PIN); // attaches the servo on ESP32 pin
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, [](AsyncWebServerRequest* request) {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
request->send(200, "text/html", html);
});
server.begin();
Serial.print("ESP32 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
webSocket.loop();
}
- Ändern Sie die WLAN-Informationen (SSID und Passwort) im Code, damit sie zu Ihren eigenen Netzwerkanmeldeinformationen passen.
- Erstellen Sie die Datei index.h in der Arduino-IDE durch:
- Entweder klicken Sie auf den Button direkt unter dem Symbol des Serial Monitors und wählen Sie Neuer Tab, oder verwenden Sie die Tasten Ctrl+Shift+N.
- Gib den Dateinamen index.h ein und klicke auf die OK Schaltfläche
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
- Jetzt hast du den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicke auf die Upload-Schaltfläche in der Arduino-IDE, um den Code auf den ESP32 hochzuladen
- Öffne den Serial Monitor
- Schau dir das Ergebnis im Serial Monitor an.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adresszeile eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die folgende Webseite wie unten dargestellt:
- Der JavaScript-Code der Webseite erstellt automatisch die WebSocket-Verbindung zum ESP32.
- Jetzt können Sie den Winkel des Servomotors über die Weboberfläche steuern.
- Wenn Sie den HTML-Inhalt in der index.h-Datei ändern und nichts in der newbiely.com.ino-Datei ändern, wird beim Kompilieren und Hochladen des Codes auf ESP32 die Arduino IDE den HTML-Inhalt nicht aktualisieren.
- Um in diesem Fall sicherzustellen, dass die Arduino IDE den HTML-Inhalt aktualisiert, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen ....)
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Controls Servo Motor via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align: center; }
canvas { background-color: #ffffff; }
</style>
<script>
var canvas_width = 401, canvas_height = 466;
var pivot_x = 200, pivot_y = 200;
var bracket_radius = 160, bracket_angle = 0;
var bracket_img = new Image();
var click_state = 0;
var last_angle = 0;
var mouse_xyra = {x:0, y:0, r:0.0, a:0.0};
var ws;
bracket_img.src = "https://esp32io.com/images/tutorial/servo-bracket.png";
function init()
{
var servo = document.getElementById("servo");
servo.width = canvas_width;
servo.height = canvas_height;
servo.style.backgroundImage = "url('https://esp32io.com/images/tutorial/servo-body.png')";
servo.style.backgroundPosition = "center";
servo.style.backgroundSize = "contain";
servo.addEventListener("touchstart", mouse_down);
servo.addEventListener("touchend", mouse_up);
servo.addEventListener("touchmove", mouse_move);
servo.addEventListener("mousedown", mouse_down);
servo.addEventListener("mouseup", mouse_up);
servo.addEventListener("mousemove", mouse_move);
var ctx = servo.getContext("2d");
ctx.translate(pivot_x, pivot_y);
rotate_bracket(0);
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "CONNECTED" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
ws.onmessage = ws_onmessage;
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function rotate_bracket(angle)
{
var servo = document.getElementById("servo");
var ctx = servo.getContext("2d");
ctx.clearRect(-pivot_x, -pivot_y, canvas_width, canvas_height);
ctx.rotate(angle / 180 * Math.PI);
ctx.drawImage(bracket_img, -pivot_x, -pivot_y);
ctx.rotate(-angle / 180 * Math.PI);
}
function check_range_xyra(event, mouse_xyra)
{
var x, y, r, a, rc_x, rc_y, radian;
var min_r, max_r, width;
if(event.touches)
{
var touches = event.touches;
x = (touches[0].pageX - touches[0].target.offsetLeft) - pivot_x;
y = pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
min_r = 60;
max_r = pivot_x;
width = 40;
}
else
{
x = event.offsetX - pivot_x;
y = pivot_y - event.offsetY;
min_r = 60;
max_r = bracket_radius;
width = 20;
}
/* cartesian to polar coordinate conversion */
r = Math.sqrt(x * x + y * y);
a = Math.atan2(y, x);
mouse_xyra.x = x;
mouse_xyra.y = y;
mouse_xyra.r = r;
mouse_xyra.a = a;
radian = bracket_angle / 180 * Math.PI;
/* rotate coordinate */
rc_x = x * Math.cos(radian) - y * Math.sin(radian);
rc_y = x * Math.sin(radian) + y * Math.cos(radian);
if((r < min_r) || (r > max_r))
return false;
if((rc_y < -width) || (rc_y > width))
return false;
return true;
}
function mouse_down()
{
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(check_range_xyra(event, mouse_xyra))
{
click_state = 1;
last_angle = mouse_xyra.a / Math.PI * 180.0;
}
}
function mouse_up()
{
click_state = 0;
}
function mouse_move()
{
var angle;
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(!click_state)
return;
if(!check_range_xyra(event, mouse_xyra))
{
click_state = 0;
return;
}
angle = mouse_xyra.a / Math.PI * 180.0;
if((Math.abs(angle) > 90) && (angle * last_angle < 0))
{
if(last_angle > 0)
last_angle = -180;
else
last_angle = 180;
}
bracket_angle += (last_angle - angle);
last_angle = angle;
if(bracket_angle > 90)
bracket_angle = 90;
if(bracket_angle < -90)
bracket_angle = -90;
rotate_bracket(bracket_angle);
if(ws.readyState == 1)
ws.send(Math.floor(90 - bracket_angle) + "\r\n");
debug = document.getElementById("debug");
debug.innerHTML = Math.floor(90 - bracket_angle);
event.preventDefault();
}
window.onload = init;
</script>
</head>
<body>
<h2>
ESP32 - Servo Motor via Web<br>
<canvas id="servo"></canvas>
<p>
WebSocket : <span id="ws_state" style="color:blue">null</span><br>
Angle : <span id="debug" style="color:blue">90</span>
</p>
</h2>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
Um den Speicher des ESP32 zu schonen, werden die Bilder des Servomotors NICHT im ESP32 gespeichert. Stattdessen werden sie im Internet gespeichert, daher muss Ihr Telefon oder PC eine Internetverbindung haben, um die Bilder für die Websteuerungsseite zu laden.
※ Notiz:
Zeile für Zeile Code-Erklärung
Der obige ESP32-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!