Arduino y NodeMCU: Del Cableado Básico al Servidor Web

En el vasto y fascinante mundo de la electrónica programable, la capacidad de nuestros microcontroladores para interactuar con el entorno es fundamental. Ya sea para mostrar información en una pantalla o para comunicarse con otros dispositivos, las librerías juegan un papel crucial. Una de las más básicas y, a menudo, la primera con la que nos encontramos al trabajar con ciertos periféricos, es la librería Wire.h. Pero, ¿dónde se descarga? La respuesta, sorprendentemente simple, es que generalmente ya está ahí. Acompáñanos en este recorrido donde exploraremos no solo la esencial comunicación I2C que facilita Wire.h, sino también cómo dar vida a tus proyectos con pantallas OLED y, en un salto aún mayor, cómo convertir tu NodeMCU en un servidor web capaz de controlar dispositivos de forma remota.

La Librería Wire.h: El Pilar de la Comunicación I2C

Cuando hablamos de comunicación entre microcontroladores y sensores o pantallas, el protocolo I2C (Inter-Integrated Circuit) es uno de los más populares y eficientes. La librería Wire.h es la implementación estándar de Arduino para este protocolo. Es la que nos permite, por ejemplo, que nuestro Arduino "hable" con una pantalla OLED o con un sensor de temperatura y humedad.

La pregunta frecuente es: "¿Cómo puedo descargar la librería Wire.h?". La buena noticia es que, en la inmensa mayoría de los casos, Wire.h viene preinstalada con tu IDE de Arduino. Forma parte de las librerías estándar que acompañan a la instalación del software. Esto significa que no necesitas buscarla en internet, ni descargar archivos ZIP, ni realizar ninguna instalación manual. Simplemente, puedes incluirla en tus programas con la línea #include <Wire.h> y estará lista para usar.

Si por alguna razón muy excepcional, tu IDE de Arduino no reconociera Wire.h, la solución más sencilla sería actualizar tu IDE a la última versión disponible. Las actualizaciones suelen incluir todas las librerías básicas y mejoras de compatibilidad. Esta integración nativa es una de las razones por las que Arduino es tan accesible para principiantes, ya que muchas de las funciones esenciales ya están listas para ser utilizadas sin configuraciones adicionales.

Iluminando Proyectos: Pantallas OLED con Arduino

Las pantallas son una forma fantástica de visualizar datos en nuestros proyectos. Existen varios tipos en el mercado, como las LCD (Pantalla de Cristal Líquido), LED, OLED (LED Orgánico) y las pantallas eInk. De todas ellas, LCD y OLED son las más comunes y accesibles para los aficionados. En esta sección, nos centraremos en cómo utilizar una pantalla OLED con tu placa Arduino.

Materiales Necesarios para tu Proyecto OLED

• Arduino: El "cerebro" de nuestro proyecto. Puedes usar un Arduino UNO, Mega, Nano o Micro. Lo importante es conocer el mapeo de pines de tu placa.
• Pantalla OLED: Existen diferentes tipos. Para este tutorial, usaremos un módulo I2C de 1.3 pulgadas con una resolución de 128x64 y el driver SH1106. Asegúrate de verificar qué driver utiliza tu pantalla, ya que esto determinará la librería adicional que necesitarás.
• Driver Adecuado para la Pantalla: En nuestro caso, al usar el driver SH1106, instalaremos la librería Adafruit_SH1106.

Entendiendo el Protocolo I2C

Dado que nuestro módulo de pantalla OLED utiliza la interfaz I2C para la comunicación, es fundamental comprender cómo funciona este protocolo. I2C es un método de comunicación en serie que destaca por su simplicidad, utilizando solo cuatro pines:

• VCC: Alimentación (generalmente 3.3V o 5V).
• GND: Tierra.
• SDA: Línea de datos (Serial Data).
• SCL: Línea de reloj (Serial Clock).

En el protocolo I2C, múltiples "Maestros" (como tu Arduino) pueden comunicarse con múltiples "Esclavos" (como tu pantalla OLED o sensores) a través de estos cuatro pines. Los datos se transfieren en forma de paquetes, y estos paquetes contienen "tramas de datos".

El proceso de comunicación I2C sigue una secuencia específica:

1. Condición de Inicio: Una señal enviada por el Maestro para indicar el comienzo de una transmisión.
2. Dirección del Dispositivo: El Maestro envía la dirección única del Esclavo con el que desea comunicarse.
3. Tramas de Datos: Contienen las instrucciones o los datos a enviar/recibir.
4. Bits de Reconocimiento (Ack/Nack): Después de cada trama de datos, el receptor envía un bit de reconocimiento (ACK) si la recepción fue exitosa, o un bit de no reconocimiento (NACK) si hubo un error.
5. Condición de Parada: Una señal enviada por el Maestro para indicar el final de la transmisión.

Esta estructura asegura una comunicación eficiente y confiable entre los dispositivos.

Diagrama de Cableado OLED Arduino

Las conexiones para la pantalla OLED son notablemente sencillas, gracias a la interfaz I2C. Solo necesitas conectar los cuatro pines correspondientes:

• OLED VCC a Arduino 3.3V o 5V (dependiendo de tu pantalla, muchas OLED funcionan perfectamente a 3V).
• OLED GND a Arduino GND.
• OLED SDA a Arduino A4 (para Arduino UNO, Mega, etc.).
• OLED SCL a Arduino A5 (para Arduino UNO, Mega, etc.).

Una vez realizadas estas conexiones, estamos listos para programar.

Programando la Pantalla OLED con Arduino

Antes de subir el código, necesitamos asegurarnos de que tenemos las librerías necesarias. Como mencionamos, Wire.h ya está instalada. La otra librería crucial es Adafruit_SH1106.h. Para instalarla, sigue estos pasos:

1. Dirígete a la página de GitHub de la librería (busca "Adafruit_SH1106 GitHub").
2. Haz clic en el botón "Code" y luego en "Download ZIP".
3. Una vez descargado el archivo ZIP, extráelo.
4. Renombra la carpeta extraída de "Adafruit_SH1106-master" a simplemente "Adafruit_SH1106".
5. Copia esta carpeta renombrada a la carpeta de librerías de tu instalación de Arduino. Por lo general, se encuentra en Documentos/Arduino/libraries o Mis Documentos/Arduino/libraries.
6. Reinicia el IDE de Arduino para que reconozca la nueva librería.

Ahora, puedes crear un nuevo programa (sketch) en el IDE de Arduino y copiar el siguiente código:

#include <Wire.h>
#include <Adafruit_SH1106.h>

#define OLED_RESET 4
Adafruit_SH1106 display(OLED_RESET);

void setup()
{
 Serial.begin(9600);
 display.begin(SH1106_SWITCHCAPVCC, 0x3C);
 display.display();
 delay(2000);
 display.clearDisplay();
}

void loop()
{
 display.setTextSize(2);
 display.setTextColor(WHITE);
 display.setCursor(0,0);
 display.println("Hello");
 display.setTextSize(2);
 display.setTextColor(WHITE);
 display.println("World!");
 display.display();
 delay(2000);
}

Sube este código a tu Arduino, y deberías ver el mensaje "Hello World!" (o "Hello" en una línea y "World!" en la siguiente) aparecer en tu pantalla OLED. También puedes explorar los ejemplos que vienen con la librería Adafruit_SH1106. Para ello, ve a Archivo > Ejemplos > Adafruit_SH1106-Master > sh1106_128x64_i2c. Subir este código de ejemplo te permitirá ver algunas animaciones y funcionalidades más avanzadas de la pantalla.

Conectando el Mundo: Servidor Web con NodeMCU (ESP8266)

Más allá de las pantallas, la conectividad es otro pilar fundamental en los proyectos modernos. El módulo NodeMCU, basado en el chip ESP8266, nos permite crear soluciones de Internet de las Cosas (IoT) de forma sencilla. La finalidad de este tutorial es mostrarte cómo crear un servidor web dentro de la placa NodeMCU para controlar dispositivos a distancia, como un invernadero o un simple LED.

Concepto de Servidor y Cliente

En este proyecto, tu NodeMCU actuará como un "servidor web". Esto significa que, bajo una petición HTTP formulada desde un "cliente" (que puede ser tu teléfono, tablet o computadora), el NodeMCU mostrará la información que contiene en su código. Por ejemplo, podría mostrar el estado de un pin GPIO, la temperatura, humedad o presión.

El "cliente" verá una página web con texto, botones y otros elementos. Esto es posible gracias a los archivos HTML y CSS que tendremos que incluir en la memoria flash del NodeMCU (conocida como SPIFFS).

Funcionalidades Clave de Nuestro Servidor Web

Para este ejemplo, nuestro servidor web realizará las siguientes acciones:

1. Controlará un LED conectado al GPIO 2 del ESP8266 (que suele ser el LED integrado en la placa).
2. La página del servidor web mostrará dos botones: ON y OFF, para encender y apagar el GPIO 2.
3. La página del servidor web también mostrará el estado actual del GPIO (ON/OFF).
4. Opcionalmente, utilizaremos un sensor BME280 para mostrar lecturas de temperatura, humedad y presión (aunque la implementación detallada de esto se dejará para un tutorial posterior).

Paso a Paso para Configurar NodeMCU como Servidor Web

1. Instalar la Placa ESP8266 en Arduino IDE

Para programar el NodeMCU con el IDE de Arduino, primero debes tener instalados los archivos necesarios para el ESP8266. Si aún no lo has hecho, puedes encontrar numerosos tutoriales en línea que explican cómo añadir el gestor de tarjetas para ESP8266 en tu IDE de Arduino (Archivo > Preferencias > URL de Gestores de Tarjetas Adicionales y luego Herramientas > Placa > Gestor de Tarjetas).

2. Plugin para Cargar el Sistema de Archivos (ESP8266 SPIFFS Filesystem Uploader)

Para subir archivos como HTML y CSS a la memoria flash del ESP8266 (SPIFFS), necesitamos un plugin específico. Sigue estos pasos para instalarlo:

1. Ve a la página de GitHub del "ESP8266FS" (busca "ESP8266FS GitHub").
2. Descarga el archivo ESP8266FS.jar de la sección de "Releases".
3. En tu directorio de sketches de Arduino (generalmente Documentos/Arduino), crea una carpeta llamada tools si no existe.
4. Dentro de la carpeta tools, crea otra carpeta llamada ESP8266FS/tool.
5. Copia el archivo ESP8266FS.jar dentro de la carpeta tool. La ruta final debería ser similar a Documentos/Arduino/tools/ESP8266FS/tool/ESP8266FS.jar.
6. Reinicia el IDE de Arduino. Ahora deberías ver la opción ESP8266 Sketch Data Upload en el menú Herramientas.

3. Instalación de Librerías Esenciales

Una librería es un pequeño programa que contiene una colección de funciones para incluir en tu sketch y que proporciona una funcionalidad específica. Para nuestro servidor web, necesitaremos varias.

3.1 Instalación de la Librería ESPAsyncWebServer

Esta librería es clave para construir un servidor web asíncrono en el ESP8266. A día de hoy, no siempre está disponible a través del gestor de librerías del IDE de Arduino, por lo que la instalaremos manualmente:

1. Haz clic aquí para descargar la librería ESPAsyncWebServer desde su repositorio de GitHub (busca "ESPAsyncWebServer GitHub").
2. Descarga el archivo ZIP.
3. Descomprime el archivo ZIP. La carpeta resultante probablemente tendrá un nombre como "ESPAsyncWebServer-master".
4. Renombra la carpeta a "ESPAsyncWebServer" (quitando el "-master").
5. Copia esta carpeta renombrada a la carpeta de librerías de tu instalación de Arduino (Documentos/Arduino/libraries).
6. Reinicia el IDE de Arduino.

3.2 Instalación de ESPAsyncTCP

La librería ESPAsyncWebServer depende de ESPAsyncTCP para funcionar correctamente. Los pasos para su instalación son idénticos a los de ESPAsyncWebServer:

1. Haz clic aquí para descargar la librería ESPAsyncTCP desde su repositorio de GitHub (busca "ESPAsyncTCP GitHub").
2. Descarga el archivo ZIP.
3. Descomprime el archivo. La carpeta probablemente se llamará "ESPAsyncTCP-master".
4. Renombra la carpeta a "ESPAsyncTCP".
5. Copia esta carpeta en la carpeta de librerías de Arduino.
6. Reinicia el IDE de Arduino.

Más adelante, si incorporamos el sensor BME280, necesitaremos otras librerías, pero por el momento, con estas es suficiente.

4. Subiendo Archivos al SPIFFS

Para que nuestro servidor web muestre una página, necesitamos los archivos HTML y CSS. El archivo HTML (`index.html`) contendrá la estructura y el contenido de la página, mientras que el archivo CSS (`style.css`) le dará estilo (colores, tamaños, etc.).

Estos archivos deben estar dentro de una carpeta llamada data, que debe ubicarse en el mismo directorio que tu archivo `.ino` del proyecto.

Una vez que tengas los archivos HTML y CSS dentro de la carpeta data, puedes subirlos utilizando la herramienta "ESP8266 Sketch Data Upload" que instalamos previamente:

1. Abre tu proyecto (`.ino`) en el IDE de Arduino.
2. Asegúrate de que la carpeta data con tus archivos HTML y CSS esté en el mismo nivel que tu archivo `.ino`.
3. Selecciona tu placa NodeMCU y el puerto COM correcto en Herramientas > Placa y Herramientas > Puerto.
4. Ve a Herramientas > ESP8266 Sketch Data Upload.
5. Espera a que el proceso de subida finalice. Un mensaje de "SPIFFS Image Uploaded" indicará que fue exitoso.

Si necesitas los archivos HTML y CSS de ejemplo, puedes encontrarlos en recursos relacionados con "nodemcu y uso de SPIFFS" o "ESP8266 web server SPIFFS".

5. Creando el Programa en el IDE (Código Arduino)

Finalmente, añade el siguiente código a tu proyecto en el IDE de Arduino:

/*
 1º Parte del proyecto del servidor web
 Adaptado de Ruiz Santos (RandomNerdTutorials.com)
*/

// Importamos las librerías
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h> // Para SPIFFS

// Sustituye los datos de tu red WIFI ( el nombre y la contraseña )
const char* ssid = "Nombre de la red";
const char* password = "Clave de la red WIFI";

// Puesta de LED GPIO
const int ledPin = 2;

// Para guardar el estado del LED
String ledState;

// Creamos el servidor AsyncWebServer en el puerto 80
AsyncWebServer server(80);

// Remplazamos el marcador con el estado del LED
String processor(const String& var){
 Serial.println(var);
 if(var == "STATE"){
 if(digitalRead(ledPin)){
 ledState = "ON";
 }
 else{
 ledState = "OFF";
 }
 // Imprimimos el estado del led ( por el COM activo )
 Serial.print(ledState);
 return ledState;
 }
 return String(); // Retorna una cadena vacía si no hay coincidencia
}

void setup(){
 // Establecemos la velocidad de conexión por el puerto serie
 Serial.begin(9200);

 // Ponemos a ledPin como salida
 pinMode(ledPin, OUTPUT);

 // Iniciamos SPIFFS
 if(!SPIFFS.begin()){
 Serial.println("Ha ocurrido un error al montar SPIFFS");
 return;
 }

 // conectamos al Wi-Fi
 WiFi.begin(ssid, password);

 // Mientras no se conecte, mantenemos un bucle con reintentos sucesivos
 while (WiFi.status() != WL_CONNECTED) {
 delay(1000);
 // Esperamos un segundo
 Serial.println("Connecting to WiFi..");
 }
 Serial.println();
 Serial.println(WiFi.SSID());
 Serial.print("IP address:");
 // Imprimimos la ip que le ha dado nuestro router
 Serial.println(WiFi.localIP());

 // Ruta para cargar el archivo index.html
 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
 request->send(SPIFFS, "/index.html", String(), false, processor);
 });

 // Ruta para cargar el archivo style.css
 server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
 request->send(SPIFFS, "/style.css", "text/css");
 });

 // Ruta para poner el GPIO alto (LED ON)
 server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
 digitalWrite(ledPin, HIGH);
 request->send(SPIFFS, "/index.html", String(), false, processor);
 });

 // Ruta para poner el GPIO bajo (LED OFF)
 server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
 digitalWrite(ledPin, LOW);
 request->send(SPIFFS, "/index.html", String(), false, processor);
 });

 // Start server
 server.begin();
}

void loop(){
 // En un servidor asíncrono, la mayoría de la lógica se maneja en las funciones de callback del servidor.
 // El bucle principal puede estar vacío o contener tareas de fondo no relacionadas con el servidor web.
}

A destacar dentro del código:

• processor(): Esta función es crucial. Atribuye un valor a los marcadores de posición que hemos creado en el archivo HTML. Acepta como argumento el marcador de posición (por ejemplo, "STATE") y debe devolver una cadena que lo reemplazará. Si el marcador es "STATE", la función verifica el estado del LED (digitalRead(ledPin)) y asigna "ON" u "OFF" a la variable ledState, la cual es finalmente retornada. Esto permite que el HTML muestre dinámicamente el estado del LED.
• setup():
  • Inicializa la comunicación serie y el pin del LED como salida.
  • Inicia el sistema de archivos SPIFFS, lo cual es esencial para que el NodeMCU pueda leer los archivos HTML y CSS que subimos.
  • Establece la conexión WiFi con el SSID y la contraseña de tu red.
  • Imprime la dirección IP asignada al NodeMCU, la cual necesitarás para acceder al servidor desde tu navegador.
  • Define las "rutas" del servidor:
    • /: Carga el archivo index.html.
    • /style.css: Carga la hoja de estilos CSS.
    • /on: Enciende el LED (digitalWrite(ledPin, HIGH)) y recarga la página.
    • /off: Apaga el LED (digitalWrite(ledPin, LOW)) y recarga la página.
  • server.begin(): Inicia el servidor web.
• loop(): En un servidor asíncrono como este, el bucle principal a menudo puede estar vacío o contener tareas no relacionadas con la atención de las solicitudes web, ya que la librería maneja las peticiones de forma no bloqueante.

6. Creando los Archivos HTML y CSS

Aunque el HTML y CSS requieren un estudio aparte, es útil entender cómo se conectan con nuestro NodeMCU.

En la cabecera de tu archivo index.html, encontrarás una línea similar a esta:

<link rel="stylesheet" type="text/css" href="style.css">

Esta etiqueta <link> le indica al archivo HTML que está utilizando una hoja de estilo externa para formatear el aspecto de la página. El atributo rel especifica que es una hoja de estilo (CSS), el atributo type indica que es un archivo CSS, y el atributo href apunta a la ubicación del archivo. Como style.css está en la misma carpeta que index.html (dentro de data), solo se necesita el nombre del archivo. Si estuviera en una subcarpeta (ej. estilos), la ruta sería href="estilos/style.css".

Dentro del cuerpo del HTML, verás cómo interactuamos con el código del NodeMCU:

<p>Estado del GPIO:<strong> %STATE%</strong></p>
<p>
 <a href="/on"><button class="button">ON</button></a>
 <a href="/off"><button class="button button2">OFF</button></a>
</p>

La primera línea muestra "Estado del GPIO:" y luego el marcador de posición %STATE%. Este marcador será reemplazado por el valor ("ON" o "OFF") que devuelve la función processor() en tu código de Arduino. Las líneas siguientes crean dos botones. Cada botón está envuelto en una etiqueta <a> (enlace) que apunta a una ruta específica: /on para el botón ON y /off para el botón OFF. Cuando haces clic en ellos, tu navegador envía una petición HTTP a estas rutas en el NodeMCU, lo que activa las funciones correspondientes en el código.

Acceso Externo a tu NodeMCU

Para acceder a tu servidor NodeMCU desde fuera de tu red local (es decir, desde Internet), necesitarás configurar el "reenvío de puertos" (port forwarding) en tu router. Esto implica decirle a tu router que las peticiones que lleguen a un puerto específico de tu IP pública (la de tu casa) deben ser redirigidas a la IP local de tu NodeMCU en el puerto 80. Este proceso varía según el modelo de router, por lo que deberás consultar el manual de tu dispositivo o buscar tutoriales específicos para tu modelo.

Preguntas Frecuentes (FAQ)

¿Dónde se instala la librería Wire.h?

La librería Wire.h viene preinstalada con el IDE de Arduino. No necesitas descargarla ni instalarla manualmente. Simplemente inclúyela en tu sketch con #include <Wire.h>.

¿Qué es el protocolo I2C?

I2C (Inter-Integrated Circuit) es un protocolo de comunicación en serie que permite a múltiples dispositivos (Maestros y Esclavos) comunicarse a través de solo dos líneas de datos (SDA y SCL) y dos de alimentación (VCC y GND). Es muy común en sensores y pantallas.

¿Por qué mi pantalla OLED no muestra nada?

Verifica las conexiones (VCC, GND, SDA, SCL). Asegúrate de que has instalado la librería del driver correcta (ej. Adafruit_SH1106) y de que has subido el código de ejemplo. También confirma la dirección I2C de tu pantalla (comúnmente 0x3C o 0x3D).

¿Cómo sé qué driver usa mi pantalla OLED?

El driver (ej. SH1106, SSD1306) suele estar especificado en la descripción del producto o en la documentación técnica cuando compras la pantalla. Es crucial para elegir la librería adecuada.

¿Qué es SPIFFS en ESP8266?

SPIFFS (SPI Flash File System) es un sistema de archivos ligero para el ESP8266 que permite almacenar archivos en la memoria flash del chip, como páginas web (HTML, CSS), imágenes o configuraciones, haciéndolos accesibles para tu código.

¿Cómo subo archivos HTML/CSS al NodeMCU?

Necesitas el plugin "ESP8266 Sketch Data Upload" para el IDE de Arduino. Coloca tus archivos HTML/CSS dentro de una carpeta llamada data en el mismo directorio que tu sketch (`.ino`), y luego usa Herramientas > ESP8266 Sketch Data Upload.

¿Por qué necesito ESPAsyncTCP si ya tengo ESPAsyncWebServer?

ESPAsyncTCP es una librería de bajo nivel que proporciona la funcionalidad TCP asíncrona sobre la cual se construye ESPAsyncWebServer. ESPAsyncWebServer la utiliza internamente para manejar las conexiones de red de manera eficiente, por lo que es una dependencia necesaria.

Conclusión

Desde la simplicidad de la librería Wire.h, que es la columna vertebral de la comunicación I2C, hasta la complejidad de configurar un servidor web completo con NodeMCU, hemos recorrido un camino fascinante. Has aprendido no solo cómo integrar y programar pantallas OLED para visualizar datos, sino también a dotar a tus proyectos de conectividad avanzada, permitiéndoles interactuar con el mundo exterior a través de la web. Estas habilidades abren un abanico infinito de posibilidades para tus futuros proyectos, desde estaciones meteorológicas personales hasta sistemas de automatización del hogar. La electrónica programable es un campo en constante evolución, y dominar estas herramientas básicas te permitirá seguir explorando y creando sin límites.

Si quieres conocer otros artículos parecidos a Arduino y NodeMCU: Del Cableado Básico al Servidor Web puedes visitar la categoría Librerías.