Arduino - Controla Servo Motor pela Web
Este tutorial vai mostrar como usar um Arduino para controlar um servo motor a partir de um navegador web no seu smartphone ou PC. Vamos utilizar a tecnologia WebSocket para permitir um controle fluido e dinâmico do servo motor por meio de uma interface gráfica de usuário web.
Agora, por que devemos usar o WebSocket? Veja o motivo:
- Sem o WebSocket, toda vez que você precisasse ajustar o ângulo do servo, teria que recarregar a página web. Isso não é o ideal.
- Porém, com o WebSocket, estabelecemos uma conexão dedicada entre a página web e o Arduino. Essa configuração nos permite transmitir o valor do ângulo para o Arduino em segundo plano, sem precisar recarregar a página. Como resultado, o servo funciona de forma suave e responde em tempo real. Bem impressionante, não é?
Vamos começar!
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.
Buy Note: For controlling multiple servo motors, use the PCA9685 16 Channel PWM Servo Driver Module to save MCU pins and simplify wiring.
Sobre o Servo Motor e o WebSocket
Temos tutoriais específicos sobre servo motor e WebSocket. Cada tutorial contém informações detalhadas e instruções passo a passo sobre a pinagem do hardware, o princípio de funcionamento, a ligação com o Arduino, o código Arduino... Saiba mais sobre eles nos links a seguir:
- Tutorial Arduino - Servo Motor
- Tutorial Arduino - WebSocket
Como Funciona
O código do Arduino configura tanto um servidor web quanto um servidor WebSocket. Veja o processo passo a passo:
- Quando você digita o endereço IP do Arduino em um navegador web, ele envia uma requisição pela página web (Interface do Usuário) hospedada no Arduino.
- O servidor web do Arduino responde enviando de volta o conteúdo da página web (HTML, CSS, JavaScript).
- Seu navegador web então exibe a página web.
- O código JavaScript incorporado na página web inicia uma conexão WebSocket com o servidor WebSocket no Arduino.
- Quando a conexão WebSocket está ativa, se você ajustar a alavanca na página web, o código JavaScript transmite discretamente o valor do ângulo para o Arduino por essa conexão WebSocket em segundo plano.
- O servidor WebSocket no Arduino, ao receber esse valor de ângulo, ajusta o servo motor de acordo.
Em resumo, a conexão WebSocket possibilita um controle suave e em tempo real do ângulo do servo motor.
Diagrama de Ligação entre o Servo Motor e o Arduino
This image is created using Fritzing. Click to enlarge image
Para simplificar, o diagrama de ligação acima é usado para fins de teste ou aprendizado e para servo motores de baixo torque. Na prática, recomendamos fortemente usar uma fonte de alimentação externa para o servo motor. O diagrama de ligação abaixo mostra como conectar o servo motor a uma fonte de alimentação externa.
Código Arduino
O conteúdo da página web (HTML, CSS, JavaScript) fica armazenado separadamente em um arquivo index.h. Assim, teremos dois arquivos de código na Arduino IDE:
- Um arquivo .ino, que é o código do Arduino, que cria um servidor web e um servidor WebSocket e controla o servo motor
- Um arquivo .h, que contém o conteúdo da página web.
Passos Rápidos
- Se esta é a primeira vez que você usa o Arduino Uno R4, veja como configurar o ambiente para o Arduino Uno R4 na Arduino IDE.
- Faça a ligação como na imagem acima.
- Conecte a placa Arduino ao seu PC por meio de um cabo USB Type-C
- Abra a Arduino IDE no seu PC.
- Selecione a placa Arduino correta (por exemplo, Arduino Uno R4 WiFi) e a porta COM.
- Abra o Gerenciador de Bibliotecas clicando no ícone Library Manager na barra de navegação à esquerda da 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.
- Na Arduino IDE, crie um novo sketch e dê um nome a ele, por exemplo, ArduinoGetStarted.com.ino
- Copie o código abaixo e abra-o com a Arduino IDE
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-controls-servo-motor-via-web
*/
#include <Servo.h>
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
#define SERVO_PIN 9 // Arduino pin 9 connected to servo motor
// 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;
Servo servo;
// 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 angle = String(message);
int angle_value = angle.toInt();
servo.write(angle_value);
Serial.print(F("Rotate Servo Motor to "));
Serial.println(angle_value);
}
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);
servo.attach(SERVO_PIN); // attaches the servo on Arduino pin
Serial.println("Arduino Uno R4 WiFi - WebSocket Server controls Servo Motor");
// 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);
}
- Modifique as informações de WiFi (SSID e senha) no código para corresponder às credenciais da sua própria rede.
- Crie o arquivo index.h na Arduino IDE da seguinte forma:
- Clique no botão logo abaixo do ícone do serial monitor e escolha New Tab, ou use as teclas Ctrl+Shift+N.
- Dê ao arquivo o nome index.h e clique no botão OK
- Copie o código abaixo e cole-o no index.h.
- Agora você tem o código em dois arquivos: ArduinoGetStarted.com.ino e index.h
- Clique no botão Upload na Arduino IDE para carregar o código no Arduino.
- Abra o Serial Monitor
- Confira o resultado no Serial Monitor.
- Anote o endereço IP exibido e digite esse endereço na barra de endereços de um navegador web no seu smartphone ou PC.
- Você verá a página web como abaixo:
- O código JavaScript da página web cria automaticamente a conexão WebSocket com o Arduino.
- Agora você pode controlar o ângulo do servo motor girando a alavanca do motor na interface web.
- Confira o resultado no Serial Monitor; você também verá os valores de ângulo vindos da web.
- Se você modificar o conteúdo HTML no index.h e não mexer em nada no arquivo ArduinoGetStarted.com.ino, quando você compilar e carregar o código no Arduino, a Arduino IDE não vai atualizar o conteúdo HTML.
- Para fazer a Arduino IDE atualizar o conteúdo HTML nesse caso, faça uma alteração no arquivo ArduinoGetStarted.com.ino (por exemplo, adicionar uma linha vazia, adicionar um comentário....)
/*
* Este código de Arduino foi desenvolvido por pt.newbiely.com
* Este código de Arduino é disponibilizado ao público sem nenhuma restrição.
* Para tutoriais completos e diagramas de ligação, visite:
* https://pt.newbiely.com/tutorials/arduino/arduino-controls-servo-motor-via-web
*/
const char *HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Controls Servo Motor via Web</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<style>
body { text-align: center; }
canvas { background-color: #ffffff; }
</style>
<script>
var canvas_width = 401, canvas_height = 466;
var pivot_x = 200, pivot_y = 200;
var bracket_radius = 160, bracket_angle = 0;
var bracket_img = new Image();
var click_state = 0;
var last_angle = 0;
var mouse_xyra = {x:0, y:0, r:0.0, a:0.0};
var ws;
bracket_img.src = "https://esp32io.com/images/tutorial/servo-bracket.png";
function init()
{
var servo = document.getElementById("servo");
servo.width = canvas_width;
servo.height = canvas_height;
servo.style.backgroundImage = "url('https://esp32io.com/images/tutorial/servo-body.png')";
servo.style.backgroundPosition = "center";
servo.style.backgroundSize = "contain";
servo.addEventListener("touchstart", mouse_down);
servo.addEventListener("touchend", mouse_up);
servo.addEventListener("touchmove", mouse_move);
servo.addEventListener("mousedown", mouse_down);
servo.addEventListener("mouseup", mouse_up);
servo.addEventListener("mousemove", mouse_move);
var ctx = servo.getContext("2d");
ctx.translate(pivot_x, pivot_y);
rotate_bracket(0);
ws = new WebSocket("ws://" + window.location.host + ":81");
document.getElementById("ws_state").innerHTML = "CONNECTING";
ws.onopen = function(){ document.getElementById("ws_state").innerHTML = "CONNECTED" };
ws.onclose = function(){ document.getElementById("ws_state").innerHTML = "CLOSED"};
ws.onerror = function(){ alert("websocket error " + this.url) };
ws.onmessage = ws_onmessage;
}
function ws_onmessage(e_msg)
{
e_msg = e_msg || window.event; // MessageEvent
alert("msg : " + e_msg.data);
}
function rotate_bracket(angle)
{
var servo = document.getElementById("servo");
var ctx = servo.getContext("2d");
ctx.clearRect(-pivot_x, -pivot_y, canvas_width, canvas_height);
ctx.rotate(angle / 180 * Math.PI);
ctx.drawImage(bracket_img, -pivot_x, -pivot_y);
ctx.rotate(-angle / 180 * Math.PI);
}
function check_range_xyra(event, mouse_xyra)
{
var x, y, r, a, rc_x, rc_y, radian;
var min_r, max_r, width;
if(event.touches)
{
var touches = event.touches;
x = (touches[0].pageX - touches[0].target.offsetLeft) - pivot_x;
y = pivot_y - (touches[0].pageY - touches[0].target.offsetTop);
min_r = 60;
max_r = pivot_x;
width = 40;
}
else
{
x = event.offsetX - pivot_x;
y = pivot_y - event.offsetY;
min_r = 60;
max_r = bracket_radius;
width = 20;
}
/* cartesian to polar coordinate conversion */
r = Math.sqrt(x * x + y * y);
a = Math.atan2(y, x);
mouse_xyra.x = x;
mouse_xyra.y = y;
mouse_xyra.r = r;
mouse_xyra.a = a;
radian = bracket_angle / 180 * Math.PI;
/* rotate coordinate */
rc_x = x * Math.cos(radian) - y * Math.sin(radian);
rc_y = x * Math.sin(radian) + y * Math.cos(radian);
if((r < min_r) || (r > max_r))
return false;
if((rc_y < -width) || (rc_y > width))
return false;
return true;
}
function mouse_down()
{
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(check_range_xyra(event, mouse_xyra))
{
click_state = 1;
last_angle = mouse_xyra.a / Math.PI * 180.0;
}
}
function mouse_up()
{
click_state = 0;
}
function mouse_move()
{
var angle;
if(event.touches && (event.touches.length > 1))
click_state = event.touches.length;
if(click_state > 1)
return;
if(!click_state)
return;
if(!check_range_xyra(event, mouse_xyra))
{
click_state = 0;
return;
}
angle = mouse_xyra.a / Math.PI * 180.0;
if((Math.abs(angle) > 90) && (angle * last_angle < 0))
{
if(last_angle > 0)
last_angle = -180;
else
last_angle = 180;
}
bracket_angle += (last_angle - angle);
last_angle = angle;
if(bracket_angle > 90)
bracket_angle = 90;
if(bracket_angle < -90)
bracket_angle = -90;
rotate_bracket(bracket_angle);
if(ws.readyState == 1)
ws.send(Math.floor(90 - bracket_angle) + "\r\n");
debug = document.getElementById("debug");
debug.innerHTML = Math.floor(90 - bracket_angle);
event.preventDefault();
}
window.onload = init;
</script>
</head>
<body>
<h2>
Arduino - Servo Motor via Web<br>
<canvas id="servo"></canvas>
<p>
WebSocket : <span id="ws_state" style="color:blue">null</span><br>
Angle : <span id="debug" style="color:blue">90</span>
</p>
</h2>
<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' on 'COM15')
New Line
9600 baud
Arduino Uno R4 WiFi - WebSocket Server controls Servo Motor
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
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno' on 'COM15')
New Line
9600 baud
WebSocket server enabled successfully
WebSocket client connected from: 192.168.0.7
New WebSocket connection
Rotate Servo Motor to 90
Rotate Servo Motor to 89
Rotate Servo Motor to 88
Rotate Servo Motor to 87
Para economizar a memória do Arduino, as imagens do servo motor NÃO são armazenadas no Arduino. Em vez disso, elas ficam armazenadas na internet; por isso, seu celular ou PC precisa ter conexão com a internet para carregar as imagens da página de controle web.
※ Nota:
Explicação do Código Linha por Linha
O código Arduino acima contém explicações linha por linha. Leia os comentários no código!