ESP8266 - Steuert einen Servomotor über das Web
Dieses Tutorial erklärt Ihnen, wie Sie den ESP8266 verwenden, um einen Servomotor über das Web von einem Browser auf Ihrem Smartphone oder PC aus zu steuern. Wir verwenden WebSocket, um den Servomotor reibungslos 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 ESP8266 ein. Das bedeutet, wir können den Winkelwert im Hintergrund an den ESP8266 senden, ohne die Seite neu zu laden. Dadurch bewegt sich der Servo flüssig und in Echtzeit. Ziemlich 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 spezielle Tutorials zu Servomotoren und WebSocket. Jedes Tutorial enthält detaillierte Informationen und Schritt-für-Schritt-Anleitungen zur Hardware-Pinbelegung, zur Funktionsweise, zur Verkabelung des ESP8266, zum ESP8266-Code... Erfahren Sie mehr darüber unter den folgenden Links:
- ESP8266 - Servo Motor tutorial
- ESP8266 - WebSocket tutorial
Wie es funktioniert
Der ESP8266-Code erstellt sowohl einen Webserver als auch einen WebSocket-Server. So funktioniert es:
- Wenn Sie die IP-Adresse des ESP8266 in einem Webbrowser eingeben, fordert er die Webseite (Benutzeroberfläche) vom ESP8266 an.
- Der Webserver des ESP8266 antwortet, indem er den Inhalt der Webseite (HTML, CSS, JavaScript) sendet.
- Ihr Webbrowser zeigt dann die Webseite an.
- Der JavaScript-Code innerhalb der Webseite baut eine WebSocket-Verbindung zum WebSocket-Server auf dem ESP8266 auf.
- Sobald diese WebSocket-Verbindung hergestellt ist, sendet der JavaScript-Code, wenn Sie den Regler auf der Webseite betätigen, den Winkelwert über diese WebSocket-Verbindung im Hintergrund an den ESP8266.
- Der WebSocket-Server auf dem ESP8266 steuert entsprechend dem empfangenen Winkelwert den Servo-Motor.
Kurz gesagt ermöglicht die WebSocket-Verbindung die reibungslose Echtzeitsteuerung des Winkels des Servomotors.
Schaltplan zwischen Servomotor und ESP8266
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Weitere Informationen finden Sie unter ESP8266-Pinbelegung und wie man ESP8266 und andere Komponenten mit Strom versorgt.
Der Einfachheit halber wird das oben gezeigte Verdrahtungsdiagramm für Test- oder Lernzwecke sowie für Servomotoren 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.
ESP8266-Quellcode
Der Inhalt der Webseite (HTML, CSS und JavaScript) wird separat in einer index.h-Datei gespeichert. Daher werden wir zwei Code-Dateien in der Arduino IDE haben:
- Eine .ino-Datei, die ESP8266-Code enthält und einen Webserver sowie WebSocket-Server erstellt und einen Servomotor steuert
- Eine .h-Datei, die den Inhalt der Webseite enthält
Schnelle Schritte
Um mit dem ESP8266 in der Arduino-IDE zu beginnen, folgen Sie diesen Schritten:
- Schauen Sie sich das Tutorial So richten Sie die ESP8266-Umgebung in der Arduino-IDE ein an, falls dies Ihr erster Einsatz mit ESP8266 ist.
- Verbinden Sie die Komponenten, wie im Diagramm gezeigt.
- Schließen Sie das ESP8266-Board über ein USB-Kabel an Ihren Computer an.
- Öffnen Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das richtige ESP8266-Board aus, zum Beispiel (z. B. NodeMCU 1.0 (ESP-12E-Modul)), und den entsprechenden COM-Port.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Bibliotheks-Manager-Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie “WebSockets”, und finden Sie anschließend die von Markus Sattler erstellte WebSockets-Bibliothek.
- Klicken Sie auf die Schaltfläche Installieren, um die WebSockets-Bibliothek zu installieren.
- In der Arduino-IDE erstelle ein neues Sketch, gib ihm einen Namen, zum Beispiel newbiely.com.ino
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino-IDE
/*
* Dieser ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WebSocketsServer.h>
#include "index.h"
#define SERVO_PIN D7 // The ESP8266 pin D7 connected to servo motor
Servo servo;
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 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 ESP8266 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, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the index.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
webSocket.loop();
}
- Erstellen Sie die index.h Datei in der Arduino IDE durch:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des Seriellen Monitors und wählen Neue Registerkarte, oder verwenden Sie Ctrl+Shift+N Tastenkombinationen.
- Geben Sie den Dateinamen index.h ein und klicken Sie auf die OK-Schaltfläche.
- Kopieren Sie den untenstehenden Code und fügen Sie ihn in die index.h ein.
- Jetzt haben Sie den Code in zwei Dateien: newbiely.com.ino und index.h
- Klicken Sie auf die Hochladen-Schaltfläche in der Arduino-IDE, um den Code auf den ESP8266 hochzuladen.
- Öffnen Sie den Seriellen Monitor.
- Überprüfen Sie das Ergebnis im Seriellen Monitor.
- 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 ESP8266.
- 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 dabei nichts in der newbiely.com.ino-Datei berühren, wird beim Kompilieren und Hochladen des Codes auf den ESP8266 der HTML-Inhalt 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 ESP8266 NodeMCU Code wurde von newbiely.de entwickelt
* Dieser ESP8266 NodeMCU 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/esp8266/esp8266-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 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>
ESP8266 - 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
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
Um den Speicher des ESP8266 zu schonen, werden die Bilder des Servomotors NICHT im ESP8266 gespeichert. Stattdessen befinden sie sich im Internet, daher benötigen Ihr Telefon oder Ihr PC eine Internetverbindung, um die Bilder für die Websteuerungsseite zu laden.
※ Notiz:
Zeile für Zeile Code-Erklärung
Der obige ESP8266-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!