Arduino UNO R4 - controla Carro pela Web
Este tutorial ensina como controlar um carro robô RC 2WD pela web usando o Arduino Uno R4 WiFi. Neste guia, vamos mostrar os passos para configurar e controlar o seu carro robô remotamente, usando os poderosos recursos do Arduino Uno R4 com WiFi integrado. Ao final deste tutorial, você vai aprender:
- Por que é preciso usar WebSocket para controlar o carro RC
- Como conectar o seu carro robô 2WD ao Arduino Uno R4 WiFi.
- Como programar o Arduino Uno R4 WiFi para oferecer uma interface web que permite virar o seu carro robô para a esquerda/direita e movê-lo para frente/para trás.
Este tutorial é perfeito para hobbistas, estudantes e qualquer pessoa interessada em robótica e sistemas de controle baseados na web. Seja você iniciante ou já tenha alguma experiência com Arduino, nossas instruções passo a passo vão ajudar você a alcançar o seu objetivo de controlar remotamente o seu carro robô RC 2WD.
Vamos começar esta jornada empolgante que combina robótica e tecnologia web!
Hardware Necessário
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables STEM V4B IoT Starter Kit (Arduino included) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgação: Alguns dos links desta seção são links de afiliado da Amazon. Podemos receber uma comissão pelas compras feitas por meio desses links, sem custo adicional para você. Agradecemos o seu apoio.
Por que é preciso usar WebSocket para controlar o carro RC?
- Sem o WebSocket, você teria que atualizar a página toda vez que quisesse mudar a direção do carro. Esse método não é muito eficiente.
- Com o WebSocket, é criada uma conexão dedicada entre a página web e o Arduino UNO R4. Essa configuração permite enviar comandos ao Arduino UNO R4 sem precisar atualizar a página. Como resultado, o carro robô responde de forma rápida e suave. Não é incrível?
Resumindo, o WebSocket permite controlar o robô de forma suave e em tempo real.
Oferecemos guias detalhados sobre o uso do WebSocket com o Arduino UNO R4. Saiba mais visitando os links fornecidos: tutorial Arduino UNO R4 - WebSocket
Como Funciona
O código do Arduino UNO R4 cria um servidor web e um servidor WebSocket. Veja como funciona:
- Quando você digita o endereço IP do Arduino UNO R4 em um navegador web, ele solicita a página web da Interface de Usuário ao Arduino UNO R4. O servidor web do Arduino UNO R4 responde enviando de volta o conteúdo da página web, feito de HTML, CSS e JavaScript. Seu navegador web então mostra essa página web. O código JavaScript da página web inicia uma conexão WebSocket com o servidor WebSocket do Arduino UNO R4. Quando essa conexão WebSocket está funcionando, qualquer toque ou soltura de botões na página web envia comandos ao Arduino UNO R4 por essa conexão. O servidor WebSocket do Arduino UNO R4 recebe esses comandos e controla o carro robô conforme indicado.
Aqui está uma tabela que mostra os comandos enviados da página web ao Arduino UNO R4, de acordo com o que o usuário faz:
| Ação do Usuário | Botão | Comando | Ação do Carro |
|---|---|---|---|
| PRESSIONAR | CIMA | 1 | MOVER PARA FRENTE |
| PRESSIONAR | BAIXO | 2 | MOVER PARA TRÁS |
| PRESSIONAR | ESQUERDA | 4 | VIRAR À ESQUERDA |
| PRESSIONAR | DIREITA | 8 | VIRAR À DIREITA |
| PRESSIONAR | PARAR | 0 | PARAR |
| SOLTAR | CIMA | 0 | PARAR |
| SOLTAR | BAIXO | 0 | PARAR |
| SOLTAR | ESQUERDA | 0 | PARAR |
| SOLTAR | DIREITA | 0 | PARAR |
| SOLTAR | PARAR | 0 | PARAR |
Diagrama de Ligação entre o Carro RC 2WD e o Arduino UNO R4
This image is created using Fritzing. Click to enlarge image
Veja A melhor forma de alimentar o Arduino Uno R4 e outros componentes.
O módulo L9110S alimenta os motores diretamente pelos pinos VCC e GND e não tem um regulador de 5V integrado. Isso significa que você pode alimentar tudo com uma única fonte de energia — quatro pilhas AA de 1,5V (totalizando 6V). Veja como fazer:
- Conecte a bateria de 6V aos pinos VCC e GND do módulo L9110S para alimentar os motores.
- Conecte a mesma bateria de 6V aos pinos Vin e GND do Arduino UNO R4 para alimentar a placa.
- Verifique se o módulo L9110S e o Arduino UNO R4 compartilham um GND comum.
Ao contrário do L298N, o L9110S não tem jumpers de habilitação ENA/ENB nem borne de parafuso de 12V, então a ligação é mais simples.
O carro RC 2WD tem uma chave liga/desliga. Isso permite conectar ou desconectar a bateria usando a chave, ligando ou desligando a energia do carro quando necessário. Se você quiser algo mais simples, pode deixar de usar a chave.
Código Arduino UNO R4
O conteúdo da página web (HTML, CSS, JavaScript) é salvo em um arquivo separado chamado index.h. Por isso, vamos usar dois arquivos de código no Arduino IDE.
- Um arquivo .ino é um código do Arduino UNO R4 que cria um servidor web e um servidor WebSocket para controlar o carro.
- Um arquivo .h guarda o conteúdo da página web.
Passos Rápidos
Siga estas instruções passo a passo:
- Se esta é a primeira vez que você usa o Arduino Uno R4 WiFi/Minima, consulte o tutorial sobre como configurar o ambiente para o Arduino Uno R4 WiFi/Minima no Arduino IDE.
- Conecte a placa Arduino Uno R4 ao seu computador usando um cabo USB.
- Abra o Arduino IDE no seu computador.
- Selecione a placa Arduino Uno R4 apropriada (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Abra o Library Manager clicando no ícone Library Manager no lado esquerdo do Arduino IDE.
- Pesquise por Web Server for Arduino Uno R4 WiFi e localize a biblioteca Web Server criada pela DIYables.
- Clique no botão Install para instalar a biblioteca Web Server.
- No Arduino IDE, inicie um novo sketch e dê um nome a ele, por exemplo, newbiely.com.ino
- Copie o código a seguir e abra-o usando o Arduino IDE
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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 MOTOR_A_IA_PIN 5 // The Arduino Uno R4 pin connected to the A-IA pin of the L9110S (Motor A)
#define MOTOR_A_IB_PIN 6 // The Arduino Uno R4 pin connected to the A-IB pin of the L9110S (Motor A)
#define MOTOR_B_IA_PIN 9 // The Arduino Uno R4 pin connected to the B-IA pin of the L9110S (Motor B)
#define MOTOR_B_IB_PIN 10 // The Arduino Uno R4 pin 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
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(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("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(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);
}
- Altere os dados do WiFi (SSID e senha) no programa para usar as informações da sua rede.
- Crie o arquivo chamado index.h no Arduino IDE fazendo um dos seguintes:
- Clique no botão localizado abaixo do ícone do serial monitor e selecione New Tab, ou pressione Ctrl+Shift+N no teclado.
- Dê ao arquivo o nome index.h e pressione o botão OK.
- Copie o código a seguir e cole-o no arquivo index.h.
- Agora você tem o código em dois arquivos chamados newbiely.com.ino e index.h.
- Clique no botão Upload no Arduino IDE para carregar o seu código no Arduino UNO R4.
- Abra o Serial Monitor.
- Veja os resultados exibidos no Serial Monitor.
- Anote o endereço IP mostrado e digite-o na barra de endereços de um navegador web no seu smartphone ou computador.
- A página web vai aparecer assim:
- Pressione o botão CONNECT para ligar a página web ao Arduino UNO R4 por meio do WebSocket.
- Agora você pode direcionar o carro para virar à esquerda ou à direita e mover-se para frente ou para trás usando a interface web.
/*
* Este código de Arduino UNO R4 foi desenvolvido por pt.newbiely.com
* Este código de Arduino UNO R4 é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.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>
)=====";
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
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
As imagens dos botões de controle não ficam salvas no Arduino UNO R4, para economizar a memória dele. Em vez disso, elas ficam armazenadas online. Por isso, o seu celular ou computador precisa estar conectado à internet para carregar essas imagens na página web de controle.
※ Nota:
Se você alterar o HTML no arquivo chamado index.h, mas não alterar nada no arquivo chamado newbiely.com.ino, então, quando você compilar e fizer o upload do código para o Arduino UNO R4, o Arduino IDE não vai atualizar o conteúdo HTML. Para fazer o Arduino IDE atualizar o conteúdo HTML, você precisa fazer uma pequena alteração no arquivo newbiely.com.ino, como adicionar uma linha vazia ou um comentário.
Explicação do Código Linha por Linha
O código do Arduino UNO R4 fornecido inclui explicações para cada linha. Não deixe de ler os comentários dentro do código!
Solução de Problemas para o Arduino Uno R4
Se o código acima não funcionar, atualize o módulo WiFi do Arduino UNO R4 para a versão mais recente
- Conecte o seu Arduino Uno R4 WiFi ao PC
- Abra o Arduino IDE 2
- Vá em Tools Firmware Updater
- Selecione a placa e a porta do Arduino Uno R4 WiFi
- Clique no botão CHECK UPDATES
- Uma lista de versões de firmware disponíveis vai aparecer
- Selecione a versão mais recente do firmware
- Clique no botão INSTALL
- Espere até terminar
- Reinicie o seu Arduino Uno R4 WiFi
- Compile novamente e faça o upload do seu código para o Arduino Uno R4 WiFi
- Confira o resultado