banner

Ir para o Forum

Introdução ESP32 Lora display OLED



Mais um vídeo de Introdução ao ESP32 LoRa, desta vez falando especificamente sobre um display gráfico, este de 128x64 pixels. Vamos utilizar a biblioteca SSD1306 para mostrar informações neste display OLED e apresentar um exemplo de animação utilizando imagens XBM.




Recursos usados

1 Heltec WiFi LoRa 32
Protoboard




O display

O display usado na placa de desenvolvimento é um OLED de 0,96 polegadas.
Possui 128x64 e é monocromático.
Possui comunicação I2C e está ligado ao ESP32 através de  3 fios:
SDA no GPIO4   (para dados)
SCL no GPIO15  (para o clock)
RST no GPIO16 (para o reset e inicio do display)







A biblioteca SSD1306

Pode ser encontrada junto com o conjunto de bibliotecas fornecidas por Heltec-Aaron-Lee.
Possui diversas funções para escrita de strings, desenho de linhas, retângulos, círculos e a exibição de imagens.




A animação e os arquivos XBM

Utilizaremos a função drawXbm da biblioteca para apresentar no display uma animação.
O formato XBM de imagem consiste em uma matriz de caracteres onde cada elemento representa textualmente um conjunto de pixels  monocromáticos (1 bit cada), através de um valor hexadecimal, equivalente a um byte.



Como são utilizados vários caracteres para representar um único byte, estes arquivos tendem a ficar maiores que os formatos adotados atualmente. A vantagem é que podem ser compilados diretamente sem necessidade de tratamento prévio.
Além da matriz, duas definições que determinam o tamanho da imagem estão incluidos.
Para construir a animação, vamos precisar das imagens que formarão os frames.
Podemos utilizar qualquer software de edição de imagem para trabalhar. Os únicos cuidados que devemos ter a princípio é manter o tamanho compatível com o do display e usar arquivos monocromáticos.
Para gerar os arquivos, podemos desenhá-los ou importar imagens. Aqui, decidimos editar uma imagem colorida usando o PaintBrush e dela tirar cada um dos frames.


Imagem original - 960x707 pixels - Formato PNG


O próximo passo é torná-la monocromática, salvando como bitmap monocromático.



E em seguida redimensioná-la para um tamanho compatível com os display.
Atenção com as unidades de medida. Neste caso ajustamos a imagem para que ela ocupasse a toda a altura o display (vertical = 64 pixels).



Com a imagem no tamanho correto, vamos editá-lo para formar os frames. Aqui, fomos apagando cada arco de nível de sinal e salvando como os frames correspondentes.



Agora temos que converter os arquivos BMP para o formato XBM
Existem vários softwares que podem fazer esta conversão. Escolhemos o GIMP por ser uma opção de editor também.
Em nosso exemplo utilizamos o Paint para gerar e editar os arquivos, mas todo processo poderia ter sido realizado no Gimp ou qualquer outro editor.
Para converter, primeiro abrimos o arquivo.



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



Na janela de 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.



Após converter todos os arquivos, teremos quatro arquivos XBM, um para cada frame.



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




Visualizando os arquivos XBM

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




Código-Fonte: Declarações

Vamos incluir as bibliotecas necessárias, bem como os arquivos de imagem. Definimos as posições da imagem e o intervalo de transição. Apontamos ainda os pinos do Oled conectados ao ESP32. Por fim, criamos e ajustamos o objeto Display.

//Incluindo as bibliotecas necessárias
#include <Wire.h>
#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 por software


SSD1306  display(0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display



Código-Fonte: Setup()

Inicializamos o display e invertemos verticalmente a tela, ação esta opcional.

void setup() {

  display.init(); //inicia o display
  display.flipScreenVertically(); //inverte verticalmente a tela (opcional)

}


Código-Fonte: Loop()

Primeira coisa no Loop é limpar a tela. Carregamos para o buffer o frame 1 usando as posições iniciais posX e posY. Informamos o tamanho da imagem com frame1_width e frame1_height e o nome da matriz que contem os bits da imagem. Mostramos o buffer no display e aguardamos um intervalo antes de mostrar o próximo frame.

void loop() {

  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 buffer no display
  display.display();
  //aguarda um intervalo antes de mostrar o próximo frame
  delay(intervalo);
  

Repetimos o processo para todos os outros frames.

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

}



Fazendo o UpLoad do código

Com a IDE aberta, abra o arquivo com o código-fonte, clicando duas vezes sobre o arquivo .ino ou através do menu Arquivo.




Com o Heltec conectado a USB, selecione o menu Ferramentas => Placa: “Heltec_WIFI_LoRa_32”



Ainda no menu Ferramentas, selecione a porta COM na qual o Heltec está conectado.



Clique no botão UPLOAD...

...E aguarde a conclusão.




Faça o download dos arquivos:




Nenhum comentário:

Tecnologia do Blogger.