¡Bienvenido a un nuevo desafío con tu kit ESP32-C3 SuperMini! En este tutorial, aprenderás a trabajar con una pantalla OLED de 0.96 pulgadas. Descubrirás cómo usarla para mostrar texto y variables básicas, abriendo un mundo de posibilidades para tus proyectos. A lo largo de este camino, implementarás las siguientes funcionalidades:
Objetivo: Conectar tu módulo OLED a la ESP32-C3 SuperMini y mostrar un mensaje de texto simple.
Descripción: Esta es tu primera toma de contacto con la pantalla OLED. Aprenderás las conexiones básicas , cómo inicializarla en tu código y a mostrar un mensaje inicial que te dará la bienvenida a este nuevo mundo de visualización de datos.
Una pantalla OLED (Organic Light Emitting Diode) es una tecnología de visualización que usa diodos orgánicos para emitir luz propia cuando reciben corriente eléctrica. A diferencia de las pantallas LCD tradicionales, estas no necesitan una luz de fondo adicional. ¿El resultado? Consumen menos energía y ofrecen un contraste increíblemente nítido , con negros muy profundos.
Este módulo se comunica con tu ESP32-C3 SuperMini a través de un protocolo llamado I2C (Inter-Integrated Circuit) . Esto es genial porque solo necesitas dos cables de datos (además de la alimentación) para que la pantalla funcione:
Piensa en el OLED como una pequeña pizarra digital donde tu ESP32-C3 puede «dibujar» texto, números o incluso pequeños gráficos, ideal para mostrar información crucial como lecturas de sensores, el estado de tu proyecto o mensajes personalizados.
¡Antes de empezar a conectar, asegúrate de que tu ESP32-C3 SuperMini esté desconectada del computador para evitar cualquier daño!
Para que puedas visualizar las conexiones y probar el código sin tener aún los componentes físicos, te invitamos a usar Wokwi . Haz clic en la imagen a continuación y te llevará directamente a una simulación interactiva. ¡Así podrás experimentar con tu código antes de subirlo a la placa!
Para que tu OLED funcione, necesitaremos algunas librerías en el IDE de Arduino: Adafruit GFX y Adafruit SSD1306 . Son muy populares y fáciles de usar.
Para que tu ESP32-C3 SuperMini pueda «hablar» con la pantalla OLED, necesitamos instalar un par de librerías en tu IDE de Arduino. ¡No te preocupes, es un proceso muy sencillo!
Luego, copia y pega el siguiente código en tu IDE de Arduino. ¡No te preocupes, cada parte importante está comentada para que entiendas lo que hace!
Objetivo: Utilizar el potenciómetro para controlar un valor numérico que se muestra en tiempo real en tu pantalla OLED
Descripción: En esta actividad, uniremos dos elementos clave: tu pantalla OLED y el potenciómetro que ya conoces. A medida que gires el potenciómetro, verás cómo el valor numérico en la pantalla OLED cambia de inmediato. Esto te ayudará a entender cómo tu ESP32-C3 puede procesar una entrada analógica (el giro del potenciómetro) y presentarla de forma digital y clara en la pantalla. ¡Es una forma excelente de visualizar datos interactivos!
Mantén tu ESP32-C3 SuperMini desconectada del computador mientras realizas o verificas las conexiones. La conexión del OLED es la misma que en la Actividad 1, y le sumaremos la del potenciómetro.
Observa cómo se conectan el OLED y el potenciómetro. Haz clic en la imagen para abrir la simulación en Wokwi y probar el código de esta actividad directamente en tu navegador. ¡Verás el número cambiar en tiempo real a medida que ajustes el potenciómetro virtual!
Para esta actividad, utilizaremos las mismas librerías de la Actividad 1 ( Wire , Adafruit_GFX , Adafruit_SSD1306 ). Si ya las instalaste, ¡estás listo! Este código leerá el valor analógico de tu potenciómetro, lo transformará a un rango más comprensible (0-100, por ejemplo) y lo mostrará en tu pantalla OLED.
Objetivo: Aprender a dibujar formas geométricas básicas (líneas, rectángulos, círculos) y crear una animación simple para hacer tus proyectos más visuales y dinámicos.
Descripción: Más allá del texto, las pantallas OLED son fantásticas para mostrar elementos gráficos. En esta actividad, exploraremos las funciones de dibujo de la librería Adafruit GFX para trazar líneas, rectángulos (rellenos o solo el contorno) y círculos. Además, te enseñaré cómo usar estas herramientas para crear una animación básica de movimiento. ¡Estas habilidades te servirán como plantilla para personalizar la interfaz de tus propios proyectos!
Las conexiones para esta actividad son las mismas que en las actividades anteriores, ya que solo estamos agregando más funcionalidades de programación al OLED. Asegúrate de que tu ESP32-C3 SuperMini esté desconectada del computador antes de verificar las conexiones.
El circuito físico es idéntico a las actividades previas, solo cambiamos el código para dibujar. Haz clic en la imagen para abrir la simulación en Wokwi y ver cómo las formas y la animación se muestran en el OLED virtual.
Primero, veremos cómo dibujar formas básicas y mostrar números con un tamaño de letra ampliado.
Haz clic en la imagen para abrir la simulación de esta demostración en Wokwi. Allí podrás ver el resultado y ejecutarlo directamente.
Aquí te dejamos el código para que lo puedas copiar, pegar en tu IDE de Arduino y experimentar con él:
Ahora que sabes dibujar formas, ¡vamos a crear una animación! Esta es una forma sencilla de mover texto o cualquier forma a través de la pantalla, usando un bucle. Es una técnica básica pero muy efectiva para dar vida a tus proyectos.
Haz clic en la imagen para abrir la simulación de esta animación en Wokwi. ¡Podrás ver el texto desplazarse en tiempo real!
Aquí te dejamos el código para que lo puedas copiar y probar en tu placa:
Objetivo: Aprender a mostrar imágenes y animaciones más complejas en tu pantalla OLED utilizando mapas de bits (bitmaps) con la potente librería U8g2. Esto te abrirá un mundo de posibilidades para crear interfaces gráficas visualmente atractivas y dinámicas en tus proyectos.
Descripción: Hemos visto texto y formas básicas. Ahora, con la librería U8g2, tu pantalla OLED puede hacer aún más. Descubrirás cómo tomar una imagen, convertirla a un formato compatible con U8g2, y luego mostrarla. ¡Incluso crearemos una pequeña animación, lo que es clave para iconos personalizados o efectos visuales en tus futuros proyectos!
Las conexiones del OLED permanecen las mismas que en las actividades anteriores. No necesitamos añadir componentes adicionales para esta actividad, ya que el enfoque está en la manipulación gráfica a nivel de código. Recuerda que tu ESP32-C3 SuperMini debe estar desconectada del computador mientras realizas o verificas las conexiones.
El circuito físico es el mismo que hemos usado, solo cambia el código para dibujar las imágenes. Para esta actividad, te proporcionaremos un enlace a Wokwi donde ya hemos cargado un ejemplo con una animación.
Para usar U8g2, primero debemos instalarla y luego entender su forma de manejar los bitmaps.
Primero, veremos cómo mostrar una imagen simple en tu OLED. Imagina un pequeño logo o un ícono.
Haz clic en la imagen a continuación para ver esta demostración en Wokwi.
Haz clic en la imagen para ver esta demostración en Wokwi.
Aquí te dejamos el código para que lo puedas copiar y probar. Recuerda que el contenido del array icon_gota_16x16 debe ser el código que generes de tu propia imagen con la configuración de image2cpp para U8g2.
Para crear una animación, simplemente necesitamos una secuencia de imágenes (cada una como su propio arreglo PROGMEM ) y luego mostrar cada una en orden, con un pequeño retraso entre ellas. Esto crea la ilusión de movimiento.
Haz clic en la imagen para ver una simulación de una animación simple (por ejemplo, gotas de lluvia o un molino de viento girando) en Wokwi.
Aquí tienes el código para una animación básica. Se utilizo una barra de progreso para la explicación.