Introducere Afișaj OLED ESP32 Lora: 8 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Acesta este un alt videoclip despre Introducerea în ESP32 LoRa. De data aceasta, vom vorbi în mod specific despre un afișaj grafic (de 128x64 pixeli). Vom folosi biblioteca SSD1306 pentru a afișa informații pe acest ecran OLED și vom prezenta un exemplu de animație folosind imagini XBM.

Pasul 1: Resurse utilizate

1 Heltec WiFi LoRa 32

Protoboard

Pasul 2: Afișajul

Afișajul utilizat pe placa de dezvoltare este un OLED de 0,96 inci.

Are 128x64 și este monocrom.

Are comunicare I2C și este conectat la ESP32 prin 3 fire:

SDA pe GPIO4 (pentru date)

SCL pe GPIO15 (pentru ceas)

RST pe GPIO16 (pentru resetare și pornire afișaj)

Pasul 3: Biblioteca SSD1306

Acest lucru poate fi găsit împreună cu setul de biblioteci furnizate de Heltec-Aaron-Lee.

Are mai multe funcții pentru scrierea șirurilor, desenarea liniilor, dreptunghiurilor, cercurilor și afișarea imaginilor.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Pasul 4: Fișierele de animație și XBM

Vom folosi funcția drawXbm a bibliotecii pentru a afișa o animație.

Formatul de imagine XBM constă dintr-o matrice de caractere în care fiecare element reprezintă textual un set de pixeli monocromi (1 bit fiecare), printr-o valoare hexazecimală. Acestea sunt echivalente cu un octet.

Deoarece sunt utilizate mai multe caractere pentru a reprezenta un singur octet, aceste fișiere tind să fie mai mari decât cele din formatele adoptate în prezent. Avantajul este că pot fi compilate direct fără a fi nevoie de tratament prealabil.

În plus față de matrice, sunt incluse două setări care determină dimensiunea imaginii.

Pentru a construi animația, avem nevoie de imaginile care vor forma cadrele.

Putem folosi orice software de editare a imaginilor pentru a începe să lucrăm. Singurele măsuri de precauție pe care ar trebui să le luăm sunt să păstrăm mai întâi dimensiunea compatibilă cu afișajul și să folosim fișiere monocrome.

Pentru a genera fișierele, le putem desena sau importa imagini. Aici, am decis să edităm o imagine color folosind PaintBrush și am desenat fiecare dintre cadre

Imagine originală - 960x707 pixeli - format PNG

Următorul pas este de a-l face monocrom salvându-l ca un bitmap monocrom.

Apoi, îl redimensionăm la o dimensiune compatibilă cu afișajul.

Acordați o atenție specială unităților de măsură. În acest caz, am ajustat imaginea astfel încât să ocupe întreaga înălțime a afișajului (vertical = 64 pixeli).

Cu imaginea în dimensiunea corectă, o vom edita pentru a forma cadrele. Aici, ștergem fiecare arc al nivelului semnalului și le salvăm ca cadre corespunzătoare.

Acum, trebuie să convertim fișierele BMP în format XBM.

Există mai multe opțiuni software care pot face această conversie. De asemenea, am ales GIMP ca opțiune de editor.

În exemplul nostru, am folosit PaintBrush pentru a genera și edita fișierele. Cu toate acestea, fiecare dintre aceste procese ar fi putut fi realizat în Gimp (sau în orice alt editor).

Pentru a converti, deschidem mai întâi fișierul.

Cu imaginea deschisă, putem selecta File => Export as …

În fereastra Export Image, trebuie să schimbăm extensia de fișier destinație pentru XBM. Gimp va fi responsabil cu identificarea formatului dorit și prezentarea mai multor opțiuni …

La export, Gimp va prezenta alte opțiuni. Putem lăsa valorile implicite.

După convertirea tuturor fișierelor, vom avea patru fișiere XBM, câte unul pentru fiecare cadru.

Acum să le copiem în folderul codului sursă și să le redenumim schimbându-le extensiile în.h.

Pasul 5: ieșirea din fișiere XBM

Putem deschide fișierele XBM în orice editor de text, unde vom vedea informațiile despre matricea și dimensiunea imaginii care au fost deja definite.

Pasul 6: Cod sursă

Cod sursă: declarații

Vom include bibliotecile necesare, precum și fișierele de imagine. Definim pozițiile imaginii și intervalul de tranziție. De asemenea, indicăm pinii OLED conectați la ESP32. În cele din urmă, creăm și ajustăm obiectul Afișare.

// 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 este conectat la ESP32: I2C // OLED_SDA - GPIO4 // OLED_SCL - GPIO15 // OLED_RST - - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 // O RST trebuie să fie controlat de software SSD1306 display (0x3c, SDA, SCL, RST); // Cria e ajusta o Objeto display

Cod sursă: Setup ()

Inițializați afișajul și inversați vertical ecranul. Acțiunea este opțională.

void setup () {display.init (); // începe o display display.flipScreenVertically (); // inverte verticalmente a tela (opțional)}

Cod sursă: Loop ()

Primul lucru de făcut în buclă este să ștergeți ecranul. Încărcăm cadrul 1 în buffer folosind pozițiile inițiale posX și posY. Informăm dimensiunea imaginii cu frame1_width și frame1_height și numele matricei care conține biții imaginii. Afișăm tamponul pe afișaj și așteptăm un interval înainte de a afișa următorul cadru.

bucla void () {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 name da matriz care 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óxima frame delay (intervalo);

Repetăm procesul pentru toate celelalte cadre.

// repete o processo for all os outros frames display.clear (); display.drawXbm (posX, posY, frame2_width, frame2_height, frame2_bits); display.display (); întârziere (intervalo); display.clear (); display.drawXbm (posX, posY, frame3_width, frame3_height, frame3_bits); display.display (); întârziere (intervalo); display.clear (); display.drawXbm (posX, posY, frame4_width, frame4_height, frame4_bits); display.display (); întârziere (intervalo); }

Pasul 7: Efectuarea UpLoad de cod

Cu IDE deschis, deschideți fișierul cu codul sursă făcând dublu clic pe fișierul.ino sau accesând meniul Fișier.

Cu Heltec conectat la USB, selectați meniul Instrumente => Card: "Heltec_WIFI_LoRa_32"

Totuși, în meniul Instrumente, selectați portul COM la care este conectat Heltec.

Faceți clic pe butonul UPLOAD …

… Și așteptați concluzia.

Pasul 8: Fișiere

Descărcați fișierele:

PDF

EU NU