Bauteile: 2.8" TFT Display
| Bastelseite Display + Antriebe Sensoren C++ | |
Übersicht von 2,8" TFT-Display von Elegoo
Ein Farb-Display mit 320 x 240 Pixel und einer Diagonale von 2,8 Zoll.
Die Sendung besteht aus dem Display, einer Mini-CD und einem Stift aus Kunststoff; damit ist das Display touch-fähig. Ferner ist ein Micro-SD-Kartenslot verbaut von dem BMP-Dateien geladen werden können.
Das Display ist für den Arduino Uno und Mega2560 konzipiert, es läßt sich direkt auf die Microcontroller aufstecken! Bitte erst die beigefügte deutsche Bedienungsanleitung (als PDF auf der Mini-CD) durchlesen!
Nach dem Überfliegen der Kurzanleitung, der Installation der 3 Bibliotheken, Aufsetzen des Displays auf den UNO, an USB anstecken - kann es dann endlich losgehen! Empfohlen wird für den ersten Start der Sketch graphicstest.ino - hier wird sehr viel vorgeführt!
Noch eine GUTE Anleitung (Englisch) von: Adafruit Adafruit Befehls-Liste
Festlegung der Koordinaten
Festlegung von X und Y
Das Koordinaten-System dient zur Festlegung der X- und Y-Achse. Beide beginnen grundsätzlich oben links - unabhängig von der Rotation = dazu später mehr!
Nicht zu vergessen ist, daß das Zahlensystem bei "0" beginnt!. Die X-Achse geht von links nach rechts und wird als erste Zahl genannt. Die Y-Achse geht von oben nach unten und wird als zweite Zahl angegeben.
Das Beispiel (14,5) bedeutet demnach auf der X-Achse 14 Pixel nach rechts und auf der Y-Achse 5 Pixel nach unten. Somit ist der Punkt im Koordinatensystem pixelgenau angegeben.
tft.fillScreen(color);
Bildschirm farblich hinterlegen
Damit wird der Bildschirm mit der angegebenen Farbe gefüllt. Dies kann ebenso zum Löschen des Displays dienen.
Die color-Vorgaben sind: BLACK, BLUE, RED, GREEN, CYAN, MAGENTA, YELLOW und WHITE.
Wem das nicht reicht, der kann zusätzlich noch ein paar Farben einbinden.
Einfach Kopieren und statt der anderen Farben im Kopf des Sketches einsetzen. Ich habe sie bereits alle in Großbuchstaben geändert, damit die Umstellung der neuen Farben leichter fällt.
(Im Original sind sie groß & klein geschrieben)Gefunden unter: https://stackoverflow.com/...
tft.setRotation(r);
Ausrichtung des Textes
Der Text läßt sich nach allen vier Seiten drehen. Ganz im Gegensatz zu anderen Displays (von 0 bis 3), wird hier der Wert(r) von 1 bis 4 angegeben.
Somit kann ein Querformat oder auch ein Hochformat eingestellt werden.
Zur besseren Orientierung dient der externe Stromanschluß, sowie der USB-Eingang.
tft.setRotation(1);
ergibt:
tft.setRotation(2);
ergibt:
tft.setRotation(3);
ergibt:
tft.setRotation(4);
ergibt:
Vom Nullpunkt (oben links!) aus 20 Pixel nach rechts ist x = 20. Ebenso ist von oben her 10 Pixel der Punkt von y = 10. Der Schnittpunkt beider Punkte ist dann unser (20,10). Um diesen Punkt wird zur Darstellung über drawCircle (dazu später mehr) ein kleiner Kreis gezeichnet. Auf x = 100 und y = 100 wird dann der Text "20,10" als Koordinaten-Angabe ausgegeben.
tft.setTextColor(c); und tft.setTextColor(c, bg);
Schriftfarbe festlegen
Es macht wenig Sinn den Hintergrund auf eine Farbe zu setzen und den Text nicht - oder in der gleichen Farbe .... Man sieht in beiden Fällen leider nichts!
Die Vorgaben sind wie bei vorher auch: BLACK, BLUE, RED, GREEN, CYAN, MAGENTA, YELLOW und WHITE.
Werden zwei Farben angegeben, so bezieht sich die erste (c = color) auf die Schrift. Die zweite Farbe (bg = background) ist dann der Hintergrund des Textes - jedoch nur auf den angegebenen Text. Der Text wird also mit der zweiten Farbe hinterlegt.
Ausgabe des Musters: WHITE, RED .
tft.setCursor(x,y);
Einen bestimmten Punkt ansprechen
Hiermit wird ein Punkt über die Koordinaten x und y angegeben.
x gibt die horizontale und y die vertikale Position an. Der eigentliche Nullpunkt ist immer oben links! (Egal welche Rotation angegeben worden ist.)
Hier wird ein Punkt mit x = 20 und y = 10 festgelegt. mit wird ein Punkt über die Koordinaten x und y angegeben.
x gibt die horizontale und y die vertikale Position an. Der eigentliche Nullpunkt ist immer oben links! (Egal welche Rotation angegeben worden ist.)
Vom Nullpunkt (oben links!) aus 20 Pixel nach rechts ist x = 20. Ebenso ist von oben her 10 Pixel der Punkt von y = 10. Der Schnittpunkt beider Punkte ist dann unser (20,10). Um diesen Punkt wird zur Darstellung über drawCircle (dazu später mehr) ein kleiner Kreis gezeichnet. Auf x = 100 und y = 100 wird dann der Text "20,10" als Koordinaten-Angabe ausgegeben.
tft.print("Text"); und tft.println("Text");
Text schreiben
Über den Befehl print wird Text ausgegeben. Folgt noch ein print , so wird dieser Text an den vorher gehenden einfach angehängt. Erst wenn ein neuer setCursor oder ein println folgt, wird die Zeile abgeschlossen.
Also erst der nächste print landet dann in der nächsten Zeile.
print gibt Text aus. Nach println , so wie print line, wird die Zeile abgeschlossen.
print("Text") und print(Variable)
Es kann jedoch nicht nur Text, der übrigens immer zwischen Klammern und Anführungszeichen stehen muß print("Text") , dargestellt werden, sondern auch Variable. Diese stehen dann nur zwischen Klammern: print(Variable) .
Jeder normale Text beginnt am Zeilenanfang. Bei der Festlegung mit txt.setCursor wird der Startpunkt des Textes definiert. Der Text beginnt oben links vom Text selbst genau an dem bezeichneten Punkt.
tft.setTextSize(s);
Die Größe des Textes einstellen
Auch die Textgröße kann gewält werden. Zwischen 1 und 9 können die Werteeingegeben werden.
1 enspricht der kleinsten Schrift und 9 demnach der Größten.
Standard ist die Schrift 1 mit einer Größe von 6x8 Pixel, 2 = 12x16, 3 = 18x24, ...
tft.write(ASCII-Wert für deutsche Umlaute)
Die deutschen Umlaute verwenden
Die deutschen Umlaute können ebenso dargestellt werden, zwar mit minimalem Aufwand - aber es funktioniert hervorragend!
Anstatt "tft.print" wird tft.write(ASCII-Wert) verwendet. Der ASCII-Wert besteht nur aus drei Ziffern in Klammern, jedoch ohne den Anführungszeichen.
Hier können alle Codes dafür nachgesehen werden: https://ascii-tabelle.org.