Arduino - controla el coche a través de la web
Este tutorial le enseña cómo controlar un coche robot de forma inalámbrica utilizando un Arduino desde un navegador web en su teléfono inteligente o PC a través de WiFi. El control se gestiona a través de una interfaz gráfica de usuario web que utiliza la tecnología WebSocket, lo que permite un funcionamiento fluido y dinámico del coche.
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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 de un coche RC 2WD y WebSocket
Ahora, ¿por qué elegir WebSocket? Aquí están las razones:
- Sin WebSocket, tendrías que recargar la página cada vez que quieras cambiar la dirección del coche. ¡Esto no es eficiente!
- Con WebSocket, se establece una conexión especial entre la página web y el Arduino. Esto te permite enviar comandos al Arduino en segundo plano, sin necesidad de recargar la página. ¿El resultado? El coche robot responde de forma suave e instantánea. ¿No es bastante impresionante, verdad?
En resumen, WebSocket facilita el control fluido y en tiempo real del robot.
Tenemos tutoriales específicos sobre el coche RC de dos ruedas motrices (2WD) y WebSocket. Cada tutorial contiene información detallada y instrucciones paso a paso sobre la disposición de pines de hardware, principio de funcionamiento, conexión de cableado al Arduino, código de Arduino... Aprende más sobre ellos en los siguientes enlaces:
- Arduino - 2WD RC Car tutorial
- Arduino - WebSocket tutorial
Cómo funciona
El código de Arduino configura tanto un servidor web como un servidor WebSocket. Así es como funciona:
- Cuando ingresas la dirección IP del Arduino en un navegador web, este envía una solicitud de la página web (Interfaz de usuario) desde el Arduino.
- El servidor web del Arduino responde entregando el contenido de la página web (HTML, CSS, JavaScript).
- Tu navegador web muestra esta página.
- Dentro de la página web, el código JavaScript inicia una conexión WebSocket con el servidor WebSocket en el Arduino.
- Una vez que esta conexión WebSocket está activa, cualquier pulsación o liberación de botones en la página web provoca que el código JavaScript envíe comandos al Arduino a través de esta conexión de forma discreta.
- El servidor WebSocket en el Arduino recibe estos comandos y dirige el coche robot en consecuencia.
A continuación se muestra una tabla con la lista de comandos que la página web envía al Arduino 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
This image is created using Fritzing. Click to enlarge image
Normalmente, necesitaría dos fuentes de alimentación separadas:
- Uno para el motor.
- Otro para la placa Arduino y el módulo L298N (que funciona como el controlador del motor).
Sin embargo, puedes simplificar esta configuración usando solo una fuente de energía: cuatro baterías de 1,5 V para obtener un total de 6 V. Así es como se hace:
- Conecta las baterías al módulo L298N según las instrucciones.
- Retira los dos puentes de los pines ENA y ENB hacia los 5 V del módulo L298N.
- Inserta un puente etiquetado como 5VEN (indicado por un círculo amarillo en el diagrama).
- Conecta el pin de 12 V del módulo L298N al pin Vin del Arduino. Esta conexión alimentará al Arduino directamente desde las baterías.
El coche RC de tracción en dos ruedas (2WD) incluye un interruptor de encendido/apagado, lo que te ofrece la opción de conectar la batería a través del interruptor. Esta configuración te permite encender y apagar la energía del coche según sea necesario. Si prefieres una configuración más simple, puedes optar por omitir por completo el interruptor.
Código de Arduino
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 con código de Arduino 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 Arduino Uno R4, consulta cómo configurar el entorno para Arduino Uno R4 en Arduino IDE.
- Realiza el cableado como en la imagen de arriba.
- Conecta la placa Arduino a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa Arduino correcta (Arduino Uno R4 WiFi) y el puerto COM.
- Abre el Administrador de Bibliotecas haciendo clic en el icono en la barra de navegación izquierda de Arduino IDE.
- Busca Web Server for Arduino Uno R4 WiFi 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, ArduinoGetStarted.com.ino
- Copia el código de abajo y ábrelo con el IDE de Arduino
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-controls-car-via-web
*/
#include <UnoR4WiFi_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 7 // The Arduino pin connected to the ENA pin L298N
#define IN1_PIN 6 // The Arduino pin connected to the IN1 pin L298N
#define IN2_PIN 5 // The Arduino pin connected to the IN2 pin L298N
#define IN3_PIN 4 // The Arduino pin connected to the IN3 pin L298N
#define IN4_PIN 3 // The Arduino pin connected to the IN4 pin L298N
#define ENB_PIN 2 // The Arduino 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
UnoR4WiFi_WebServer server(80);
UnoR4WiFi_WebSocket *webSocket;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HTML_CONTENT);
}
// WebSocket event handlers
void onWebSocketOpen(net::WebSocket& ws) {
Serial.println("New WebSocket connection");
}
void onWebSocketMessage(net::WebSocket& ws, const net::WebSocket::DataType dataType, const char* message, uint16_t length) {
String cmd_str = String((char*)message);
int command = cmd_str.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 Uno R4 WiFi - 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() {
// Handle HTTP requests and WebSocket connections using the library
server.handleClient();
server.handleWebSocket();
delay(10);
}
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);
}
- 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 haciendo:
- Ya sea haciendo 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 OK
- Copia el código de abajo y pégalo en el index.h.
- Ahora tienes el código en dos archivos: ArduinoGetStarted.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para cargar el código al Arduino.
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial.
- Tome nota de la dirección IP que se muestra y escriba esta dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Verá la página web como se muestra a continuación:
- Haz clic en el botón CONECTAR para conectar la página web a Arduino a través de WebSocket.
- Ahora puedes controlar el coche para girar a la izquierda o a la derecha y 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 ArduinoGetStarted.com.ino, al compilar y subir el código a Arduino, 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 ArduinoGetStarted.com.ino (por ejemplo, añadiendo una línea en blanco, agregando un comentario...)
/*
* Este código de Arduino fue desarrollado por es.newbiely.com
* Este código de Arduino se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino/arduino-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino 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 - 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
Arduino Uno R4 WiFi - WebSocket Server
Connected! IP Address: 192.168.0.254
SSID: YOUR_WIFI_SSID
IP Address: 192.168.0.254
Signal strength (RSSI): -44 dBm
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.254:81
WebSocket server enabled successfully
Autoscroll
Clear output
9600 baud
Newline
Para ahorrar la memoria de Arduino, las imágenes de los botones de control no se almacenan en Arduino. En su lugar, se almacenan en Internet, por lo que tu teléfono o tu 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 de Arduino anterior contiene una explicación línea por línea. ¡Por favor lea los comentarios en el código!