Inhaltsverzeichnis:

BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial - Gunook
BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial - Gunook

Video: BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial - Gunook

Video: BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial - Gunook
Video: Blackberry Q10 Keyboard Connector 2024, Juli
Anonim
BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial
BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial
BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial
BluBerriSix - ein TFT-Touchscreen / Arduino-Tutorial

2019 ist das 20-jährige Jubiläum des RIM Blackberry 850! Diese kleine kanadische Erfindung veränderte die Art und Weise, wie die Welt kommuniziert. Es ist lange vorbei, aber sein Vermächtnis geht weiter!

In diesem anweisbaren erfahren Sie, wie Sie das MCUfriend.com 2,4-Zoll-TFT-Display-Schild für den Uno / Mega verwenden. Sie lernen, grafische Objekte und Text anzuzeigen und Berührungen zu empfangen und auf die Berührungsereignisse zu reagieren. Dies Bildschirm ist Adafruit und anderen TFT-Schilden/Bildschirmen sehr ähnlich. Wenn Sie also hier sind, bleiben Sie für die Show in der Nähe.

Wir erstellen eine vereinfachte 2-App-Version meiner bluBerriSIX-Skizze.

Lass uns anfangen!

Schritt 1: BluBerriSIX - Übersicht

Image
Image
BluBerriSIX - Übersicht
BluBerriSIX - Übersicht
BluBerriSIX - Übersicht
BluBerriSIX - Übersicht

Die bluBerriSIX App ist ein TFT-Projekt mit sechs Funktionen.

Es enthält:

Eine Taschenlampe

Eine freche '7'-App (wie ein magischer '8'-Ball)

Ein Taschenrechner

Eine App zur Entfernungsmessung mit dem Ultraschall-Distanzsensor SR-04

Eine Temperatur- und Feuchtigkeits-App, die mit dem HC-12-Transceiver auch Echtzeit-Datenprotokollierung bis zu 1,5 km durchführt

Eine SMS-App mit HC-12.

Dieses Projekt benötigte 1100 Zeilen Code. Wir bauen eine wesentlich einfachere Version, die noch TFT-Display und Touch-Sensing-Konzepte demonstriert.

Schritt 2: Was wird benötigt?

Was wird benötigt?
Was wird benötigt?
Was wird benötigt?
Was wird benötigt?

- Ein Arduino Uno oder Mega 2560

- Ein MCUfriend 2,4 TFT-Schild

Folgende Bibliotheken:

- Adafruit_GFX-Bibliothek

- Adafruit Touchscreen-Bibliothek

- MCUFRIEND_kbv-Bibliothek

Diese Bibliotheken können mit dem Bibliotheksmanager in der Arduino IDE installiert werden.

Um eine Bibliothek zu laden, gehen Sie zur Menüoption Skizze -> Bibliothek einschließen -> Bibliotheken verwalten….

Geben Sie im Feld „Suche filtern…“die ersten Zeichen des Bibliotheksnamens ein und wählen und installieren Sie dann die entsprechende Bibliothek. Wenn Sie fertig sind, verlassen Sie diesen Bildschirm einfach zurück.

Seien Sie bei der Montage des TFT-Shields am Uno/Mega SEHR VORSICHTIG, um sicherzustellen, dass die Pins richtig ausgerichtet sind. Ich habe meinen ersten Schild falsch ausgerichtet und gebraten. Ich verbrachte zwei Wochen wachsender Frustration damit, die richtigen Bibliotheken zu finden, bevor ich merkte, dass der Bildschirm tot war. VORSICHTIG SEIN

Schritt 3: Unser Projekt

Unser Projekt
Unser Projekt
Unser Projekt
Unser Projekt
Unser Projekt
Unser Projekt
Unser Projekt
Unser Projekt

Wir erstellen eine einfachere Version der bluBerriSIX-Skizze.

Es wird haben, - ein Begrüßungsbildschirm

- ein Hauptmenü-Bildschirm mit zwei Tasten

- eine freche 7-App

- eine vereinfachte Texteingabe-App

Sie können auch zum Hauptmenü zurückkehren, indem Sie auf das 'Home'-Symbol unten links in diesem speziellen Display drücken. Wenn Sie kein solches Symbol haben, müssen Sie nur einen "Home"-Bereich Ihres Bildschirms definieren. In diesem Tutorial erfahren Sie, wie Sie Bildschirmberührungsbereiche bestimmen.

Obwohl dies ein vereinfachtes Projekt ist, ist es immer noch ziemlich lang. Ich werde Versionen der Arduino-Skizzen in jeder Hauptphase zur Verfügung stellen, damit Sie sie hochladen können, wenn Sie möchten.

Schritt 4: Kopfzeilencode, globale Variablen, Bildschirmeinrichtung

Kopfzeilencode, globale Variablen, Bildschirmeinrichtung
Kopfzeilencode, globale Variablen, Bildschirmeinrichtung
Kopfzeilencode, globale Variablen, Bildschirmeinrichtung
Kopfzeilencode, globale Variablen, Bildschirmeinrichtung

Das gesamte Projekt ist hoch dokumentiert. Aber die Details folgen.

Starten Sie ein neues Arduino-Projekt und nennen Sie es "tft-demo" oder einen anderen Namen, den Sie möchten.

Das erste Code-Panel oben zeigt uns, wie wir globale Variablen definieren. Wir fügen auch die Bibliotheken hinzu, die wir sowohl für die Anzeigefunktion des Bildschirms als auch für die Berührungserkennung des Bildschirms benötigen.

Wir definieren auch die Analog Pins in Bezug auf ihre bildschirmspezifischen Zwecke.

Als Referenzen für ihre jeweiligen Funktionen definieren wir das tft-Objekt (Display) und das ts-Objekt (Touch).

Wir definieren einige 16-Bit-Farbkonstanten, um das Rendern der Farben für den Bildschirm und für Text- und Grafikobjekte zu vereinfachen. Sie werden feststellen, dass es eine URL zu einer Website gibt, die über einen Farbwähler und einen Konverter verfügt, um sichtbare Farben in ihre 16-Bit-Hexadezimalwerte umzuwandeln. Es ist ein sehr hilfreiches Werkzeug.

Im zweiten Codepanel definieren wir die globalen Variablen für unsere App-spezifischen Zwecke.

Die Strings und Arrays cString, letter und letterX und letterY werden verwendet, um a) die Buchstaben auf den Schaltflächen für die Texteingabe-App anzuzeigen und b) die x- und y-Koordinaten einer Berührung mit den x- und y-Koordinaten jedes entsprechenden Buchstabens abzugleichen die Tastatur. Mehr dazu, wenn wir zu diesem Abschnitt der Skizze kommen.

funcX, funcY und func sind Arrays, die feststellen, welche App-Taste auf dem Hauptmenübildschirm gedrückt wurde, und diese Informationen dann verwenden, um die jeweilige App zu starten.

lastTouch und tThresh werden in den Touch-Methoden verwendet, um sicherzustellen, dass wir nicht mehrere Berührungen durch zu langes Drücken des Bildschirms erhalten. Dazu später mehr.

Die Variable mode steuert, welcher Bildschirm angezeigt wird, und die Variable tMode steuert, welche Touch-Methoden zu einem bestimmten Zeitpunkt verwendet werden.

Im setup()-Block öffnen wir einen seriellen Kanal, wenn wir Serial.println()-Befehle zum Debuggen verwenden möchten. Sie benötigen diese Zeile nicht, wenn Sie kein Serial Monitor-Debugging durchführen möchten.

Die nächsten vier Zeilen sind nur Setup-Code für das tft-Objekt.

Als nächstes stellen wir die Ausrichtung des Bildschirms auf den Porträtmodus ein.

Der Befehl randomSeed() startet lediglich den Zufallszahlengenerator zur späteren Verwendung durch die Saucy 7-App.

Schließlich rufen wir die Splash-Screen-Methode auf.

Schritt 5: Erstellen des Spash-Bildschirms und Verstehen von Display im Vergleich zu Touch-Mapping

Erstellen des Spash-Bildschirms und Verständnis von Display versus Touch-Mapping
Erstellen des Spash-Bildschirms und Verständnis von Display versus Touch-Mapping
Erstellen des Spash-Bildschirms und Verständnis von Display versus Touch-Mapping
Erstellen des Spash-Bildschirms und Verständnis von Display versus Touch-Mapping

Wir beginnen jetzt mit dem Erstellen des Spash-Bildschirms.

Sehen Sie sich jedoch zuerst das Bild für die Bildschirm- und Touch-Zuordnung an. Beachten Sie, dass sich die Ursprünge an verschiedenen Orten befinden. Zur Anzeige befindet sich der Ursprung (0, 0) oben links auf dem Bildschirm (wenn die RESET-Taste oben ist) und wächst von links nach rechts und von oben nach unten.

Bei der Berührungserkennung befindet sich der Ursprung in der unteren linken Ecke des Bildschirms und wächst von links nach rechts und von unten nach oben.

DISPLAY- UND TOUCH-MAPS WERDEN SEPARAT DEFINIERT und haben unterschiedliche Auflösungen. Das Display hat eine Auflösung von 240 x 320 und der Touch hat eine viel höhere Auflösung, wie Sie gleich sehen werden.

Gehen Sie zu einem Bereich Ihrer Skizze unterhalb der loop(){}-Methode und wir geben den splash()-Methodencode ein.

Wir beginnen mit einem fillScreen()-Befehl, um den Bildschirm mit der Farbe WEISS zu füllen, die wir im Header-Code definiert haben.

Dann setzen wir die Textgröße auf '5'. Dies ist eine relativ große grundlegende Textgröße. Wir legen die x- und y-Position für den Textcursor fest und legen die Textfarbe fest. Schließlich zeichnet der Befehl print("TFT") tatsächlich den blauen Text der Größe '5' an der angegebenen Position.

Wenn Sie die Textgröße erhöhen, werden die Zeichen immer dicker. Daher ist es wahrscheinlich nicht hilfreich, über 5 zu gehen. Am Ende dieses Tutorials zeige ich Ihnen, wie Sie Bitmap-Schriftarten verwenden, um einen schöneren Text in Ihren Apps zu erhalten. Der Kompromiss besteht darin, dass die Verwendung von Bitmap-Schriftsätzen viel Speicher in Ihrem Arduino beansprucht, was Ihre Skizzengrößen begrenzt

Wir wiederholen ähnliche Befehle für die anderen beiden Textelemente auf dem Begrüßungsbildschirm.

Schließlich verzögern wir 2,5 Sekunden, um dem Benutzer die Möglichkeit zu geben, den Inhalt des Bildschirms zu lesen, bevor die App zum Hauptmenübildschirm wechselt.

Gehen Sie voran und laden Sie diese Skizze auf Ihr Arduino hoch. Es sollte den Begrüßungsbildschirm anzeigen.

Schritt 6: Erstellen eines Touch-Mapping-Diagnosetools

Erstellen eines Touch-Mapping-Diagnosetools
Erstellen eines Touch-Mapping-Diagnosetools
Erstellen eines Touch-Mapping-Diagnosetools
Erstellen eines Touch-Mapping-Diagnosetools

Die Methode showTouch() ist sehr nützlich, um Ihnen zu helfen, die Berührungskoordinaten verschiedener Teile des Bildschirms zu erhalten. Sie müssen dies tun, um die Touch-Bereiche für Ihre Schaltflächen zu definieren.

Fahren Sie fort und geben Sie diese Methode unter Ihrer zuvor ausgeführten splash()-Methode ein.

So funktioniert das.

Die if-Anweisung bestimmt, ob seit der letzten Berührung genügend Zeit vergangen ist. Es nimmt die aktuelle Systemzeit millis() und subtrahiert die lastTouch-Zeit. Wenn es größer als der tThresh-Wert (200 Millisekunden) ist, akzeptiert es die Berührung. Andernfalls werden versehentliche Multi-Touch-Ereignisse ignoriert.

Als nächstes ruft der Befehl getpoint() die x-, y- und z-Koordinaten der Berührung ab. Die z-Koordinate ist ein Maß für den Berührungsdruck.

Wenn der Druck innerhalb der Max- und Min-Konstanten liegt, die wir im Sketch-Header definiert haben, ändert die Methode zuerst die YP- und XM-Pins zurück auf OUTPUT, wodurch der Bildschirm in den DISPLAY-Modus versetzt wird.

Als nächstes wird ein weißes Rechteck gezeichnet, um alle zuvor angezeigten Koordinaten zu löschen.

Die Skizze setzt dann die Schrift auf Größe 2, schwarze Farbe und zeigt die x (p.x) und y (p.y) Koordinaten auf dem Bildschirm an. Sie können sich diese Positionen dann notieren, um Ihre Berührungszonen für Ihre eigenen Skizzen zu programmieren.

Die if-Anweisung am unteren Rand der Methode überprüft, ob die Schaltfläche 'Home' auf dem Bildschirm gedrückt wurde. die '<='-Operatoren berücksichtigen die Breite und Höhe der Home-Schaltfläche. Die angegebenen Koordinaten sind die x-Mittelpunkt- und y-Mittelpunktkoordinaten der Home-Schaltfläche. Wenn es gedrückt wird, wird der Modus auf 0 gesetzt, was schließlich „Gehe zum Hauptmenü-Bildschirm“bedeutet. Dazu später mehr.

Schließlich aktualisieren wir lastTouch auf die aktuelle Systemzeit millis(), um auf ein späteres Touch-Ereignis vorbereitet zu sein.

Bitte gehen Sie jetzt in den loop()-Block und fügen Sie die Zeile showTouch() hinzu;

Laden Sie an dieser Stelle Ihre Skizze hoch und probieren Sie es aus. Es zeichnet den Begrüßungsbildschirm und wenn Sie den Bildschirm berühren, werden die TOUCH x- und y-Koordinaten auf dem Bildschirm angezeigt.

Bevor wir fortfahren, schauen wir uns zwei wichtige Codezeilen noch einmal an:

pinMode (YP, AUSGANG); // die TFT-Steuerpins wiederherstellen

pinMode (XM, OUTPUT); // zur Anzeige nach Erkennung einer Berührung

Jedes Mal, wenn Sie etwas auf dem Bildschirm anzeigen möchten, MÜSSEN Sie diese beiden Befehle ausführen, um den Bildschirm vom TOUCH-Modus in den DISPLAY-Modus zu ändern. Andernfalls funktionieren Ihre Anzeigebefehle nicht.

Bisher gut gemacht! Machen Sie eine Pause!

Schritt 7: Erstellen Sie den Hauptmenübildschirm

Erstellen Sie den Hauptmenübildschirm
Erstellen Sie den Hauptmenübildschirm
Erstellen Sie den Hauptmenübildschirm
Erstellen Sie den Hauptmenübildschirm
Erstellen Sie den Hauptmenübildschirm
Erstellen Sie den Hauptmenübildschirm

Wir bauen jetzt unseren Hauptmenübildschirm mit zwei Tasten auf, die Sie drücken können, um jede App zu aktivieren. Die Methode heißt menuScreen().

Wir beginnen damit, den Bildschirm in den DISPLAY-Modus zu versetzen.

Dann stellen wir die Schriftgröße, Farbe und Position ein und drucken den 'Hauptmenü'-Text.

Wir zeichnen jetzt zwei Rechtecke, die die Schaltflächen sind.

Alle Grafikbefehle haben eine ähnliche Struktur:

graphicShape(x-Koordinate, y-Koordinate, Breite, Höhe, FARBE)

- x-Koordinate - oben links für rechteckige Objekte, Mitte für Kreise

- y-Koordinate - oben links für rechteckige Objekte, Mitte für Kreise

- width - Breite des Objekts in Pixel

- COLOR - eine Farbkonstante, die wir im Header definiert haben

Schließlich rufen wir zwei Methoden auf, um das Saucy 7-Symbol und das QWERTY-Texteingabesymbol zu zeichnen. Das sind separate Methoden.

Die Methode draw7icon(0) verwendet einen ganzzahligen Parameter, der den y-Offset zum Zeichnen der Kugel darstellt. Wir tun dies, damit wir die gleiche Methode zum Zeichnen des Balls auf dem Menübildschirm UND auf dem Bildschirm der Saucy 7-App verwenden können. Der Versatz ermöglicht es uns nur, die y-Koordinate des Balls programmgesteuert nach oben oder unten anzupassen.

Die Methode draw7Ball(0) wird innerhalb von draw7Icon(0) aufgerufen. Es benötigt auch einen Parameter, mit dem wir die vertikale Position des Balls anpassen können, je nachdem, ob wir ihn auf dem Menübildschirm oder auf dem App-Bildschirm zeichnen.

Der Befehl fillCircle() benötigt 4 Argumente.

- x-Koordinate des Kreismittelpunkts

- y-Koordinate des Kreismittelpunkts

- Radius des Kreises (in Pixel)

- COLOR - eine Farbkonstante, die wir im Header definiert haben

Schließlich wird die Methode drawTextIcon() aufgerufen, um das Symbol für die Texteingabe-App zu zeichnen.

Sie können versuchen, die Methode auszuführen, indem Sie die Methode splash() in setup() auskommentieren und menuScreen() hinzufügen.

Laden Sie die Skizze auf Ihr Arduino hoch und probieren Sie es aus!

Schritt 8: Die Saucy 7 App und die Hauptmenümethoden

Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden
Die Saucy 7 App und die Hauptmenümethoden

Die Methode sevenScreen() zeichnet den Bildschirm für die App, einschließlich des Zeichnens des Balls und der anschließenden Anzeige der Anweisungen.

Die Methode sevenInstr() zeigt die Anweisungen an und löscht den Bildschirm von früheren Antworten. Es zeichnet auch die Schaltfläche "Antwort".

Die Methode show7Response() übernimmt das Löschen der vorherigen Antwortmethode vom Bildschirm, die Anzeige einer animierten „Denken…“-Nachricht und dann die Anzeige der zufällig ausgewählten Antwortnachricht.

read7Touch() ist die Methode, die auf ein Touch-Ereignis wartet, um die zufällig generierte Nachricht zu erzeugen. Der Berührungscode ist der zuvor beschriebenen Diagnosemethode showTouch() sehr ähnlich. Der Einfachheit halber akzeptiert die Methode eine Berührung an einer beliebigen Stelle des Bildschirms als Berührung der Schaltfläche „Antworten“.

Am Anfang der Methode definieren wir ein response-Array von Strings, die die Nachrichten sind, die von einem Touch-Ereignis generiert werden können.

Wenn die Home-Taste gedrückt wird, wird die App beendet und zum Hauptmenübildschirm zurückgekehrt. Andernfalls generiert die Methode eine Zufallszahl zwischen 0 und 7 (exklusiv) und übergibt die entsprechende Textnachricht aus dem response-Array an die show7Response()-Methode.

Schließlich wartet die Methode backToMenu() auf eine Berührung der Home-Schaltfläche und gibt die Kontrolle an den Hauptmenübildschirm zurück.

Die Methode readMenuTouch() überwacht ein Berührungsereignis, wenn Sie sich auf dem Hauptmenübildschirm befinden. Wenn eine Berührung erkannt wird, übergibt sie die x- und y-Koordinaten an die Methode getFunc(x, y), die in den Arrays funcX und funcY nach den x- und y-Koordinaten der Berührung sucht. Es gibt dann die Nummer aus dem func-Array für die ausgewählte App zurück. '1' ist Saucy 7 und '2' ist die Texteingabe-App. Es setzt dann den Modus auf den Wert dieser App, damit die App ausgeführt wird.

Schritt 9: Der Loop()-Block

Der Loop()-Block
Der Loop()-Block

Wir beginnen nun damit, den loop()-Blockcode zu erstellen, um die Anzeige des entsprechenden Bildschirms zu verarbeiten und dann die entsprechenden Touch-Methoden basierend auf der aktuell ausgewählten Option aufzurufen.

Die Methode loop() besteht aus zwei switch()-Strukturen.

Die obere Schalterstruktur handhabt die Anzeige des entsprechenden Bildschirms, je nachdem, welche Option ausgewählt ist. Es legt auch den tMode-Wert für die entsprechende Berührungsmethode fest, die für die aktuell ausgewählte Option ausgeführt wird. Schließlich setzt es den Moduswert auf 9, damit der Bildschirm nicht endlos neu gezeichnet wird.

Die untere Schalterstruktur steuert basierend auf der vom Benutzer ausgewählten App-Option, die durch den Wert von tMode dargestellt wird, welche Berührungsmethoden ausgeführt werden.

Laden Sie die Skizze in Ihr Arduino und Sie sollten in der Lage sein, die Saucy 7-App auszuwählen und zu verwenden.

Sie haben viel Arbeit geleistet! Mach eine Pause:-)

Schritt 10: Die Texteingabe-App - Wir sind in der Zielgeraden

Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!
Die Texteingabe-App - Wir sind auf der Zielgeraden!

Wir integrieren nun die Methoden der Texteingabe-App.

makeKbd() zeichnet die Tastatur auf den Bildschirm.

Es zeichnet sechs gefüllte abgerundete Rechtecke und überlagert dann jeden 'Schlüssel' mit dem entsprechenden Buchstaben, indem es den Buchstaben aus der cString-Zeichenfolge erhält, die es auf dem Bildschirm über dem Schlüssel ausgibt. Beachten Sie, dass der vorletzte Parameter in einem fillRoundedRect()-Befehl der Radius jeder Ecke in Pixeln ist. Je höher dieser Wert, desto abgerundeter sind die Ecken.

Die Methode readKbdTouch() funktioniert ähnlich wie die anderen Methoden zur Berührungserkennung.

Wenn eine Berührung erkannt wird, die sich NICHT auf der Home-Schaltfläche befindet, übergibt sie die x- und y-Koordinaten an die Methode curChar(x, y), die das Zeichen zurückgibt, das dieser x- und y-Position auf dem Bildschirm entspricht. Die „getippte“Nachricht wird dann mit der Methode „displayMsg(theChar)“auf dem Bildschirm angezeigt.

Die Methode curChar(x, y) durchsucht die Arrays letterX und letterY, um eine Übereinstimmung zu finden, die nahe an den von readKbdTouch() übergebenen x- und y-Koordinaten liegt. Wenn es eine Übereinstimmung findet, gibt es den entsprechenden Buchstaben an die Methode readKbdTouch zurück. Beachten Sie, dass wir die Variable theChar auf 32 initialisieren, was der ASCII-Code für ein Leerzeichen ' ' ist. Wir tun dies, damit, wenn der Benutzer einen Bereich außerhalb der Tastatur berührt, nicht verfügbare Zeichen nicht angezeigt werden.

Die Methode displayMsg(theChar) nimmt das von curChar(x, y) zurückgegebene Zeichen und hängt es an den msg-String an. Anschließend wird die Nachricht auf dem Bildschirm angezeigt.

Schließlich aktualisieren wir den loop()-Block, um die App-Auswahl für die Texteingabe zu akzeptieren.

Laden Sie die tftDemo-Skizze auf Ihr Arduino hoch und Sie sollten die fertige App verwenden können.

Herzliche Glückwünsche! Sie haben eine TFT-Touchscreen-App erstellt! Nehmen Sie sich den Rest des Tages frei!

Schritt 11: Slick bekommen! - Verwenden von Adafruit Bitmap-Schriftarten in Ihrer Skizze

Der Standard-TFT-Schriftsatz ist in Ordnung. Aber es ist schöner, wenn wir in unseren TFT-Skizzen richtige Bitmap-Schriftarten verwenden können.

Der Nachteil ist, dass das Laden von Schriftarten in den Arduino-Speicher erheblichen Platz beansprucht. Tatsächlich ist es sehr einfach, Ihre Skizze mit so vielen Schriftarten zu füllen, dass sie nicht in das Arduino geladen wird.

Die Schriftarten sind im Bibliotheksordner Adafruit_GFX verfügbar, den Sie bereits für dieses Projekt installiert haben. Ein hervorragendes Tutorial zur Verwendung von Schriftarten finden Sie auf dieser Website.

Fügen Sie im Kopfzeilenbereich Ihrer Skizze die Schriftartreferenz für die Schriftart hinzu, die Sie verwenden möchten. Für dieses Beispiel verwenden wir die Schriftart FreeSerifBoldItalic18p7b.

#enthalten

Kommentieren Sie in Ihrer splash()-Methode tft.setTextSize(); Befehl.

Fügen Sie den folgenden Befehl hinzu,

tft.setFont(&FreeSerifBoldItalic18pt7b);

Jetzt verwenden alle print()-Befehle die aktuell angegebene Schriftart. Um zu einer anderen Schriftart zu wechseln, verwenden Sie einen anderen tft.setFont()-Befehl mit der nächsten Schriftart, die Sie verwenden möchten.

Um die Schriftart wieder auf die Standard-tft-Schriftart zurückzusetzen, verwenden Sie einfach tft.setFont(); Befehl ohne Parameter.

Laden Sie die Skizze auf Ihr Arduino hoch und Sie sollten sehen, dass der Begrüßungsbildschirm jetzt die Bitmap-Schriftart zum Rendern des Textes auf dem Bildschirm verwendet. Sie werden feststellen, dass die Größe der Skizze jetzt deutlich größer ist, nachdem Sie eine Schriftart eingefügt haben.

Schritt 12: Abschließende Gedanken

Es stehen Ihnen viele andere Befehle für grafische Objekte zur Verfügung. Sie beinhalten:

tft.drawRect(x, y, Breite, Höhe, FARBE);

tft.drawLine(x1, y1, x2, y2, FARBE);

In den folgenden Beispielen wird die Methode tft.color565 verwendet, damit Sie die Farbe basierend auf Rot-, Grün- und Blauwerten angeben können. Dies ist eine alternative Methode zur Verwendung der konstant definierten HEX-Farbwerte, die wir in unserer Skizze verwendet haben.

tft.drawRoundRect(x, y, Breite, Höhe, Radius, tft.color565(255, 0, 0)); // das wäre rot

tft.drawCircle (x, y, Radius, tft.color565 (0, 255, 0)); // das wäre grün

tft.drawTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(0, 0, 255)); // Blau

tft.fillTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(255, 0, 0);

Spielen Sie mit diesen Befehlen herum und entdecken Sie, wie sie zu Ihren TFT-Projekten hinzugefügt werden können.

Das Erlernen des Umgangs mit einem TFT-Bildschirm ist eine Herausforderung und Sie sollten stolz auf sich sein, dass Sie sich die Zeit genommen haben, diese ersten Schritte zu lernen.

TFT-Bildschirme können Ihren Arduino-Projekten einen attraktiven und nützlichen Aspekt der grafischen Benutzeroberfläche hinzufügen.

Vielen Dank, dass Sie dieses Tutorial durchgearbeitet haben.

JETZT GEHEN SIE AUS UND MACHEN SIE ETWAS WUNDERVOLLES!

Empfohlen: