Über ein kleines Display behalten Sie Messdaten und andere Werte des ESP8266 jederzeit im Blick. Eine passende Bibliothek erleichtert das Verdrahten.
Der letzte Teil dieser Reihe hat beleuchtet, wie die SPI-Schnittstelle des ESP8266 arbeitet. Dieses Interface kommt oft bei Displays zum Einsatz, da sich darüber große Datenmengen mit wenig Aufwand übertragen lassen. Für den im Folgenden vorgestellten Aufbau kommt ein TFT-Farbdisplay mit einer Diagonalen von 2,2 Zoll zum Einsatz.
Es weist eine Auflösung von 320 x 240 Bildpunkten bei 262 000 Farben auf. Das erscheint auf den ersten Blick mager – aber auch die ersten Farbgrafikkarten für den PC brachten es auf keine höhere Auflösung und konnten lediglich 16 Farben darstellen. Vor weniger als 30 Jahren brauchte es noch einen High-End-PC, um eine solche Auflösung auf den Schirm zu zaubern.
Das verwendete Display, ein ILI9341, bringt es auf 262 000 Farben. Das Datenblatt [1] dazu – eigentlich eher ein Buch – bringt es auf 240 Seiten Umfang. Es enthält zahlreiche technische Details, von denen Sie für diesen Workshop lediglich die Information zur Betriebsspannung benötigen: Sie liegt zwischen 1,65 und 3,3 Volt.
Testaufbau
Der Schaltplan in Abbildung 1 zeigt, wie Sie das Display an den ESP8266 anschließen. Gegenüber den Schaltplänen aus den letzten Teilen kommt hier der Kondensator C3 hinzu: Er stabilisiert die Versorgungsspannung des ESP8266. Das ist nötig, weil Display und ESP8266 in diesem Projekt für kurze Momente ziemlich viel Strom ziehen. Montieren Sie den Kondensator möglichst dicht an den Spannungsanschlüssen des Mikrocontrollers.
Abbildung 1: Schaltplan zu unserem Testaufbau.
Sollten Sie sonderbare Abstürze bemerken, liegt das unter Umständen daran, dass die Spannungsquelle die Stromspitzen nicht liefern kann. Greifen Sie in diesem Fall zu einer stärkeren Spannungsversorgung. Alternativ können Sie versuchen, die Kapazität von C3 zu erhöhen. Abbildung 2 zeigt den komplett verdrahteten Aufbau des Versuchs.
Abbildung 2: Mit einem Breadboard stecken Sie den Aufbau des Versuchs zusammen, um die korrekte Verdrahtung auszuprobieren.
Bibliotheken
Um auf das TFT-Modul zuzugreifen, benötigen Sie zwei Bibliotheken: die Adafruit_GFX und die Adafruit_ILI9341. Jetzt kommt der unschöne Teil: Sie benötigen eine gepatchte Version der Bibliothek ILI9341, die Sie nicht über die Bibliotheken-Verwaltung der Arduino-IDE einbinden können. Die aktuell dort zu findende Version bringt den Patch für den ESP8266 noch nicht mit.
Die gepatchte Version (Abbildung 3) steht online als ZIP-Archiv bereit [2]. Sie binden Sie unter Sketch | Bibliothek einbinden | .zip Bibliothek hinzufügen ein (Abbildung 4). Die GFX-Bibliothek integrieren Sie wie gewohnt unter Sketch | Bibliothek einbinden | Bibliothek Verwalten (Abbildung 5).
Abbildung 3: Als Erstes laden Sie die gepatchte Bibliothek ILI9341 herunter.
Abbildung 4: Die heruntergeladene Bibliothek binden Sie anschließend in die IDE ein.
Abbildung 5: Die GFX-Bibliothek binden Sie direkt über das Interface der IDE ein.
Die Bibliothek Adafruit_GFX [5] bringt eine ganze Reihe von praktischen Funktionen mit; die Tabelle “Flexibles Werkzeug: Adafruit_GFX” beschreibt die wichtigsten davon. Dabei entsprechen x und y den Koordinaten im kartesischen Koordinatensystem. Der Wert für color gibt die Farbe an, die Sie dem gezeichneten Objekt geben möchten. Bei runden Objekten enthält r deren Radius.
Flexibles Werkzeug: Adafruit_GFX
|
Funktion |
Zweck |
|---|---|
|
|
ein Pixel zeichnen |
|
|
eine Linie zeichnen |
|
|
eine vertikale Linie zeichnen |
|
|
eine horizontale Linie zeichnen |
|
|
ein Rechteck zeichnen |
|
|
ein gefülltes Rechteck zeichnen |
|
|
einen Kreis zeichnen |
|
|
einen gefüllten Kreis zeichnen |
|
|
ein Rechteck mit abgerundeten Ecken zeichnen |
|
|
ein gefülltes Rechteck mit abgerundeten Ecken zeichnen |
|
|
ein Dreieck zeichnen |
|
|
ein gefülltes Dreieck zeichnen |
|
|
ein Zeichen auf das Display schreiben |
|
|
den Cursor an einer bestimmten Stelle positionieren |
|
|
Farbe des Texts ändern |
|
|
Textfarbe ändern mit Hintergrundfarbe ändern |
|
|
Größe des Texts andern |
|
|
Text automatisch umbrechen |
|
|
ein Bitmap anzeigen |
|
|
kompletten Schirm mit einer Farbe füllen |
|
|
Bildschirm drehen ( |
|
|
gibt die Höhe des Bildschirms zurück |
|
|
gibt die Breite des Bildschirms zurück |
Erster Test
Zusammen mit den zwei Bibliotheken erhalten Sie auch einige Beispielprogramme. Sie finden das erste Versuchsobjekt unter Datei | Beispiele | Adafruit ILI9341 | graficstest. Damit das Testprogramm in der Umgebung läuft, ändern Sie noch folgende zwei Zeilen im Quellcode, weil der ESP8266 gar keine GPIOs mit den entsprechenden Nummern hat:
#define TFT_DC 9 #define TFT_CS 10
Stattdessen tragen Sie die folgenden Werte ein, damit das Programm fehlerfrei auf dem Testaufbau läuft:
#define TFT_DC 2 #define TFT_CS 5
Nach dem Hochladen öffnen Sie die zwei Jumper und drücken den Reset-Taster, damit das Testprogramm sauber startet. Ein Youtube-Video zeigt das laufende Testprogramm [4].
