Einführung ESP32 Lora OLED-Display - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:19

Dies ist ein weiteres Video zur Einführung in den ESP32 LoRa. Diesmal sprechen wir speziell von einer grafischen Anzeige (von 128x64 Pixel). Wir werden die SSD1306-Bibliothek verwenden, um Informationen auf diesem OLED-Display anzuzeigen und ein Beispiel für eine Animation mit XBM-Bildern präsentieren.

Schritt 1: Verwendete Ressourcen

1 Heltec-WLAN LoRa 32

Protoboard

Schritt 2: Das Display

Das auf dem Entwicklungsboard verwendete Display ist ein OLED von 0,96 Zoll.

Es hat 128x64 und ist monochrom.

Es verfügt über eine I2C-Kommunikation und ist über 3 Drähte mit dem ESP32 verbunden:

SDA auf GPIO4 (für Daten)

SCL auf GPIO15 (für Uhr)

RST auf GPIO16 (für Reset und Displaystart)

Schritt 3: Die SSD1306-Bibliothek

Diese finden Sie zusammen mit den von Heltec-Aaron-Lee bereitgestellten Bibliotheken.

Es verfügt über mehrere Funktionen zum Schreiben von Zeichenfolgen, Zeichnen von Linien, Rechtecken, Kreisen und Anzeigen von Bildern.

github.com/Heltec-Aaron-Lee/WiFi_Kit_series

Schritt 4: Die Animations- und XBM-Dateien

Wir verwenden die drawXbm-Funktion der Bibliothek, um eine Animation anzuzeigen.

Das XBM-Bildformat besteht aus einem Array von Zeichen, wobei jedes Element textuell einen Satz monochromer Pixel (jeweils 1 Bit) durch einen hexadezimalen Wert darstellt. Diese entsprechen einem Byte.

Da mehrere Zeichen verwendet werden, um ein einzelnes Byte darzustellen, sind diese Dateien in der Regel größer als die der derzeit verwendeten Formate. Der Vorteil ist, dass sie ohne Vorbehandlung direkt zusammengestellt werden können.

Neben dem Array sind zwei Einstellungen enthalten, die die Bildgröße bestimmen.

Um die Animation zu erstellen, benötigen wir die Bilder, die die Frames bilden.

Wir können jede Bildbearbeitungssoftware verwenden, um mit der Arbeit zu beginnen. Die einzigen Vorsichtsmaßnahmen, die wir treffen sollten, sind, zunächst die Größe mit dem Display kompatibel zu halten und monochrome Dateien zu verwenden.

Um die Dateien zu generieren, können wir sie zeichnen oder Bilder importieren. Hier haben wir uns entschieden, ein Farbbild mit PaintBrush zu bearbeiten, und wir haben jeden der Rahmen gezeichnet

Originalbild - 960x707 Pixel - PNG-Format

Der nächste Schritt besteht darin, es monochrom zu machen, indem Sie es als monochrome Bitmap speichern.

Dann ändern wir die Größe auf eine Größe, die mit dem Display kompatibel ist.

Achten Sie besonders auf die Maßeinheiten. In diesem Fall haben wir das Bild so angepasst, dass es die gesamte Höhe des Displays einnimmt (vertikal = 64 Pixel).

Mit dem Bild in der richtigen Größe bearbeiten wir es, um die Rahmen zu bilden. Hier löschen wir jeden Bogen des Signalpegels und speichern sie als entsprechende Frames.

Jetzt müssen wir BMP-Dateien in das XBM-Format konvertieren.

Es gibt mehrere Softwareoptionen, die diese Konvertierung durchführen können. Wir haben uns auch für GIMP als Editoroption entschieden.

In unserem Beispiel haben wir PaintBrush verwendet, um die Dateien zu generieren und zu bearbeiten. Jeder dieser Prozesse hätte jedoch in Gimp (oder einem anderen Editor) ausgeführt werden können.

Zum Konvertieren öffnen wir zuerst die Datei.

Wenn das Bild geöffnet ist, können wir Datei => Exportieren als … auswählen.

Im Fenster Export Image müssen wir die Zieldateierweiterung für XBM ändern. Gimp wird dafür verantwortlich sein, das gewünschte Format zu identifizieren und weitere Optionen zu präsentieren…

Beim Exportieren präsentiert Gimp andere Optionen. Wir können die Standardwerte belassen.

Nach der Konvertierung aller Dateien haben wir vier XBM-Dateien, eine für jeden Frame.

Jetzt kopieren wir sie in den Quellcodeordner und benennen sie um, indem wir ihre Erweiterungen in.h ändern.

Schritt 5: Beenden von XBM-Dateien

Wir können die XBM-Dateien in jedem Texteditor öffnen, in dem wir die bereits definierten Bildmatrix- und Bildgrößeninformationen sehen.

Schritt 6: Quellcode

Quellcode: Aussagen

Wir werden die notwendigen Bibliotheken sowie die Bilddateien beifügen. Wir definieren die Positionen des Bildes und das Übergangsintervall. Wir zeigen auch die OLED-Pins, die mit dem ESP32 verbunden sind. Schließlich erstellen und passen wir das Display-Objekt an.

//Include as 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 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-Entwicklersteuerung von Software SSD1306 Display (0x3c, SDA, SCL, RST); //Cria e ajusta o Objeto display

Quellcode: Setup ()

Initialisieren Sie die Anzeige und invertieren Sie den Bildschirm vertikal. Aktion ist optional.

Void setup () {display.init (); //inicia o display.flipScreenVertically(); //vertikale invertieren a tela (optional)}

Quellcode: Schleife ()

Das erste, was Sie in der Schleife tun müssen, ist, den Bildschirm zu löschen. Wir laden Frame 1 mit den Anfangspositionen posX und posY in den Puffer. Wir informieren die Größe des Bildes mit frame1_width und frame1_height und den Namen des Arrays, das die Bits des Bildes enthält. Wir zeigen den Puffer auf dem Display an und warten ein Intervall, bevor wir den nächsten Frame anzeigen.

Void Schleife () { 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 oder 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 Puffer keine Anzeige display.display(); // Aguarda um ein Intervall antes von Mostrar oder Próximo Frame Delay (Intervalo);

Wir wiederholen den Vorgang für alle anderen Frames.

// Wiederhole oder prozessieren für todos oder outros frames display.clear(); display.drawXbm(posX, posY, frame2_width, frame2_height, frame2_bits); display.display(); Verzögerung (Intervall); display.clear(); display.drawXbm(posX, posY, frame3_width, frame3_height, frame3_bits); display.display(); Verzögerung (Intervall); display.clear(); display.drawXbm(posX, posY, frame4_width, frame4_height, frame4_bits); display.display(); Verzögerung (Intervall); }

Schritt 7: Durchführen des Hochladens des Codes

Öffnen Sie bei geöffneter IDE die Datei mit dem Quellcode, indem Sie auf die.ino-Datei doppelklicken oder zum Menü Datei gehen.

Wenn Heltec an USB angeschlossen ist, wählen Sie das Menü Extras => Karte: "Heltec_WIFI_LoRa_32"

Wählen Sie immer noch im Tools-Menü den COM-Port aus, an dem der Heltec angeschlossen ist.

Klicken Sie auf die Schaltfläche HOCHLADEN…

… Und warten Sie auf den Abschluss.

Schritt 8: Dateien

Laden Sie die Dateien herunter:

PDF

INO