ESP8266 - Controla el coche a través de la web
Este tutorial te enseña cómo usar el ESP8266 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 mediante una interfaz gráfica de usuario basada en la web que utiliza algo llamado WebSocket, lo que permite un control fluido 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 de un coche RC 2WD y WebSocket
Ahora, ¿por qué optar por WebSocket? Aquí está 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 ESP8266. Esto permite enviar comandos al ESP8266 en segundo plano, sin necesidad de recargar la página. ¿El resultado? El coche robot se mueve de forma fluida y en tiempo real. ¿Genial, verdad?
En pocas palabras, la conexión WebSocket permite el control suave y en tiempo real del robot.
Tenemos tutoriales específicos sobre un coche RC de dos ruedas motrices y WebSocket. Cada tutorial contiene información detallada e instrucciones paso a paso sobre el pinout del hardware, el principio de funcionamiento, la conexión de cableado al ESP8266, el código para ESP8266... Obtenga más información sobre ellos en los siguientes enlaces:
- ESP8266 - 2WD RC Car tutorial
- ESP8266 - WebSocket tutorial
Cómo Funciona
El código para ESP8266 crea tanto un servidor web como un servidor WebSocket. Así es como funciona:
- Cuando introduces la dirección IP del ESP8266 en un navegador web, este solicita la página web (Interfaz de Usuario) al ESP8266.
- El servidor web del ESP8266 responde enviando el contenido de la página (HTML, CSS, JavaScript).
- Tu navegador web muestra entonces la página.
- El código JavaScript dentro de la página establece una conexión WebSocket con el servidor WebSocket en el ESP8266.
- Una vez que se establece esta conexión WebSocket, si pulsas/soltas los botones de la página, el código JavaScript envía discretamente los comandos al ESP8266 a través de esta conexión WebSocket en segundo plano.
- El servidor WebSocket en el ESP8266, al recibir los comandos, controla el coche robot en consecuencia.
La tabla a continuación muestra la lista de comandos que la página web envía al ESP8266 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 y ESP8266
This image is created using Fritzing. Click to enlarge image
Para obtener m\u00e1s informaci\u00f3n, consulte Pines del ESP8266 y c\u00f3mo alimentar ESP8266 y otros componentes.
Normalmente, necesitas dos fuentes de energía:
- Uno para el motor a través del módulo L298N.
- Otro para la placa ESP8266, 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 se hace:
- Conecte las baterías al módulo L298N como se muestra.
- Coloque dos jumpers desde los pines ENA y ENB hasta los 5 voltios en el módulo L298N.
- Quite un jumper etiquetado como 5VEN (círculo amarillo en el diagrama).
- Realice el resto del cableado como en el diagrama anterior.
Ya que 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 alimentación del coche. Si quieres simplificarlo, simplemente ignora el interruptor.
Código ESP8266
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 que contiene código ESP8266, 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 ESP8266 en el IDE de Arduino, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usas ESP8266.
- Conecta los componentes tal como se muestran en el diagrama.
- Conecta la placa ESP8266 a tu ordenador usando un cable USB.
- Abre Arduino IDE en tu ordenador.
- Elige la placa ESP8266 correcta, por ejemplo (NodeMCU 1.0 (ESP-12E Module)), y su puerto COM respectivo.
- Abre el Administrador de Bibliotecas haciendo clic en el icono Gestor de Bibliotecas en la barra de navegación izquierda de Arduino IDE.
- Busca “WebSockets”, luego encuentra la biblioteca WebSockets creada por Markus Sattler.
- Haz clic en el botón Instalar para instalar la biblioteca WebSockets.
- 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 ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-controls-car-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.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 IN1_PIN D2 // The ESP8266 pin connected to the IN1 pin L298N
#define IN2_PIN D5 // The ESP8266 pin connected to the IN2 pin L298N
#define IN3_PIN D6 // The ESP8266 pin connected to the IN3 pin L298N
#define IN4_PIN D7 // The ESP8266 pin connected to the IN4 pin L298N
const char* ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char* password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
DIYables_ESP32_WebSocket* webSocket;
void webSocketEvent(uint8_t num, WStype_t type, uint8_t* payload, size_t length) {
switch (type) {
case WStype_DISCONNECTED:
Serial.printf("[%u] Disconnected!\n", num);
break;
case WStype_CONNECTED:
{
IPAddress ip = webSocket.remoteIP(num);
Serial.printf("[%u] Connected from %d.%d.%d.%d\n", num, ip[0], ip[1], ip[2], ip[3]);
}
break;
case WStype_TEXT:
//Serial.printf("[%u] Received text: %s\n", num, payload);
String angle = String((char*)payload);
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");
}
break;
}
}
void setup() {
Serial.begin(9600);
pinMode(IN1_PIN, OUTPUT);
pinMode(IN2_PIN, OUTPUT);
pinMode(IN3_PIN, OUTPUT);
pinMode(IN4_PIN, OUTPUT);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Initialize WebSocket server
webSocket.begin();
webSocket.onEvent(webSocketEvent);
// Serve a basic HTML page with JavaScript to create the WebSocket connection
server.on("/", HTTP_GET, []() {
Serial.println("Web Server: received a web page request");
String html = HTML_CONTENT; // Use the HTML content from the servo_html.h file
server.send(200, "text/html", html);
});
server.begin();
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
}
void loop() {
// Handle client requests
server.handleClient();
// Handle WebSocket events
webSocket.loop();
// TO DO: Your code here
}
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 haciendo:
- Haz clic en el botón justo debajo del ícono del monitor serie y elige New Tab, o usa las teclas Ctrl+Shift+N.
- Introduce el nombre del archivo index.h y haga clic en el botón Aceptar
- Copie el código que se encuentra 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 la IDE de Arduino para subir el código al ESP8266
- Abre el Monitor Serie
- Consulta el resultado en el Monitor Serie.
- Toma nota de la dirección IP mostrada e introduce 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 tal como se muestra a continuación:
- El código JavaScript de la página web crea automáticamente la conexión WebSocket al ESP8266.
- 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 el index.h y no tocas nada en el archivo newbiely.com.ino, cuando compiles y subas el código al ESP8266, 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 newbiely.com.ino (p. ej. agregar una línea en blanco, añadir un comentario...).
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 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://newbiely.com/images/tutorial/up_inactive.png') no-repeat;
background-size: contain;
left: 200px;
top: 0px;
transform: translateX(-50%);
}
.button_down {
background: url('https://newbiely.com/images/tutorial/down_inactive.png') no-repeat;
background-size: contain;
left:200px;
bottom: 0px;
transform: translateX(-50%);
}
.button_right {
background: url('https://newbiely.com/images/tutorial/right_inactive.png') no-repeat;
background-size: contain;
right: 0px;
top: 200px;
transform: translateY(-50%);
}
.button_left {
background: url('https://newbiely.com/images/tutorial/left_inactive.png') no-repeat;
background-size: contain;
left:0px;
top: 200px;
transform: translateY(-50%);
}
.button_stop {
background: url('https://newbiely.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://newbiely.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://newbiely.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>ESP8266 - 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
ESP8266 Web Server's IP address IP address: 192.168.0.5
Autoscroll
Clear output
9600 baud
Newline
Para ahorrar la memoria del ESP8266, las imágenes de los botones de control NO se almacenan en el ESP8266. 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 ESP8266 contiene una explicación línea por línea. ¡Por favor, lea los comentarios en el código!