Mostrar un Hola, mundo en una pantalla OLED SSD1306 conectada a un ESP32 es el primer paso para construir interfaces visuales en proyectos embebidos. Aquí aprenderás a organizar tu código en funciones reutilizables, flashear el programa a la tarjeta y llevar tu pantalla al siguiente nivel con animaciones a partir de imágenes PNG.

¿Cómo organizar el código del SSD1306 en funciones reutilizables?

Antes de subir nada a la tarjeta, conviene separar el programa en bloques con responsabilidad única. En el código original había tres tareas mezcladas: configurar la pantalla, limpiarla y reescribir una línea. Convertirlas en funciones hace que el código sea claro y escalable para las siguientes etapas del proyecto [01:00].

Las tres funciones que se crean en Visual Studio Code son:

• screen_init: contiene la conexión por I2C, las dimensiones de la pantalla y el contraste inicial.
• screen_clear: encapsula la limpieza con un nombre más amigable que el original.
• screen_print: escribe un texto en la línea que tú elijas.

Como la variable de la pantalla está declarada de forma global, no hace falta pasarla como argumento. Es válido, aunque también podrías recibirla como parámetro si tu proyecto lo necesita.

¿Qué hace la función screen_init en un OLED SSD1306? Inicializa la conexión I2C, define las dimensiones (por ejemplo 128x64) y configura el contraste de la pantalla antes de poder dibujar nada en ella.

¿Cómo escribir texto dinámico con string.h en ESP32?

En lugar de dejar la cadena Hola, mundo fija dentro de la función, conviene recibirla como argumento. Así puedes cambiar el mensaje cuando quieras y reutilizar la función en cualquier parte del programa [02:30].

Para contar automáticamente cuántos caracteres tiene el texto, se incluye la librería estándar string.h, que ofrece la función strlen. La cadena se recibe como un puntero de caracteres (char *) y se pasa a strlen para que la librería sepa cuántos píxeles dibujar.

El segundo argumento clave es la línea o renglón. Siguiendo la terminología de la librería original, se llama page y es un entero. Con eso ya no estás obligado a escribir siempre en la línea cero: puedes elegir cualquier renglón disponible en la OLED.

c void screen_print(char *str, int page) { // limpia la línea y dibuja el texto con strlen(str) }

La invocación final queda en tres pasos: screen_init(), screen_clear() y screen_print("Hola, mundo", 0).

¿Cómo flashear el programa al ESP32 con idf.py?

Una vez listo el código, se compila con idf.py build. Si no aparecen errores, el siguiente paso es subirlo a la tarjeta de desarrollo [04:30].

Para flashear necesitas conocer el puerto COM al que está conectado tu ESP32. En el ejemplo, la tarjeta está en el COM 7, así que el comando completo indica el puerto y ejecuta el flasheo. Cuando termina la carga, la pantalla OLED muestra Hola, mundo en el primer renglón, justo como se programó.

¿Qué comando uso para subir un programa al ESP32? Usa idf.py -p COM7 flash, reemplazando COM7 por el puerto donde tengas conectada tu tarjeta. Eso compila lo pendiente y graba el binario en la memoria del microcontrolador.

Te invito a experimentar cambiando el número de línea o el contenido del texto para ver cómo responden tus funciones nuevas.

¿Cómo hacer animaciones en una pantalla OLED con ESP32?

El repositorio de la librería SSD1306 incluye un ejemplo llamado Animation Demo que muestra todo el potencial de esta pantalla. La idea: convertir cada fotograma de una animación en un arreglo de bytes que la pantalla pueda dibujar [06:30].

Para generar esos arreglos, la documentación del repositorio enlaza a una página que convierte una imagen PNG de 128x64 píxeles en un array de bytes. Puedes redimensionar tu imagen en cualquier editor online y elegir parámetros como:

• Dimensiones en píxeles.
• Lectura horizontal o vertical.
• Color de fondo: blanco, negro o transparente.

Cada configuración cambia el resultado, así que vale la pena experimentar con tu imagen específica.

¿Por qué cada frame se divide en dos copias en el array?

Al abrir el main.c del ejemplo en Visual Studio Code, verás una lista de listas en hexadecimal. Cada fotograma aparece duplicado porque la librería separa los píxeles pares de los impares para reconstruir la imagen completa al dibujarla. Por eso el archivo se ve largo, pero en realidad es solo la representación binaria de tus PNG.

¿Cómo se dibuja la animación en bucle?

El programa primero detecta si la pantalla usa SPI o I2C, y si es de 128x64 o 128x32. Si tu pantalla es de 32, el ejemplo no corre y muestra un error.

Después viene la lógica principal:

1. Limpia la pantalla con screen_clear.
2. Entra en un while infinito para repetir la animación.
3. Mide el tiempo de cada frame con una función de FreeRTOS, similar a contar FPS.
4. Recorre la lista de listas con dos for anidados.
5. Aplica rotate_byte para girar 90 grados cada byte, porque la pantalla imprime la información en orientación distinta.
6. Llama a display_image para dibujar el frame en la página correcta.
7. Hace una pausa de 2000 milisegundos antes de repetir.

El resultado es un personaje caminando en bucle dentro de una pantalla diminuta, con un programa sencillo en C.

¿Qué tamaño debe tener una imagen para el SSD1306? Para una pantalla estándar, usa imágenes de 128x64 píxeles en formato PNG. Si tu OLED es de 128x32, ajusta las dimensiones o el ejemplo no funcionará.

Después de compilar el Animation Demo y flashearlo al COM 7, el ESP32 reproduce la secuencia de fotogramas sin interrupción. Anímate a crear tus propias animaciones con tus imágenes y compártelas en los comentarios o en las redes de Platzi para que veamos qué personajes cobran vida en tu pantalla.