Introduzione ESP32 Lora Display OLED: 8 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:03

Questo è un altro video riguardante l'introduzione all'ESP32 LoRa. Questa volta parleremo nello specifico di un display grafico (di 128x64 pixel). Utilizzeremo la libreria SSD1306 per visualizzare le informazioni su questo display OLED e presentare un esempio di animazione utilizzando immagini XBM.

Passaggio 1: risorse utilizzate

1 Heltec WiFi LoRa 32

Protoboard

Passaggio 2: il display

Il display utilizzato sulla scheda di sviluppo è un OLED da 0,96 pollici.

Ha 128x64 ed è monocromatico.

Ha comunicazione I2C ed è collegato all'ESP32 tramite 3 fili:

SDA su GPIO4 (per dati)

SCL su GPIO15 (per l'orologio)

RST su GPIO16 (per reset e avvio display)

Passaggio 3: la libreria SSD1306

Questo può essere trovato insieme al set di librerie fornito da Heltec-Aaron-Lee.

Ha diverse funzioni per scrivere stringhe, disegnare linee, rettangoli, cerchi e visualizzare immagini.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Passaggio 4: i file di animazione e XBM

Useremo la funzione drawXbm della libreria per visualizzare un'animazione.

Il formato immagine XBM è costituito da un array di caratteri in cui ogni elemento rappresenta testualmente un insieme di pixel monocromatici (1 bit ciascuno), tramite un valore esadecimale. Questi sono equivalenti a un byte.

Poiché vengono utilizzati più caratteri per rappresentare un singolo byte, questi file tendono ad essere più grandi di quelli dei formati attualmente adottati. Il vantaggio è che possono essere compilati direttamente senza la necessità di un trattamento preventivo.

Oltre all'array, sono incluse due impostazioni che determinano la dimensione dell'immagine.

Per costruire l'animazione, abbiamo bisogno delle immagini che formeranno i fotogrammi.

Possiamo utilizzare qualsiasi software di modifica delle immagini per lavorare. Le uniche precauzioni che dovremmo prendere sono prima di tutto mantenere la dimensione compatibile con il display e utilizzare file monocromatici.

Per generare i file, possiamo disegnarli o importare immagini. Qui, abbiamo deciso di modificare un'immagine a colori usando PaintBrush e abbiamo disegnato ognuno dei fotogrammi

Immagine originale - 960x707 pixel - formato PNG

Il passaggio successivo consiste nel renderlo monocromatico salvandolo come bitmap monocromatica.

Quindi, lo ridimensioniamo a una dimensione compatibile con il display.

Prestare particolare attenzione alle unità di misura. In questo caso, abbiamo regolato l'immagine in modo che occupasse l'intera altezza del display (verticale = 64 pixel).

Con l'immagine nella dimensione corretta, la modificheremo per formare le cornici. Qui, stiamo cancellando ogni arco di livello del segnale e salvandoli come fotogrammi corrispondenti.

Ora dobbiamo convertire i file BMP in formato XBM.

Esistono diverse opzioni software che possono eseguire questa conversione. Abbiamo anche scelto GIMP come opzione dell'editor.

Nel nostro esempio, abbiamo utilizzato PaintBrush per generare e modificare i file. Tuttavia, ognuno di questi processi avrebbe potuto essere eseguito in Gimp (o in qualsiasi altro editor).

Per convertire, apriamo prima il file.

Con l'immagine aperta, possiamo selezionare File => Esporta come…

Nella finestra Esporta immagine, dobbiamo cambiare l'estensione del file di destinazione per XBM. Gimp si occuperà di identificare il formato desiderato e presentare più opzioni…

Durante l'esportazione, Gimp presenterà altre opzioni. Possiamo lasciare i valori predefiniti.

Dopo aver convertito tutti i file, avremo quattro file XBM, uno per ogni frame.

Ora copiamoli nella cartella del codice sorgente e rinominiamoli cambiando le loro estensioni in.h.

Passaggio 5: uscita dai file XBM

Possiamo aprire i file XBM in qualsiasi editor di testo, dove vedremo la matrice dell'immagine e le informazioni sulla dimensione dell'immagine che erano già definite.

Passaggio 6: codice sorgente

Codice sorgente: Dichiarazioni

Includeremo le librerie necessarie, così come i file di immagine. Definiamo le posizioni dell'immagine e l'intervallo di transizione. Indichiamo anche i pin OLED collegati all'ESP32. Infine, creiamo e regoliamo l'oggetto Display.

//Include come bibliotecas necessárias#include #include "SSD1306.h" //Include 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 stati contatti ad ESP32: I2C //OLED_SDA -- GPIO4 //OLED_SCL -- GPIO15 //OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 //O RST deve essere controllato dal software SSD1306 display (0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display

Codice sorgente: Setup ()

Inizializzare il display e invertire verticalmente lo schermo. L'azione è facoltativa.

void setup() { display.init(); //inicia o display display.flipScreenVerticalmente(); //inverte verticalmente a tela (opzionale) }

Codice sorgente: Ciclo ()

La prima cosa da fare nel ciclo è cancellare lo schermo. Carichiamo il frame 1 nel buffer usando le posizioni iniziali posX e posY. Informiamo la dimensione dell'immagine con frame1_width e frame1_height e il nome dell'array contenente i bit dell'immagine. Mostriamo il buffer sul display e aspettiamo un intervallo prima di mostrare il frame successivo.

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 ante mostrar o próximo frame delay(intervalo);

Ripetiamo il processo per tutti gli altri frame.

//ripetere il processo per tutti gli altri frame display.clear(); display.drawXbm(posX, posY, frame2_width, frame2_height, frame2_bits); display.display(); ritardo(intervallo); display.clear(); display.drawXbm(posX, posY, frame3_width, frame3_height, frame3_bits); display.display(); ritardo(intervallo); display.clear(); display.drawXbm(posX, posY, frame4_width, frame4_height, frame4_bits); display.display(); ritardo(intervallo); }

Passaggio 7: eseguire il caricamento del codice

Con l'IDE aperto, apri il file con il codice sorgente facendo doppio clic sul file.ino o accedendo al menu File.

Con Heltec connesso a USB, selezionare il menu Strumenti => Scheda: "Heltec_WIFI_LoRa_32"

Sempre nel menu Strumenti, seleziona la porta COM a cui è collegato Heltec.

Fare clic sul pulsante CARICA…

… E aspetta la conclusione.

Passaggio 8: file

Scarica i file:

PDF

IO NO