Desde tu ordenador, controla motores con arduino

¿Quieres aprender a controlar un Arduino desde tu computadora usando solo una página web y JavaScript? En este artículo, te mostraremos cómo hacerlo, activando un servomotor y un motor DC con tres botones para las acciones principales.

---

¿Qué es la Web Serial API? 🌐

La Web Serial API es una tecnología que permite a las aplicaciones web conectar dispositivos como Arduino directamente a través del puerto USB. Esto significa que puedes controlar tu Arduino desde un navegador sin necesidad de instalar software adicional. Simplemente, el navegador se comunica con el Arduino mediante el puerto UART (Universal Asynchronous Receiver-Transmitter), que es el protocolo de comunicación que Arduino utiliza para enviar y recibir datos.

¿Cómo funciona con Arduino?

Cuando conectas tu Arduino a la computadora, el puerto USB se convierte en un puerto serial mediante UART. La Web Serial API permite que el navegador se conecte a este puerto y envíe comandos a Arduino, como mover un servomotor o activar un motor DC, todo en tiempo real.

¿Por qué es útil?

• Fácil de usar: No requiere instalación de controladores.
• Compatibilidad: Funciona en navegadores modernos como Chrome y Edge.
• Interacción directa: Controla tu Arduino desde cualquier página web.

La Web Serial API hace que controlar tu Arduino desde el navegador sea más fácil y accesible que nunca. ¡Es la manera perfecta de combinar hardware y software!

---

¿Qué necesitas para este proyecto?

Antes de comenzar, asegúrate de tener todo lo necesario:

Hardware:

• 1 Arduino Uno (o compatible).
• 1 Servomotor SG90.
• 1 Motor DC.
• 1 Driver L298N.
• Cables de conexión.
• 1 protoboard.
• Tu computadora con navegador compatible con la Web Serial API (como Chrome o Edge).

Software:

• Arduino IDE.
• Un navegador web compatible.

---

Conexiones

1. Conexión del Servo:

El servo tiene tres cables: VCC, GND y Signal (señal).

• VCC: Conéctalo a 5V del Arduino.
• GND: Conéctalo a GND del Arduino.
• Signal: Conéctalo al pin 9 del Arduino (esto lo configuramos en el código de Arduino).

2. Conexión del Motor DC con L298N:

El motor se conecta al controlador L298N, que a su vez se conecta al Arduino para controlar su dirección.

Conexiones del L298N:

• Motor DC:
  • Salida A (OUT1 y OUT2): Conéctalos a los terminales del motor (por ejemplo, OUT1 al terminal positivo y OUT2 al terminal negativo).
• Pines de Control del L298N:
  • IN1: Conéctalo al pin 10 del Arduino.
  • IN2: Conéctalo al pin 11 del Arduino.
• Alimentación:
  • VCC del L298N: Conéctalo a una fuente externa de 5V o 12V, dependiendo de la especificación de tu motor.
  • GND del L298N: Conéctalo a GND del Arduino y de la fuente de alimentación.

Nota: Recuerda unir el GND del arduino con el GND de la fuente de alimentación para el módulo L298N

3. Conexión del LCD 16×2 con I2C:

El LCD 16×2 con módulo I2C tiene cuatro pines: VCC, GND, SDA (datos) y SCL (reloj).

• VCC: Conéctalo a 5V del Arduino.
• GND: Conéctalo a GND del Arduino.
• SDA: Conéctalo al pin A4 del Arduino (en modelos como Arduino Uno).
• SCL: Conéctalo al pin A5 del Arduino (en modelos como Arduino Uno).

---

Resumen de Pines de Conexión:

Componente	Conexión	Pin Arduino
Servo	Signal	Pin 9
L298N Motor	IN1	Pin 10
	IN2	Pin 11
LCD I2C	SDA	Pin A4
	SCL	Pin A5

---

Asegúrate de tener las conexiones bien realizadas y de que el motor tenga suficiente alimentación según su especificación, ya que el L298N necesita una fuente externa para manejar motores que requieren más corriente que el Arduino puede suministrar.

---

La lógica del proyecto

¿Cómo va a funcionar?

1. Botón 1: Mueve el servomotor a una posición específica y luego regresa a su punto inicial (0 grados). Esto sucede de forma rápida para simular un «movimiento de prueba» del servo.
2. Botón 2: Gira el motor DC en un sentido durante un segundo y luego se detiene.
3. Botón 3: Gira el motor DC en el sentido contrario durante un segundo y luego se detiene.

---

El código JavaScript para la página web

El siguiente código HTML y JavaScript crea una interfaz web simple con tres botones. Cada botón envía un comando al Arduino a través de la Web Serial API para controlar los motores.

Abre el Bloc de notas en tu PC. Copia el código HTML y JavaScript de abajo. Guarda el archivo con el nombre motores.html en una carpeta que puedas encontrar fácilmente. Asegúrate de seleccionar «Todos los archivos» en el campo «Tipo» cuando guardes el archivo, para que se guarde con la extensión .html.

<!DOCTYPE html>
<html>
<head>
  <title>Control de Arduino</title>
</head>
<body>
  <h1>Control de Servo y Motor</h1>

  <button onclick="sendCommand('S1')">Accionar Servo</button>
  <button onclick="sendCommand('M+1')">Motor Adelante</button>
  <button onclick="sendCommand('M-1')">Motor Atras</button>

  <script>
    let port;
    let writer;

    // Conectar al puerto serial
    async function connect() {
      try {
        console.log("Solicitando acceso al puerto...");
        port = await navigator.serial.requestPort();
        await port.open({ baudRate: 9600 });
        writer = port.writable.getWriter();
        console.log("Conexión establecida.");
      } catch (error) {
        console.error("Error al conectar al puerto serial:", error);
      }
    }

    // Enviar comando al Arduino
    async function sendCommand(command) {
      if (!port) {
        await connect(); // Si no hay conexión, intentamos conectarnos
      }

      if (port && writer) {
        try {
          const encoder = new TextEncoder();
          await writer.write(encoder.encode(command + '\n'));
          console.log("Comando enviado:", command);
        } catch (writeError) {
          console.error("Error al enviar el comando:", writeError);
        }
      } else {
        console.log("Fallo en la conexión al puerto serial.");
      }
    }
  </script>
</body>
</html>

Explicación del JavaScript:

1. Función connect():

La función connect() es responsable de solicitar acceso al puerto serial de tu computadora y establecer la conexión con el Arduino.

async function connect() {
  try {
    console.log("Solicitando acceso al puerto...");
    port = await navigator.serial.requestPort();  // Solicita al usuario seleccionar un puerto serial disponible
    await port.open({ baudRate: 9600 });  // Abre la conexión al puerto serial con una velocidad de 9600 baudios
    writer = port.writable.getWriter();  // Obtiene un escritor para enviar datos al Arduino
    console.log("Conexión establecida.");
  } catch (error) {
    console.error("Error al conectar al puerto serial:", error);  // Si hay algún error, lo muestra en la consola
  }
}

• navigator.serial.requestPort(): Esta línea solicita al navegador que pida al usuario que seleccione un puerto serial disponible en su computadora (por ejemplo, el puerto al que está conectado el Arduino). Esta acción es parte de la Web Serial API.
• await port.open({ baudRate: 9600 }): Después de que el usuario seleccione el puerto, esta línea abre la conexión serial a una velocidad de transmisión de 9600 baudios, que es la misma que se ha configurado en el código de Arduino. Este paso es necesario para comenzar a enviar y recibir datos.
• port.writable.getWriter(): Obtiene un objeto de tipo writer, que es un escritor utilizado para enviar datos a través del puerto serial.
• console.log("Conexión establecida."): Si todo sale bien, muestra un mensaje en la consola que indica que la conexión con el Arduino se ha establecido exitosamente.

2. Función sendCommand(command):

La función sendCommand() envía un comando al Arduino a través del puerto serial.

async function sendCommand(command) {
  if (!port) {
    await connect();  // Si no hay conexión, intenta conectarse
  }

  if (port && writer) {
    try {
      const encoder = new TextEncoder();  // Crea un codificador de texto para convertir el comando en formato binario
      await writer.write(encoder.encode(command + '\n'));  // Escribe el comando codificado y lo envía al Arduino
      console.log("Comando enviado:", command);  // Muestra en la consola el comando enviado
    } catch (writeError) {
      console.error("Error al enviar el comando:", writeError);  // Si hay un error al enviar el comando, lo muestra
    }
  } else {
    console.log("Fallo en la conexión al puerto serial.");
  }
}

• TextEncoder(): Este objeto convierte el texto (el comando que se envía) en una secuencia de bytes que puede ser entendida por el puerto serial. El comando debe estar en formato binario para ser enviado correctamente.
• await writer.write(encoder.encode(command + '\n')): Aquí se envía el comando codificado al Arduino. La '\n' al final es un salto de línea, que ayuda al Arduino a detectar el final del comando y procesarlo correctamente.
• console.log("Comando enviado:", command): Después de enviar el comando, se muestra en la consola del navegador para depurar y confirmar que el comando fue enviado correctamente.
• Manejo de errores: Si ocurre algún error en el proceso de envío (por ejemplo, si no se puede escribir al puerto), el bloque catch captura el error y muestra un mensaje en la consola con los detalles.

3. Flujo de la aplicación:

• Cuando un usuario presiona uno de los botones en la página, se ejecuta la función sendCommand() con el comando específico (como 'S1', 'M+1' o 'M-1').
• Si la conexión no está establecida, sendCommand() llama a connect() para asegurarse de que se haya realizado la conexión serial antes de enviar el comando.
• Una vez que la conexión está activa, el comando se envía al Arduino a través del puerto serial.

Resumen del Proceso:

1. connect(): Solicita acceso al puerto serial, establece la conexión y obtiene un escritor para enviar datos.
2. sendCommand(command): Envia un comando al Arduino a través del puerto serial, asegurándose de que la conexión esté activa.

Este flujo permite controlar el Arduino desde la web utilizando la Web Serial API, enviando comandos específicos que el Arduino interpreta y ejecuta (como mover el servo o accionar el motor).

El Sketch para Arduino

Ahora vamos a configurar el Arduino con el código que permitirá recibir los comandos del navegador y controlar el servomotor y el motor DC.

• Abre el Arduino IDE en tu computadora.
• Copia el código para el Arduino de abajo.
• Conecta tu Arduino al PC mediante un cable USB.
• En el IDE de Arduino, selecciona tu placa y puerto en Herramientas > Placa y Herramientas > Puerto.
• Carga el código al Arduino haciendo clic en el botón Subir.

Nota importante: Mientras trabajas con la Web Serial API en el navegador, asegúrate de cerrar el IDE de Arduino. Si el IDE está abierto, puede interferir con la conexión serial y generar errores. Solo abre el IDE cuando necesites cargar el código en el Arduino.

Este código para el Arduino interpreta los comandos recibidos desde el navegador y ejecuta las acciones correspondientes.

#include <Servo.h>
#include <LiquidCrystal_I2C.h>  // Librería para el control de la LCD con I2C

Servo servoMotor;
const int motorPin1 = 10;
const int motorPin2 = 11;

// Crear un objeto de la clase LiquidCrystal con la dirección del I2C y el tamaño de la pantalla (16x2)
LiquidCrystal_I2C lcd(0x27, 16, 2);  // Dirección 0x27 es común para pantallas LCD I2C 16x2

void setup() {
  // Inicialización del puerto serial para la comunicación
  Serial.begin(9600);  // Inicia la comunicación serial a 9600 baudios

  // Inicialización de la pantalla LCD
  lcd.init();  // Inicializa la pantalla LCD
  lcd.backlight();  // Enciende la luz de fondo de la pantalla

  // Configura los pines del motor
  pinMode(motorPin1, OUTPUT);
  pinMode(motorPin2, OUTPUT);

  // Configura el servomotor
  servoMotor.attach(9);

  // Mensaje inicial en la pantalla LCD
  lcd.clear();  // Limpia la pantalla
  lcd.print("Esperando comando...");
}

void loop() {
  if (Serial.available() > 0) {
    String command = Serial.readStringUntil('\n');  // Lee el comando desde el puerto serial
    command.trim();  // Elimina los espacios en blanco extra

    // Dependiendo del comando recibido, realiza la acción correspondiente
    if (command == "S1") {
      lcd.clear();
      lcd.print("Servo: Gira 180°");
      servoMotor.write(180);  // Mueve el servo a 180 grados
      delay(1000);  // Espera 1 segundo
      servoMotor.write(0);  // Vuelve a la posición 0 grados
      delay(1000);  // Espera 1 segundo antes de aceptar otro comando
      lcd.clear();
      lcd.print("Esperando comando...");
    } 
    else if (command == "M+1") {
      lcd.clear();
      lcd.print("Motor: Adelante");
      digitalWrite(motorPin1, HIGH);
      digitalWrite(motorPin2, LOW);  // Motor gira en una dirección
      delay(1000);  // Motor gira durante 1 segundo
      digitalWrite(motorPin1, LOW);
      digitalWrite(motorPin2, LOW);  // Detenemos el motor
      lcd.clear();
      lcd.print("Esperando comando...");
    } 
    else if (command == "M-1") {
      lcd.clear();
      lcd.print("Motor: Atras");
      digitalWrite(motorPin1, LOW);
      digitalWrite(motorPin2, HIGH);  // Motor gira en dirección contraria
      delay(1000);  // Motor gira durante 1 segundo
      digitalWrite(motorPin1, LOW);
      digitalWrite(motorPin2, LOW);  // Detenemos el motor
      lcd.clear();
      lcd.print("Esperando comando...");
    } 
    else {
      lcd.clear();
      lcd.print("Comando no");
      lcd.setCursor(0, 1);  // Mueve el cursor a la segunda línea
      lcd.print("reconocido");
      delay(2000);  // Muestra el mensaje por 2 segundos
      lcd.clear();
      lcd.print("Esperando comando...");
    }
  }
}

Explicación del Código Arduino para Recibir Comandos

1. Inicialización del Puerto Serial:

Al inicio del programa, se configura la comunicación serial con la PC.

void setup() {
  Serial.begin(9600);  // Inicia la comunicación serial a 9600 baudios, la misma velocidad que se usa en el navegador
}

• Serial.begin(9600): Esta línea establece la velocidad de comunicación del puerto serial, en este caso, a 9600 baudios. Es importante que esta velocidad coincida con la que se configura en el navegador, como vimos en el código JavaScript.

2. Lectura de los Comandos desde la PC:

En el ciclo loop(), el Arduino constantemente revisa si hay datos disponibles en el puerto serial.

void loop() {
  if (Serial.available() > 0) {  // Verifica si hay datos disponibles para leer en el puerto serial
    String command = Serial.readStringUntil('\n');  // Lee el comando enviado hasta encontrar un salto de línea
    command.trim();  // Elimina espacios en blanco al inicio y al final del comando
    Serial.println("Comando recibido: " + command);  // Muestra el comando recibido en el monitor serial (útil para depuración)
  }
}

• Serial.available(): Esta función verifica si hay datos disponibles en el puerto serial que se puedan leer. Si no hay datos, el programa sigue ejecutándose sin hacer nada.
• Serial.readStringUntil('\n'): Cuando hay datos disponibles, esta función lee los caracteres que llegan al Arduino hasta que encuentra un salto de línea (\n). Esto es útil para asegurarse de que el comando completo se haya recibido antes de procesarlo.
• command.trim(): Elimina cualquier espacio adicional al principio o al final del comando para asegurar que el comando recibido sea limpio y correcto.
• Serial.println(): Esta línea envía el comando recibido al monitor serial para que podamos ver qué ha llegado desde la PC. Esto es útil para depuración y para verificar que los comandos que estamos enviando desde la web son los correctos.

3. Condición para Ejecutar Comandos:

Aunque no lo hemos especificado en esta parte, después de recibir el comando, normalmente se procesaría para realizar alguna acción. Esto se haría mediante una estructura if o switch, dependiendo del comando recibido.

Por ejemplo, si recibimos el comando "S1", podríamos mover el servo a la posición 0, y si recibimos "M+1", podríamos accionar el motor hacia adelante.

Resumen del Proceso:

1. Serial.begin(9600): Inicializa la comunicación serial con la misma velocidad que se usa en el navegador.
2. Serial.available(): Comprueba si hay datos disponibles para leer desde el puerto serial.
3. Serial.readStringUntil('\n'): Lee el comando enviado desde la web hasta encontrar un salto de línea.
4. command.trim(): Elimina los espacios innecesarios para asegurar que el comando sea correcto.
5. Serial.println(): Muestra el comando recibido para depuración en el monitor serial.

Este código permite que el Arduino reciba comandos desde el navegador a través de la Web Serial API, y puede procesarlos para realizar acciones específicas, como mover el servo o accionar el motor.

---

Observaciones

Ahora que ya tienes todo listo, es hora de conectar todo:

1. Conecta el Arduino a tu computadora mediante el cable USB.
2. Abre el archivo motores.html en tu navegador. Si usas Chrome o Edge, debería funcionar sin problemas, ya que ambos son compatibles con la Web Serial API.
3. Cuando abras la página, el navegador te pedirá que selecciones el puerto serial al que está conectado el Arduino. Acepta la solicitud y selecciona el puerto correcto.
4. ¡Y listo! Ahora puedes presionar los botones de la página web y ver cómo el servomotor y el motor DC responden a los comandos.

---

¡Y eso es todo!

Este proyecto combina programación web y electrónica básica para crear algo útil y entretenido. Con estos pasos, ahora puedes controlar un servomotor y un motor DC desde tu navegador usando Arduino y la Web Serial API. ¡Experimenta con diferentes configuraciones y comandos para personalizar tu proyecto!

¿Listo para intentarlo? 😉

Documentación y ligas externas

Ficha técnica: L298N Datasheet

Ficha técnica: SG90 Datasheet

Repositorio Github: Archivos de l proyecto. Aquí podrás encontrar dos archivos HTML, uno sin formato y tro con formato. Sketch para arduino, compatible con ambos archivos HTML

Blog de Chrome developers: Leer y escribir en un puerto en serie.

Video: ¿Qué es Uart?