Wprowadzenie Wyświetlacz OLED ESP32 Lora: 8 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:31

To kolejny film dotyczący wprowadzenia do ESP32 LoRa. Tym razem porozmawiamy konkretnie o wyświetlaczu graficznym (o rozdzielczości 128x64 pikseli). Wykorzystamy bibliotekę SSD1306 do wyświetlenia informacji na tym wyświetlaczu OLED oraz przedstawimy przykład animacji z wykorzystaniem obrazów XBM.

Krok 1: Wykorzystane zasoby

1 Heltec WiFi LoRa 32

Płyta prototypowa

Krok 2: Wyświetlacz

Wyświetlacz zastosowany na płytce rozwojowej to OLED o przekątnej 0,96 cala.

Ma 128x64 i jest monochromatyczny.

Posiada komunikację I2C i jest podłączony do ESP32 za pomocą 3 przewodów:

SDA na GPIO4 (dla danych)

SCL na GPIO15 (dla zegara)

RST na GPIO16 (do resetowania i uruchamiania wyświetlania)

Krok 3: Biblioteka SSD1306

Można to znaleźć wraz z zestawem bibliotek dostarczonych przez Heltec-Aaron-Lee.

Posiada kilka funkcji do pisania ciągów, rysowania linii, prostokątów, okręgów i wyświetlania obrazów.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Krok 4: Animacja i pliki XBM

Użyjemy funkcji drawXbm z biblioteki, aby wyświetlić animację.

Format obrazu XBM składa się z tablicy znaków, w której każdy element reprezentuje tekstowo zestaw monochromatycznych pikseli (1 bit każdy), poprzez wartość szesnastkową. Odpowiadają one jednemu bajtowi.

Ponieważ do reprezentowania jednego bajtu używa się wielu znaków, pliki te są zwykle większe niż te z obecnie przyjętych formatów. Zaletą jest to, że można je zestawiać bezpośrednio, bez konieczności wcześniejszej obróbki.

Oprócz tablicy dostępne są dwa ustawienia, które określają rozmiar obrazu.

Do zbudowania animacji potrzebujemy obrazów, które utworzą ramki.

Do pracy możemy użyć dowolnego oprogramowania do edycji obrazu. Jedyne środki ostrożności, jakie powinniśmy podjąć, to najpierw zachować rozmiar zgodny z wyświetlaczem i używać plików monochromatycznych.

Aby wygenerować pliki, możemy je narysować lub zaimportować obrazy. Tutaj postanowiliśmy edytować kolorowy obraz za pomocą PaintBrush i narysowaliśmy każdą z ramek

Oryginalny obraz - 960x707 pikseli - format PNG

Następnym krokiem jest uczynienie go monochromatycznym, zapisując go jako monochromatyczną bitmapę.

Następnie zmieniamy jego rozmiar do rozmiaru zgodnego z wyświetlaczem.

Zwróć szczególną uwagę na jednostki miary. W tym przypadku dostosowaliśmy obraz tak, aby zajmował całą wysokość wyświetlacza (pion = 64 piksele).

Mając obraz w odpowiednim rozmiarze, zmodyfikujemy go, tworząc ramki. Tutaj usuwamy każdy łuk poziomu sygnału i zapisujemy je jako odpowiadające ramki.

Teraz musimy przekonwertować pliki BMP do formatu XBM.

Istnieje kilka opcji oprogramowania, które mogą wykonać tę konwersję. Wybraliśmy również GIMP jako opcję edytora.

W naszym przykładzie użyliśmy PaintBrush do generowania i edycji plików. Jednak każdy z tych procesów można było wykonać w Gimp (lub dowolnym innym edytorze).

Aby przekonwertować, najpierw otwieramy plik.

Po otwarciu obrazu możemy wybrać Plik => Eksportuj jako…

W oknie Eksportuj obraz musimy zmienić docelowe rozszerzenie pliku dla XBM. Gimp będzie odpowiedzialny za określenie pożądanego formatu i przedstawienie większej liczby opcji…

Podczas eksportu Gimp zaprezentuje inne opcje. Możemy pozostawić wartości domyślne.

Po przekonwertowaniu wszystkich plików otrzymamy cztery pliki XBM, po jednym na każdą klatkę.

Teraz skopiujmy je do folderu z kodem źródłowym i zmieńmy ich nazwy, zmieniając ich rozszerzenia na.h.

Krok 5: Wyjście z plików XBM

Pliki XBM możemy otworzyć w dowolnym edytorze tekstu, w którym zobaczymy już zdefiniowaną macierz obrazu i informacje o rozmiarze obrazu.

Krok 6: Kod źródłowy

Kod źródłowy: Oświadczenia

Dołączymy niezbędne biblioteki, a także pliki graficzne. Definiujemy pozycje obrazu i interwał przejścia. Wskazujemy również piny OLED podłączone do ESP32. Na koniec tworzymy i dostosowujemy obiekt Display.

//Dołącz jako biblioteca necessárias#include #include "SSD1306.h" //Dołącz zbiór obrazów #include "frame1.h" #include "frame2.h" #include "frame3.h" #include "frame4.h" //definicja pozycji obrazu i interwału transpozycji #define posX 21 #define posY 0 #define interwał 500 //przyciski do połączeń OLED związane z ESP32: I2C //OLED_SDA -- GPIO4 //OLED_SCL -- GPIO15 / - OLED_RST - GPIO16 #define SDA 4 #define SCL 15 #define RST 16 //O RST Opracuj sterowanie przez oprogramowanie SSD1306 wyświetlacz (0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display

Kod źródłowy: Konfiguracja ()

Zainicjuj wyświetlacz i odwróć pionowo ekran. Akcja jest opcjonalna.

void setup() { display.init(); //inicjacja wyświetlania display.flipScreenVertical(); //inverte verticalmente a tela (opcionalnie) }

Kod źródłowy: Pętla ()

Pierwszą rzeczą do zrobienia w pętli jest wyczyszczenie ekranu. Wczytujemy ramkę 1 do bufora używając pozycji początkowych posX i posY. Podajemy rozmiar obrazka za pomocą frame1_width i frame1_height oraz nazwę tablicy zawierającej bity obrazka. Pokazujemy bufor na wyświetlaczu i czekamy na interwał przed wyświetleniem kolejnej klatki.

void loop() { display.clear(); //brak informacji //połączenie bufora o ramkę 1 //użyj jako pozycji początkowej pozycji X i pozycji //informuj o miejscu w obrazie z ramką1_szerokość i ramkę1_wysokość //informacje o nazwie macierzy w odniesieniu do bitów w obrazie, bez ramki 1_bitów display.drawXbm(pozX, pozY, ramka1_szerokość, ramka1_wysokość, ramka1_bity); //mostra o bufor brak wyświetlania display.display(); //aguarda um intervalo antes de mostrar o proximo frame delay(intervalo);

Powtarzamy ten proces dla wszystkich pozostałych ramek.

//powtórzenie procesu dla wszystkich ramek wychodzących i wychodzących display.clear(); display.drawXbm(pozX, pozY, ramka2_szerokość, ramka2_wysokość, ramka2_bity); display.display(); opóźnienie(interwał); wyświetl.wyczyść(); display.drawXbm(pozX, pozY, ramka3_szerokość, ramka3_wysokość, ramka3_bity); display.display(); opóźnienie(interwał); wyświetl.wyczyść(); display.drawXbm(pozX, pozY, ramka4_szerokość, ramka4_wysokość, ramka4_bity); display.display(); opóźnienie(interwał); }

Krok 7: Przesyłanie kodu

Przy otwartym środowisku IDE otwórz plik z kodem źródłowym, klikając dwukrotnie plik.ino lub przechodząc do menu Plik.

Po podłączeniu Heltec do USB wybierz menu Narzędzia => Karta: "Heltec_WIFI_LoRa_32"

Nadal w menu Narzędzia wybierz port COM, do którego podłączony jest Heltec.

Kliknij przycisk PRZEŚLIJ…

… I czekaj na zakończenie.

Krok 8: Pliki

Pobierz pliki:

PDF

JA NIE