Arduino – Steuert Servomotor über das Web
Dieses Tutorial zeigt Ihnen, wie Sie einen Arduino verwenden, um einen Servo-Motor von einem Webbrowser auf Ihrem Smartphone oder PC aus zu steuern. Wir verwenden WebSocket-Technologie, um eine reibungslose und dynamische Steuerung des Servo-Motors über eine grafische Web-Benutzeroberfläche zu ermöglichen.
Nun, warum sollten wir WebSocket verwenden? Hier ist der Grund:
- Ohne WebSocket müssten Sie jedes Mal, wenn Sie den Winkel des Servos einstellen müssen, die Webseite aktualisieren. Das ist nicht ideal.
- Mit WebSocket hingegen etablieren wir eine dedizierte Verbindung zwischen der Webseite und dem Arduino. Dieses Setup ermöglicht es uns, den Winkelwert im Hintergrund an den Arduino zu übertragen, ohne die Seite neu laden zu müssen. Dadurch läuft der Servo reibungslos und reagiert in Echtzeit. Ziemlich beeindruckend, oder?
Lass uns anfangen!
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables STEM V4 IoT Starter-Kit (Arduino 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 Hardware-Pinbelegung, zum Funktionsprinzip, zur Verdrahtung am Arduino, zum Arduino-Code... Erfahren Sie mehr darüber in den folgenden Links:
- Arduino - Servo Motor tutorial
- Arduino - WebSocket tutorial
Wie es funktioniert
Der Arduino-Code richtet sowohl einen Webserver als auch einen WebSocket-Server ein. Hier ist der Schritt-für-Schritt-Prozess:
- Wenn Sie die IP-Adresse des Arduino in einen Webbrowser eingeben, sendet der Arduino eine Anfrage für die Webseite (Benutzeroberfläche), die auf dem Arduino gehostet wird.
- Der Webserver des Arduino antwortet, indem er den Inhalt der Webseite (HTML, CSS, JavaScript) zurücksendet.
- Ihr Webbrowser zeigt dann die Webseite an.
- Der in der Webseite eingebettete JavaScript-Code initiiert eine WebSocket-Verbindung zum WebSocket-Server auf dem Arduino.
- Sobald die WebSocket-Verbindung aktiv ist, überträgt der JavaScript-Code im Hintergrund den Winkelwert an den Arduino über diese WebSocket-Verbindung, falls Sie den Regler auf der Webseite einstellen.
- Der WebSocket-Server auf dem Arduino passt den Servomotor entsprechend an, sobald er diesen Winkelwert empfängt.
Im Wesentlichen ermöglicht die WebSocket-Verbindung eine nahtlose Echtzeitsteuerung des Winkels des Servomotors.
Schaltplan zwischen Servomotor und Arduino
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Aus Gründen der Einfachheit wird das obige Verdrahtungsdiagramm für Test- oder Lernzwecke verwendet und auch für Servomotoren mit geringem Drehmoment. 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.
Arduino-Quellcode
Der Inhalt der Webseite (HTML, CSS, JavaScript) wird separat in einer index.h-Datei gespeichert. Also werden wir zwei Code-Dateien in der Arduino IDE haben:
- Eine .ino-Datei, die Arduino-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
- Wenn Sie Arduino Uno R4 zum ersten Mal verwenden, sehen Sie Wie richtet man die Umgebung für Arduino Uno R4 in der Arduino IDE ein.
- Verbinden Sie die Verkabelung wie im obigen Bild.
- Verbinden Sie das Arduino-Board über ein Micro-USB-Kabel mit Ihrem PC.
- Öffnen Sie die Arduino IDE auf Ihrem PC.
- Wählen Sie das richtige Arduino-Board (z. B. Arduino Uno R4 WiFi) und den COM-Port aus.
- Öffnen Sie den Bibliotheks-Manager, indem Sie auf das Symbol in der linken Navigationsleiste der Arduino IDE klicken.
- Suchen Sie nach Web Server for Arduino Uno R4 WiFi und finden Sie die von DIYables erstellte Web-Server-Bibliothek.
- Klicken Sie auf die Schaltfläche Installieren, um die Web-Server-Bibliothek zu installieren.
- In der Arduino-IDE erstelle eine neue Skizze, gib ihr einen Namen, zum Beispiel ArduinoGetStarted.com.ino
- Kopiere den untenstehenden Code und öffne ihn mit der Arduino-IDE
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
#define SERVO_PIN 9 // Arduino pin 9 connected to servo motor
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
Servo servo;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
}
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();
servo.write(angle_value);
Serial.print(F("Rotate Servo Motor to "));
Serial.println(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 Arduino pin
Serial.println("Arduino Uno R4 WiFi - WebSocket Server controls Servo Motor");
// 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() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
- Ändern Sie die WiFi-Informationen (SSID und Passwort) im Code, damit sie zu Ihren eigenen Netzwerkanmeldeinformationen passen.
- Erstellen Sie die index.h-Datei in der Arduino-IDE, indem Sie:
- Entweder klicken Sie auf die Schaltfläche direkt unter dem Symbol des seriellen Monitors und wählen New Tab, oder verwenden Sie die Tastenkombination Ctrl+Shift+N.
- 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: ArduinoGetStarted.com.ino und index.h
- Klicken Sie auf die Hochladen-Schaltfläche in der Arduino IDE, um den Code auf Arduino hochzuladen.
- Öffnen Sie den Seriellen Monitor.
- Sehen Sie sich das Ergebnis im Seriellen 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 Webseite wie unten dargestellt.
- Der JavaScript-Code der Webseite erstellt automatisch die WebSocket-Verbindung zum Arduino.
- Jetzt können Sie den Winkel des Servomotors steuern, indem Sie den Griff des Motors in der Weboberfläche drehen.
- Überprüfen Sie das Ergebnis im Serial Monitor; Sie werden außerdem die Winkelwerte aus dem Web sehen.
- Wenn Sie den HTML-Inhalt in der index.h ändern und nichts in der ArduinoGetStarted.com.ino-Datei berühren, wird die Arduino IDE beim Kompilieren und Hochladen des Codes auf Arduino den HTML-Inhalt nicht aktualisieren.
- Um in diesem Fall den HTML-Inhalt der Arduino IDE zu aktualisieren, nehmen Sie eine Änderung in der ArduinoGetStarted.com.ino-Datei vor (z. B. eine leere Zeile hinzufügen, einen Kommentar hinzufügen....)
/*
* Dieser Arduino Code wurde von newbiely.de entwickelt
* Dieser Arduino 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/arduino-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino 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 - 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
Arduino Uno R4 WiFi - WebSocket Server controls Servo Motor
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
COM6
WebSocket server enabled successfully
WebSocket client connected from: 192.168.0.7
New WebSocket connection
Rotate Servo Motor to 90
Rotate Servo Motor to 89
Rotate Servo Motor to 88
Rotate Servo Motor to 87
Autoscroll
Clear output
9600 baud
Newline
Um den Speicher des Arduinos zu schonen, werden die Bilder des Servomotors nicht auf dem Arduino gespeichert. Stattdessen werden sie im Internet gespeichert, daher benötigt Ihr Telefon oder PC eine Internetverbindung, um die Bilder für die Web-Steuerungsseite zu laden.
※ Notiz:
Zeilenweise Code-Erklärung
Der obige Arduino-Code enthält eine zeilenweise Erklärung. Bitte lesen Sie die Kommentare im Code!