Tutorial 3: Pantalla OLED 0.96″

¿Qué vamos a hacer?

¡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:

• Conectar tu pantalla OLED usando el protocolo I2C.
• Mostrar texto estático y dinámico en la pantalla.
• Integrar la pantalla con componentes que ya conoces de tutoriales anteriores (como botones y potenciómetros).

---

Actividad 1: ¡Hola, Pantalla! – Familiarización con el OLED

Dificultad: Baja

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.

Materiales que necesitas:

• ESP32-C3 SuperMini (1 unidad)
• Pantalla OLED I2C 128×64 px (1 unidad)
• Cables de conexión (DuPont macho-macho o macho-hembra, según tu protoboard)
• Protoboard (opcional, pero ¡muy recomendado para que tus conexiones queden ordenadas y seguras!)

¿Qué es una pantalla OLED?

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:

• SDA (Serial Data): La línea por donde se envían y reciben los datos.
• SCL (Serial Clock): La línea que sincroniza la comunicación para que todo vaya a tiempo.

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.

Conexión del circuito:

¡Antes de empezar a conectar, asegúrate de que tu ESP32-C3 SuperMini esté desconectada del computador para evitar cualquier daño!

• Conexiones para la Pantalla OLED (I2C):
  • Conecta el pin VCC de la pantalla a 3.3V en tu ESP32-C3.
  • Conecta el pin GND de la pantalla a GND en tu ESP32-C3.
  • Conecta el pin SDA de la pantalla a GPIO 8 en tu ESP32-C3.
  • Conecta el pin SCL de la pantalla a GPIO 9 en tu ESP32-C3.

---

Esquemático y Simulación en Wokwi:

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!

---

Código para la Actividad 1:

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.

Instalación de Librerías Esenciales:

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!

1. Abre tu IDE de Arduino.
2. Ve al menú superior y haz clic en Herramientas > Administrar Bibliotecas... (o Sketch > Incluir Librería > Administrar Bibliotecas...).
3. Se abrirá una nueva ventana llamada «Gestor de Librerías».
4. En la barra de búsqueda, escribe Adafruit GFX Library y presiona Enter.
5. Busca la librería que dice «Adafruit GFX Library» (generalmente es la primera opción de Adafruit) y haz clic en Instalar. Asegúrate de seleccionar la última versión disponible.
6. Repite los pasos 4 y 5 para la librería Adafruit SSD1306. Busca «Adafruit SSD1306» y haz clic en Instalar.

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!

#include <Wire.h>             // Librería esencial para la comunicación I2C
#include <Adafruit_GFX.h>     // Librería gráfica básica de Adafruit
#include <Adafruit_SSD1306.h> // Librería específica para el controlador SSD1306 de tu OLED

// Define el ancho y alto de tu pantalla OLED en píxeles.
// ¡No te preocupes si no lo sabes, 128x64 es el tamaño más común para este modelo!
#define SCREEN_WIDTH 128    // Ancho de la pantalla OLED
#define SCREEN_HEIGHT 64    // Alto de la pantalla OLED

// Este parámetro es para el pin de reseteo del OLED.
// En la mayoría de los módulos OLED I2C, este pin no se usa, por eso lo ponemos en -1.
#define OLED_RESET    -1

// Aquí creamos el objeto principal para controlar tu pantalla OLED.
// Le pasamos las dimensiones y la interfaz I2C.
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

void setup() {
  Serial.begin(115200); // Iniciamos la comunicación serial para ver mensajes de depuración en tu monitor serial.

  // Intentamos inicializar la pantalla OLED. La dirección I2C 0x3C es la más común.
  // SSD1306_SWITCHCAPVCC es un parámetro técnico para la inicialización del display.
  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("Error: ¡No se encontró la pantalla OLED! Revisa bien tus conexiones."));
    for (;;); // Si hay un error, el programa se detiene aquí para que puedas verificar.
  }

  // Limpiamos la pantalla para asegurarnos de que no haya "basura" de arranques anteriores.
  display.clearDisplay();

  // Configuramos el color del texto. SSD1306_WHITE significa que los píxeles se encenderán (blanco).
  display.setTextColor(SSD1306_WHITE);
  // Configuramos el tamaño del texto. Un tamaño de 1 es el normal, legible y estándar.
  display.setTextSize(1);
  // Establecemos la posición donde empezará a escribir el texto (columna 0, fila 0).
  display.setCursor(0, 0);
  // ¡El mensaje de bienvenida de Mechatronicstore!
  display.println("¡Hola y exito en");
  display.println("tus proyectos!");
  display.println(""); // Un salto de línea para separar.
  display.println("Te desea:");
  display.println("MECHATRONICSTORE");

  // Este comando es crucial: envía todo lo que hemos "dibujado" al buffer de la pantalla
  // para que se muestre físicamente en el OLED.
  display.display();
}

void loop() {
  // Para esta primera actividad, el mensaje que mostramos es estático.
  // Esto significa que no hay cambios constantes, por lo que el loop() puede quedarse vacío.
  // En las siguientes actividades, agregaremos más lógica aquí para hacer cosas dinámicas.
}

---

Actividad 2: Contador en Pantalla – Controlando un Valor con el Potenciómetro

Dificultad: Media

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!

Materiales que necesitas:

• ESP32-C3 SuperMini (1 unidad)
• Pantalla OLED I2C 128×64 px (1 unidad) – ¡La misma que usaste en la Actividad 1!
• Potenciómetro (1 unidad) – ¡Este componente ya lo conoces del Tutorial 2!
• Cables de conexión (DuPont macho-macho o macho-hembra)
• Protoboard (altamente recomendado)

Conexión del circuito:

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.

• Conexiones para la Pantalla OLED (I2C): (¡Estas ya las tienes listas de la actividad anterior!)
  • VCC de la pantalla a 3.3V en tu ESP32-C3.
  • GND de la pantalla a GND en tu ESP32-C3.
  • SDA de la pantalla a GPIO 8 en tu ESP32-C3.
  • SCL de la pantalla a GPIO 9 en tu ESP32-C3.
• Conexiones para el Potenciómetro: (¡Recordando lo visto en el Tutorial 2!)
  • Una patilla lateral del potenciómetro a 3.3V en tu ESP32-C3.
  • La otra patilla lateral del potenciómetro a GND en tu ESP32-C3.
  • La patilla central (la que entrega el valor variable) a GPIO 1 (ADC1_CH0) en tu ESP32-C3.

---

Esquemático y Simulación en Wokwi:

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!

---

Código para la Actividad 2:

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.

#include <Wire.h>             // Librería para comunicación I2C
#include <Adafruit_GFX.h>     // Librería gráfica de Adafruit
#include <Adafruit_SSD1306.h> // Librería para el controlador SSD1306 del OLED

// Define el ancho y alto de tu pantalla OLED
#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64

// Pin de reseteo del OLED, usualmente -1 para módulos I2C
#define OLED_RESET    -1

// Crea el objeto Adafruit_SSD1306 para controlar la pantalla
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// Define el pin donde está conectado el potenciómetro
#define POT_PIN GPIO_NUM_1 // El pin GPIO 1 (ADC1_CH0) es ideal para entradas analógicas en la ESP32-C3

void setup() {
  Serial.begin(115200); // Inicia la comunicación serial para depuración

  // Inicializa la pantalla OLED
  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("Error: ¡No se encontró la pantalla OLED! Revisa las conexiones."));
    for (;;); // Detiene el programa si no se detecta el OLED
  }

  display.clearDisplay(); // Limpia la pantalla
  display.setTextColor(SSD1306_WHITE); // Color del texto
  display.setTextSize(1); // Tamaño del texto
}

void loop() {
  // Lee el valor analógico del potenciómetro.
  // El valor leído estará en un rango de 0 a 4095 para la ESP32-C3.
  int rawValue = analogRead(POT_PIN);

  // Mapea el valor leído (0-4095) a un rango más manejable y amigable (0-100).
  // Esto es útil para mostrar un porcentaje o una escala.
  int mappedValue = map(rawValue, 0, 4095, 0, 100);

  // Limpia solo el área donde se mostrará el texto para evitar "rastros"
  // Esto es más eficiente que clearDisplay() si solo cambia una parte.
  display.fillRect(0, 0, SCREEN_WIDTH, 16, SSD1306_BLACK); // Limpia la primera línea

  // Establece el cursor para el texto
  display.setCursor(0, 0);
  display.print("Valor Pot.: ");
  display.print(mappedValue);
  display.println("%"); // Agregamos un porcentaje para que sea más claro

  // Muestra el contenido del buffer en la pantalla física
  display.display();

  delay(50); // Pequeña pausa para estabilizar las lecturas y no actualizar demasiado rápido
}

---

Actividad 3: Dibujando Formas y Animaciones Simples en el OLED

Dificultad: Media

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!

Materiales que necesitas:

• ESP32-C3 SuperMini (1 unidad)
• Pantalla OLED I2C 128×64 px (1 unidad)
• Cables de conexión
• Protoboard (opcional, pero útil)

Conexión del circuito:

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.

• Conexiones para la Pantalla OLED (I2C):
  • VCC de la pantalla a 3.3V en tu ESP32-C3.
  • GND de la pantalla a GND en tu ESP32-C3.
  • SDA de la pantalla a GPIO 8 en tu ESP32-C3.
  • SCL de la pantalla a GPIO 9 en tu ESP32-C3.

---

Esquemático y Simulación en Wokwi:

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.

---

Código para la Actividad 3: Dibujando Formas

Primero, veremos cómo dibujar formas básicas y mostrar números con un tamaño de letra ampliado.

Aquí te dejamos el código para que lo puedas copiar, pegar en tu IDE de Arduino y experimentar con él:

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

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

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("Error: ¡No se encontró la pantalla OLED! Revisa las conexiones."));
    for (;;);
  }

  display.clearDisplay(); // Limpiamos la pantalla al inicio
  display.setTextColor(SSD1306_WHITE); // Establecemos el color del texto y las formas
}

void loop() {
  display.clearDisplay(); // Limpiamos el buffer para dibujar nuevas formas

  // --- Dibujando Formas Básicas ---

  // 1. Dibujar una línea: (x1, y1, x2, y2, color)
  // Dibuja una línea diagonal de la esquina superior izquierda a la inferior derecha.
  display.drawLine(0, 0, SCREEN_WIDTH - 1, SCREEN_HEIGHT - 1, SSD1306_WHITE);

  // 2. Dibujar el contorno de un rectángulo: (x, y, ancho, alto, color)
  // Dibuja un rectángulo sin relleno en el centro.
  display.drawRect(20, 10, 80, 40, SSD1306_WHITE);

  // 3. Dibujar un rectángulo relleno: (x, y, ancho, alto, color)
  // Dibuja un pequeño rectángulo sólido.
  display.fillRect(5, 5, 10, 10, SSD1306_WHITE);

  // 4. Dibujar el contorno de un círculo: (centro_x, centro_y, radio, color)
  // Dibuja un círculo sin relleno.
  display.drawCircle(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, 20, SSD1306_WHITE);

  // 5. Dibujar un círculo relleno: (centro_x, centro_y, radio, color)
  // Dibuja un pequeño círculo sólido.
  display.fillCircle(SCREEN_WIDTH - 15, 15, 5, SSD1306_WHITE);

  // --- Mostrando Números Grandes ---
  // También podemos cambiar el tamaño del texto para mostrar números o letras más grandes.
  display.setTextSize(2); // Tamaño de texto 2x
  display.setCursor(5, 45); // Establece el cursor para el número
  display.print(millis() / 1000 % 100); // Muestra un número que cambia cada segundo (0-99)

  display.setTextSize(1); // Volvemos al tamaño normal para otros textos
  display.setCursor(90, 45);
  display.print("SEG");


  // Actualiza la pantalla con todo lo que hemos dibujado en el buffer
  display.display();

  delay(1000); // Espera 1 segundo antes de volver a dibujar
}

Código para la Actividad 3: Creando una Animación Simple (Texto en Movimiento)

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.

Aquí te dejamos el código para que lo puedas copiar y probar en tu placa:

#include <Wire.h>
#include <Adafruit_GFX.h>
#include <Adafruit_SSD1306.h>

#define SCREEN_WIDTH 128
#define SCREEN_HEIGHT 64
#define OLED_RESET    -1
Adafruit_SSD1306 display(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, OLED_RESET);

// Variable global para controlar la posición del texto en la animación
int textPosX = SCREEN_WIDTH; // Empezamos el texto fuera de la pantalla por la derecha

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

  if (!display.begin(SSD1306_SWITCHCAPVCC, 0x3C)) {
    Serial.println(F("Error: ¡No se encontró la pantalla OLED! Revisa las conexiones."));
    for (;;);
  }

  display.clearDisplay();
  display.setTextColor(SSD1306_WHITE);
  display.setTextSize(1); // Tamaño de texto normal para la animación
}

void loop() {
  display.clearDisplay(); // Siempre limpia el buffer antes de dibujar el nuevo "frame"

  // Dibuja el texto en la posición actual
  display.setCursor(textPosX, SCREEN_HEIGHT / 2 - 4); // Centrado verticalmente
  display.print("Mechatronicstore!");

  // Mueve la posición del texto hacia la izquierda
  textPosX = textPosX - 1;

  // Si el texto se ha ido completamente por la izquierda, lo reiniciamos a la derecha
  if (textPosX < -120) { // Ajusta este valor según la longitud de tu texto
    textPosX = SCREEN_WIDTH;
  }

  display.display(); // Muestra el nuevo frame en la pantalla
  delay(20); // Pequeño retraso para controlar la velocidad de la animación
}

---

Actividad 4: ¡Pixels que Cobran Vida! – Animaciones Avanzadas con Bitmaps usando U8g2

Dificultad: Alta

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!

Materiales que necesitas:

• ESP32-C3 SuperMini (1 unidad)
• Pantalla OLED I2C 128×64 px (1 unidad)
• Cables de conexión
• Protoboard (altamente recomendado)

Conexión del circuito:

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.

• Conexiones para la Pantalla OLED (I2C):
  • VCC de la pantalla a 3.3V en tu ESP32-C3.
  • GND de la pantalla a GND en tu ESP32-C3.
  • SDA de la pantalla a GPIO 8 en tu ESP32-C3.
  • SCL de la pantalla a GPIO 9 en tu ESP32-C3.

---

Esquemático general y Simulación en Wokwi:

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.

---

¡Importante! Instalación de la Librería U8g2 y Proceso para Crear tus Propias Imágenes/Animaciones:

Para usar U8g2, primero debemos instalarla y luego entender su forma de manejar los bitmaps.

1. Instala la librería U8g2:
   • Abre tu IDE de Arduino en Windows.
   • Ve a Herramientas > Administrar Bibliotecas....
   • En la barra de búsqueda, escribe U8g2 y presiona Enter.
   • Busca la librería que dice «U8g2» (publicada por oliver) y haz clic en el botón Instalar. Asegúrate de seleccionar la última versión.
2. Proceso para generar tus Bitmaps con Lopaka.app para U8g2:
   • Lopaka.app es un editor gráfico online que te permite diseñar y generar bitmaps directamente en el formato de U8g2.
   • Abre tu navegador y ve a: https://lopaka.app/
3. Paso a paso para la configuración:
   • Display: En la esquina superior izquierda, haz clic en Display. En Display type selecciona U8g2, y en U8g2 Type busca y selecciona SSD1306 128x64 (F) I2C (no reset). Haz clic en Done. Esto configura el lienzo para tu OLED.
   • Diseña o Importa tu Imagen:
     • Usa las herramientas de la izquierda (Line, Rectangle, Circle, Text) para dibujar tu ícono o diseño.
     • Si quieres importar una imagen, haz clic en la herramienta Bitmap, luego en Upload (en el panel derecho) y selecciona tu archivo. Ajusta Threshold e Invert si es necesario para que se vea bien en blanco y negro.
   • Genera el Código del Bitmap: Una vez que tu diseño esté listo, ve a la esquina superior derecha y haz clic en Code.
   • Lopaka generará el código C++ automáticamente. Busca la línea que define tu imagen, similar a: static const unsigned char image_my_image_bits[] U8X8_PROGMEM = { ... };. Copia solo esta línea completa de la definición del arreglo.
4. Para animaciones: Repite este proceso para cada «cuadro» o «frame» de tu animación. Cada frame será un arreglo U8X8_PROGMEM diferente.

Demostración 1: Mostrando un Ícono Fijo (Bitmap)

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.

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.

// Proyecto simple usando Arduino UNO y la pantalla OLED 128x64 SSD1306 IIC, creado por upir, 2023
// Canal de YouTube: https://www.youtube.com/@upir
// Más videos con Arduino UNO y pantallas OLED: https://www.youtube.com/@upir

#include <Arduino.h>
#include <U8g2lib.h>

#include <Wire.h> // Librería necesaria para la comunicación I2C

// Inicialización para la pantalla OLED utilizada (SSD1306 128x64 I2C).
// U8G2_R0 significa sin rotación. U8X8_PIN_NONE para el pin de reset si no se usa.
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

// Imágenes de Lopaka editor: https://lopaka.app/
// Para generar tus propias imágenes, usa la configuración de image2cpp para U8g2 (MSB first).
static const unsigned char image_LOGOSTORE_bits[] = {0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xf0,0x7f,0x00,0x80,0xff,0x07,0x00,0x00,0xfc,0xff,0x03,0xe0,0xff,0x1f,0x00,0x00,0xff,0xff,0x0f,0xf8,0xff,0x7f,0x00,0xc0,0xff,0xff,0x1f,0xfc,0xff,0xff,0x00,0xe0,0xff,0xff,0x3f,0xd5,0xff,0xff,0x03,0xf0,0xfe,0xff,0xff,0xff,0xff,0xff,0x07,0xf8,0xfd,0xff,0xff,0xdf,0xff,0xff,0x07,0xf8,0xff,0xff,0xff,0xff,0xff,0xff,0x0f,0xfc,0x01,0x00,0xe0,0xff,0xff,0xff,0x1f,0xfe,0xff,0xff,0xff,0xff,0xff,0xff,0x3f,0xfe,0xff,0xff,0xff,0xff,0xdf,0xff,0x3f,0xf9,0x3f,0xc0,0x1f,0x00,0x01,0xfe,0x7f,0xff,0x1f,0x80,0xff,0xff,0x00,0xfc,0x7f,0xff,0x0f,0x00,0xff,0x7f,0x00,0xf8,0x7f,0xff,0x07,0x00,0x7e,0x3f,0x00,0xf0,0x7f,0xff,0x03,0x00,0xfe,0x3f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xf8,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xf4,0x1f,0x00,0xe0,0xff,0xf7,0x03,0x00,0xec,0x1f,0x00,0xe0,0xff,0x5f,0x01,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0x60,0xdb,0xff,0x03,0x00,0xbc,0x1e,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0x00,0xf8,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0x1f,0x00,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xef,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xf7,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xf8,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xfc,0x1f,0x00,0xe0,0xff,0xff,0x03,0x00,0xbc,0x0a,0x00,0xe0,0xff,0xc0,0x03,0x00,0xdc,0x1f,0x00,0xe0,0xff,0x55,0x01,0x00,0xa4,0x0a,0x00,0xa0,0xaa,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00};

void setup(void) {
  u8g2.begin(); // Inicia la librería U8g2
}

void loop(void) {
  u8g2.clearBuffer();
  u8g2.setFontMode(1);
  u8g2.setBitmapMode(1);
  u8g2.drawFrame(3, 3, 116, 58);

  u8g2.drawXBM(32, -1, 64, 64, image_LOGOSTORE_bits);

  u8g2.sendBuffer();
   
}

Demostración 2: Creando una Animación con Múltiples Bitmaps

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.

Aquí tienes el código para una animación básica. Se utilizo una barra de progreso para la explicación.

// Proyecto simple usando Arduino UNO y la pantalla OLED 128x64 SSD1306 IIC, creado por upir, 2023
// Canal de YouTube: https://www.youtube.com/@upir
// Más videos con Arduino UNO y pantallas OLED: https://www.youtube.com/@upir

#include <Arduino.h>
#include <U8g2lib.h>

#include <Wire.h> // Librería necesaria para la comunicación I2C

// Inicialización para la pantalla OLED utilizada (SSD1306 128x64 I2C).
// U8G2_R0 significa sin rotación. U8X8_PIN_NONE para el pin de reset si no se usa.
U8G2_SSD1306_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8X8_PIN_NONE);

// Imágenes de Lopaka editor: https://lopaka.app/
// Para generar tus propias imágenes, usa la configuración de image2cpp para U8g2 (MSB first).
static const unsigned char image_Lock_7x8_bits[] U8X8_PROGMEM = {0x1c,0x22,0x22,0x7f,0x7f,0x77,0x7f,0x3e};
static const unsigned char image_Bluetooth_Idle_5x8_bits[] U8X8_PROGMEM = {0x04,0x0d,0x16,0x0c,0x0c,0x16,0x0d,0x04};
static const unsigned char image_Volup_8x6_bits[] U8X8_PROGMEM = {0x48,0x8c,0xaf,0xaf,0x8c,0x48};
static const unsigned char image_Alert_9x8_bits[] U8X8_PROGMEM = {0x10,0x00,0x38,0x00,0x28,0x00,0x6c,0x00,0x6c,0x00,0xfe,0x00,0xee,0x00,0xff,0x01};

int progress = 0; // Variable para el progreso de la barra
char buffer[32]; // Buffer de ayuda para construir la cadena de texto a mostrar

void setup(void) {
  u8g2.begin(); // Inicia la librería U8g2
}

void loop(void) {
  u8g2.clearBuffer();        // Limpia la memoria interna (buffer de la pantalla)

  // Código adaptado de https://lopaka.app/
  u8g2.setBitmapMode(1); // Configura el modo de bitmap (1 = transparencia)
  u8g2.drawFrame(12, 21, 104, 20); // Dibuja el marco de la barra de progreso
  u8g2.drawBox(14, 23, progress, 16); // Dibuja el relleno de la barra de progreso
  u8g2.setFont(u8g2_font_helvB08_tr); // Establece una fuente para el texto
  sprintf(buffer, "Progreso: %d%%", progress); // Construye una cadena con la variable de progreso
  u8g2.drawStr(33, 53, buffer); // Muestra la cadena de texto
  u8g2.setFont(u8g2_font_haxrcorp4089_tr); // Establece otra fuente para el título
  u8g2.drawStr(0, 7, "Pantalla de progeso"); // Muestra el título
  u8g2.drawLine(0, 9, 127, 9); // Dibuja una línea separadora
  u8g2.drawXBMP( 100, 0, 7, 8, image_Lock_7x8_bits); // Dibuja el ícono de candado
  u8g2.drawXBMP( 111, 0, 5, 8, image_Bluetooth_Idle_5x8_bits); // Dibuja el ícono de Bluetooth
  u8g2.drawXBMP( 120, 1, 8, 6, image_Volup_8x6_bits); // Dibuja el ícono de volumen
  u8g2.drawXBMP( 22, 45, 9, 8, image_Alert_9x8_bits); // Dibuja el ícono de alerta

  u8g2.sendBuffer();         // Transfiere el contenido de la memoria interna a la pantalla

  // Aumenta el valor de progreso para que vaya de 0 a 100
  progress = progress + 5;
  if (progress > 100) {
    progress = 0; // Reinicia el progreso al llegar a 100
  }
}