Arduino Nano ESP32 - Controla el coche vía web
Esta guía te muestra cómo usar el Arduino Nano ESP32 para controlar de forma inalámbrica un coche robot desde un navegador web en tu teléfono inteligente o PC usando WiFi. El control se facilita a través de una interfaz gráfica de usuario basada en la 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 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 coche RC de tracción en dos ruedas y WebSocket
Ahora, ¿por qué optar por WebSocket? Aquí tienes la primicia:
- 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 Arduino Nano ESP32. Esto permite enviar comandos al Arduino Nano 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 un control fluido y en tiempo real del robot.
Tenemos tutoriales específicos sobre coches RC de 2WD y WebSocket. Cada tutorial contiene información detallada y instrucciones paso a paso sobre la disposición de pines del hardware, el principio de funcionamiento, la conexión de cableado al ESP32 y el código para Arduino Nano ESP32... Aprende más sobre ellos en los siguientes enlaces:
- Arduino Nano ESP32 - 2WD RC Car 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 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 Arduino Nano ESP32.
- Una vez que se establece esta conexión WebSocket, si pulsas/soltas los botones en la página, el código JavaScript envía en segundo plano los comandos al Arduino Nano 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 Arduino Nano 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 Arduino Nano ESP32
This image is created using Fritzing. Click to enlarge image
Por lo general, necesitas dos fuentes de energía:
- Uno para el motor a través del módulo L298N.
- Otro para la placa Arduino Nano ESP32, módulo L298N (controlador de motor).
Pero puedes simplificarlo usando una sola fuente de energía para todo: cuatro pilas de 1,5 V (un total de 6 V). Así es como:
- Conecta las baterías al módulo L298N como se muestra.
- Retira los tres jumpers de los pines ENA y ENB del módulo L298N de 5 V.
- Realiza el cableado tal como se muestra en el diagrama anterior.
Como el coche RC de dos ruedas motrices (2WD) tiene un interruptor de encendido/apagado, puedes opcionalmente conectar la batería a través del interruptor para encender o apagar la alimentación del coche. Si quieres simplificarlo, simplemente omite el interruptor.
Código de Arduino Nano ESP32
El contenido de la página web (HTML, CSS y 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 que contiene código para Arduino Nano 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
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 computadora usando un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa Arduino Nano ESP32 y su puerto COM correspondiente.
- Abre el Administrador de Bibliotecas haciendo clic en el icono de la barra de navegación izquierda del IDE de Arduino.
- Busca “DIYables ESP32 WebServer”, y localiza 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 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-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 ENA_PIN D7 // The Arduino Nano ESP32 pin connected to the ENA pin L298N
#define IN1_PIN D6 // The Arduino Nano ESP32 pin connected to the IN1 pin L298N
#define IN2_PIN D5 // The Arduino Nano ESP32 pin connected to the IN2 pin L298N
#define IN3_PIN D4 // The Arduino Nano ESP32 pin connected to the IN3 pin L298N
#define IN4_PIN D3 // The Arduino Nano ESP32 pin connected to the IN4 pin L298N
#define ENB_PIN D2 // The Arduino Nano ESP32 pin connected to the ENB pin L298N
// 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(ENA_PIN, OUTPUT);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
pinMode(ENB_PIN, OUTPUT);
digitalWrite(ENA_PIN, HIGH); // set full speed
digitalWrite(ENB_PIN, HIGH); // set full speed
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();
}
void CAR_moveForward() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_moveBackward() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, HIGH);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, HIGH);
}
void CAR_turnLeft() {
digitalWrite(IN1_PIN, HIGH);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
void CAR_turnRight() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, HIGH);
digitalWrite(IN4_PIN, LOW);
}
void CAR_stop() {
digitalWrite(IN1_PIN, LOW);
digitalWrite(IN2_PIN, LOW);
digitalWrite(IN3_PIN, LOW);
digitalWrite(IN4_PIN, LOW);
}
- Crea el archivo index.h en el IDE de Arduino 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.
- Introduzca el nombre del archivo index.h y haga clic en el botón Aceptar
- Copie el código a continuación y péguelo 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 subir 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 coche para girar a la izquierda o a la derecha, avanzar o retroceder a través de la interfaz web.
- Si modifica el contenido HTML en el index.h y no toca 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, haga un cambio en el archivo newbiely.com.ino (por ejemplo, agregar una línea en blanco, agregar 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-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano 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>Arduino Nano 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>
)=====";
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano 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 de los botones de control NO se almacenan en Arduino Nano ESP32. En su lugar, se almacenan en Internet, por lo que tu teléfono o PC deben 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.