Arduino - Controla un servomotor a través de la web
Este tutorial mostrará cómo usar un Arduino para controlar un servomotor desde un navegador web en tu teléfono inteligente o PC. Utilizaremos la tecnología WebSocket para permitir un control suave y dinámico del servomotor a través de una interfaz de usuario gráfica basada en la web.
Ahora, ¿por qué deberíamos usar WebSocket? Aquí está la razón:
- Sin WebSocket, cada vez que necesites ajustar el ángulo del servo, tendrías que actualizar la página. Esto no es ideal.
- Sin embargo, con WebSocket, establecemos una conexión dedicada entre la página web y el Arduino. Esta configuración nos permite transmitir el valor del ángulo al Arduino en segundo plano, sin necesidad de recargar la página. Como resultado, el servo funciona de manera suave y responde en tiempo real. ¿Bastante impresionante, verdad?
¡Vamos a empezar!
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 del servomotor y WebSocket
Tenemos tutoriales específicos sobre el servomotor y WebSocket. Cada tutorial contiene información detallada e instrucciones paso a paso sobre la asignación de pines de hardware, el principio de funcionamiento, el cableado al Arduino y el código de Arduino... Obtenga más información sobre ellos en los siguientes enlaces:
- Arduino - Servo Motor tutorial
- Arduino - WebSocket tutorial
Cómo funciona
El código de Arduino configura tanto un servidor web como un servidor WebSocket. Aquí está el proceso paso a paso:
- Cuando escribes la dirección IP del Arduino en un navegador web, éste envía una solicitud para la página web (Interfaz de usuario) alojada en el Arduino.
- El servidor web del Arduino responde enviando de vuelta el contenido de la página web (HTML, CSS, JavaScript).
- Después, tu navegador web muestra la página.
- El código JavaScript incrustado en la página web inicia una conexión WebSocket con el servidor WebSocket del Arduino.
- Una vez que la conexión WebSocket está activa, si ajustas el control deslizante en la página web, el código JavaScript transmite discretamente el valor del ángulo al Arduino a través de esta conexión WebSocket en segundo plano.
- El servidor WebSocket del Arduino, al recibir este valor del ángulo, ajusta el servomotor en consecuencia.
En esencia, la conexión WebSocket facilita un control suave y en tiempo real del ángulo del servomotor.
Diagrama de cableado entre el servomotor y Arduino
This image is created using Fritzing. Click to enlarge image
Con el fin de simplificar, el diagrama de cableado anterior se utiliza para fines de prueba o aprendizaje y para servomotores de par pequeño. En la práctica, recomendamos encarecidamente usar una fuente de alimentación externa para el servomotor. El diagrama de cableado a continuación muestra cómo conectar el servomotor a una fuente de alimentación externa.
Código de Arduino
El contenido de la página web (HTML, CSS, JavaScript) está almacenado por separado en un archivo index.h. Así que 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 un servomotor
- 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 Administrador de Bibliotecas 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, dale un nombre, por ejemplo, ArduinoGetStarted.com.ino
- Copia el código a continuación y ábrelo con Arduino IDE
/*
* 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-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);
}
- 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:
- O bien haz clic en el botón justo debajo del icono del monitor serial y elige New Tab, o usa las teclas Ctrl+Shift+N.
- Escribe el nombre del archivo index.h y haz clic en el botón Aceptar
- Copie el código a continuación y péguelo 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 subir el código al Arduino.
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial.
- Toma nota de la dirección IP que se muestra y escribe 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 como se muestra a continuación:
- El código JavaScript de la página web crea automáticamente la conexión WebSocket con Arduino.
- Ahora puedes controlar el ángulo del servomotor girando la manija del motor en la interfaz web.
- Consulta el Monitor Serial; también verás los valores de ángulo desde la web.
- Si modificas el contenido HTML en el index.h y no tocas nada en el archivo ArduinoGetStarted.com.ino, cuando compiles y cargues el código a Arduino, el IDE de Arduino no actualizará el contenido HTML.
- Para hacer que el IDE de Arduino actualice el contenido HTML en este caso, realiza un cambio en el archivo ArduinoGetStarted.com.ino (p. ej., añade una línea en blanco, añade 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-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>
)=====";
COM6
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
Autoscroll
Clear output
9600 baud
Newline
COM6
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
Autoscroll
Clear output
9600 baud
Newline
Para ahorrar la memoria del Arduino, las imágenes del servomotor no se almacenan en el Arduino. En su lugar, se almacenan en Internet, por lo que tu teléfono o PC necesitará una 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.