¡Aprende a controlar un servomotor con ESP32 y Arduino IDE en solo minutos!

¿Estás buscando una forma sencilla y efectiva de controlar un servomotor desde un servidor web? En este artículo te mostraremos cómo configurar un servidor web en un ESP32 con Arduino IDE para controlar un servomotor de manera remota. ¡Sigue leyendo para descubrir cómo poner en marcha este emocionante proyecto!

En este tutorial aprenderá cómo construir un servidor web usando el ESP32 que controla la posición del eje de un servomotor mediante un control deslizante. Primero, veremos rápidamente cómo controlar un servo con el ESP32 y luego construiremos el servidor web.

Servidor web de servomotor ESP32 con Arduino IDE

Actualizado el 13 de junio de 2024

Piezas requeridas

Para seguir este tutorial necesitarás los siguientes elementos:

Puedes utilizar los enlaces anteriores o ir directamente MakerAdvisor.com/tools ¡Para encontrar todas las piezas para tus proyectos al mejor precio!

Conexión del servomotor al ESP32

Los servomotores tienen tres cables: alimentación, tierra y señal. El cable de alimentación suele ser rojo, el de tierra es negro o marrón y el cable de señal suele ser amarillo, naranja o blanco.

cable	Color
Actuación	Rojo
Dimensiones	Negro o marrón
señal	Amarillo, naranja o blanco

Si usa un servo pequeño como el S0009 como se muestra en la imagen a continuación, puede alimentarlo directamente desde el ESP32.

Sin embargo, si está utilizando más de un servo o un modelo diferente, probablemente necesitará alimentar sus servos desde una fuente de alimentación externa.

Si estás usando un servo pequeño como el S0009 necesitarás conectar:

Tierra -> ESP32 Dimensiones Bolígrafo;
Fuente de alimentación -> ESP32 Número de chasis Bolígrafo;
Señal -> GPIO 13 (o cualquier pin PWM).

Nota: En este caso, puede utilizar cualquier GPIO ESP32 ya que cualquier GPIO puede generar una señal PWM. Sin embargo, no recomendamos el uso de GPIO 9, 10 y 11, que están conectados al flash SPI integrado y no se recomiendan para otros fines.

Recomendaciones de literatura: Referencia de distribución de pines de ESP32: ¿Qué pines GPIO debería utilizar?

Esquema

En nuestros ejemplos conectamos el cable de señal a GPIO 13. Así que puedes seguir el siguiente diagrama de cableado para conectar tu servomotor.

(Este esquema utiliza el KIT DE DISPOSITIVO ESP32 V1 Versión del módulo con 36 GPIO: si usa un modelo diferente, verifique el pinout de la placa que está usando).

¿Cómo se controla un servomotor?

Puede posicionar el eje del servo en diferentes ángulos desde 0 hasta 180º. Los servos se controlan mediante una señal de modulación de ancho de pulso (PWM). El ciclo de trabajo de la señal PWM enviada al motor determina la posición del eje.

Para controlar el motor, simplemente puede usar las funciones PWM del ESP32 enviando una señal de 50 Hz con el ancho de pulso apropiado. O puede utilizar una biblioteca para facilitar mucho esta tarea.

Preparando el IDE de Arduino

Antes de continuar, asegúrese de tener las placas ESP32 instaladas en su IDE de Arduino y la biblioteca ServoESP32.

ESP32 con Arduino IDE

Programamos el ESP32 con Arduino IDE. Así que asegúrese de tener instalado el complemento ESP32. Siga el siguiente tutorial si aún no lo ha hecho:

Instale la placa ESP32 en Arduino IDE 2

Alternativamente, también puedes programar el ESP32 con VS Code y la extensión platformIO:

Comenzando con VS Code y PlatformIO IDE para ESP32 y ESP8266

Instalación de la biblioteca ESP32Servo

El servoESP32 La biblioteca facilita el control de un servomotor con su ESP32 utilizando el IDE de Arduino. Siga los siguientes pasos para instalar la biblioteca en el IDE de Arduino:

Vaya a Sketch > Incluir biblioteca > Administrar bibliotecas…
Buscar servoESP32.
Instale la biblioteca.

Probando un ejemplo

Después de instalar la biblioteca, vaya a su IDE de Arduino y copie el siguiente código.

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details at https://RandomNerdTutorials.com/esp32-servo-motor-web-server-arduino-ide/
  Based on the ESP32Servo Sweep Example
*********/

#include <ESP32Servo.h>

static const int servoPin = 13;

Servo servo1;

void setup() {

  Serial.begin(115200);
  servo1.attach(servoPin);
}

void loop() {
  for(int posDegrees = 0; posDegrees <= 180; posDegrees++) {
    servo1.write(posDegrees);
    Serial.println(posDegrees);
    delay(20);
  }

  for(int posDegrees = 180; posDegrees >= 0; posDegrees--) {
    servo1.write(posDegrees);
    Serial.println(posDegrees);
    delay(20);
  }
}

Ver código sin formato

entender el codigo

Este boceto gira el servo 180 grados hacia un lado y 180 grados hacia el otro. Veamos cómo funciona esto.

Primero necesitas incluir la biblioteca de servos:

#include <ESP32Servo.h>

Defina el pin conectado al pin de datos del servo. En este caso nos conectamos al GPIO 13, pero también puedes usar cualquier otro pin adecuado.

static const int servoPin = 13;

Obtenga más información sobre los GPIO ESP32: Referencia de distribución de pines ESP32: ¿Qué pines GPIO debería utilizar?

Entonces necesitas uno servo Objeto. En este caso dice Servo1.

Servo servo1;

configuración()

En el configuración()inicializar una comunicación en serie para fines de depuración y conectarse GPIO 13 al objeto servo.

void setup() {
  Serial.begin(115200);
  servo1.attach(servoPin);
}

Cinta()

En el Cinta()cambiemos la posición del eje del motor de 0 a 180 grados y luego de 180 a 0 grados. Para mover el eje a una posición específica solo necesita escribir() método en el servo Objeto. Como argumento, pase un número entero con la posición en grados.

myservo.write(pos);

Probando el boceto

Sube el código a tu ESP32. Después de cargar el código, debería ver el eje del motor girando hacia un lado y luego hacia el otro.

Creando el servidor web ESP32

Ahora que sabes cómo controlar un servo con el ESP32, creemos el servidor web para controlarlo. El servidor web que crearemos:

Incluye un control deslizante de 0 a 180 que permite controlar la posición del eje del servo.
El valor actual del control deslizante se actualiza automáticamente en el sitio web sin tener que actualizarlo. Para hacer esto, usamos AJAX para enviar solicitudes HTTP al ESP32 en segundo plano;
Actualizar la página web no cambia el valor del control deslizante ni la posición del eje.

También te puede gustar: Construya servidores web con ESP32 y ESP8266 – libro electrónico.

Creando la página HTML

Primero, veamos el texto HTML que ESP32 necesita enviar a su navegador.

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <style>
    body {
      text-align: center;
      font-family: "Trebuchet MS", Arial;
      margin-left:auto;
      margin-right:auto;
    }
    .slider {
      width: 300px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <h1>ESP32 with Servo</h1>
  <p>Position: <span id="servoPos"></span></p>
  <input type="range" min="0" max="180" class="slider" id="servoSlider" onchange="servo(this.value)"/>
  <script>
    var slider = document.getElementById("servoSlider");
    var servoP = document.getElementById("servoPos");
    servoP.innerHTML = slider.value;
    slider.oninput = function() {
      slider.value = this.value;
      servoP.innerHTML = this.value;
    }
    $.ajaxSetup({timeout:1000});
    function servo(pos) {
      $.get("/?value=" + pos + "&");
      {Connection: close};
    }
  </script>
</body>
</html>

Ver código sin formato

Creando un control deslizante

La página HTML para este proyecto implica la creación de un control deslizante. Para crear un control deslizante en HTML, utilice el Día. El Etiqueta especifica un campo en el que el usuario puede ingresar datos.

Hay una variedad de tipos de entrada. Para definir un control deslizante, utilice el botón «Tipo” atributo con el “Rango«-Valor. En un control deslizante, también debe establecer el rango mínimo y máximo usando el botón «Mínimo» Y «máx.”atributos.

<input type="range" min="0" max="180" class="slider" id="servoSlider" onchange="servo(this.value)"/>

También necesita definir otros atributos como:

El Clase para darle estilo al control deslizante
El IDENTIFICACIÓN para actualizar la posición que se muestra actualmente en el sitio web
Y finalmente esto al cambiar Atributo para llamar a la función servo para enviar una solicitud HTTP al ESP32 cuando se mueve el control deslizante.

Agregar JavaScript al archivo HTML

A continuación, debe agregar código JavaScript a su archivo HTML. Para hacer esto, use Y > etiquetas. Este fragmento de código actualiza la página web con la posición actual del control deslizante:

var slider = document.getElementById("servoSlider");
var servoP = document.getElementById("servoPos");
servoP.innerHTML = slider.value;
slider.oninput = function() {
  slider.value = this.value;
  servoP.innerHTML = this.value;
}

Y las siguientes líneas realizan una solicitud HTTP GET a la dirección IP de ESP en esa ruta URL específica /?valor=[SLIDER_POSITION]y.

$.ajaxSetup({timeout:1000});
function servo(pos) {
  $.get("/?value=" + pos + "&");
}

Por ejemplo, si el control deslizante está activado 0ejecute una solicitud HTTP GET a la siguiente URL:

http://192.168.1.135/?value=0&

Y cuando el control deslizante está activado 180 grado obtienes algo como esto:

http://192.168.1.135/?value=180&

De esta manera, cuando el ESP32 recibe la solicitud GET, puede Valor parámetros en la URL y mueva el servomotor en consecuencia.

código

Ahora necesitamos incluir el texto HTML anterior en el boceto y rotar el servo en consecuencia. Eso es exactamente lo que hace el siguiente boceto.

Copie el siguiente código en su IDE de Arduino, pero no lo cargue todavía. Primero, echemos un vistazo rápido a cómo funciona.

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details at https://RandomNerdTutorials.com/esp32-servo-motor-web-server-arduino-ide/ 
*********/

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

Servo myservo;  // create servo object to control a servo
// twelve servo objects can be created on most boards

// GPIO the servo is attached to
static const int servoPin = 13;

// Replace with your network credentials
const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set web server port number to 80
WiFiServer server(80);

// Variable to store the HTTP request
String header;

// Decode HTTP GET value
String valueString = String(5);
int pos1 = 0;
int pos2 = 0;

// Current time
unsigned long currentTime = millis();
// Previous time
unsigned long previousTime = 0; 
// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;

void setup() {
  Serial.begin(115200);

  myservo.attach(servoPin);  // attaches the servo on the servoPin to the servo object

  // Connect to Wi-Fi network with SSID and password
  Serial.print("Connecting to ");
  Serial.println(ssid);
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  // Print local IP address and start web server
  Serial.println("");
  Serial.println("WiFi connected.");
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
  server.begin();
}

void loop(){
  WiFiClient client = server.available();   // Listen for incoming clients

  if (client) {                             // If a new client connects,
    currentTime = millis();
    previousTime = currentTime;
    Serial.println("New Client.");          // print a message out in the serial port
    String currentLine = "";                // make a String to hold incoming data from the client
    while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
      currentTime = millis();
      if (client.available()) {             // if there's bytes to read from the client,
        char c = client.read();             // read a byte, then
        Serial.write(c);                    // print it out the serial monitor
        header += c;
        if (c == 'n') {                    // if the byte is a newline character
          // if the current line is blank, you got two newline characters in a row.
          // that's the end of the client HTTP request, so send a response:
          if (currentLine.length() == 0) {
            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
            // and a content-type so the client knows what's coming, then a blank line:
            client.println("HTTP/1.1 200 OK");
            client.println("Content-type:text/html");
            client.println("Connection: close");
            client.println();

            // Display the HTML web page
            client.println("<!DOCTYPE html><html>");
            client.println("<head><meta name="viewport" content="width=device-width, initial-scale=1">");
            client.println("<link rel="icon" href="data:,">");
            // CSS to style the on/off buttons 
            // Feel free to change the background-color and font-size attributes to fit your preferences
            client.println("<style>body { text-align: center; font-family: "Trebuchet MS", Arial; margin-left:auto; margin-right:auto;}");
            client.println(".slider { width: 300px; }</style>");
            client.println("<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>");
                     
            // Web Page
            client.println("</head><body><h1>ESP32 with Servo</h1>");
            client.println("<p>Position: <span id="servoPos"></span></p>");          
            client.println("<input type="range" min="0" max="180" class="slider" id="servoSlider" onchange="servo(this.value)" value=""+valueString+""/>");
            
            client.println("<script>var slider = document.getElementById("servoSlider");");
            client.println("var servoP = document.getElementById("servoPos"); servoP.innerHTML = slider.value;");
            client.println("slider.oninput = function() { slider.value = this.value; servoP.innerHTML = this.value; }");
            client.println("$.ajaxSetup({timeout:1000}); function servo(pos) { ");
            client.println("$.get("/?value=" + pos + "&"); {Connection: close};}</script>");
           
            client.println("</body></html>");     
            
            //GET /?value=180& HTTP/1.1
            if(header.indexOf("GET /?value=")>=0) {
              pos1 = header.indexOf('=');
              pos2 = header.indexOf('&');
              valueString = header.substring(pos1+1, pos2);
              
              //Rotate the servo
              myservo.write(valueString.toInt());
              Serial.println(valueString); 
            }         
            // The HTTP response ends with another blank line
            client.println();
            // Break out of the while loop
            break;
          } else { // if you got a newline, then clear currentLine
            currentLine = "";
          }
        } else if (c != 'r') {  // if you got anything else but a carriage return character,
          currentLine += c;      // add it to the end of the currentLine
        }
      }
    }
    // Clear the header variable
    header = "";
    // Close the connection
    client.stop();
    Serial.println("Client disconnected.");
    Serial.println("");
  }
}

Ver código sin formato

Cómo funciona el código

Primero, consideremos el servo Biblioteca y crear una servo Objeto nombrado miservo.

#include <ESP32Servo.h> 
Servo myservo; // create servo object to control a servo

También creamos una variable que contiene el número GPIO al que está conectado el servo. En este caso GPIO13.

const int servoPin = 13;

No olvide cambiar las dos líneas siguientes para incluir sus credenciales de red.

const char* ssid     = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Luego cree variables utilizadas para extraer la posición del control deslizante de la solicitud HTTP.

// Decode HTTP GET value 
String valueString = String(5); 
int pos1 = 0; 
int pos2 = 0;

configuración()

En el configuración()necesita conectar el servo al GPIO al que está conectado myservo.append().

myservo.attach(servoPin); // attaches the servo on the servoPin to the servo object

Cinta()

La primera parte del Cinta() crea el servidor web y envía el texto HTML para mostrar la página web. Usamos el mismo método que usamos en este proyecto de servidor web.

La siguiente parte del código recupera el valor del control deslizante de la solicitud HTTP.

//GET /?value=180& HTTP/1.1
if(header.indexOf("GET /?value=")>=0) {
  pos1 = header.indexOf('=');
  pos2 = header.indexOf('&');
  valueString = header.substring(pos1+1, pos2);

Cuando mueve el control deslizante, realiza una solicitud HTTP a la siguiente URL, que determina la posición del control deslizante entre los = Y y Firmar.

http://your-esp-ip-address/?value=[SLIDER_POSITION]&

El valor de la posición del control deslizante se guarda en Cadena de valor Variable.

Luego ajustamos el servo a esa posición específica con myservo.write() con el Cadena de valor Variable como argumento. El Cadena de valor La variable es una cadena, por lo que necesitamos la aInt() Método para convertirlo a un número entero: el tipo de datos utilizado por escribir() Método.

myservo.write(valueString.toInt());

Probando el servidor web

Ahora puedes subir el código a tu ESP32. Asegúrese de haber seleccionado la placa y el puerto COM correctos. Además, no olvide cambiar el código para incluir sus credenciales de red.

Después de cargar el código, abra el monitor serial con una velocidad de baudios de 115200. Presione el botón ESP32 EN/RST para reiniciar la placa y copie la dirección IP ESP32 que se muestra en el monitor serial.

Abra su navegador, pegue la dirección IP de ESP y debería ver la página web creada anteriormente. Mueva el control deslizante para controlar el servomotor.

En el monitor serie también puede ver las solicitudes HTTP que envía al ESP32 a medida que mueve el control deslizante.

Experimente con su servidor web por un tiempo para ver si funciona correctamente.

Mira el vídeo tutorial y la demostración del proyecto.

Esta guía está disponible en formato de video (ver más abajo) y en formato escrito (sigue leyendo).

Envolver

En resumen, en este tutorial has aprendido a controlar un servomotor con el ESP32 y a crear un servidor web con un control deslizante para controlar su posición.

Este es sólo un ejemplo de cómo controlar un servomotor. En lugar de un control deslizante, también puede utilizar un campo de entrada de texto, varios botones con ángulos predefinidos o cualquier otro campo de entrada adecuado.

Este es un extracto de nuestro curso: Aprendiendo ESP32 con Arduino IDE. Si te gusta ESP32 y quieres aprender más sobre él, te recomendamos apuntarte al curso Aprende ESP32 con Arduino IDE.

Tenemos tutoriales sobre cómo conectar otros motores al ESP32:

ESP32 con motor de corriente continua y controlador de motor L298N: controla la velocidad y la dirección
ESP32 con motor paso a paso (controlador de motor 28BYJ-48 y ULN2003)
Servidor web ESP32: control motor paso a paso (formulario HTML)
Servidor web ESP32: control motor paso a paso (WebSocket)

Obtenga más información sobre ESP32 y la construcción de servidores web con nuestros recursos:

Aprenda ESP32 con Arduino IDE (libro electrónico)
Construya servidores web con ESP32 y ESP8266 (libro electrónico)
Proyectos y tutoriales ESP32 gratuitos…

Esperamos que este tutorial te haya resultado útil.

Gracias por leer.

Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded

Servidor web de servomotor ESP32 con Arduino IDE

En este tutorial, aprenderás cómo construir un servidor web con el ESP32 que controla la posición del eje de un servomotor mediante un control deslizante. Primero, echaremos un vistazo rápido a cómo controlar un servo con el ESP32, y luego construiremos el servidor web.

Partes necesarias

Placa ESP32 DOIT DEVKIT V1
Servo motor Micro – S0009/S90 o Servo Motor – S0003
Cables puente

Puedes encontrar todas las partes en MakerAdvisor.com/tools al mejor precio.

Conexión del servomotor al ESP32

Los servomotores tienen tres cables: alimentación, tierra y señal. El cable de alimentación suele ser rojo, el de tierra es negro o marrón, y el cable de señal suele ser amarillo, naranja o blanco.

Cuando se usa un servo pequeño como el S0009, puedes alimentarlo directamente desde el ESP32. Pero si estás usando más de un servo o un modelo diferente, es probable que necesites alimentar tus servos usando una fuente de alimentación externa.

Esquemático

En nuestros ejemplos, conectaremos el cable de señal al GPIO 13. Así que puedes seguir el siguiente diagrama esquemático para cablear tu servomotor.

Cómo controlar un servo motor

Puedes posicionar el eje del servo en diferentes ángulos de 0 a 180º. Los servos se controlan con una señal de modulación de ancho de pulso (PWM). El ciclo de trabajo de la señal PWM enviada al motor determinará la posición del eje.

Preparando el Arduino IDE

Antes de continuar, asegúrate de haber instalado las placas ESP32 en tu Arduino IDE y la Biblioteca ServoESP32.

Para más detalles sobre la conexión y el código, puedes consultar el tutorial completo en Random Nerd Tutorials.

4 comentarios en «Servidor web de servomotor ESP32 con Arduino IDE»

headface7yy

18 de abril de 2022 a las 05:42

¡Increíble descubrir todas las posibilidades que ofrece el ESP32 como servidor web para controlar un servomotor! Definitivamente una excelente idea para futuros proyectos. ¡Gracias por el post!
Accede para responder
efektorur

2 de julio de 2022 a las 17:20

¡Wow, esto es genial! Nunca imaginé que se podía hacer algo así con un ESP32 y un servomotor. Definitivamente voy a intentarlo en mi próximo proyecto. ¡Gracias por la inspiración!
Accede para responder
Zottewitzk

5 de febrero de 2024 a las 13:44

¡Interesante artículo! Me parece genial poder controlar un servomotor con un ESP32. ¡Gracias por compartir la información!
Accede para responder
frotromilmeryma

22 de marzo de 2024 a las 08:00

¡Qué chévere! Nunca pensé que se pudiera utilizar un ESP32 como servidor web para controlar un servomotor. ¡Definitivamente voy a probar esto en mi próximo proyecto! ¡Gracias por compartir!
Accede para responder

Deja un comentario Cancelar la respuesta

Lo siento, debes estar conectado para publicar un comentario.

Piezas requeridas

Conexión del servomotor al ESP32

Esquema

¿Cómo se controla un servomotor?

Preparando el IDE de Arduino

ESP32 con Arduino IDE

Instalación de la biblioteca ESP32Servo

Probando un ejemplo

entender el codigo

configuración()

Cinta()

Probando el boceto

Creando el servidor web ESP32

Creando la página HTML

Creando un control deslizante

Agregar JavaScript al archivo HTML

código

Cómo funciona el código

configuración()

Cinta()

Probando el servidor web

Mira el vídeo tutorial y la demostración del proyecto.

Envolver

Servidor web de servomotor ESP32 con Arduino IDE

Partes necesarias

Conexión del servomotor al ESP32

Esquemático

Cómo controlar un servo motor

Related Posts:

4 comentarios en «Servidor web de servomotor ESP32 con Arduino IDE»

Deja un comentario Cancelar la respuesta