Introducción Pantalla OLED ESP32 Lora: 8 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:43

Este es otro video sobre la Introducción a ESP32 LoRa. En esta ocasión, hablaremos específicamente de una pantalla gráfica (de 128x64 píxeles). Usaremos la biblioteca SSD1306 para mostrar información en esta pantalla OLED y presentaremos un ejemplo de animación usando imágenes XBM.

Paso 1: Recursos utilizados

1 Heltec WiFi LoRa 32

Protoboard

Paso 2: la pantalla

La pantalla utilizada en la placa de desarrollo es una OLED de 0,96 pulgadas.

Tiene 128x64 y es monocromo.

Tiene comunicación I2C y está conectado al ESP32 a través de 3 cables:

SDA en GPIO4 (para datos)

SCL en GPIO15 (para reloj)

RST en GPIO16 (para reiniciar y mostrar el inicio)

Paso 3: la biblioteca SSD1306

Esto se puede encontrar junto con el conjunto de bibliotecas proporcionado por Heltec-Aaron-Lee.

Tiene varias funciones para escribir cadenas, dibujar líneas, rectángulos, círculos y mostrar imágenes.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Paso 4: los archivos de animación y XBM

Usaremos la función drawXbm de la biblioteca para mostrar una animación.

El formato de imagen XBM consiste en una matriz de caracteres donde cada elemento representa textualmente un conjunto de píxeles monocromáticos (1 bit cada uno), a través de un valor hexadecimal. Son equivalentes a un byte.

Debido a que se utilizan varios caracteres para representar un solo byte, estos archivos tienden a ser más grandes que los de los formatos adoptados actualmente. La ventaja es que se pueden recopilar directamente sin necesidad de un tratamiento previo.

Además de la matriz, se incluyen dos configuraciones que determinan el tamaño de la imagen.

Para construir la animación, necesitamos las imágenes que formarán los cuadros.

Podemos utilizar cualquier software de edición de imágenes para empezar a trabajar. Las únicas precauciones que debemos tomar son primero mantener el tamaño compatible con la pantalla y usar archivos monocromáticos.

Para generar los archivos, podemos dibujarlos o importar imágenes. Aquí, decidimos editar una imagen en color usando PaintBrush, y dibujamos cada uno de los marcos.

Imagen original - 960x707 píxeles - formato PNG

El siguiente paso es convertirlo en monocromo guardándolo como un mapa de bits monocromático.

Luego, lo redimensionamos a un tamaño compatible con la pantalla.

Preste especial atención a las unidades de medida. En este caso, ajustamos la imagen para que ocupara toda la altura de la pantalla (vertical = 64 píxeles).

Con la imagen en el tamaño correcto, la editaremos para formar los marcos. Aquí, estamos borrando cada arco de nivel de señal y guardándolos como cuadros correspondientes.

Ahora, tenemos que convertir archivos BMP a formato XBM.

Hay varias opciones de software que pueden realizar esta conversión. También elegimos GIMP como una opción de editor.

En nuestro ejemplo, usamos PaintBrush para generar y editar los archivos. Sin embargo, cada uno de estos procesos podría haberse realizado en Gimp (o cualquier otro editor).

Para convertir, primero abrimos el archivo.

Con la imagen abierta, podemos seleccionar Archivo => Exportar como…

En la ventana Exportar imagen, debemos cambiar la extensión del archivo de destino para XBM. Gimp se encargará de identificar el formato deseado y presentar más opciones…

Al exportar, Gimp presentará otras opciones. Podemos dejar los valores predeterminados.

Después de convertir todos los archivos, tendremos cuatro archivos XBM, uno para cada fotograma.

Ahora copiemos a la carpeta del código fuente y cambiemos el nombre cambiando sus extensiones a.h.

Paso 5: Salir de los archivos XBM

Podemos abrir los archivos XBM en cualquier editor de texto, donde veremos la matriz de la imagen y la información del tamaño de la imagen que ya estaban definidas.

Paso 6: código fuente

Código fuente: Declaraciones

Incluiremos las bibliotecas necesarias, así como los archivos de imagen. Definimos las posiciones de la imagen y el intervalo de transición. También apuntamos los pines OLED conectados al ESP32. Finalmente, creamos y ajustamos el objeto Display.

// Incluir como bibliotecas necesarias # include #include "SSD1306.h" // Incluir arquivos de imagem #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" // definições de posição da imagem e intervalo de transição #define posX 21 #define posY 0 #define intervalo 500 // Pinos do OLED estão conctados ao ESP32: I2C // OLED_SDA - GPIO4 // OLED_SCL - GPIO15 // OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 // O RST deve ser controlado por software SSD1306 display (0x3c, SDA, SCL, RST); // Cria e ajusta o Objeto display

Código fuente: Configuración ()

Inicialice la pantalla e invierta verticalmente la pantalla. La acción es opcional.

configuración vacía () {display.init (); // inicia o display display.flipScreenVertically (); // inverte verticalmente a tela (opcional)}

Código fuente: Loop ()

Lo primero que debe hacer en el bucle es limpiar la pantalla. Cargamos el fotograma 1 en el búfer usando las posiciones iniciales posX y posY. Informamos el tamaño de la imagen con frame1_width y frame1_height, y el nombre de la matriz que contiene los bits de la imagen. Mostramos el búfer en la pantalla y esperamos un intervalo antes de mostrar el siguiente cuadro.

bucle vacío () {display.clear (); // limpa tela // carrega para o buffer o frame 1 // usando as posições iniciais posX e posY // informa o tamanho da imagem com frame1_width e frame1_height // informa o nome da matriz que contem os bits da imagem, no caso frame1_bits display.drawXbm (posX, posY, frame1_width, frame1_height, frame1_bits); // mostra o búfer no display display.display (); // aguarda um intervalo antes de mostrar o próximo frame delay (intervalo);

Repetimos el proceso para todos los demás marcos.

// repetir el proceso para todos los marcos exteriores display.clear (); display.drawXbm (posX, posY, frame2_width, frame2_height, frame2_bits); display.display (); retraso (intervalo); display.clear (); display.drawXbm (posX, posY, frame3_width, frame3_height, frame3_bits); display.display (); retraso (intervalo); display.clear (); display.drawXbm (posX, posY, frame4_width, frame4_height, frame4_bits); display.display (); retraso (intervalo); }

Paso 7: hacer la carga de código

Con el IDE abierto, abra el archivo con el código fuente haciendo doble clic en el archivo.ino o yendo al menú Archivo.

Con Heltec conectado a USB, seleccione el menú Herramientas => Tarjeta: "Heltec_WIFI_LoRa_32"

Aún en el menú Herramientas, seleccione el puerto COM donde está conectado el Heltec.

Haga clic en el botón SUBIR …

… Y espera la conclusión.

Paso 8: archivos

Descarga los archivos:

PDF

INO