Mostrar imagen en la pantalla OLED con Esptop 10 usando Arduino IDE

ESP32 es una placa de microcontrolador compacta pequeña con requisitos mínimos de energía. En los últimos años, ESP32 ganó una gran cantidad de éxito debido a su versatilidad y facilidad de uso. En muchos proyectos donde la producción debe mostrarse en un monitor en serie. Entonces, en lugar de hacer esto, podemos interactuar una pantalla OLED con ESP32. Esta lección será una guía para interactuar ESP32 con I2C 0.Pantalla OLED de 96 ".

Esta lección incluye los siguientes temas:

• 1: Introducción a la pantalla OLED
• 2: Módulo de pantalla OLED de cableado a ESP32
• 3: Instalación de bibliotecas requeridas
• 4: Verifique la dirección de la pantalla OLED I2C
• 5: Mostrar imagen en la pantalla OLED con ESP32 usando Arduino IDE
• 5.1: Convertir imagen en código hexadecimal
• 5.2: código
• 5.3: Muestra de código Arduino para visualización de imágenes
• 5.4: salida

1: Introducción a la pantalla OLED

Antes de avanzar más primero debemos saber qué Oleado (Diodo emisor de luz orgánico) la pantalla es. Las pantallas OLED se utilizan como alternativa para LCD. Los LED OLED se utilizan para producir pantallas de luz en pantallas OLED. La pantalla LCD utiliza la luz de fondo para iluminar sus píxeles, mientras que las pantallas OLED tienen sus propios LED emisivos. Hay cientos de LED a sí mismos. Para mostrar imágenes y el brillo del texto de estos LED se puede controlar Pixel por Pixel.

Ahora, como conocemos algunos conceptos básicos relacionados con la pantalla OLED. El siguiente paso es cablear ESP32 con un módulo de pantalla OLED.

2: Módulo de pantalla OLED de cableado a ESP32

La pantalla OLED viene principalmente con dos protocolos de comunicación diferentes. Los dos protocolos son I2C y SPI. La interfaz periférica en serie (SPI) es generalmente más rápida que I2C, pero preferimos I2C sobre el protocolo SPI, ya que requirió menos número de alfileres.

La siguiente imagen ilustra el diagrama de conexión ESP32 con 128 × 64 píxeles (0.96 ") Pantalla OLED.

A continuación se muestra la tabla de conexión:

Una vez que ESP32 está interactuado con una pantalla OLED, el siguiente paso en la lista es instalar todas las bibliotecas requeridas para la programación ESP32 utilizando Arduino IDE.

3: Instalación de bibliotecas requeridas

Múltiples bibliotecas están disponibles en Arduino IDE para programar ESP32 con una pantalla OLED. Aquí usaremos dos bibliotecas de AdaFruit: SSD1306 y GFX Library.

Ahora en el Arduino IDE Open Library Manager y busque la biblioteca SSD1306. Instale la biblioteca SSD1306 por Adafruit desde la barra de búsqueda.

Alternativamente, uno también puede ir a: Sketch> incluir biblioteca> Administrar bibliotecas

La próxima biblioteca que necesitamos instalar es el Gfx Biblioteca de Adafruit.

Después de que ambas bibliotecas se instalen correctamente, el siguiente paso es verificar la dirección I2C donde está conectado ESP32.

4: Verifique la dirección de la pantalla OLED I2C

I2C significa Comunicación de circuitos interintegrados. Usando i2c podemos interactuar múltiples dispositivos en 2 cables. Sin embargo, al conectarlos, cada dispositivo I2C debe usar una dirección I2C separada. Esta dirección varía de 0 a 127. Por ejemplo, si tenemos dos dispositivos I2C diferentes que usan la misma dirección I2C, no se pueden conectar en la misma línea I2C.

Antes de interactuar ESP32 con dispositivos I2C, recuerde verificar primero la dirección I2C. Para verificar la dirección I2C de la pantalla OLED conectada conectada ESP32 con PC, cargue el código dado en el artículo Verifique la dirección I2C usando Arduino IDE.

Después de cargar el código I2C, se puede ver la dirección en el monitor en serie. Aquí en nuestro caso, la pantalla OLED está conectada a la dirección I2C (0x3c).

Usaremos la dirección I2C mencionada para la pantalla OLED en el código Arduino.

5: Mostrar imagen en la pantalla OLED con ESP32 usando Arduino IDE

El primer paso que se necesita para mostrar una imagen en una pantalla OLED es convertir la imagen en un código hexagonal. Usando cualquier imagen en línea para convertidor hexagonal podemos obtener el código hexadecimal contra una imagen.

1: Convertir imagen en código hexadecimal

Para convertir una imagen en código hexadecimal, podemos usar cualquier herramienta en línea, o también puede convertir la imagen en código hexadecimal usando la herramienta de pintura de Windows. Ahora siga los pasos para obtener el código hexagonal para su imagen.

Paso 1: Haga clic aquí para visitar el convertidor gratuito Image2Cpp.

Paso 2: Seleccione la imagen que queremos mostrar en OLED.

Paso 3: Después de seleccionar la imagen, haga clic en Abrir.

Etapa 4: En la configuración de la imagen establece las dimensiones en 128 x 64. El brillo se puede establecer de acuerdo con el número de imagen recomendado en algún lugar alrededor de 150.

Escala la imagen de acuerdo con el tamaño y, como referencia, consulte la vista previa de salida.

Paso 5: Ahora establezca el formato de salida del código en el código Arduino y prefijo como mapa de bits. Después de eso, haga clic en Generar código. El código hexadecimal de salida se puede copiar desde la ventana de salida.

Reemplace el código hexadecimal copiado en el código de muestra Arduino IDE que se proporciona a continuación.

2: código

Ahora abra el IDE Arduino y pegue el código dado. Recuerde reemplazar el código hexadecimal con el de la imagen que necesita mostrar en una pantalla OLED.

/****** Linuxhint.Com ********/
#incluir
#incluir
#incluir
#define screen_width 128
#define screen_height 64
AdaFruit_SSD1306 Display (Screen_Width, Screen_height, & Wire, -1);
estatic const uint8_t image_hex_array [1024] =
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xbf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf9, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf7, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xf3, 0xff, 0xfd, 0xb0, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xe7, 0xff, 0xfc, 0xe0, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xfe, 0x60, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xfe, 0x4f, 0xdf, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcc, 0x8f, 0x3e, 0x4f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xce, 0x0f, 0x1e, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0x8f, 0xbe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xff, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0x9f, 0xff, 0xff, 0x3f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcd, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcc, 0xff, 0xe6, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xce, 0x3f, 0x8e, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0x00, 0x0e, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0x80, 0x3e, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xe0, 0x7e, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xcf, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xc7, 0xff, 0xfe, 0x7f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xe7, 0xff, 0xfc, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xfc, 0xff, 0xff, 0xff, 0xff, 0xf1, 0xff, 0x7f, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xff,
0xff, 0xfc, 0xcf, 0xff, 0xff, 0xff, 0xf1, 0xfe, 0x3f, 0xf9, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xff,
0xff, 0xfc, 0xcf, 0xff, 0xff, 0xff, 0xf1, 0xfe, 0x3f, 0xf8, 0xff, 0xc7, 0xff, 0xff, 0xff, 0xff,
0xff, 0xfc, 0xff, 0xff, 0xff, 0xff, 0xf1, 0xff, 0xff, 0xf8, 0xff, 0x8e, 0xff, 0xff, 0xff, 0xff,
0xff, 0x0c, 0xcf, 0x8f, 0x3e, 0x47, 0x90, 0x1e, 0x3c, 0x38, 0x1f, 0x8e, 0x1f, 0xff, 0xff, 0xff,
0xf8, 0x0c, 0xce, 0x03, 0x3e, 0x47, 0x90, 0x06, 0x30, 0x18, 0x1f, 0x1e, 0x07, 0xff, 0xff, 0xff,
0xf0, 0x3c, 0xcc, 0x03, 0x3e, 0x47, 0x90, 0x06, 0x20, 0x08, 0x3f, 0x1f, 0x81, 0xff, 0xff, 0xff,
0xf0, 0xfc, 0xcc, 0xf1, 0x3e, 0x60, 0x10, 0xe2, 0x23, 0x88, 0xfe, 0x3f, 0xe1, 0xff, 0xff, 0xff,
0xf0, 0x3c, 0xcc, 0xf9, 0x3e, 0x60, 0x31, 0xe2, 0x23, 0xc8, 0xfe, 0x3f, 0x81, 0xff, 0xff, 0xff,
0xf8, 0x1c, 0xcc, 0xf9, 0x3e, 0x60, 0x11, 0xe2, 0x23, 0xc8, 0xfc, 0x7e, 0x07, 0xff, 0xff, 0xff,
0xff, 0x0c, 0xcc, 0xf9, 0x1c, 0x47, 0x91, 0xe2, 0x23, 0xc8, 0x7c, 0x7e, 0x1f, 0xff, 0xff, 0xff,
0xff, 0xfc, 0xcc, 0xf9, 0x80, 0xc7, 0x91, 0xe2, 0x23, 0xcc, 0x18, 0xfe, 0xff, 0xff, 0xff, 0xff,
0xff, 0xfc, 0xcc, 0xf9, 0xc1, 0xc7, 0x91, 0xe2, 0x23, 0xc6, 0x11, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf9, 0xf3, 0x37, 0xcf, 0xbf, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff
;
setup () void
De serie.comenzar (115200); // tasa de baudios para la comunicación en serie
si(!mostrar.begin (SSD1306_SWITCHCAPVCC, 0x3c))
De serie.println (f ("fallado de asignación SSD1306"));
para(;;);

retraso (2000); // retraso 2 segundos
mostrar.ClearDisplay (); // borrar el búfer de visualización
mostrar.drawBitMap (0, 0, image_hex_array, 128, 64, 1);
mostrar.mostrar();

bucle void ()

Código iniciado por la importación de las bibliotecas necesarias que instalamos anteriormente. Dos bibliotecas incluyen el cable y la biblioteca de Adafruit. Las bibliotecas de cable nos permiten usar I2C, mientras que AdaFruit ayuda a mostrar el texto escrito en la pantalla.

El siguiente comando siguiente está escrito:

AdaFruit_SSD1306 Display (Screen_Width, Screen_height, & Wire, -1);

Contiene el Screen_width y Screen_height variables. Usando estas variables, definimos el tamaño de la pantalla OLED. Aquí usamos una pantalla OLED de 128 × 64. Después &Cable El objeto se define para la visualización.

El último parámetro contiene (-1), Esta pantalla que la pantalla OLED que estamos utilizando no tiene un botón de reinicio externo. En caso de que tengamos un botón de reinicio en la pantalla OLED. Pasaremos este parámetro a un pin GPIO. Después de presionar el botón de reinicio, la pantalla OLED mostrará el texto.

En el medio del código, incluimos el código hexadecimal para la imagen y después de eso inicializamos la comunicación I2C en la dirección I2C (0x3c) se define que hemos encontrado anteriormente usando el código de escaneo I2C.

En las últimas líneas de código, la matriz hexadecimal se imprime en OLED usando la función de mapa de bits.

3: Muestra de código Arduino para visualización de imágenes

Aquí hay un código dado para la interfaz OLED con ESP32. En la siguiente plantilla de código, reemplace el código hexadecimal de la imagen que desea mostrar en la pantalla OLED.

/****** Linuxhint.Com ********/
#incluir
#incluir
#incluir
#define screen_width 128
#define screen_height 64
AdaFruit_SSD1306 Display (Screen_Width, Screen_height, & Wire, -1);
estatic const uint8_t image_hex_array [1024] =
/*******
*******
*******
[Peque el código hexadecimal para la imagen aquí]
*******
*******
*******/
;
setup () void
De serie.comenzar (115200); // tasa de baudios para la comunicación en serie
si(!mostrar.begin (SSD1306_SWITCHCAPVCC, 0x3c))
De serie.println (f ("fallado de asignación SSD1306"));
para(;;);

retraso (2000); // retraso 2 segundos
mostrar.ClearDisplay (); // borrar el búfer de visualización
mostrar.drawBitMap (0, 0, image_hex_array, 128, 64, 1);
mostrar.mostrar();

bucle void ()

4: salida

Aquí en la salida, podemos ver la imagen de diseño de logotipo oficial de Linuxhint que convertimos en código hexadecimal antes.

Hemos mostrado con éxito imágenes en una pantalla OLED I2C. Usando los mismos pasos, cualquier imagen con proporción correcta se puede mostrar en una pantalla OLED.

Conclusión

Una pantalla OLED es una excelente manera de mostrar salidas sin necesidad de un monitor o PC en serie. Las pantallas OLED vienen con dos protocolos diferentes I2C y SPI. Se prefieren las pantallas OLED I2C debido a un menor número de cables. Esta lección proporciona todos los pasos requeridos para mostrar una imagen en una pantalla OLED I2C con ESP32 usando el Arduino IDE.