Arduino Nano ESP32 – Steuert Servomotor über das Web
Dieses Tutorial zeigt Ihnen, wie Sie den Arduino Nano ESP32 verwenden, um einen Servomotor über das Web von einem Browser auf Ihrem Smartphone oder PC aus zu steuern. Wir verwenden etwas namens WebSocket, um den Servomotor sanft und dynamisch über eine grafische Web-Benutzeroberfläche zu steuern.
Nun, warum WebSocket verwenden? Hier ist die Idee:
- Ohne WebSocket musst du jedes Mal, wenn du den Winkel des Servos ändern willst, die Seite neu laden. Nicht so gut!
- Aber mit WebSocket richten wir eine spezielle Verbindung zwischen der Webseite und dem Arduino Nano ESP32 ein. Das bedeutet, dass wir den Winkelwert im Hintergrund an den Arduino Nano ESP32 senden können, ohne die Seite neu zu laden. Das Servo bewegt sich flüssig und in Echtzeit. Ganz schön cool, oder?
Lass uns anfangen!
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 spezifische Tutorials zu Servomotoren und WebSocket. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Hardware-Pinbelegung, dem Funktionsprinzip, der Verdrahtung zum ESP32, dem Arduino Nano ESP32-Code... Erfahren Sie mehr darüber in den folgenden Links:
- Arduino Nano ESP32 - Servo Motor tutorial
- Arduino Nano ESP32 - WebSocket tutorial
Wie es funktioniert
Der Arduino Nano ESP32-Code erstellt sowohl einen Webserver als auch einen WebSocket-Server. So funktioniert es:
- Wenn Sie die IP-Adresse des ESP32 in einem Webbrowser eingeben, fordert der ESP32 die Webseite (Benutzeroberfläche) vom Arduino Nano 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 auf der Webseite stellt eine WebSocket-Verbindung zum WebSocket-Server auf dem Arduino Nano ESP32 her.
- Sobald diese WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code den Winkelwert über diese WebSocket-Verbindung im Hintergrund an den Arduino Nano ESP32, wenn Sie den Regler auf der Webseite drehen.
- Der WebSocket-Server auf dem ESP32 steuert entsprechend dem empfangenen Winkelwert den Servomotor.
Kurz gesagt ermöglicht die WebSocket-Verbindung eine nahtlose Echtzeitsteuerung des Winkels des Servomotors.
Verdrahtungsdiagramm zwischen Servomotor und Arduino Nano ESP32
- Beim Betrieb des Arduino Nano ESP32-Boards über den USB-Anschluss.
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
- Beim Betrieb des Arduino Nano ESP32-Boards über den VIN-Pin.
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
※ Notiz:
Wenn das Arduino Nano ESP32-Board über den USB-Anschluss mit Strom versorgt wird, sollte der Servo-Motor nicht über den Vin- bzw. den VBUS-Pin mit Strom versorgt werden. Wenn Sie den Servo-Motor über diesen Pin mit Strom versorgen, kann Ihr Board beschädigt werden.
Arduino Nano 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 Arduino Nano ESP32-Code enthält, der einen Webserver und WebSocket-Server erstellt und einen Servomotor steuert.
- Eine .h-Datei, die den Inhalt der Webseite enthält.
Schnelle Schritte
Um mit dem Arduino Nano ESP32 zu beginnen, befolgen Sie diese Schritte:
- Wenn Sie neu bei Arduino Nano ESP32 sind, lesen Sie das Tutorial wie man die Umgebung für Arduino Nano ESP32 in der Arduino IDE einrichtet.
- Verbinden Sie die Bauteile gemäß dem bereitgestellten Diagramm.
- Schließen Sie das Arduino Nano ESP32-Board mit einem USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das Arduino Nano ESP32-Board und den entsprechenden COM-Port aus.
- Öffnen Sie den Library Manager, indem Sie auf das Library Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “DIYables ESP32 WebServer”, und finden Sie dann den DIYables ESP32 WebServer, der von DIYables erstellt wurde.
- Klicken Sie auf die Install-Schaltfläche, um die DIYables ESP32 WebServer-Bibliothek zu installieren.
- Geben Sie ESP32Servo in das Suchfeld ein, suchen Sie anschließend nach der Servo-Bibliothek von Kevin Harrington,John K. Bennett.
- Klicken Sie auf die Schaltfläche Installieren, um die Servo-Bibliothek für Arduino Nano ESP32 zu installieren.
- In der Arduino-IDE erstelle ein neues Sketch, gib ihm einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den folgenden Code und öffne ihn mit der Arduino-IDE
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-controls-servo-motor-via-web
*/
#include <ESP32Servo.h>
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
#define SERVO_PIN D2 // The Arduino Nano ESP32 pin connected to servo motor
Servo servo;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
DIYables_ESP32_WebSocket* webSocket;
// Web Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// HTML_CONTENT from the index.h file
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
// Send welcome message
const char welcome[] = "Connected to ESP32 WebSocket Server!";
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
String angle = String(message);
int angle_value = angle.toInt();
Serial.println(angle_value);
servo.write(angle_value);
}
void onWebSocketClose(net::WebSocket& ws, const net::WebSocket::CloseCode code, const char* reason, uint16_t length) {
Serial.println("WebSocket client disconnected");
}
void setup() {
Serial.begin(9600);
delay(1000);
servo.attach(SERVO_PIN); // attaches the servo on ESP32 pin
Serial.println("Arduino Nano ESP32 Web Server and WebSocket Server");
// Configure web server routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
// Enable WebSocket functionality
webSocket = server.enableWebSocket(81);
if (webSocket != nullptr) {
// Set up WebSocket event handlers
webSocket->onOpen(onWebSocketOpen);
webSocket->onMessage(onWebSocketMessage);
webSocket->onClose(onWebSocketClose);
} else {
Serial.println("Failed to start WebSocket server");
}
}
void loop() {
// Then handle HTTP requests
server.handleClient();
// Handle WebSocket
server.handleWebSocket();
}
- Erstelle die index.h-Datei in der Arduino IDE, indem du:
- Entweder klickst du auf den Button direkt unter dem Symbol des seriellen Monitors und wählst New Tab, oder verwende die Tasten Ctrl+Shift+N.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK Schaltfläche
- Kopieren Sie den folgenden Code und fügen Sie ihn in die index.h ein.
- Nun haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie in der Arduino IDE auf die Schaltfläche Hochladen, um den Code auf den Arduino Nano ESP32 hochzuladen.
- Öffnen Sie den seriellen Monitor.
- Schauen Sie sich das Ergebnis im seriellen Monitor an.
- Notieren Sie sich die angezeigte IP-Adresse und geben Sie diese Adresse in die Adressleiste eines Webbrowsers auf Ihrem Smartphone oder PC ein.
- Sie sehen die Webseite wie unten dargestellt:
- Der JavaScript-Code der Webseite erstellt automatisch die WebSocket-Verbindung zum Arduino Nano ESP32.
- Jetzt können Sie den Winkel des Servomotors über die Weboberfläche steuern.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der newbiely.com.ino-Datei berühren, wird beim Kompilieren und Hochladen des Codes auf den ESP32 der HTML-Inhalt von der Arduino IDE nicht aktualisiert.
- Um die Arduino IDE in diesem Fall dazu zu bringen, den HTML-Inhalt zu aktualisieren, nehmen Sie eine Änderung in der newbiely.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen....)
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano 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>
Arduino Nano 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
Arduino Nano ESP32 Web Server's IP address IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
Um den Speicher des ESP32 zu schonen, werden die Bilder des Servomotors NICHT auf dem Arduino Nano ESP32 gespeichert. Stattdessen werden sie im Internet gespeichert, daher muss Ihr Telefon oder PC eine Internetverbindung haben, um Bilder für die Websteuerungsseite laden zu können.
※ Notiz:
Zeilenweise Code-Erklärung
Der obige Arduino Nano ESP32-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!