ESP32 - Controla un servomotor a través de la web
Este tutorial te enseña cómo usar el ESP32 para controlar un motor servo a través de la web desde un navegador en tu teléfono inteligente o PC. Usaremos algo llamado WebSocket para controlar el motor servo de manera suave y dinámica a través de una interfaz gráfica de usuario web.
El video de abajo es una demostración:
Ahora, ¿por qué usar WebSocket? Aquí está la idea:
- Sin WebSocket, cada vez que quieres cambiar el ángulo del servo, tienes que recargar la página. ¡No es genial!
- Pero con WebSocket, establecemos una conexión especial entre la página web y el ESP32. Esto significa que podemos enviar el valor del ángulo al ESP32 en segundo plano, sin recargar la página. Eso hace que el servo se mueva de forma suave y en tiempo real. ¿No es genial, verdad?
¡Comencemos!
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Acerca del servomotor y WebSocket
Tenemos tutoriales específicos sobre el servomotor y WebSocket. Cada tutorial contiene información detallada e instrucciones paso a paso sobre el pinout de hardware, el principio de funcionamiento, la conexión de cableado al ESP32, el código para ESP32... Obtenga más información sobre ellos en los siguientes enlaces:
- ESP32 - Servo Motor tutorial
- ESP32 - WebSocket tutorial
Cómo funciona
El código del ESP32 crea tanto un servidor web como un servidor WebSocket. Así es como funciona:
- Cuando ingresas la dirección IP del ESP32 en un navegador web, éste solicita la página web (Interfaz de usuario) al ESP32.
- El servidor web del ESP32 responde enviando el contenido de la página web (HTML, CSS, JavaScript).
- Luego tu navegador web muestra la página.
- El código JavaScript dentro de la página establece una conexión WebSocket con el servidor WebSocket en el ESP32.
- Una vez que se establece esta conexión WebSocket, si giras el control en la página, el código JavaScript envía en segundo plano el valor del ángulo al ESP32 a través de esta conexión WebSocket.
- El servidor WebSocket en el ESP32, al recibir el valor del ángulo, controla el servomotor en consecuencia.
En pocas palabras, la conexión WebSocket permite el control suave y en tiempo real del ángulo del servomotor.
Diagrama de cableado entre el servomotor y el ESP32
This image is created using Fritzing. Click to enlarge image
Si no sabe c\u00f3mo alimentar ESP32 y otros componentes, encuentre instrucciones en el siguiente tutorial: C\u00f3mo alimentar ESP32.
Con el fin de simplificar, el diagrama de cableado anterior se utiliza para fines de prueba o aprendizaje, y para servomotores de par pequeño. En la práctica, recomendamos encarecidamente utilizar una fuente de alimentación externa para el servomotor. El diagrama de cableado a continuación muestra cómo conectar el servomotor a una fuente de alimentación externa.
This image is created using Fritzing. Click to enlarge image
A continuación se muestra un cableado real entre el motor servo y el ESP32.
Código ESP32
El contenido de la página web (HTML, CSS, JavaScript) se almacena por separado en un archivo index.h. Por lo tanto, tendremos dos archivos de código en el IDE de Arduino:
- Un archivo .ino con código para ESP32 que crea un servidor web y un servidor WebSocket, y controla un servomotor
- Un archivo .h que contiene el contenido de la página web
Pasos R\u00e1pidos
- Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en Arduino IDE.
- Realiza el cableado como en la imagen de arriba.
- Conecta la placa ESP32 a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa ESP32 correcta (p. ej. ESP32 Dev Module) y el puerto COM.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Administrador de Bibliotecas en la barra de navegación izquierda de Arduino IDE.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server.
- Escribe ESP32Servo en la caja de búsqueda, luego busca la biblioteca de servomotores de Kevin Harrington, John K. Bennett.
- Haz clic en el botón Instalar para instalar la biblioteca de servomotores para ESP32.
- En el IDE de Arduino, crea un nuevo sketch, ponle un nombre, por ejemplo, newbiely.com.ino
- Copia el código de abajo y ábrelo con Arduino IDE
/*
* Este código de ESP32 fue desarrollado por es.newbiely.com
* Este código de ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp32/esp32-controls-servo-motor-via-web
*/
#include <ESP32Servo.h>
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
#define SERVO_PIN 26 // ESP32 pin GPIO26 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("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();
}
- Modifica la información de WiFi (SSID y contraseña) en el código para que coincida con tus credenciales de red.
- Crea el archivo index.h en Arduino IDE mediante:
- Haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa las teclas Ctrl+Shift+N.
- Escribe el nombre del archivo index.h y haz clic en el botón Aceptar.
- Copie el código que se muestra a continuación y péguelo en index.h.
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para cargar el código al ESP32
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestra y escribe esta dirección en la barra de direcciones de un navegador web en tu teléfono móvil o PC.
- Verás la página web como se muestra a continuación:
- El código JavaScript de la página web crea automáticamente la conexión WebSocket con el ESP32.
- Ahora puedes controlar el ángulo del servomotor a través de la interfaz web.
- Si modificas el contenido HTML en la index.h y no tocas nada en el archivo newbiely.com.ino, cuando compiles y cargues el código al ESP32, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, realiza un cambio en el archivo newbiely.com.ino (por ejemplo, añadir una línea en blanco, añadir un comentario...).
/*
* Este código de ESP32 fue desarrollado por es.newbiely.com
* Este código de ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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
Para ahorrar la memoria del ESP32, las imágenes del servomotor no se almacenan en el ESP32. En su lugar, se almacenan en Internet, por lo que tu teléfono o PC deben tener una conexión a Internet para cargar las imágenes de la página de control web.
※ Nota:
Explicación del código línea por línea
El código ESP32 anterior contiene una explicación línea por línea. ¡Por favor lea los comentarios del código!