Arduino UNO R4 - controla un coche a través de la web
Este tutorial te enseña cómo controlar un coche robot RC de dos ruedas motrices (2WD) a través de la web utilizando el Arduino Uno R4 con WiFi integrado. En esta guía, te guiaremos paso a paso para configurar y controlar tu coche robot de forma remota, aprovechando las potentes capacidades del Arduino Uno R4 con WiFi integrado. Al finalizar este tutorial, aprenderás:
- Por qué se necesita WebSocket para controlar el coche RC
- Cómo conectar tu coche robot de dos ruedas motrices al Arduino Uno R4 WiFi.
- Cómo programar el Arduino Uno R4 WiFi para proporcionar una interfaz web que te permita girar tu coche robot a la izquierda o a la derecha, y avanzar o retroceder.
Este tutorial es perfecto para aficionados, estudiantes y cualquier persona interesada en robótica y sistemas de control basados en la web. Ya seas principiante o tengas algo de experiencia con Arduino, nuestras instrucciones paso a paso te ayudarán a lograr tu objetivo de controlar de forma remota tu coche robot RC de dos ruedas motrices.
¡Comencemos este emocionante viaje de combinar la robótica y la tecnología web!
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.
¿Por qué se necesita WebSocket para controlar el coche RC?
- Sin WebSocket, tendrías que actualizar la página cada vez que quieras cambiar la dirección del coche. Este método no es muy eficiente.
- Con WebSocket, se crea una conexión dedicada entre la página web y el Arduino UNO R4. Esta configuración te permite enviar comandos al Arduino UNO R4 sin necesidad de actualizar la página. Como resultado, el coche robot responde rápidamente y de forma suave. ¿No es increíble?
Para resumir, WebSocket te permite controlar el robot de forma fluida y en tiempo real.
Ofrecemos guías detalladas sobre el uso de WebSocket con Arduino UNO R4. Obtén más información visitando los enlaces proporcionados: Arduino UNO R4 - WebSocket tutorial
Cómo funciona
El código del Arduino UNO R4 crea un servidor web y un servidor WebSocket. Así es como funciona:
- Cuando ingresas la dirección IP del Arduino UNO R4 en un navegador web, solicita la página de interfaz de usuario desde el Arduino UNO R4. El servidor web en el Arduino UNO R4 responde enviando de vuelta el contenido de la página web, compuesto por HTML, CSS y JavaScript. Tu navegador web entonces muestra esta página. El código JavaScript de la página inicia una conexión WebSocket con el servidor WebSocket del Arduino UNO R4. Cuando esta conexión WebSocket está funcionando, cualquier pulsación o liberación de botones en la página envía comandos al Arduino UNO R4 a través de esta conexión. El servidor WebSocket en el Arduino UNO R4 recibe estos comandos y controla el coche robótico según lo indicado.
A continuación se muestra una tabla que muestra los comandos enviados desde la página web al Arduino UNO R4, según lo que haga el 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 UNO R4
This image is created using Fritzing. Click to enlarge image
Ver La mejor forma de alimentar Arduino Uno R4 y otros componentes.
Normalmente, necesitaría dos fuentes de energía diferentes:
- Uno para el motor.
- Otro para la placa Arduino UNO R4 y el módulo L298N, que se utiliza como el controlador del motor.
Puedes simplificar esta configuración usando una fuente de alimentación única: cuatro pilas de 1,5 V para obtener un total de 6 V. Así es como se hace:
- Conecta las baterías al módulo L298N tal como se indica en las instrucciones.
- Quita los dos jumpers de los pines ENA y ENB.
- Coloca un jumper marcado 5VEN (mostrado con un círculo amarillo en el diagrama).
- Conecta el pin de 12 V del módulo L298N al pin Vin del Arduino UNO R4. Esto alimentará al Arduino UNO R4 con las baterías.
El coche RC de dos ruedas motrices tiene un interruptor de encendido/apagado. Esto te permite conectar o desconectar la batería mediante el interruptor, encendiendo o apagando la alimentación del coche cuando sea necesario. Si prefieres algo más sencillo, puedes omitir el uso del interruptor.
Código de Arduino UNO R4
El contenido de la página web (HTML, CSS, JavaScript) se guarda en un archivo separado llamado index.h. Por lo tanto, usaremos dos archivos de código en el IDE de Arduino.
- Un archivo .ino es código de Arduino UNO R4 que crea un servidor web y un servidor WebSocket para controlar el coche.
- Un archivo .h almacena el contenido de la página web.
Pasos R\u00e1pidos
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usas el Arduino Uno R4 WiFi/Minima, consulta el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/Minima en el IDE de Arduino.
- Conecta la placa Arduino Uno R4 a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Abre el Gestor de Bibliotecas haciendo clic en el icono Gestor de Bibliotecas ubicado en el lado izquierdo del IDE de Arduino.
- 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 y ponle nombre, por ejemplo, newbiely.com.ino
- Copia el código siguiente y ábrelo con el IDE de Arduino
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-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);
}
- Cambia los detalles de WiFi (SSID y contraseña) en el programa para usar la información de tu red.
- Crea el archivo llamado index.h en el IDE de Arduino haciendo una de las siguientes:
- Haz clic en el botón ubicado debajo del icono del monitor serie y selecciona Nueva pestaña, o presiona Ctrl+Shift+N en tu teclado.
- Nombra el archivo index.h y pulsa el botón Aceptar.
- Copie el siguiente código y péguelo en el archivo index.h.
- Ahora tienes el código en dos archivos llamados newbiely.com.ino y index.h.
- Haz clic en el botón Subir en el IDE de Arduino para cargar tu código en el Arduino UNO R4.
- Abre el Monitor Serial.
- Observa los resultados que se muestran en el Monitor Serial.
- Escribe la dirección IP que se muestre y escríbela en la barra de direcciones de un navegador web en tu teléfono inteligente o computadora.
- La página web aparecerá de la siguiente manera:
- Presiona el botón CONNECT para vincular la página web con Arduino UNO R4 a través de WebSocket.
- Ahora puedes dirigir el coche para girar a la izquierda o a la derecha, y avanzar o retroceder usando la interfaz web.
/*
* Este código de Arduino UNO R4 fue desarrollado por es.newbiely.com
* Este código de Arduino UNO R4 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-uno-r4/arduino-uno-r4-controls-car-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 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 Uno R4 - 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
Las imágenes de los botones de control no se guardan en el Arduino UNO R4 para ahorrar memoria. En su lugar, se almacenan en línea. Por lo tanto, tu teléfono o tu computadora deben estar conectados a Internet para cargar estas imágenes en la página de control web.
※ Nota:
Si cambias el HTML en el archivo llamado index.h pero no cambias nada en el archivo llamado newbiely.com.ino, entonces cuando compiles y cargues el código en el Arduino UNO R4, el IDE de Arduino no actualizará el contenido HTML. Para que el IDE de Arduino actualice el contenido HTML, debes hacer un pequeño cambio en el archivo newbiely.com.ino, como añadir una línea en blanco o un comentario.
Explicación del código línea por línea
El código del Arduino UNO R4 proporcionado incluye explicaciones para cada línea. ¡Asegúrate de leer los comentarios dentro del código!
Solución de problemas para Arduino Uno R4
Si el código anterior funciona, por favor actualice la versión más reciente para el módulo WiFi del Arduino UNO R4.
- Conecta tu Arduino Uno R4 WiFi a tu PC
- Abre Arduino IDE 2
- Ve a Herramientas Actualizador de firmware
- Seleccione la placa Arduino Uno R4 WiFi y el puerto
- Haga clic en el botón COMPROBAR ACTUALIZACIONES
- Aparecerá una lista de versiones de firmware disponibles
- Seleccione la última versión del firmware
- Haga clic en el botón INSTALAR
- Espere a que termine
- Reinicie su Arduino Uno R4 WiFi
- Vuelva a compilar y cargue su código en Arduino Uno R4 WiFi
- Verifique el resultado