Recents in Beach


Receba o meu conteúdo GRATUITAMENTE


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:




Postar um comentário

8 Comentários

  1. 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

  2. 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
  3. 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
    Respostas
    1. Vou responder pois aconteceu comigo. Sei que já faz muito tempo, mas pode servir pra alguém no futuro. No meu caso era o cabo. Estava usando um cabo que não transmitia dados. Troquei e resolveu.

      Excluir