Introdução Display OLED ESP32 Lora: 8 etapas

Índice:

Etapa 1: Recursos usados
Etapa 2: a tela
Etapa 3: a biblioteca SSD1306
Etapa 4: a animação e os arquivos XBM
Etapa 5: Saindo dos arquivos XBM
Etapa 6: Código Fonte
Etapa 7: fazer o upLoad do código
Etapa 8: Arquivos

2025 Autor: John Day | [email protected]. Última modificação: 2025-01-13 06:58

Este é outro vídeo sobre a introdução ao ESP32 LoRa. Desta vez, falaremos especificamente sobre uma tela gráfica (de 128x64 pixels). Usaremos a biblioteca SSD1306 para exibir informações neste display OLED e apresentar um exemplo de animação usando imagens XBM.

Etapa 1: Recursos usados

1 Heltec WiFi LoRa 32

Protoboard

Etapa 2: a tela

A tela usada na placa de desenvolvimento é um OLED de 0,96 polegadas.

Tem 128x64 e é monocromático.

Possui comunicação I2C e é conectado ao ESP32 por meio de 3 fios:

SDA no GPIO4 (para dados)

SCL em GPIO15 (para relógio)

RST no GPIO16 (para redefinir e iniciar a exibição)

Etapa 3: a biblioteca SSD1306

Ele pode ser encontrado junto com o conjunto de bibliotecas fornecidas pela Heltec-Aaron-Lee.

Possui várias funções para escrever strings, desenhar linhas, retângulos, círculos e exibir imagens.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Etapa 4: a animação e os arquivos XBM

Usaremos a função drawXbm da biblioteca para exibir uma animação.

O formato de imagem XBM consiste em uma matriz de caracteres onde cada elemento representa textualmente um conjunto de pixels monocromáticos (1 bit cada), por meio de um valor hexadecimal. Isso é equivalente a um byte.

Como vários caracteres são usados para representar um único byte, esses arquivos tendem a ser maiores do que os dos formatos adotados atualmente. A vantagem é que podem ser compilados diretamente, sem a necessidade de tratamento prévio.

Além da matriz, duas configurações que determinam o tamanho da imagem estão incluídas.

Para construir a animação, precisamos das imagens que formarão os quadros.

Podemos usar qualquer software de edição de imagem para trabalhar. As únicas precauções que devemos tomar são primeiro manter o tamanho compatível com a tela e usar arquivos monocromáticos.

Para gerar os arquivos, podemos desenhá-los ou importar imagens. Aqui, decidimos editar uma imagem colorida usando PaintBrush, e desenhamos cada um dos quadros

Imagem original - 960 x 707 pixels - formato PNG

A próxima etapa é torná-lo monocromático salvando-o como um bitmap monocromático.

Então, nós o redimensionamos para um tamanho compatível com a tela.

Preste atenção especial às unidades de medida. Neste caso, ajustamos a imagem para que ocupasse toda a altura do display (vertical = 64 pixels).

Com a imagem no tamanho correto, vamos editá-la para formar as molduras. Aqui, estamos apagando cada arco de nível de sinal e salvando-os como quadros correspondentes.

Agora, temos que converter os arquivos BMP para o formato XBM.

Existem várias opções de software que podem fazer essa conversão. Também escolhemos o GIMP como uma opção de editor.

Em nosso exemplo, usamos PaintBrush para gerar e editar os arquivos. No entanto, cada um desses processos poderia ter sido feito no Gimp (ou em qualquer outro editor).

Para converter, primeiro abrimos o arquivo.

Com a imagem aberta, podemos selecionar Arquivo => Exportar como …

Na janela Exportar imagem, devemos alterar a extensão do arquivo de destino para XBM. O Gimp se encarregará de identificar o formato desejado e apresentar mais opções…

Ao exportar, o Gimp apresentará outras opções. Podemos deixar os valores padrão.

Depois de converter todos os arquivos, teremos quatro arquivos XBM, um para cada quadro.

Agora vamos copiá-los para a pasta do código-fonte e renomeá-los alterando suas extensões para.h.

Etapa 5: Saindo dos arquivos XBM

Podemos abrir os arquivos XBM em qualquer editor de texto, onde veremos a matriz da imagem e as informações do tamanho da imagem já definidas.

Etapa 6: Código Fonte

Código Fonte: Declarações

Incluiremos as bibliotecas necessárias, bem como os arquivos de imagem. Definimos as posições da imagem e o intervalo de transição. Também apontamos os pinos OLED conectados ao ESP32. Finalmente, criamos e ajustamos o objeto Display.

// Incluindo as bibliotecas necessárias # include #include "SSD1306.h" // Incluindo os 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 pelo software SSD1306 display (0x3c, SDA, SCL, RST); // Exibição Cria e ajusta o Objeto

Código Fonte: Configuração ()

Inicialize a exibição e inverta a tela verticalmente. A ação é opcional.

void setup () {display.init (); // inicia a exibição display.flipScreenVertically (); // inverte verticalmente a tela (opcional)}

Código Fonte: Loop ()

A primeira coisa a fazer no loop é limpar a tela. Carregamos o quadro 1 no buffer usando as posições iniciais posX e posY. Informamos o tamanho da imagem com frame1_width e frame1_height, e o nome do array contendo os bits da imagem. Mostramos o buffer no display e esperamos um intervalo antes de mostrar o próximo quadro.

void loop () {display.clear (); // tela limpa // carrega para o buffer o frame 1 // usando como 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 buffer no display display.display (); // aguarda um intervalo antes de mostrar o próximo frame delay (intervalo);

Repetimos o processo para todos os outros quadros.

// repete o processo para todos os outros frames display.clear (); display.drawXbm (posX, posY, frame2_width, frame2_height, frame2_bits); display.display (); atraso (intervalo); display.clear (); display.drawXbm (posX, posY, frame3_width, frame3_height, frame3_bits); display.display (); atraso (intervalo); display.clear (); display.drawXbm (posX, posY, frame4_width, frame4_height, frame4_bits); display.display (); atraso (intervalo); }