ESP32 - Controla el coche a través de la web
Esta guía muestra cómo usar el ESP32 para controlar de forma inalámbrica un coche robot desde un navegador web en tu teléfono inteligente o PC mediante WiFi. El control se facilita a través de una interfaz gráfica de usuario web que utiliza algo llamado WebSocket, lo que permite un control suave y dinámico del coche.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 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 coche RC con tracción en dos ruedas y WebSocket
Ahora, ¿por qué optar por WebSocket? Aquí tienes lo esencial:
- Sin WebSocket, cambiar la dirección del coche requeriría recargar la página cada vez. ¡No es ideal!
- Sin embargo, con WebSocket, establecemos una conexión especial entre la página web y el ESP32. Esto permite enviar comandos al ESP32 en segundo plano, sin necesidad de recargar la página. ¿El resultado? El coche robot se mueve de forma fluida y en tiempo real. ¿No es genial, verdad?
En pocas palabras, la conexión WebSocket permite el control fluido y en tiempo real del robot.
Tenemos tutoriales específicos sobre un coche RC de dos ruedas motrices (2WD) y WebSocket. Cada tutorial contiene información detallada e instrucciones paso a paso sobre la disposición de pines de hardware, el principio de funcionamiento, la conexión de cableado al ESP32, código para ESP32... Aprende más sobre ellos en los siguientes enlaces:
- ESP32 - 2WD RC Car 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 (HTML, CSS, JavaScript).
- 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 del ESP32.
- Una vez que esta conexión WebSocket está establecida, si pulsas y sueltas los botones de la página web, el código JavaScript envía en segundo plano los comandos al ESP32 a través de esta conexión WebSocket.
- El servidor WebSocket en el ESP32, al recibir los comandos, controla el coche robot en consecuencia.
La tabla de abajo muestra la lista de comandos que la página web envía al ESP32 según las acciones del usuario:
| User's Action | Button | Command | Car Action |
|---|---|---|---|
| PRESS | UP | 1 | MOVE FORWARD |
| PRESS | DOWN | 2 | MOVE BACKWARD |
| PRESS | LEFT | 4 | TURN LEFT |
| PRESS | RIGHT | 8 | TURN RIGHT |
| PRESS | STOP | 0 | STOP |
| RELEASE | UP | 0 | STOP |
| RELEASE | DOWN | 0 | STOP |
| RELEASE | LEFT | 0 | STOP |
| RELEASE | RIGHT | 0 | STOP |
| RELEASE | STOP | 0 | STOP |
Diagrama de cableado entre un coche RC de dos ruedas motrices y ESP32
El siguiente diagrama muestra cómo conectar el ESP32, el controlador de motor L9110S y los dos motores DC, usando una placa de pruebas para compartir las líneas comunes de alimentación y tierra:
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.
Nota: El diagrama anterior muestra el cableado correcto. En la práctica, conectar varios cables (como las líneas compartidas de VCC y GND) en el mismo orificio del conector de pines del ESP32 no es fácil. Una solución conveniente es usar una placa de expansión con bloque de terminales de tornillo para ESP32 — se pueden asegurar varios cables en el mismo terminal de tornillo, o un cable en el tornillo y otro en el pin del conector adyacente.
This image is created using Fritzing. Click to enlarge image
El módulo L9110S (controlador de motor) alimenta los motores directamente desde sus pines VCC y GND y no tiene un regulador de 5 V integrado. Esto te permite alimentar todo con una única fuente de energía: cuatro baterías de 1,5 V (un total de 6 V). Así es como:
- Conecta la batería de 6 V a los pines VCC y GND del módulo L9110S para alimentar los motores.
- Conecta la misma batería de 6 V a los pines Vin y GND del ESP32 para alimentar la placa.
- Asegúrate de que el módulo L9110S y el ESP32 compartan un GND común.
A diferencia del L298N, el L9110S no tiene puentes de habilitación ENA/ENB ni una terminal de tornillo de 12 V, por lo que el cableado es más sencillo.
Como el coche RC de dos ruedas motrices (2WD) tiene un interruptor de encendido/apagado, puedes conectar opcionalmente la batería a través del interruptor para encender o apagar la energía del coche. Si quieres simplificarlo, simplemente ignora el interruptor.
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 el coche
- 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 se muestra en la imagen anterior.
- 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 Gestor de Bibliotecas haciendo clic en el icono Gestor 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.
- 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 en el IDE de Arduino
/*
* 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-car-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
#define CMD_STOP 0
#define CMD_FORWARD 1
#define CMD_BACKWARD 2
#define CMD_LEFT 4
#define CMD_RIGHT 8
#define MOTOR_A_IA_PIN 14 // The ESP32 pin GPIO14 connected to the A-IA pin of the L9110S (Motor A)
#define MOTOR_A_IB_PIN 27 // The ESP32 pin GPIO27 connected to the A-IB pin of the L9110S (Motor A)
#define MOTOR_B_IA_PIN 33 // The ESP32 pin GPIO33 connected to the B-IA pin of the L9110S (Motor B)
#define MOTOR_B_IB_PIN 32 // The ESP32 pin GPIO32 connected to the B-IB pin of the L9110S (Motor B)
// 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) {
server.sendResponse(client, HTML_CONTENT); // HTML_CONTENT is from index.h
}
// 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 command = angle.toInt();
Serial.print("command: ");
Serial.println(command);
switch (command) {
case CMD_STOP:
Serial.println("Stop");
CAR_stop();
break;
case CMD_FORWARD:
Serial.println("Move Forward");
CAR_moveForward();
break;
case CMD_BACKWARD:
Serial.println("Move Backward");
CAR_moveBackward();
break;
case CMD_LEFT:
Serial.println("Turn Left");
CAR_turnLeft();
break;
case CMD_RIGHT:
Serial.println("Turn Right");
CAR_turnRight();
break;
default:
Serial.println("Unknown command");
}
}
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);
pinMode(MOTOR_A_IA_PIN, OUTPUT);
pinMode(MOTOR_A_IB_PIN, OUTPUT);
pinMode(MOTOR_B_IA_PIN, OUTPUT);
pinMode(MOTOR_B_IB_PIN, OUTPUT);
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();
}
void CAR_moveForward() {
digitalWrite(MOTOR_A_IA_PIN, HIGH);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, HIGH);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
void CAR_moveBackward() {
digitalWrite(MOTOR_A_IA_PIN, LOW);
digitalWrite(MOTOR_A_IB_PIN, HIGH);
digitalWrite(MOTOR_B_IA_PIN, LOW);
digitalWrite(MOTOR_B_IB_PIN, HIGH);
}
void CAR_turnLeft() {
digitalWrite(MOTOR_A_IA_PIN, HIGH);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, LOW);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
void CAR_turnRight() {
digitalWrite(MOTOR_A_IA_PIN, LOW);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, HIGH);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
void CAR_stop() {
digitalWrite(MOTOR_A_IA_PIN, LOW);
digitalWrite(MOTOR_A_IB_PIN, LOW);
digitalWrite(MOTOR_B_IA_PIN, LOW);
digitalWrite(MOTOR_B_IB_PIN, LOW);
}
- Modifica la información de WiFi (SSID y contraseña) en el código para que coincida con las credenciales de tu propia red.
- Crea el archivo index.h en el IDE de Arduino de la siguiente manera:
- Haz clic en el botón justo debajo del ícono 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 OK
- 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 Upload en el IDE de Arduino para cargar el código al ESP32
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestra y escribe esa dirección en la barra de direcciones de un navegador web en tu teléfono inteligente o en tu 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 coche para girar a la izquierda o a la derecha, avanzar o retroceder 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, cuando compiles y cargues el código al ESP32, Arduino IDE no actualizará el contenido HTML.
- Para hacer que Arduino IDE actualice el contenido HTML en este caso, haz un cambio en el archivo newbiely.com.ino (por ejemplo, agregar 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-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Control Car via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=1, user-scalable=no">
<style type="text/css">
body { text-align: center; font-size: 24px;}
button { text-align: center; font-size: 24px;}
#container {
margin-right: auto;
margin-left: auto;
width: 400px;
height: 400px;
position: relative;
margin-bottom: 10px;
}
div[class^='button'] { position: absolute; }
.button_up, .button_down { width:214px; height:104px;}
.button_left, .button_right { width:104px; height:214px;}
.button_stop { width:178px; height:178px;}
.button_up {
background: url('https://esp32io.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://esp32io.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://esp32io.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://esp32io.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://esp32io.com/images/tutorial/stop_inactive.png') no-repeat;
background-size: contain;
left:200px;
top: 200px;
transform: translate(-50%, -50%);
}
</style>
<script>
var CMD_STOP = 0;
var CMD_FORWARD = 1;
var CMD_BACKWARD = 2;
var CMD_LEFT = 4;
var CMD_RIGHT = 8;
var img_name_lookup = {
[CMD_STOP]: "stop",
[CMD_FORWARD]: "up",
[CMD_BACKWARD]: "down",
[CMD_LEFT]: "left",
[CMD_RIGHT]: "right"
}
var ws = null;
function init()
{
var container = document.querySelector("#container");
container.addEventListener("touchstart", mouse_down);
container.addEventListener("touchend", mouse_up);
container.addEventListener("touchcancel", mouse_up);
container.addEventListener("mousedown", mouse_down);
container.addEventListener("mouseup", mouse_up);
container.addEventListener("mouseout", mouse_up);
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
//alert("msg : " + e_msg.data);
}
function ws_onopen()
{
document.getElementById("ws_state").innerHTML = "OPEN";
document.getElementById("wc_conn").innerHTML = "Disconnect";
}
function ws_onclose()
{
document.getElementById("ws_state").innerHTML = "CLOSED";
document.getElementById("wc_conn").innerHTML = "Connect";
console.log("socket was closed");
ws.onopen = null;
ws.onclose = null;
ws.onmessage = null;
ws = null;
}
function wc_onclick()
{
if(ws == null)
{
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = ws_onopen;
ws.onclose = ws_onclose;
ws.onmessage = ws_onmessage;
}
else
ws.close();
}
function mouse_down(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(id);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_active.png')";
}
event.stopPropagation();
event.preventDefault();
}
function mouse_up(event)
{
if (event.target !== event.currentTarget)
{
var id = event.target.id;
send_command(CMD_STOP);
event.target.style.backgroundImage = "url('https://esp32io.com/images/tutorial/" + img_name_lookup[id] + "_inactive.png')";
}
event.stopPropagation();
event.preventDefault();
}
function send_command(cmd)
{
if(ws != null)
if(ws.readyState == 1)
ws.send(cmd + "\r\n");
}
window.onload = init;
</script>
</head>
<body>
<h2>ESP32 - RC Car via Web</h2>
<div id="container">
<div id="0" class="button_stop"></div>
<div id="1" class="button_up"></div>
<div id="2" class="button_down"></div>
<div id="8" class="button_right"></div>
<div id="4" class="button_left"></div>
</div>
<p>
WebSocket : <span id="ws_state" style="color:blue">closed</span><br>
</p>
<button id="wc_conn" type="button" onclick="wc_onclick();">Connect</button>
<br>
<br>
<div class="sponsor">Sponsored by <a href="https://amazon.com/diyables">DIYables</a></div>
</body>
</html>
)=====";
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32 Dev Module' on 'COM15')
New Line
9600 baud
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address IP address: 192.168.0.2
Para ahorrar la memoria del ESP32, las imágenes de los botones de control NO se almacenan en el 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 ESP32 contiene una explicación línea por línea. ¡Por favor lea los comentarios en el código!