Es gibt eine Vielzahl von Displays, die sich hervorragend zur visuellen Darstellung von Daten eignen. Typische Beispiele, die häufig in Verbindung mit dem ESP8266 verwendet werden, sind OLED-Displays, LCD-Module wie das HD44780, und insbesondere TFT-Displays. Letzte Displays bieten eine farbenfrohe und detaillierte Möglichkeit, Informationen darzustellen, sei es für Sensorwerte, Benutzeroberflächen oder sogar einfache Spiele. Wie wäre es mit deinem eigenen Snake?
Produktempfehlungen und -suche in Verbindung mit dem Amazon Partnerprogramm:
¹ Angaben ohne Gewähr. Bei einem Kauf über den Link erhalten wir eine Provision.
Die Einrichtung eines solchen Displays, vor allem eines TFT-Displays, erfordert anfangs etwas Arbeit. Die Verdrahtung und die Konfiguration des SPI-Interfaces können eine Herausforderung darstellen, aber sobald das Display einmal eingerichtet ist, ist die Handhabung ziemlich einfach. In diesem Beitrag werden wir die notwendigen Schritte durchführen, um ein SPI-TFT-Display mit einem ESP8266 D1 Mini zu verbinden und in Betrieb zu nehmen.
Zum Kapitel springen Verdrahtung des TFT SPI-Displays
Bei den Displays gibt es eine nicht allzu geringe Anzahl von Modellen, die sich nicht nur in der Größe sondern auch in der Reihenfolge ihrer Pinbelegung unterscheiden können. Dennoch nutzen die meisten dieser Displays das SPI-Interface zur Kommunikation. Das bedeutet: Auch wenn die Pins auf den Displays unterschiedlich benannt oder angeordnet sind, bleibt die grundlegende Verdrahtung meist die selbe. Sobald du verstanden hast, wie ein SPI-Display an einen Mikrocontroller angeschlossen wird, kannst du dieses Wissen leicht auf andere Displays und Microcontroller mit SPI-Interface übertragen.
Das SPI-Interface nutzt eine Handvoll grundlegender Pins, die für die Kommunikation zwischen dem Mikrocontroller und dem Display entscheidend sind. Mehr dazu findest du im Beitrag Einführung in das Serial Peripheral Interface. Zusätzlich gibt es dann noch display-spezifische Pins, die nur für den Betrieb des Displays notwendig sind und nichts mit dem SPI zu tun haben.
Zum Kapitel springen SPI-spezifische Pins
| Pin | Funktion | Beschreibung |
|---|---|---|
| CLK / SCLK | Serial Clock | Synchronisiert die Datenübertragung zwischen Mikrocontroller und Display. |
| SDA / MOSI | Serial Data / Master Out Slave In | Überträgt die Daten vom Mikrocontroller zum Display. |
| CS / SS | Chip / Slave Select | Aktiviert das Display zur Kommunikation und sorgt dafür, dass es angesprochen wird. |
Der Pin MISO - Master In Slave Out - fehlt auf vielen Displays. Da das Display in der Regel nur als Empfänger fungiert, werden MOSI, SCLK und CS für die Kommunikation verwendet. MISO wird in diesem Fall nicht benötigt und ist daher nicht vorhanden.
Zum Kapitel springen Display-spezifische Pins
| Pin | Funktion | Beschreibung |
|---|---|---|
| VCC | Stromversorgung | Versorgt das Display mit Strom (in der Regel 3.3V). |
| GND | Masse / Ground | Stellt die Verbindung zur Masse her. |
| RS | Register Select / Data Command | Wählt zwischen dem Senden von Daten und Befehlen an das Display. Nur für bestimmte Displays relevant und muss nicht immer vorhanden sein. |
| RST | Reset | Setzt das Display zurück, um es zu initialisieren oder neu zu starten. |
Zum Kapitel springen Beispielhafte Verdrahtung
In diesem Beispiel verwende ich ein Display, das neben den relevanten SPI-Pins auch einen SD-Karten-Slot auf der rechten Seite hat. Dieser SD-Karten-Slot nutzt ebenfalls das SPI-Interface, ist in diesem Fall aber nicht relevant für die Display-Kommunikation. Daher konzentrieren wir uns auf die Pins auf der linken Seite des Displays – die mit der gelben Stiftleiste. Diese sind für die Steuerung des Displays entscheidend.
| Display Pin | Funktion | Beschreibung | ESP8266 D1 Mini Pin |
|---|---|---|---|
| VCC | Stromversorgung | Versorgt das Display mit 3.3V. | 3V3 |
| GND | Masse | Verbindet das Display mit dem Ground des Mikrocontrollers. | GND |
| CLK | Serial Clock (SCLK) | Synchronisiert die Datenübertragung zwischen Mikrocontroller und Display. | D5 (GPIO 14) |
| SDA | Serial Data (MOSI) | Überträgt die Daten vom Mikrocontroller zum Display. | D7 (GPIO 13) |
| RS | Register Select (Data/Command) | Wählt zwischen Daten- und Befehlsmodus. | D4 (GPIO 2) |
| RST | Reset | Setzt das Display zurück. | D3 (GPIO 0) |
| CS | Chip Select | Aktiviert das Display zur Kommunikation und sorgt dafür, dass es angesprochen wird. | D8 (GPIO 15) |
Einige Pins auf dem Display werden wie bei mir möglicherweise nicht benötigt und müssen daher nicht verdrahtet werden. In meinem Beispiel wären das folgende Pins:
- NC (Not Connected): Diese Pins sind nicht angeschlossen und müssen daher nicht verbunden werden.
- Weitere GND-Pins: Viele Displays haben mehrere GND-Pins. Es reicht in der Regel, einen dieser Pins mit der Masse des Mikrocontrollers zu verbinden.
- Weitere VCC-Pins: Auch hier reicht es in der Regel, einen VCC-Pin für die Stromversorgung zu nutzen.
Zum Kapitel springen Verwendung mit anderen Mikrocontrollern
Da das Display SPI zur Kommunikation nutzt, kannst du es auch auf anderen Mikrocontrollern verwenden, die SPI unterstützen. Die Verdrahtung ist dann zwar nicht 1:1 identisch, aber das Prinzip bleibt gleich: Die relevanten SPI-Pins wie SCLK, MOSI und CS müssen entsprechend verbunden werden. SPI ist ein standardisiertes Interface, sodass du mit diesen Grundlagen das Display flexibel auch auf anderen Plattformen einsetzen kannst.
Zum Kapitel springen Installation der TFT_eSPI Bibliothek
Um das TFT-Display mit dem ESP8266 zu steuern, verwenden wir die TFT_eSPI Bibliothek. Die Bibliothek ist besonders vielseitig, da sie viele verschiedene Chipsätze und somit eine Vielzahl von TFT-Displays unterstützt. Egal, ob es ein Display mit einem ILI9341, ST7735 oder einem anderen Chipsatz ist, die Bibliothek unterstützt alle gängigen Displays. Zudem bietet sie Funktionen um Grafiken, Text oder andere Inhalte im Handumdrehen auf dem Display anzuzeigen. Die Installation der Bibliothek kann direkt innerhalb der Arduino IDE vorgenommen werden:
Arduino IDE
└───Werkzeuge
└───Bibliotheken verwalten ...
Mit einer Suche nach TFT_eSPI kann die passende Bibliothek in den Suchergebnissen gefunden werden. Installiert wird die Bibliothek von Bodmer.
Zum Kapitel springen Beispielcode
Ohne weitere Anpassungen kann nach der Verdrahtung direkt der folgende Programmcode direkt auf den ESP8266 hochgeladen werden:
#include <TFT_eSPI.h>
#include <SPI.h>
// Das Objekt "tft" erstellen
TFT_eSPI tft = TFT_eSPI();
void setup() {
tft.init();
// Ausrichtung des Displays anpassen; Diese kann abweichen; Mögl.: 0, 1, 2 und 3
tft.setRotation(1);
// Screen leeren indem man ihn mit schwarzer Farbe füllt
tft.fillScreen(TFT_BLACK);
// "Hello World!" in Weiß anzeigen
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.setTextSize(2);
tft.setCursor(10, 10);
tft.println("Hello World!");
// "Red" in Rot anzeigen
tft.setTextColor(TFT_RED, TFT_BLACK);
tft.setCursor(10, 40);
tft.println("Red");
// "Green" in Grün anzeigen
tft.setTextColor(TFT_GREEN, TFT_BLACK);
tft.setCursor(10, 70);
tft.println("Green");
// "Blue" in Blau anzeigen
tft.setTextColor(TFT_BLUE, TFT_BLACK);
tft.setCursor(10, 100);
tft.println("Blue");
}
void loop() {
// Nichts im Loop
}
Allerdings ist die Wahrscheinlichkeit relativ hoch, dass die Anzeige nicht wie erwartet funktioniert. Oft treten Probleme wie eine spiegelverkehrte Darstellung oder Pixelfehler auf. In solchen Fällen liegt das Problem meist in der Konfiguration der Bibliothek.
Zum Kapitel springen Anpassungen
Da die TFT_eSPI Bibliothek eine Vielzahl von Displays unterstützt, müssen in vielen Fällen noch einige Anpassungen in der User_Setup.h Datei der Bibliothek vorgenommen werden müssen. Die User_Setup Datei befindet sich im Installationsordner der Arduino IDE im libraries Verzeichnis. Abhängig vom Betriebssystem findet man diesen Ordner an folgenden Pfaden:
- Windows:
C:\Users\Benutzername\Documents\Arduino\libraries\TFT_eSPI\User_Setup.h - macOS:
~/Documents/Arduino/libraries/TFT_eSPI/User_Setup.h - Linux:
~/Arduino/libraries/TFT_eSPI/User_Setup.h
Die Datei kann mit einem Editor wie VSCode oder Notepad++ geöffnet und bearbeitet werden. Hier ist ein kurzer Überblick über die Kerndaten, die man für die Anpassungen benötigt:
-
Treiber / Chipsatz:
Welcher Treiber wird für das Display benötigt? (z.B. ILI9341, ST7735, ST7789). Diese Angabe findet man meist in der Artikelbeschreibung oder im Datenblatt.Produktempfehlungen und -suche in Verbindung mit dem Amazon Partnerprogramm:
¹ Angaben ohne Gewähr. Bei einem Kauf über den Link erhalten wir eine Provision.
-
Displayauflösung:
Die Breite und Höhe des Displays in Pixeln (z.B. 240x320). Diese Angabe findet man ebenfalls meist in der Artikelbeschreibung oder im Datenblatt. -
Tab-Einstellung:
Gibt an, welche spezifische Initialisierungseinstellung für das Display verwendet wird, um eine korrekte Darstellung und Ausrichtung zu gewährleisten (z.B. ST7735_GREENTAB). Diese Einstellung findet man im Datenblatt oder durch Ausprobieren. -
Farbreihenfolge:
Stellt sicher, dass die Farben korrekt dargestellt werden (z.B. RGB). Diese Einstellung findet man ebenfalls im Datenblatt oder durch Ausprobieren.
Zum Kapitel springen Treiber / Chipsatz
Jede Displayvariante nutzt einen spezifischen Treiber bzw. Chipsatz. Der Treiber wird in der User_Setup.h Datei definiert. Typische Chipsätze sind z.B. ILI9341, ST7735 oder ST7789. Suche in der User_Setup.h Datei also nach einer Zeile wie #define ILI9341_DRIVER und stelle sicher, dass der richtige Treiber für dein Display ausgewählt ist. Mein Display verwendet den Treiber ST7735.
// Only define one driver, the other ones must be commented out
//#define ILI9341_DRIVER // Generic driver for common displays
//#define ILI9341_2_DRIVER // Alternative ILI9341 driver, see https://github.com/Bodmer/TFT_eSPI/issues/1172
#define ST7735_DRIVER // Define additional parameters below for this display
//#define ILI9163_DRIVER // Define additional parameters below for this display
//#define S6D02A1_DRIVER
//#define RPI_ILI9486_DRIVER // 20MHz maximum SPI
//#define HX8357D_DRIVER
//#define ILI9481_DRIVER
//#define ILI9486_DRIVER
//#define ILI9488_DRIVER // WARNING: Do not connect ILI9488 display SDO to MISO if other devices share the SPI bus (TFT SDO does NOT tristate when CS is high)
//#define ST7789_DRIVER // Full configuration option, define additional parameters below for this display
//#define ST7789_2_DRIVER // Minimal configuration option, define additional parameters below for this display
//#define R61581_DRIVER
//#define RM68140_DRIVER
//#define ST7796_DRIVER
//#define SSD1351_DRIVER
//#define SSD1963_480_DRIVER
//#define SSD1963_800_DRIVER
//#define SSD1963_800ALT_DRIVER
//#define ILI9225_DRIVER
//#define GC9A01_DRIVER
Zum Kapitel springen Displayauflösung
Die Auflösung des Displays muss korrekt eingestellt sein. Diese wird durch die Breite TFT_WIDTH und Höhe TFT_HEIGHT des Displays definiert. Mein Display hat eine Auflösung von 128px x 160px.
// #define TFT_WIDTH 80
#define TFT_WIDTH 128
// #define TFT_WIDTH 172 // ST7789 172 x 320
// #define TFT_WIDTH 170 // ST7789 170 x 320
// #define TFT_WIDTH 240 // ST7789 240 x 240 and 240 x 320
#define TFT_HEIGHT 160
// #define TFT_HEIGHT 128
// #define TFT_HEIGHT 240 // ST7789 240 x 240
// #define TFT_HEIGHT 320 // ST7789 240 x 320
// #define TFT_HEIGHT 240 // GC9A01 240 x 240
Zum Kapitel springen Tab-Einstellung
Einige Displays, insbesondere solche mit dem ST7735 Chipsatz, haben sogenannte Tabs. Diese beziehen sich auf die Initialisierung und Ausrichtung des Displays. Die Tabs werden manchmal durch die Farbe der Schutzfolie auf dem Display angezeigt, sind jedoch nicht immer zuverlässig. In der User_Setup.h Datei findet man mehrere Tab-Optionen wie #define ST7735_GREENTAB oder #define ST7735_REDTAB. Probiere die verschiedenen Optionen aus, um die richtige Darstellung zu erhalten. Für mein Display war ST7735_REDTAB die Richtige.
// #define ST7735_INITB
// #define ST7735_GREENTAB
// #define ST7735_GREENTAB2
// #define ST7735_GREENTAB3
// #define ST7735_GREENTAB128 // For 128 x 128 display
// #define ST7735_GREENTAB160x80 // For 160 x 80 display (BGR, inverted, 26 offset)
// #define ST7735_ROBOTLCD // For some RobotLCD Arduino shields (128x160, BGR, https://docs.arduino.cc/retired/getting-started-guides/TFT)
#define ST7735_REDTAB
// #define ST7735_BLACKTAB
// #define ST7735_REDTAB160x80 // For 160 x 80 display with 24 pixel offset
Zum Kapitel springen Farbreihenfolge
Manche Displays zeigen trotz vermeintlich richtiger Tab-Einstellungen Farben weiterhin falsch an (z.B. Blau statt Rot). In solchen Fällen kann noch die Farbreihenfolge hinzugezogen werden. In der User_Setup.h Datei kann die Zeile #define TFT_RGB_ORDER TFT_BGR aktiviert werden um die Standardeinstellung zu überschreiben. Der Standardwert ist TFT_RGB. In meinem Fall hat die Tab-Einstellung alles abgedeckt und die Farbreihenfolge bleibt unberührt.
// #define TFT_RGB_ORDER TFT_RGB // Colour order Red-Green-Blue
// #define TFT_RGB_ORDER TFT_BGR // Colour order Blue-Green-Red
Durch diese Anpassungen in der User_Setup.h Datei kann man sicherstellen, dass das Display korrekt funktioniert und die gewünschte Darstellung liefert.
