TFT Farbdisplays Teil 1, Grafik und einfacher Text - AZ-Delivery

2 commenti

Im Angebot von AZ-Delivery sind die folgenden TFT-Farbdisplays mit SPI Interface.

1,77 Zoll SPI TFT-Display mit 128x160 Pixeln

Dieses Display nutzt den Treiberbaustein ST7735. Dieser hat einen Bildspeicher mit 132 x 162 x 18 Bits. Mit der GFX-Bibliothek werden für dieses Display davon nur 128 x 160 x 16 Bits genutzt.
Link zum Produkt
Pins auf der Display Seite von links nach rechts:
GND VCC SCK SDA RES RS CS LED
Die Betriebsspannung an VCC und an den Eingängen darf maximal 3.3 V betragen. Bei einem 5V Mikrocontroller sind Pegelwandler erforderlich.
Die Spannung für die Hintergrundbeleuchtung am Pin LED muss 3.3V betragen.

1,8 Zoll SPI TFT-Display mit 128x160 Pixeln

Dieses Display nutzt auch den Treiberbaustein ST7735. Dieser hat einen Bildspeicher mit 132 x 162 x 18 Bits. Mit der GFX-Bibliothek werden für dieses Display davon nur 128 x 160 x 16 Bits genutzt.
Link zum Produkt
Pins auf der Display Seite von links nach rechts:
VCC GND CS RES RS SDA SCK LED
Die Betriebsspannung an VCC und an den Eingängen darf maximal 5 V betragen funktioniert aber auch mit 3.3 V.
Die Spannung für die Hintergrundbeleuchtung am Pin LED muss 3.3V betragen.

1,69 Zoll SPI TFT-Display mit 240x280 Pixeln

Dieses Display nutzt den Treiberbaustein ST7789V2. Dieser hat einen Bildspeicher mit 240 x 280 x 18 Bits. Mit der GFX-Bibliothek werden für dieses Display davon nur 240 x 280 x 16 Bits genutzt.
Link zum Produkt
Pins auf der Display Seite von links nach rechts:
LED CS RS RES SDA SCL VCC GND
Die Betriebsspannung an VCC und an den Eingängen sollte 3.3V betragen.
Die Hintergrundbeleuchtung ist standardmäßig eingeschaltet und kann mit LOW am Pin LED ausgeschaltet werden.

1,28 Zoll rundes SPI TFT-Display mit 240x240 Pixeln

Dieses Display nutzt den Treiberbaustein GC9A01A. Dieser hat einen Bildspeicher mit 320 x 240 x 18 Bits. Mit der GFX-Bibliothek werden für dieses Display davon nur 240 x 240 x 16 Bits genutzt.
Link zum Produkt
Pins auf der Display Seite von links nach rechts:
RES CS RS SDA SCK GND VCC
Die Betriebsspannung an VCC und an den Eingängen sollte 3.3V betragen.
Hintergrundbeleuchtung ist immer eingeschaltet.

2.4 Zoll SPI TFT-Display mit 240x320 Pixeln

Dieses Display nutzt den Treiberbaustein ILI9341. Dieser hat einen Bildspeicher mit 240 x 320 x 18 Bits. Mit der GFX-Bibliothek werden für dieses Display davon nur 240 x 320 x 16 Bits genutzt.
Link zum Produkt
Pins auf der Display Seite von links nach rechts:
VCC GND CS RES RS SDA SCK LED (Rest für Touchscreen)
Die Betriebsspannung an VCC und an den Eingängen kann von 3.3V bis 5V betragen.
Die Spannung für die Hintergrundbeleuchtung am Pin LED muss 3.3V betragen.
Das Display hat zusätzlich einen Touchscreen.

2.8 Zoll SPI TFT-Display mit 240x320 Pixeln

Alle Displays funktionieren mit 3.3 V. Bei 5V sind teilweise Pegelwandler erforderlich.
Alle Displays können mit der Grafik-Bibliothek „GFX Library for Arduino“ angesteuert werden.

Da man für grafische Anwendungen und Bilder meist viel Speicherplatz benötigt, werde ich für die weiteren Betrachtungen Mikrocontroller der Typen ESP8266 und ESP32 heranziehen. Natürlich können diese Displays auch mit anderen Mikrocontrollern oder Raspberry Pi verwendet werden.

Hier noch einmal die verwendeten Pins und die Verbindung zum Mikrocontroller:

Pin	Funktion	and. Bez.	ESP8266	ESP32
SDA	Daten vom MC zum Display	MOSI, SDI	GPIO13 / D7	GPIO23
SCL	Takt für den SPI-Bus	SCK	GPIO14 / D5	GPIO18
RS	Unterscheidung Kommando oder Daten	A0, DC,	GPIO15 / D8	GPIO05
CS	Chipselect		GPIO16 / D0	GPIO04
RES	Reset Eingang, muss nicht verwendet werden	RESET, RST	GPIO00 / D3	GPIO00

Bibliothek und Initialisierung

Statt der sonst sehr beliebten Adafruit GFX Bibliothek wird in diesem Beitrag Die „GFX Library for Arduino“ von „Moon on our Nation“ beschrieben. Sie bietet zusätzliche Grafikfunktionen für Ellipse und Kreissegment. Sie unterstützt neben den Adafruit-GFX Schriften auch die u8g2 Schriften.
Die Bibliothek unterstützt alle hier beschriebenen Displays und noch viele mehr.

Programmrumpf enthält Pinbelegung und Initialisierung:

#include "SPI.h"
#include <Arduino_GFX_Library.h>
// Pins for SPI bus
#define TFT_CLK 18 //SPI Clock
#define TFT_DA 23   //SPI Data (MOSI)
#define TFT_DC 5   //Data/Command
#define TFT_CS 4    //Chip select
#define TFT_RST 0   //Reset
Arduino_DataBus *bus = new Arduino_ESP32SPI(TFT_DC, TFT_CS,
TFT_CLK, TFT_DA);
****** Diese Zeile ist für jedes Display individuell ******
void setup() {
tft->begin();
}
void loop() {
}

Die fehlende Zeile erzeugt den Zeiger auf ein vom Display abhängiges GFX-Objekt. Der Konstruktor hat für jedes Display dieselben Parameter aber natürlich mit unterschiedlichen Werten.

Arduino_XXXX(Bus, ResetPin, Rotation, IPSmode, Breite, Höhe, x1Ofs, y1Ofs, x2Ofs,y2Ofs, RGB)

Bus	Zeiger auf das in der Zeile davor erzeugte Objekt, das den Datenaustausch definiert.
ResetPin	Pin-Nummer für den Reset Pin oder -1 wenn der Reset Pin nicht verwendet wird.
Rotation	Definiert die Ausrichtung des Bildschirms. Die Werte 0, 1, 2 und 3 sind möglich.
IPS-Mode	Definiert, ob ein Display IPS (In Panel Switching) nutzt oder nicht. Werte true oder false.
Breite	Die Breite des Displays in Pixel.
Höhe	Die Höhe des Displays in Pixel.
x1Ofs	Korrekturwert, um Unterschiede zwischen Displays auszugleichen.
Y1Ofs	Korrekturwert, um Unterschiede zwischen Displays auszugleichen.
X2Ofs	Korrekturwert, um Unterschiede zwischen Displays auszugleichen.
Y2Ofs	Korrekturwert, um Unterschiede zwischen Displays auszugleichen.
RGB	Farbanordnung. Wenn der Wert false ist, ist die Anordnung BGR.

Die fehlende Zeile für die verschiedenen Displays:
ST7735:
Arduino_GFX *tft = new Arduino_ST7735(bus, TFT_RST, 0, false ,128,160,2,1,2,1,false);

ST7789:
Arduino_GFX *tft = new Arduino_ST7789(bus, TFT_RST, 2, true,240,280,0,20,0,20);

GC9A01A:
Arduino_GFX *tft = new Arduino_GC9A01(bus, TFT_RST, 0, true);

ILI9341:
Arduino_GFX *tft = new Arduino_ILI9341(bus, TFT_RST, 0, false);

Wenn bei manchen Displays nicht alle Parameter angegeben wurden, heißt das, dass die Default-Parameter verwendet werden können.

Funktionen der GFX-Bibliothek:

Die GFX-Bibliothek enthält Kommandos zum Ausgeben von Grafik und Text auf ein Display.

Koordinatensystem:

Der Nullpunkt ist links oben.

Farben:

Farben werden in Computersystemen üblicherweise mit 24 Bits dargestellt. Dabei sind 8 Bits für rot, 8 Bits für grün und 8 Bits für blau. Insgesamt ergibt das 16 Millionen verschiedene Farben. Da die Controller für die TFT-Displays einen Bildspeicher integrieren müssen, wollte man Speicherplatz einsparen und verwendet daher 18 Bits, also jeweils 6 Bits für rot grün und blau. Das ergibt insgesamt 260000 Farben. Für die Ansteuerung aus byteorientierten Systemen sind 18 Bits aber unpraktisch. Man hat daher ein weiteres Format definiert, das mit 16 Bits auskommt. Es hat jeweils 5 Bits für rot und blau, sowie 6 Bits für grün. Die Anzahl der Farben wird dadurch auf 65000 reduziert. Die GFX-Bibliothek arbeitet mit diesem Format.

Um die Verwendung zu vereinfachen, werden in den Bibliotheken zu den verschiedenen Treibern jeweils einige Farben mit Namen definiert. Flexibler ist es aber, selbst ein solches Headerfile mit Farbdefinitionen zu erstellen, welches man dann einfach inkludieren kann.

Um die Definition der Farben einfach visuell vornehmen zu können, habe ich eine Windows-Anwendung erstellt, die neben anderen Funktionen zur Anpassung von Bildern und Schriften auch Farbpaletten erstellen und als Headerfile abspeichern kann. Die Anwendung heißt GFX-Tool und kann von GIT-Hub heruntergeladen werden. Dort findet sich auch eine detaillierte Anleitung.

Ausrichtung und Löschen:

Mit der Funktion

void setRotation(uint8_t rotation);

kann die Ausrichtung geändert werden. Der Parameter rotation kann die Werte 0, 1, 2 oder 3 annehmen.
Da sich Breite und Höhe abhängig von der Ausrichtung ändern, sollte man, nachdem die Ausrichtung geändert wurde, Breite und Höhe mit den Funktionen
uint16_t width(); und uint16_t height();
ermitteln.

Mit der Funktion

void fillScreen(uint16_t color);

wird der gesamte Bildschirm mit der angegebenen Farbe gefüllt.

Grafik:

Die einfachste Grafikfunktion ist

Void drawPixel(int16_t x, int16_t y, uint16_t color);

Der Bildpunkt an der angegebenen Position, wird in der angegebenen Farbe dargestellt.

Mit der Funktion

void drawLine(int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

wird eine Linie von Position x1, y1 nach x2, y2 in der angegeben Farbe gezeichnet.

Will man nur horizontale oder vertikale Linien zeichnen, sollte man die folgenden Funktionen verwenden.

void drawFastHLine(int16_t x1, int16_t y1, int16_t length, int16_t color);

void drawFastVLine(int16_t x1, int16_t y1, int16_t length, int16_t color);

Hier werden als Parameter der Startpunkt und die Länge in Pixel angegeben.

Mit der Funktion

void drawRect(int16_t x, int16_t y, int16_t width, int16_t height, uint16_t color);

wird an der Position x, y ein Rechteck ausgegeben und mit der Funktion

void fillRect(int16_t x, int16_t y, int16_t width, int16_t height, uint16_t color);

wird das Rechteck mit der angegebenen Farbe gefüllt.

Mit der Funktion

void drawCircle(int16_t x, int16_t y, int16_t radius, uint16_t color);

wird mit Mittelpunkt x, y ein Kreis ausgegeben und mit der Funktion

void fillCircle(int16_t x, int16_t y, int16_t radius, uint16_t color);

wird der Kreis mit der angegebenen Farbe gefüllt.

Mit der Funktion

void drawRoundRect(int16_t x, int16_t y, int16_t width, int16_t height, int16_t radius, uint16_t color);

wird an der Position x, y ein Rechteck mit abgerundeten Ecken ausgegeben und mit der Funktion

void fillRoundRect(int16_t x, int16_t y, int16_t width, int16_t height, int16_t radius, uint16_t color);

wird das Rechteck mit der angegebenen Farbe gefüllt.

Mit der Funktion

void drawTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, uint16_t color);

wird an der Position x, y ein Dreieck ausgegeben und mit der Funktion

void fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3, uint16_t color);

wird das Dreieck mit der angegebenen Farbe gefüllt.

Mit der Funktion

void drawEllipse(int16_t x, int16_t y, int16_t r1, int16_t r2, uint16_t color);

wird mit Mittelpunkt x, y eine Ellipse mit dem x-Radius r1 und dem y-Radius r2 ausgegeben. Mit der Funktion

void fillEllipse(int16_t x, int16_t y, int16_t r1, int16_t r2, uint16_t color);

wird die Ellipse mit der angegebenen Farbe gefüllt.

Mit der Funktion

void drawArc(int16_t x, int16_t y, int16_t r1, int16_t r2, float a1, float a2, uint16_t color);

wird mit Mittelpunkt x, y ein Kreissegment mit dem äußeren Radius r1 und dem inneren Radius r2 ausgegeben. Das Segment beginnt mit dem Winkel a1 und endet mit dem Winkel a2. Der Winkel läuft im Uhrzeigersinn. 0 Grad entspricht der positiven x-Ache. Mit der Funktion

void fillArc(int16_t x, int16_t y, int16_t r1, int16_t r2, float a1, float a2, uint16_t color);

wird das Kreissegment mit der angegebenen Farbe gefüllt.

Zur Textausgabe steht ein interner Zeichensatz mit 5 x 7 Pixel in einem Feld von 6 x 8 Pixel zur Verfügung. Die Zuordnung Zeichen zu Code erfolgt nach Codepage 437. Das heißt für Sonderzeichen außerhalb des ASCII-Codes muss eine Umrechnung erfolgen.

Zur Textausgabe sind mehrere Funktionen vorhanden. Mit der Funktion

void setCursor(int16_t x, int16_t y);

wird die Anfangsposition gesetzt. Die Funktionen

void setTextColor(uint16_t c);

und

void setTextColor(uint16_t c, uint16_t bg);

setzen die Textfarbe und in der zweiten Variante eine Farbe für den Hintergrund. Die Funktion

void setTextSize(uint8_t s);

setzt die Textgröße. Es handelt sich dabei um einen Multiplikator. Default ist Text Size = 1 gesetzt. Setzt man Text Size auf 2, bestehen alle Zeichen aus 10 x 14 Pixel statt 5 x 7. Mit der Funktion

void setTextWrap(bool w);

kann man festlegen, ob beim Erreichen des rechten Bildschirmrandes eine neue Zeile begonnen werden soll.
Die Textausgabe selbst erfolgt mit den bekannten Funktionen print() oder println().

Testprogramm:

Die folgende Funktion nutzt zur Demonstration alle Grafikfunktionen. Sie ist so ausgelegt, dass auf jedem Display das gesamte Bild zu sehen ist.

void showTest() {
tft->fillScreen(WHITE);
tft->fillRoundRect(5,5,110,110,10,CYAN);
tft->drawRoundRect(5,5,110,110,10,PURPLE);
tft->fillRect(10,17,30,30,YELLOW);
tft->drawRect(10,17,30,30,BLACK);
tft->fillTriangle(45,47,60,17,75,47,RED);
tft->drawTriangle(45,47,60,17,75,47,WHITE);
tft->fillCircle(95,32,15,GREEN);
tft->drawCircle(95,32,15,BLUE);
tft->drawLine(10,60,110,60,MAROON);
tft->fillEllipse(40,92,30,15,ORANGE);
tft->drawEllipse(40,92,30,15,NAVY);
tft->fillArc(90,92,15,5,180,360,MAGENTA);
tft->drawArc(90,92,15,5,180,360,YELLOW);
tft->setTextColor(BLACK);
tft->setTextWrap(true);
tft->setTextSize(1);
tft->setCursor(5, 120);
tft->print("AZ-Delivery");
}