Arduino Nano ESP32 - Controla un servomotor a través de la web
Este tutorial le enseña cómo usar un Arduino Nano ESP32 para controlar un servomotor a través de la web desde un navegador en su teléfono inteligente o PC. Usaremos algo llamado WebSocket para controlar el servomotor de forma suave y dinámica a través de una interfaz gráfica de usuario web.
Ahora, ¿por qué usar WebSocket? Aquí está la idea:
- Sin WebSocket, cada vez que quieres cambiar el ángulo del servomotor, tienes que recargar la página. ¡No es genial!
- Pero con WebSocket, configuramos una conexión especial entre la página web y el Arduino Nano ESP32. Esto significa que podemos enviar el valor del ángulo al Arduino Nano ESP32 en segundo plano, sin recargar la página. Eso hace que el servomotor se mueva de forma suave y en tiempo real. ¿Bastante genial, eh?
¡Empecemos!
Hardware Requerido
Or you can buy the following kits:
| 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 la asignación de pines de hardware, el principio de funcionamiento, la conexión de cableado al ESP32, código para Arduino Nano ESP32... Aprende más sobre ellos en los siguientes enlaces:
- Arduino Nano ESP32 - Servo Motor tutorial
- Arduino Nano ESP32 - WebSocket tutorial
Cómo funciona
El código de Arduino Nano 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) desde el Arduino Nano ESP32.
- El servidor web del ESP32 responde enviando el contenido de la página (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 Arduino Nano ESP32.
- Una vez que se establece esta conexión WebSocket, si mueves el control en la página, el código JavaScript envía discretamente el valor del ángulo al Arduino Nano ESP32 a través de esta conexión WebSocket en segundo plano.
- El servidor WebSocket en el ESP32, al recibir el valor del ángulo, controla el servomotor en consecuencia.
En resumen, la conexión WebSocket permite el control suave y en tiempo real del ángulo del servomotor.
Diagrama de cableado entre un servomotor y el Arduino Nano ESP32
- Al alimentar la placa Arduino Nano ESP32 a través del puerto USB.
This image is created using Fritzing. Click to enlarge image
- Al alimentar la placa Arduino Nano ESP32 a través del pin Vin.
This image is created using Fritzing. Click to enlarge image
※ Nota:
Al alimentar la placa Arduino Nano ESP32 a través del puerto USB, no debe alimentar el servomotor a través de los pines Vin o VBUS. Si alimentas el servomotor a través de alguno de estos pines, tu placa podría quemarse.
Código para Arduino Nano 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 Arduino Nano ESP32 que crea un servidor web y un servidor WebSocket, y controla un motor servo
- Un archivo .h que contiene el contenido de la página web
Pasos R\u00e1pidos
Para empezar con Arduino Nano ESP32, siga estos pasos:
- Si eres nuevo en Arduino Nano ESP32, consulta el tutorial sobre cómo configurar el entorno para Arduino Nano ESP32 en el IDE de Arduino.
- Conecta los componentes de acuerdo con el diagrama proporcionado.
- Conecta la placa Arduino Nano ESP32 a tu ordenador usando un cable USB.
- Abre el IDE de Arduino en tu ordenador.
- Selecciona la placa Arduino Nano ESP32 y su puerto COM correspondiente.
- Abre el Administrador de Bibliotecas haciendo clic en el ícono Administrador de Bibliotecas en la barra de navegación izquierda del IDE de Arduino.
- 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 Servo de Kevin Harrington, John K. Bennett.
- Haz clic en el botón Instalar para instalar la biblioteca de servomotores para Arduino Nano ESP32.
- En el IDE de Arduino, crea un nuevo sketch, ponle un nombre, por ejemplo, newbiely.com.ino
- Copia el código que aparece abajo y ábrelo con el IDE de Arduino
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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();
}
- Crea el archivo index.h en el IDE de Arduino haciendo:
- O bien 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.
- Escriba el nombre del archivo index.h y haga clic en el botón Aceptar
- Copia el código de abajo y pégalo en el 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 Arduino Nano ESP32.
- Abre el Monitor Serial.
- Consulta 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 inteligente 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 Arduino Nano ESP32.
- Ahora puedes controlar el ángulo del servomotor a través de la interfaz web.
- Si modificas el contenido HTML en index.h y no tocas nada en el archivo newbiely.com.ino, al compilar y subir 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 (p. ej., agregar una línea en blanco, añadir un comentario...).
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/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
Para ahorrar la memoria del ESP32, las imágenes del servomotor NO se almacenan en Arduino Nano ESP32. En su lugar, se almacenan en Internet, por lo que tu teléfono o PC necesitan tener 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 anterior de Arduino Nano ESP32 contiene una explicación línea por línea. ¡Por favor lea los comentarios en el código!