Controlador de Servomotor con ESP32: Crea un Servidor Web Interactivo | Guía Completa

Introducción

En este tutorial, aprenderás a crear un servidor web con ESP32 para controlar un servomotor desde cualquier navegador como Chrome. Implementaremos una interfaz visual que controla y muestra el ángulo en tiempo real. Perfecto para proyectos IoT, solo necesitarás un ESP32, un servomotor y seguir unos simples pasos. ¡Manos a la obra!

Lista de Materiales

Para construir nuestro servidor web necesitarás los siguientes componentes.

Cantidad	Material	Función
1	ESP32 DevKit (modelo de 30 pines)	Microcontrolador principal que ejecuta el servidor web y controla el servomotor
1	Servomotor SG90	Actuador que realiza el movimiento físico controlado desde la interfaz web
2	Protoboard medianos	Base para realizar las conexiones entre los componentes sin necesidad de soldar
3	Cables Dupont (macho-macho)	Conexión entre el ESP32 y el servomotor
1	Cable micro USB	Alimentación del ESP32 y carga del programa
1	Computadora con Arduino IDE	Para programar el ESP32 y cargar el código del servidor web

Nota: También puedes utilizar nuestra tarjeta entrenadora para este proyecto, lo que simplificará las conexiones y facilitará el montaje.

Diagrama de Conexiones

El servomotor requiere tres conexiones específicas con el ESP32: alimentación, tierra y señal de control. Este sencillo montaje permite controlar el movimiento del servo desde cualquier navegador web.

Paso 1: Prepara tus protoboards

Coloca los dos protoboards medianos uno junto al otro, asegurándote de que estén firmemente conectados.

Paso 2: Posiciona el ESP32

Ubica la placa ESP32 de 30 pines en la mitad de los dos protoboards, de modo que la tarjeta quede posicionada sobre ambos. Esto proporcionará mejor espacio para realizar las conexiones y facilitará el acceso a todos los pines necesarios.

Paso 3: Identifica los pines del servomotor

El servomotor SG90 tiene tres cables:

Cable rojo: VCC (alimentación +5V)
Cable marrón o negro: GND (tierra)
Cable naranja o amarillo: Señal de control

Paso 4: Conecta la alimentación del servomotor

Une el cable rojo del servomotor al pin VIN del ESP32 (que proporciona 5V) usando un cable Dupont macho-macho. Esta conexión asegura que el servomotor reciba suficiente voltaje para funcionar correctamente.

Paso 5: Conecta la tierra del servomotor

Une el cable marrón o negro del servomotor al pin GND del ESP32 usando un cable Dupont macho-macho.

Paso 6: Conecta la señal de control

Une el cable naranja o amarillo del servomotor al pin GPIO 4 del ESP32 (este es el pin que definimos en el código como servoPin = 4) usando un cable Dupont macho-macho.

Paso 7: Organiza los cables

Asegúrate de que todas las conexiones estén firmes y que los cables estén ordenados para evitar desconexiones accidentales durante el uso.

Paso 8: Verificación final

Comprueba que todas las conexiones coincidan con esta guía:

Servomotor (rojo) → ESP32 (VIN – 5V)
Servomotor (marrón/negro) → ESP32 (GND)
Servomotor (naranja/amarillo) → ESP32 (GPIO 4)

Nota importante Si utilizas nuestra tarjeta entrenadora, simplemente conecta el servomotor al puerto dedicado para servos, que ya tiene las conexiones de alimentación, tierra y señal correctamente etiquetadas.

Explicación del Código

El código implementa un servidor web interactivo en el ESP32 que controla un servomotor. La interfaz permite ajustar el ángulo mediante un control deslizante visual, botones predefinidos y muestra la posición en tiempo real.

Librerías Necesarias

				
					#include <WiFi.h>
#include <WebServer.h>
#include <ESP32Servo.h>
#include <ArduinoJson.h>

Instalación de librerías:

WiFi.h y WebServer.h: Vienen incluidas con el soporte ESP32 para Arduino.
ESP32Servo: En Arduino IDE, ve a Herramientas > Administrar Bibliotecas, busca «ESP32Servo» e instálala.

ArduinoJson: En Arduino IDE, ve a Herramientas > Administrar Bibliotecas, busca «ArduinoJson» e instálala (recomendada versión 6.x).

Configuración WiFi y Definición de Pines

				
					// Configuración WiFi
const char* ssid = "XXX";         // Reemplaza con el nombre de tu red WiFi
const char* password = "XXX"; // Reemplaza con la contraseña de tu red WiFi

// Configuración del servomotor
Servo servo;
const int servoPin = 4;  // Pin GPIO para el servomotor
int currentAngle = 90;    // Ángulo inicial del servomotor

Elementos a personalizar:

ssid y password: Cambia estos valores para que coincidan con tu red WiFi.
servoPin: Si utilizas un pin diferente para tu servomotor, modifica este valor.
currentAngle: Define la posición inicial del servomotor (0-180 grados).

Configuración del Servidor Web

				
					void setup() {
  // Iniciar comunicación serial
  Serial.begin(115200);
  
  // Configurar el pin del servo
  servo.attach(servoPin, 500, 2400);  // min/max pulsewidth
  servo.write(currentAngle);  // Posición inicial
  
  // Conectar a WiFi
  WiFi.begin(ssid, password);
  Serial.print("Conectando a WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi conectado!");
  Serial.print("Dirección IP: ");
  Serial.println(WiFi.localIP());
  
  // Configurar rutas del servidor web
  server.on("/", HTTP_GET, handleRoot);
  server.on("/setangle", HTTP_POST, handleSetAngle);
  server.on("/status", HTTP_GET, handleStatus);
  
  // Iniciar servidor web
  server.begin();
  Serial.println("Servidor HTTP iniciado");
}

Puntos importantes:

servo.attach(servoPin, 500, 2400): Configura los pulsos mínimos y máximos del servo. Estos valores (500 y 2400 microsegundos) funcionan bien para la mayoría de servomotores, pero pueden ajustarse si es necesario.
WiFi.localIP(): La dirección IP que muestra en el monitor serial es la que deberás escribir en tu navegador para acceder a la interfaz web.
server.on(): Configura las diferentes rutas del servidor web y las funciones que manejarán cada solicitud.

Control del Servomotor (Función Principal)

				
					// Función para establecer el ángulo del servomotor
void handleSetAngle() {
  String json = server.arg("plain");
  DynamicJsonDocument doc(1024);
  
  DeserializationError error = deserializeJson(doc, json);
  if (error) {
    server.send(400, "application/json", "{\"status\":\"error\",\"message\":\"Formato JSON inválido\"}");
    return;
  }
  
  if (doc.containsKey("angle")) {
    int angle = doc["angle"];
    
    // Restringir el ángulo entre 0-180
    if (angle < 0) angle = 0;
    if (angle > 180) angle = 180;
    
    // Actualizar y mover el servo
    currentAngle = angle;
    servo.write(currentAngle);
    
    // Responder con éxito
    server.send(200, "application/json", "{\"status\":\"success\",\"angle\":" + String(currentAngle) + "}");
    
    Serial.print("Ángulo actualizado a: ");
    Serial.println(currentAngle);
  } else {
    server.send(400, "application/json", "{\"status\":\"error\",\"message\":\"No se proporcionó un ángulo\"}");
  }
}

Detalles clave:

Esta función es el corazón del proyecto, recibe peticiones POST en formato JSON desde la interfaz web.
Extrae el valor del ángulo enviado por el cliente.
Verifica que el ángulo esté dentro del rango válido (0-180 grados).
Actualiza la posición del servomotor.
Envía una respuesta de éxito o error al cliente.

Gestión de Estado y Visualización

				
					// Función para obtener el estado actual
void handleStatus() {
  String response = "{\"status\":\"success\",\"angle\":" + String(currentAngle) + "}";
  server.send(200, "application/json", response);
}

Esta función permite que la interfaz web conozca y muestre el ángulo actual del servomotor. Es llamada periódicamente por el cliente para mantener la visualización sincronizada con la posición real del servo.

Interfaz Web

El código HTML, CSS y JavaScript que define la interfaz web está contenido en la variable index_html. Incluye:

Un control deslizante para ajustar el ángulo (0-180 grados)
Botones para posiciones predefinidas (0°, 45°, 90°, 135°, 180°)
Un visualizador gráfico que muestra la posición actual del servomotor
Actualizaciones en tiempo real que reflejan la posición física del servo

Parte del código JavaScript relevante:

				
					 // Actualizar ángulo
        function updateAngle(angle) {
            angle = parseInt(angle);
            document.getElementById('angle-value').innerText = angle;
            // Corregimos la dirección de rotación (90 - angle en lugar de angle - 90)
            document.getElementById('servo-arm').style.transform = `translateX(-50%) rotate(${90 - angle}deg)`;
            
            // Enviar el nuevo ángulo al ESP32
            fetch('/setangle', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ angle: angle }),
            })
            .catch(error => console.error('Error:', error));
        }

Esta función es llamada cuando el usuario ajusta el control deslizante o presiona un botón de posición predefinida. Envía la nueva posición al ESP32 y actualiza la visualización gráfica.

Pruebas Experimentales

Esta guía te llevará desde la carga del código hasta el control completo del servomotor a través de la interfaz web. Incluye la verificación de conexiones, solución de problemas comunes y pruebas para confirmar el funcionamiento.

Paso 1: Verifica las conexiones físicas

Antes de encender el ESP32, comprueba que el servomotor esté correctamente conectado siguiendo el diagrama de conexiones:

Cable rojo del servo → Pin VIN del ESP32 (5V)
Cable negro/marrón del servo → Pin GND del ESP32
Cable amarillo/naranja del servo → Pin GPIO 4 del ESP32

Paso 2: Prepara el Arduino IDE

Abre Arduino IDE.
Asegúrate de haber instalado las librerías necesarias:
- ESP32Servo
- ArduinoJson
Selecciona la placa ESP32:
- Ve a Herramientas > Placa > ESP32 Arduino > ESP32 Dev Module.
Selecciona el puerto COM correcto:
- Ve a Herramientas > Puerto y elige el correspondiente a tu ESP32.

Paso 3: Personaliza el código

Modifica las credenciales WiFi en el código para que coincidan con tu red:

				
					console.log( 'Code is Poetry' const char* ssid = "XXX";         // Reemplaza con el nombre de tu red WiFi
const char* password = "XXX";     // Reemplaza con la contraseña de tu red WiFi
);

Si usaste un pin diferente al GPIO 4 para el servomotor, actualiza esta línea:

				
					const int servoPin = 4;  // Pin GPIO para el servomotor

Paso 4: Carga el código al ESP32

Conecta el ESP32 a tu computadora mediante un cable USB.
Haz clic en «Verificar» (✓) para compilar el código.
Si la compilación es exitosa, haz clic en «Subir» (→) para cargar el código al ESP32.
Nota: En algunos modelos de ESP32, es posible que necesites mantener presionado el botón «BOOT» durante los primeros segundos de la carga.

Paso 5: Monitoriza la conexión

Abre el Monitor Serial (icono de lupa en la esquina superior derecha).
Configura la velocidad a 115200 baudios.
Deberías ver mensajes como:
- Conexión exitosa a WiFi
- Asignación de dirección IP

📌 Importante: Anota la dirección IP que aparece, la necesitarás para acceder a la interfaz web.

Paso 6: Accede a la interfaz web

Desde cualquier dispositivo conectado a la misma red WiFi, abre un navegador web.
Ingresa la dirección IP que anotaste en el paso anterior, por ejemplo: 192.168.1.XX
Debería aparecer la interfaz de control del servomotor con el slider y los botones predefinidos.

Paso 7: Prueba el control básico

Mueve el slider para cambiar la posición del servomotor.
Observa cómo el servo físico se mueve y cómo la representación visual en la interfaz web se actualiza.
Prueba los botones preestablecidos (0°, 45°, 90°, 135°, 180°) y verifica que el servo se mueva correctamente.

Paso 8: Prueba desde diferentes dispositivos

Accede a la interfaz desde un teléfono móvil o tablet.
Comprueba que la interfaz sea responsiva y funcione correctamente.
Intenta controlar el servo desde múltiples dispositivos simultáneamente.

Solución de problemas comunes

El ESP32 no se conecta a WiFi: Verifica que el nombre y contraseña de tu red WiFi sean correctos en el código.
No puedes acceder a la interfaz web: Asegúrate de que tu dispositivo esté conectado a la misma red WiFi que el ESP32.
El servomotor no se mueve: Comprueba las conexiones físicas y verifica que el pin GPIO en el código sea el correcto.
Movimientos erráticos del servo: Asegúrate de proporcionar suficiente corriente al ESP32. Si es necesario, usa una fuente de alimentación externa.
La interfaz web muestra un ángulo diferente al del servo físico: Reinicia el ESP32 y verifica que la posición inicial del servo sea 90°.

Descarga los Archivos de este Proyecto

Obtén todos los archivos necesarios para replicar este proyecto, incluyendo código, diagramas de conexión y recursos esenciales. ¡Descárgalos y ponlo en marcha!

Controlador de Servomotor con ESP32: Crea un Servidor Web Interactivo | Guía Completa

Tabla de contenidos

Introducción

Lista de Materiales

Diagrama de Conexiones

Paso 1: Prepara tus protoboards

Paso 2: Posiciona el ESP32

Paso 3: Identifica los pines del servomotor

Paso 4: Conecta la alimentación del servomotor

Paso 5: Conecta la tierra del servomotor

Paso 6: Conecta la señal de control

Paso 7: Organiza los cables

Paso 8: Verificación final

Explicación del Código

Librerías Necesarias

Configuración WiFi y Definición de Pines

Configuración del Servidor Web

Control del Servomotor (Función Principal)

Gestión de Estado y Visualización

Interfaz Web

Pruebas Experimentales

Paso 1: Verifica las conexiones físicas

Paso 2: Prepara el Arduino IDE

Paso 3: Personaliza el código

Paso 4: Carga el código al ESP32

Paso 5: Monitoriza la conexión

Paso 6: Accede a la interfaz web

Paso 7: Prueba el control básico

Paso 8: Prueba desde diferentes dispositivos

Solución de problemas comunes

Descarga los Archivos de este Proyecto

Únete a Roboticoss

conéctate con nosotros