banner

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:




7 comentários:

  1. Aula Sensacional! Parabéns Fernando!

    ResponderExcluir
  2. Na Lib https://github.com/Heltec-Aaron-Lee/WiFi_Kit_series,,, os arquivos para OLED não existem mais. Eu testava acompanhando seu tutorial e me deparei com essa surpresa. Como posso resolver isso? Obrigado!

    ResponderExcluir
    Respostas
    1. Vejam isso! Funciona.
      https://docs.heltec.cn/#/zh_CN/user_manual/how_to_install_esp32_Arduino

      Excluir
    2. Boa moleque! funcionou aqui também!

      Excluir

  3. ola fernando Suas postagens são excelentes. Estou escrevendo por ajuda, não consigo compilar o código de animação no display oled. Eu recebo um erro nesta linha - display SSD1306 (0x3c, SDA, SCL, RST); -. se eu excluir a palavra RST desta linha, o sketck compila, mas não mostra nenhuma imagem. o link da biblioteca para ssd1306 não contém mais as bibliotecas OLED. Espero que você possa me ajudar com qualquer solução. OBRIGADO

    ResponderExcluir
    Respostas
    1. Olá, se vc ler a página do link o Sr Lee explica que colocou o link das bibliotecas Oled em outro lugar e dá para baixar facilmente. depois disso vc precisa colocar as bibliotecas na mesma pasta do programa ino fechar o programa e abrir novamente. No programa essas bibliotecas precisam ser declaradas com "" e nao com <>

      Excluir
  4. Fernando , boa noite , você pode me ensinar a retirar um erro . O meu esp32 lora está com um erro de que a placa não existe.
    E esse o erro que está acontecendo .
    Traceback (most recent call last):
    File "esptool.py", line 2637, in
    File "esptool.py", line 2630, in _main
    File "esptool.py", line 2356, in main
    File "esptool.py", line 407, in connect
    File "esptool.py", line 387, in _connect_attempt
    File "esptool.py", line 341, in sync
    File "esptool.py", line 305, in command
    File "site-packages\serial\serialutil.py", line 352, in timeout
    File "site-packages\serial\serialwin32.py", line 222, in _reconfigure_port
    serial.serialutil.SerialException: Cannot configure port, something went wrong. Original message: WindowsError(31, 'Um dispositivo conectado ao sistema n\xe3o est\xe1 funcionando.')
    Failed to execute script esptool
    a porta serial Failed to execute script esptool
    selecionada não existe ou sua placa não está conectada

    ResponderExcluir

Tecnologia do Blogger.