Introductie ESP32 Lora OLED-display - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:17

Dit is nog een video over de introductie tot de ESP32 LoRa. Deze keer zullen we het specifiek hebben over een grafisch display (van 128x64 pixels). We zullen de SSD1306-bibliotheek gebruiken om informatie op dit OLED-scherm weer te geven en een voorbeeld van animatie te presenteren met behulp van XBM-afbeeldingen.

Stap 1: Gebruikte bronnen

1 Heltec WiFi LoRa 32

Protobord

Stap 2: Het scherm

Het display dat op het ontwikkelbord wordt gebruikt, is een OLED van 0,96 inch.

Het heeft 128x64 en is zwart-wit.

Het heeft I2C-communicatie en is via 3 draden verbonden met de ESP32:

SDA op GPIO4 (voor gegevens)

SCL op GPIO15 (voor klok)

RST op GPIO16 (voor reset en weergave start)

Stap 3: De SSD1306-bibliotheek

Dit is te vinden samen met de verzameling bibliotheken die door Heltec-Aaron-Lee wordt geleverd.

Het heeft verschillende functies voor het schrijven van strings, het tekenen van lijnen, rechthoeken, cirkels en het weergeven van afbeeldingen.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Stap 4: De animatie- en XBM-bestanden

We zullen de drawXbm-functie van de bibliotheek gebruiken om een animatie weer te geven.

Het XBM-beeldformaat bestaat uit een reeks tekens waarbij elk element tekstueel een reeks monochrome pixels vertegenwoordigt (elk 1 bit), via een hexadecimale waarde. Deze zijn gelijk aan één byte.

Omdat meerdere tekens worden gebruikt om een enkele byte weer te geven, zijn deze bestanden meestal groter dan die van de momenteel gebruikte formaten. Het voordeel is dat ze direct kunnen worden samengesteld zonder voorafgaande behandeling.

Naast de array zijn er twee instellingen die de afbeeldingsgrootte bepalen.

Om de animatie te bouwen, hebben we de afbeeldingen nodig die de frames zullen vormen.

We kunnen elke beeldbewerkingssoftware gebruiken om aan de slag te gaan. De enige voorzorgsmaatregelen die we moeten nemen, zijn om eerst de grootte compatibel te houden met het scherm en monochrome bestanden te gebruiken.

Om de bestanden te genereren, kunnen we ze tekenen of afbeeldingen importeren. Hier hebben we besloten om een kleurenafbeelding te bewerken met PaintBrush, en we hebben elk van de frames getekend

Originele afbeelding - 960x707 pixels - PNG-indeling

De volgende stap is om het monochroom te maken door het op te slaan als een monochrome bitmap.

Vervolgens wijzigen we het formaat naar een formaat dat compatibel is met het scherm.

Besteed speciale aandacht aan de maateenheden. In dit geval hebben we de afbeelding zo aangepast dat deze de volledige hoogte van het scherm in beslag nam (verticaal = 64 pixels).

Met de afbeelding in de juiste maat, zullen we deze bewerken om de frames te vormen. Hier wissen we elke boog van het signaalniveau en slaan we ze op als corresponderende frames.

Nu moeten we BMP-bestanden converteren naar XBM-indeling.

Er zijn verschillende software-opties die deze conversie kunnen doen. We kozen ook voor GIMP als editoroptie.

In ons voorbeeld hebben we PaintBrush gebruikt om de bestanden te genereren en te bewerken. Elk van deze processen had echter in Gimp (of een andere editor) kunnen worden uitgevoerd.

Om te converteren openen we eerst het bestand.

Met de afbeelding geopend, kunnen we Bestand => Exporteren als…

In het venster Afbeelding exporteren moeten we de bestemmingsbestandsextensie voor XBM wijzigen. Gimp zal verantwoordelijk zijn voor het identificeren van het gewenste formaat en het presenteren van meer opties…

Bij het exporteren zal Gimp andere opties presenteren. We kunnen de standaardwaarden laten staan.

Nadat alle bestanden zijn geconverteerd, hebben we vier XBM-bestanden, één voor elk frame.

Laten we ze nu naar de broncodemap kopiëren en ze hernoemen door hun extensies te wijzigen in.h.

Stap 5: XBM-bestanden afsluiten

We kunnen de XBM-bestanden openen in elke teksteditor, waar we de afbeeldingsmatrix en informatie over de afbeeldingsgrootte zullen zien die al zijn gedefinieerd.

Stap 6: Broncode

Broncode: Verklaringen

We zullen de nodige bibliotheken toevoegen, evenals de afbeeldingsbestanden. We definiëren de posities van het beeld en het overgangsinterval. We richten ook de OLED-pinnen die op de ESP32 zijn aangesloten. Ten slotte maken en passen we het Display-object aan.

//Include as bibliotecas necessárias#include #include "SSD1306.h" //Include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" //definieert de afbeelding van de afbeelding en het interval van de transição #define posX 21 #define posY 0 #define intervalo 500 //Pinos do OLED estão conctados oa ESP32: I2C //OLED_SDA -- GPIO4 //OLED_SCL -- GPR15 //OLED_IOST -/OLED_IOST - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 //O RST ontwikkelt controle door software SSD1306 display (0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display

Broncode: instellen ()

Initialiseer het scherm en keer het scherm verticaal om. Actie is optioneel.

void setup() { display.init(); //inicia om display.flipScreenVertical(); //inverte verticalmente a tela (optioneel)}

Broncode: lus ()

Het eerste dat u in de lus moet doen, is het scherm wissen. We laden frame 1 in de buffer met behulp van de posX- en posY-beginposities. We informeren de grootte van de afbeelding met frame1_width en frame1_height, en de naam van de array die de bits van de afbeelding bevat. We tonen de buffer op het display en wachten een interval voordat we het volgende frame tonen.

void loop() { display.clear(); //limpa tela //carrega para o buffer of 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 ca display.drawXbm (posX, posY, frame1_width, frame1_height, frame1_bits); //mostra o buffer geen weergave display.display(); // aguarda um intervalo antes de mostrar of proximo frame delay (intervalo);

We herhalen het proces voor alle andere frames.

//herhaal het proces voor taken en outros frames display.clear(); display.drawXbm (posX, posY, frame2_width, frame2_height, frame2_bits); weergave.weergave(); vertraging (interval); weergeven.wissen(); display.drawXbm (posX, posY, frame3_width, frame3_height, frame3_bits); weergave.weergave(); vertraging (interval); weergeven.wissen(); display.drawXbm (posX, posY, frame4_width, frame4_height, frame4_bits); weergave.weergave(); vertraging (interval); }

Stap 7: De UpLoad van code uitvoeren

Open het bestand met de broncode terwijl de IDE is geopend door te dubbelklikken op het.ino-bestand of door naar het menu Bestand te gaan.

Met Heltec aangesloten op USB, selecteer het menu Tools => Card: "Heltec_WIFI_LoRa_32"

Selecteer nog steeds in het menu Tools de COM-poort waarop de Heltec is aangesloten.

Klik op de UPLOADEN-knop…

… En wacht op de conclusie.

Stap 8: Bestanden

Download de bestanden:

PDF

INO