In diesem Tutorial lernst du, wie du mit dem CrowPanel 2.8″ ESP32 Display von ELECROW loslegst. Die CrowPanel-Displays sind super, weil sie fast alles, was du brauchst, schon integriert haben. Dazu gehören ein TFT-Touchscreen, ein ESP32, ein TF-Karten-Slot, ein Batterieanschluss mit Ladefunktion, eine I2C-Schnittstelle und sogar ein Lautsprecheranschluss.
Je nach Erfahrung können die ersten Schritte mit dem Display etwas knifflig sein. Hoffentlich hilft dir diese Anleitung dabei. Ich konzentriere mich speziell auf die 2,8″-Version, aber die Infos gelten auch für die 2,4″- und 3,5″-Version. Die anderen, größeren Displays der CrowPanel-Serie verwenden allerdings andere Display-Treiber.
Also, legen wir los.
Benötigte Teile
Du brauchst natürlich das Display und, falls du externe Hardware anschließen möchtest, sind ein paar Kabel, Widerstände, LEDs und ein Breadboard praktisch.
CrowPanel 2.8″ ESP32 Display
USB-C-Kabel
Dupont-Kabelset
Breadboard
Widerstands- & LED-Kit
Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.
Eigenschaften des CrowPanel 2.8″ ESP32 Displays
Das CrowPanel 2.8″ ESP32 Display von ELECROW ist ein HMI-Resistiv-Touchscreen mit einem 320*240 Pixel TFT-Display. Als Steuerprozessor kommt das ESP32-WROOM-32 Modul zum Einsatz, das integriertes WLAN und Bluetooth bietet.
Zusätzlich hat das Board einen TF-Karten-Slot, eine UART-Schnittstelle, eine I2C-Schnittstelle, einen Lautsprecheranschluss, einen Batterieanschluss mit Ladefunktion und einen kleinen GPIO-Port mit zwei GPIO-Pins. Siehe das Pinout unten:
Die folgende Tabelle fasst zusammen, welche GPIO-Pins welchen der drei IO-Schnittstellen zugeordnet sind. Für weitere GPIO-Pins schau dir die Schaltpläne im Anhang dieses Beitrags an.
| GPIO_D | IO25; IO32 |
| UART | RX(IO16); TX(IO17) |
| I2C | SDA(IO22); SCL(IO21) |
Du kannst das Board entweder über den USB-Anschluss (5V, 2A) oder durch Anschluss eines Standard-3,7V-LiPo-Akkus am BAT-Anschluss mit Strom versorgen. Wenn USB-Kabel und Akku gleichzeitig angeschlossen sind, lädt das Board den Akku. Der maximale Ladestrom beträgt 500mA.
Das Board unterstützt mehrere Entwicklungsumgebungen wie Arduino IDE, Espressif IDF, Lua RTOS und Micro Python und ist kompatibel mit der LVGL Grafikbibliothek. In diesem Tutorial konzentriere ich mich jedoch auf die Arduino IDE und die TFT_eSPI Grafikbibliothek.
CrowPanel ESP32 Display Serie
Das CrowPanel 2.8″ ESP32 Display ist Teil einer ganzen Familie von Displays, die von 2,4 Zoll bis 7 Zoll reichen. Einen Überblick findest du in der Tabelle unten.
In diesem Tutorial beschreibe ich speziell die Einrichtung der 2,8″-Version. Die Codebeispiele und das Vorgehen sind aber im Wesentlichen gleich für die 2.4″ display und die 3.5″ display, da sie den gleichen oder einen ähnlichen Display-Treiber (ILI9341, ILI9488) verwenden. Siehe die gelb markierten Bereiche in der Tabelle oben.
Da ich jedoch die TFT_eSPI Bibliothek verwende, werden die Codebeispiele vermutlich nicht mit den größeren Displays (4,3″, 5″, 7″) funktionieren, da die Treiber für diese Displays nicht unterstützt werden – soweit ich weiß. Korrigiere mich gern, falls ich falsch liege, ich habe es selbst nicht getestet.
Bevor du dich an schicke Grafiken wagst, empfehle ich dir, zuerst das Hochladen und Ausführen eines einfachen Blink-Programms zu testen. Darum geht es im nächsten Abschnitt.
GPIO testen
Das Display kommt mit einer UI-Demo, die beim Einstecken des Boards startet. Das ist ein guter erster Test. Danach wollen wir aber prüfen, ob wir eigenen Code hochladen und ausführen können. Das typische Testbeispiel dafür ist das Blink Programm.
Da das Display keine eingebaute LED hat, nutzen wir die beiden verfügbaren GPIO-Pins des GPIO_D-Ports, um zwei externe LEDs zu steuern. Das Schaltbild unten zeigt dir, wie du die beiden LEDs anschließt. Du kannst dafür das mitgelieferte Kabel verwenden.
Die Pins im GPIO_D-Port sind wie folgt: IO25; IO32, 3.3V, GND. Den 3,3V-Ausgang brauchen wir nicht, nur die beiden GPIO-Pins und Masse. Vergiss beim Aufbau der Schaltung nicht die 220Ω-Widerstände, um den Strom durch die LEDs zu begrenzen, und achte darauf, dass Masse richtig verbunden ist.
Danach kannst du den folgenden Code hochladen, der die beiden LEDs abwechselnd blinken lässt. Es wird auch etwas auf den Serial Monitor ausgegeben, sodass du bei Problemen mit der Verdrahtung zumindest prüfen kannst, ob das Programm läuft. Stelle sicher, dass die Baudrate im Serial Monitor auf 115200 eingestellt ist.
const int led1 = 25;
const int led2 = 32;
void setup() {
Serial.begin(115200);
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
}
void loop() {
Serial.println("on");
digitalWrite(led1, HIGH);
digitalWrite(led2, LOW);
delay(1000);
Serial.println("off");
digitalWrite(led1, LOW);
digitalWrite(led2, HIGH);
delay(1000);
}
Da das Display einen ESP32 verwendet, musst du das ESP32-Core installiert haben. Falls du damit Probleme hast, schau dir unser Tutorial A Beginner’s Guide To ESP32 Programming an, in dem wir das Vorgehen beschreiben.
Beachte, dass es zwei Versionen des Display-Boards gibt. Die ältere V1-Version erfordert, dass du die BOOT-Taste gedrückt hältst und dann die RESET-Taste drückst, um in den Programmiermodus zu wechseln. Die neue V2-Version benötigt das nicht mehr. Ich habe die V2-Version und konnte problemlos ohne Tastendruck hochladen.
TFT_eSPI-Bibliothek über User_Setup.h einrichten
Bis hierhin sollte alles einfach gewesen sein. Jetzt kommt der knifflige Teil. Wenn du etwas auf dem Display anzeigen willst, brauchst du eine Grafikbibliothek. Die gängigste ist wahrscheinlich die TFT_eSPI Bibliothek von Bodmer. Du findest sie im Library Manager und kannst sie dort auf die übliche Weise installieren:
Das Schwierige ist, die richtigen Einstellungen für das CrowPanel 2.8″-Display zu finden, damit die TFT_eSPI-Bibliothek funktioniert. Dafür musst du eine Datei namens User_Setup.h finden, die Teil der TFT_eSPI-Bibliothek ist. Unter Windows liegt sie typischerweise in einem Pfad wie diesem:
C:\Users\stefa\OneDrive\Documents\Arduino\libraries\TFT_eSPI
Der genaue Pfad hängt von deinem Benutzernamen (bei mir z.B. „stefa„) und deinem Betriebssystem ab und davon, ob du OneDrive verwendest oder nicht. Du musst sie eventuell suchen.
Wenn du die User_Setup.h Datei öffnest, siehst du eine riesige Menge an Einstellungen, die stimmen müssen, damit das Display überhaupt etwas anzeigt. Viel Erfolg dabei!
Es ist überraschend schwer, die richtigen Einstellungen zu finden, und ich muss mich bei Ralph S Bacon und seinem TFT 3.5″ Touch Screen & ESP32 built in – Elecrow review bedanken, die mir viel Ausprobieren erspart haben. Hier sind die nötigen Einstellungen:
#define ILI9341_DRIVER #define TFT_WIDTH 320 #define TFT_HEIGHT 240 #define TFT_BACKLIGHT_ON HIGH #define TFT_BL 27 #define TFT_MISO 12 #define TFT_MOSI 13 #define TFT_SCLK 14 #define TFT_CS 15 #define TFT_DC 2 #define TFT_RST -1 #define TOUCH_CS 33 #define SPI_FREQUENCY 27000000 #define SPI_TOUCH_FREQUENCY 2500000 #define SPI_READ_FREQUENCY 16000000 #define LOAD_GLCD // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH #define LOAD_FONT2 // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters #define LOAD_FONT4 // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters #define LOAD_FONT6 // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm #define LOAD_FONT7 // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-. #define LOAD_FONT8 // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-. #define LOAD_GFXFF // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts #define SMOOTH_FONT
Laut Spezifikation verwendet das 2,8″-Display den ILI9341-Treiber und hat eine Auflösung von 320×240 Pixeln. Das ist der erste Teil der Einstellungen. Dann folgt die Zuordnung der GPIO-Pins, die das Display per SPI ansteuern, sowie die SPI-Frequenz und schließlich die verfügbaren Fonts.
Du musst User_Setup.h bearbeiten, alles andere auskommentieren (//) und sicherstellen, dass nur diese Einstellungen aktiv sind. Ich empfehle, die Originaldatei User_Setup.h unter einem neuen Namen zu sichern, z.B. „User_Setup.h.bak“, und dann alles in User_Setup.h durch die oben genannten Einstellungen zu ersetzen.
Danach solltest du alle Beispielprogramme, die mit der TFT_eSPI-Bibliothek mitgeliefert werden, ausführen können. Mein Favorit ist das Cellular_Automata-Programm:
Einstellungen für die 2,4″- und 3,5″-CrowPanel-Displays
Die Einstellungen für das 2,4″-Display sind identisch mit denen für das 2,8″-Display oben, da das 2,4″-Display die gleiche Auflösung (320×240) und den gleichen Display-Treiber (ILI9341) hat. Für das größere 3,5″-CrowPanel-Display musst du nur den Treiber (ILI9488) und die Auflösung (480×320) entsprechend anpassen:
#define ILI9488_DRIVER #define TFT_WIDTH 480 #define TFT_HEIGHT 320
Die 4,3″-, 5″- und 7″-CrowPanel-Displays verwenden Treiber, die von der TFT_eSPI-Bibliothek nicht direkt unterstützt werden. Soweit ich weiß, kannst du diese Bibliothek mit diesen Displays also nicht verwenden, aber ich habe es nicht selbst getestet.
TFT_eSPI-Bibliothek über tft_setup.h einrichten
Die Einstellungen in User_Setup.h zu ändern, ist okay, um die Beispiele der TFT_eSPI-Bibliothek auszuprobieren. Das ist aber keine gute Lösung, wenn du eigenen Code schreibst und hochlädst. Der Grund: Immer wenn du Code für ein anderes Display schreibst oder die TFT_eSPI-Bibliothek neu installierst/aktualisierst, musst du die Einstellungen in User_Setup wieder ändern.
Zum Glück bietet die TFT_eSPI-Bibliothek dafür eine Lösung. Statt die Einstellungen in User_Setup.h zu ändern, was alle Projekte betrifft, kannst du eine Datei namens tft_setup.h zu deinem spezifischen Arduino-Projekt hinzufügen. Diese Datei enthält die gleichen Einstellungen wie oben beschrieben, gilt aber nur für dieses Projekt. So kannst du verschiedene Projekte mit unterschiedlichen Displays haben, ohne User_Setup.h jedes Mal ändern zu müssen, wenn du ein anderes Display verwendest.
Hier ein Beispiel, wie das im Detail funktioniert. Erstelle zuerst ein neues Arduino-Projekt und speichere es z.B. als „tft_test„. Dadurch wird ein Ordner tft_test mit einer Datei tft_test.ino angelegt:
Lege in diesem Ordner nun eine Datei namens „tft_setup.h“ an – exakt mit diesem Namen. Dein Projektordner sollte dann so aussehen:
tft_setup.hIn deiner Arduino IDE solltest du jetzt zwei Tabs sehen: tft_test.ino und tft_setup.h, die du zum Bearbeiten anklicken kannst.
tft_test.ino and tft_setup.hIn die Datei tft_setup.h kopierst du die kompletten Display-Einstellungen von oben. Der folgende Auszug ist nur ein Beispiel. Du musst die vollständigen Einstellungen übernehmen.
#define ILI9341_DRIVER #define TFT_WIDTH 320 #define TFT_HEIGHT 240 .. #define LOAD_FONT8 #define LOAD_GFXFF #define SMOOTH_FONT
In die Datei tft_test.ino
#include "tft_setup.h"
#include"TFT_eSPI.h"
TFT_eSPI tft = TFT_eSPI();
void setup(void) {
tft.init();
tft.fillScreen(TFT_BLACK);
}
void loop() {
tft.setCursor(50, 150, 2);
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.setTextSize(2);
tft.println("Makerguides");
delay(5000);
}
Beachte, dass tft_setup.h am Anfang des Programms eingebunden wird. Der Code selbst ist leicht verständlich. Wir erstellen ein TFT_eSPI-Objekt und initialisieren es in der setup()-Funktion. In der Loop-Funktion setzen wir Cursor und Schriftart (2), Textfarbe und -größe und geben schließlich den String „Makerguides“ auf dem TFT-Display aus.
Wenn du dieses Programm kompilierst und hochlädst, solltest du folgende Ausgabe auf deinem Display sehen:
Wenn du es bis hierher geschafft hast: Glückwunsch! Das Schlimmste ist geschafft. In den nächsten Abschnitten lernst du, wie du Touch-Daten ausliest, um den Touchscreen zu kalibrieren, und wie du eine einfache Benutzeroberfläche baust.
Touchscreen kalibrieren
Das CrowPanel 2.8″-Display hat einen resistiven Touchscreen, den du zuerst kalibrieren musst, bevor du ihn mit der TFT_eSPI-Bibliothek nutzen kannst. Einige Codebeispiele der TFT_eSPI-Bibliothek haben den Kalibrierungscode integriert, aber es ist umständlich, das in jedem Projekt zu haben.
Kalibrierungsparameter extrahieren
Deshalb habe ich aus den Beispielen folgendes Programm abgeleitet, das die relevanten Kalibrierungsparameter ausliest:
#include "tft_setup.h"
#include "TFT_eSPI.h"
TFT_eSPI tft = TFT_eSPI();
void setup() {
Serial.begin(115200);
tft.begin();
tft.setRotation(0);
}
void loop() {
uint16_t cal[5];
tft.fillScreen(TFT_BLACK);
tft.setCursor(20, 0);
tft.setTextFont(2);
tft.setTextSize(1);
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.print("Touch corners ... ");
tft.calibrateTouch(cal, TFT_MAGENTA, TFT_BLACK, 15);
tft.println("done.");
Serial.printf("cal: {%d, %d, %d, %d, %d}\n",
cal[0], cal[1], cal[2], cal[3], cal[4]);
delay(10000);
}
Wenn du es ausführst, wirst du aufgefordert, die vier Ecken des Bildschirms zu berühren. Danach werden die fünf Kalibrierungsparameter (Eckkoordinaten und Bildschirmausrichtung) im Serial Monitor ausgegeben. Dein Display sollte während der Kalibrierung so aussehen:
Und im Serial Monitor solltest du nach Abschluss der Kalibrierung etwa Folgendes sehen:
cal: {286, 3478, 196, 3536, 2}
Die Kalibrierung wiederholt sich alle 10 Sekunden, sodass du mehrere Versuche hast, um die genauesten Parameter zu bekommen. Kopiere sie dir irgendwohin, du brauchst sie für den nächsten Schritt.
Touch-Koordinaten auslesen
In diesem Abschnitt schreiben wir ein kleines Programm, das die Koordinate ausliest, an der das Display berührt wird. Schau dir dazu folgenden Code an:
#include "tft_setup.h"
#include "TFT_eSPI.h"
TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };
void setup() {
tft.begin();
tft.setRotation(0);
tft.setTextSize(2);
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.fillScreen(TFT_BLACK);
tft.setTouch(cal);
}
void loop() {
uint16_t x = 0, y = 0;
if (tft.getTouch(&x, &y)) {
tft.setCursor(50, 150);
tft.printf("x=%d, y=%d ", x, y);
}
delay(100);
}
Zuerst binden wir wie üblich die Bibliotheken ein und erstellen das Bildschirmobjekt. Die nächste Zeile ist wichtig: Hier definieren und speichern wir die zuvor extrahierten Kalibrierungsparameter:
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };
Danach setzen wir in der Setup-Funktion die typischen Display-Parameter wie Bildschirmrotation, Textgröße und -farbe. Am Ende kommt die wichtigste Zeile, in der wir die Kalibrierungsparameter tatsächlich setzen:
tft.setTouch(cal);
Die Hauptschleife ist einfach. Alle 100 ms rufen wir tft.getTouch auf und prüfen, ob eine Berührung erkannt wurde. Falls ja, zeigen wir die Touch-Koordinaten auf dem Bildschirm an. Dein Display sollte dann so aussehen:
Damit haben wir alles, um tatsächlich eine Benutzeroberfläche zu bauen. Die nächsten Abschnitte zeigen ein einfaches Beispiel dafür.
Benutzeroberfläche bauen
In diesem Abschnitt bauen wir eine einfache Benutzeroberfläche (UI) mit zwei Buttons, mit denen wir die beiden zuvor am GPIO_D-Port angeschlossenen LEDs steuern können. Die Benutzeroberfläche sieht so aus:
Bevor wir diese UI umsetzen können, müssen wir noch eine weitere Bibliothek installieren. Die TFT_eWidget Bibliothek ist eine kleine Erweiterung der TFT_eSPI-Bibliothek und stellt UI-Elemente wie Buttons, Anzeigen oder Graphen bereit. Sie kann wie gewohnt über den Library Manager installiert werden:
Sobald sie installiert ist, haben wir alles, was wir brauchen. Schau dir zuerst den vollständigen Code für die UI an, bevor wir die Details besprechen:
#include "tft_setup.h"
#include "TFT_eSPI.h"
#include "TFT_eWidget.h"
TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };
const int led1 = 25;
const int led2 = 32;
ButtonWidget btn1 = ButtonWidget(&tft);
ButtonWidget btn2 = ButtonWidget(&tft);
ButtonWidget* btns[] = { &btn1, &btn2 };
void btn1_pressed(void) {
if (btn1.justPressed()) {
bool state = !btn1.getState();
btn1.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
digitalWrite(led1, state ? HIGH : LOW);
}
}
void btn2_pressed(void) {
if (btn2.justPressed()) {
bool state = !btn2.getState();
btn2.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
digitalWrite(led2, state ? HIGH : LOW);
}
}
void initButtons() {
uint16_t w = 100;
uint16_t h = 50;
uint16_t x = (tft.width() - w) / 2;
uint16_t y = tft.height() / 2 - h - 10;
btn1.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_YELLOW, "LED1", 2);
btn1.setPressAction(btn1_pressed);
btn1.drawSmoothButton(false, 2, TFT_BLACK);
y = tft.height() / 2 + 10;
btn2.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_GREEN, "LED2", 2);
btn2.setPressAction(btn2_pressed);
btn2.drawSmoothButton(false, 2, TFT_BLACK);
}
void handleButtons() {
uint8_t nBtns = sizeof(btns) / sizeof(btns[0]);
uint16_t x = 0, y = 0;
bool touched = tft.getTouch(&x, &y);
for (uint8_t b = 0; b < nBtns; b++) {
if (touched) {
if (btns[b]->contains(x, y)) {
btns[b]->press(true);
btns[b]->pressAction();
}
} else {
btns[b]->press(false);
btns[b]->releaseAction();
}
}
}
void setup() {
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
tft.begin();
tft.setRotation(0);
tft.fillScreen(TFT_BLACK);
tft.setTouch(cal);
initButtons();2
}
void loop() {
handleButtons();
delay(50);
}
Die UI hat die folgenden fünf Zustände bzw. Bildschirme: Die beiden Buttons sind initialisiert und dann jeweils im Ein- oder Aus-Zustand.
Schauen wir uns genauer an, wie das umgesetzt wird.
Bibliotheken
Zuerst installieren wir die drei benötigten Bibliotheken. Denk daran: „tft_setup.h“ ist die Datei mit den Einstellungen für das TFT-Display und muss Teil des Arduino-Projekts sein, das den obigen Code enthält.
#include "tft_setup.h" #include "TFT_eSPI.h" #include "TFT_eWidget.h"
Wenn du die richtigen Display-Einstellungen in User_Setup.h hast, musst du die tft_setup.h-Datei nicht einbinden.
Konstanten und Objekte
Als nächstes erstellen wir das Display-Objekt über TFT_eSPI tft und eine Konstante cal mit den Kalibrierungsparametern. Dann definieren wir die GPIO-Pins für die beiden LEDs. Danach werden die beiden Button-Objekte btn1 und btn2 erstellt.
TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };
const int led1 = 25;
const int led2 = 32;
ButtonWidget btn1 = ButtonWidget(&tft);
ButtonWidget btn2 = ButtonWidget(&tft);
ButtonWidget* btns[] = { &btn1, &btn2 };
Wir speichern die beiden Buttons in einem Array btns, da das die Ereignisbehandlung vereinfacht. Mehr dazu später.
Button-Handler
Die Funktionen btn1_pressed() und btn2_pressed() behandeln die Button-Press-Events für jeden LED-Button. Wenn ein Button gedrückt wird, wird der entsprechende LED-Zustand umgeschaltet und das Aussehen des Buttons auf dem Display aktualisiert. Unten ist nur der Code für btn1, aber der Code für btn2 ist im Prinzip identisch, nur dass eine andere LED geschaltet wird.
void btn1_pressed(void) {
if (btn1.justPressed()) {
bool state = !btn1.getState();
btn1.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
digitalWrite(led1, state ? HIGH : LOW);
}
}
Button-Initialisierung
Die initButtons()-Funktion legt Position, Aussehen und Aktionen für die beiden Buttons auf dem TFT fest. Jeder Button wird mit bestimmten Eigenschaften und seiner Press-Action initialisiert. Den Button für die gelbe LED machen wir gelb (TFT_YELLOW), den für die grüne LED grün (TFT_GREEN).
void initButtons() {
...
btn1.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_YELLOW, "LED1", 2);
btn1.setPressAction(btn1_pressed);
btn1.drawSmoothButton(false, 2, TFT_BLACK);
...
btn2.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_GREEN, "LED2", 2);
btn2.setPressAction(btn2_pressed);
btn2.drawSmoothButton(false, 2, TFT_BLACK);
}
Button-Verarbeitung
In der handleButtons()-Funktion prüfen wir per tft.getTouch(), ob eine Berührung auf dem TFT erkannt wurde. Wir gehen alle Buttons durch und rufen je nach Touch-Koordinaten die pressAction() oder die releaseAction() auf.
void handleButtons() {
...
bool touched = tft.getTouch(&x, &y);
for (uint8_t b = 0; b < nBtns; b++) {
if (touched) {
if (btns[b]->contains(x, y)) {
btns[b]->press(true);
btns[b]->pressAction();
}
} else {
btns[b]->press(false);
btns[b]->releaseAction();
}
}
}
Die Buttons haben keine Release-Action, da wir sie hier nicht brauchen. Um den Code aber flexibel zu halten, rufen wir trotzdem releaseAction() auf. Das hat den Vorteil, dass der Code unverändert funktioniert, falls du später Release-Aktionen nutzen möchtest.
Setup-Funktion
In der setup()-Funktion konfigurieren wir die LED-Pins als Ausgänge, initialisieren das TFT, setzen die Rotation, füllen den Bildschirm schwarz, setzen die Touch-Kalibrierung und erstellen die Buttons.
void setup() {
pinMode(led1, OUTPUT);
pinMode(led2, OUTPUT);
tft.begin();
tft.setRotation(0);
tft.fillScreen(TFT_BLACK);
tft.setTouch(cal);
initButtons();
}
Loop-Funktion
Die loop()-Funktion prüft fortlaufend auf Button-Interaktionen, indem sie handleButtons() aufruft, und fügt eine kleine Verzögerung ein, um zu schnelle Button-Presses zu vermeiden.
void loop() {
handleButtons();
delay(50);
}
Beachte, dass der Aufruf von delay() alle anderen Aktionen blockiert. Alternativ kannst du das so lösen, um das Blockieren zu vermeiden:
void loop() {
static uint32_t lastTime = millis();
if (millis() - lastTime >= 50) {
handleButtons();
lastTime = millis();
}
}
Und das war’s – eine einfache UI, um zwei Buttons mit dem CrowPanel 2.8″ ESP32 Display zu steuern.
Das obige Codebeispiel basiert auf dem Button_demo.ino-Beispiel der TFT_eWidget-Bibliothek. Für mehr Infos und weitere Beispiele schau dort vorbei.
Fazit
Dieses Tutorial bietet eine ausführliche Schritt-für-Schritt-Anleitung für das CrowPanel 2.8″ ESP32 Display. Mit wenigen oder keinen Änderungen gilt diese Anleitung auch für das 2,4″- und 3,5″-Display.
Die CrowPanel ESP32 Display-Boards bringen fast alles mit, was du für ein Display-Projekt brauchst: TFT-Touchscreen, ESP32, TF-Karten-Slot, Batterieanschluss mit Ladefunktion, Lautsprecheranschluss und I2C-Schnittstelle.
Das bedeutet aber auch, dass nur zwei freie GPIO-Pins übrig bleiben. Da es aber eine I2C-Schnittstelle gibt, kannst du mit einem GPIO-Expander weitere GPIOs hinzufügen. Schau dir dazu unser Tutorial Using GPIO Expander MCP23017 With Arduino an.
Mit Displays zu arbeiten ist oft knifflig, weil du den richtigen Display-Treiber und die passenden Einstellungen brauchst. In dieser Anleitung hast du gelernt, wie du die TFT_eSPI.h-Bibliothek für das CrowPanel 2.8″-Display konfigurierst. Außerdem haben wir mit der TFT_eWidget-Erweiterungsbibliothek eine einfache UI mit zwei Buttons gebaut, um zwei LEDs zu steuern. Schau dir auch das Digital Clock with CrowPanel 3.5″ ESP32 Display-Tutorial an, in dem wir den Beispielcode aus diesem Tutorial erweitern und eine Digitaluhr bauen.
Wenn du fortgeschrittenere UIs brauchst, ist die LVGL-Bibliothek die bessere Wahl, da sie mehr Widgets und eine GUI-Builder-Software bietet. Sie ist aber auch deutlich komplexer in der Einrichtung und Nutzung. Mehr Infos und Tutorials findest du auf der ELECROW-Website. Es gibt Arduino-Beispielcode für LVGL, aber auch Beispiele für ESP-IDF, ESPHome, PlatformIO und MicroPython.
Wenn du LVGL nutzen willst, schau dir auch die CrowPanel ESP32 Display Video Tutorials an, die erklären, wie du den Squareline Studio GUI-Builder verwendest. Es gibt eine kostenlose, aber eingeschränkte Version (Personal Plan) dieses GUI-Builders.
Es gibt jede Menge zu entdecken! Viel Spaß ; )
Links
Hier ein paar Links, die ich beim Schreiben dieser Anleitung hilfreich fand.
- CrowPanel 2.8″-ESP32 Display
- CrowPanel ESP32 Display Wiki
- CrowPanel ESP32 Display User_Manual
- CrowPanel 2.8″-ESP32 Display Schematics
- CrowPanel ESP32 Display Video Tutorials
- ILI9488 Display Driver Datasheet
- LVGL Documentation
- SquareLine Studio & LVGL Tutorial| Explore UI design
- ESP32-LVGL-DESK-CLOCK
- How to setup the lvgl library for Esp32-s3-WROOM-1
- TFT 3.5″ Touch Screen & ESP32 built in – Elecrow review
- Getting Started Tips 3.5″ Elecrow TFT ESP32
- Review of Elecrow’s 3.5-inch and 7.0-inch ESP32 display modules using Arduino programming
- Getting Started with ESP32 Cheap Yellow Display Board
Schaltpläne
Die folgenden Schaltpläne des Boards habe ich aus dem Link CrowPanel 2.8″-ESP32 Display Schematics extrahiert. Es scheint, dass manche Codebeispiele falsche oder veraltete Pins verwenden – in dem Fall helfen die Schaltpläne, Klarheit zu schaffen.
