Bitmap-Animation auf dem ILI9341 TFT-Touchscreen-Displayschild

Apps und Onlinedienste

	Visuino - Grafische Entwicklungsumgebung für Arduino
	Arduino-IDE

Über dieses Projekt

ILI9341-basierte TFT-Touchscreen-Display-Abschirmungen sind sehr beliebte kostengünstige Display-Schilde für Arduino . Visuino hat sie für eine ganze Weile unterstützt, aber ich hatte nie die Gelegenheit, ein Tutorial zu schreiben, wie man sie benutzt. In letzter Zeit stellten jedoch nur wenige Leute Fragen zur Verwendung von Displays mit Visuino , also habe ich beschlossen, ein Tutorial zu machen.

In diesem Tutorial zeige ich dir, wie einfach es ist, das Shield mit Arduino zu verbinden , und programmiere es mit Visuino um eine Bitmap zu animieren, um sich auf dem Display zu bewegen.

Schritt 1:Komponenten

• Ein Arduino Uno kompatibles Board (kann auch mit Mega funktionieren, aber ich habe das Shield noch nicht damit getestet)

• Ein ILI9341 2.4" TFT Touchscreen Shield für Arduino

Schritt 2:Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino

Stecken Sie das TFT-Schild oben auf dem Arduino Uno wie auf den Bildern gezeigt.

Schritt 3:Visuino starten und TFT Display Shield hinzufügen

Um mit der Programmierung des Arduino zu beginnen, benötigen Sie die Arduino-IDE installiert von hier:http://www.arduino.cc/.

Stellen Sie sicher, dass Sie 1.6.7 oder höher installieren, sonst funktioniert dieses Tutorial nicht!

Der Visuino :https://www.visuino.com muss ebenfalls installiert werden.

• Starte Visuino wie im ersten Bild gezeigt

• Klicken Sie auf den "Pfeil nach unten "-Taste der Arduino-Komponente zum Öffnen des Dropdown-Menüs (Bild 1 )

• Wählen Sie im Menü "Schilde hinzufügen... " (Bild 1 )

• In den "Schilden "-Dialogfeld "Displays . erweitern " Kategorie und wählen Sie "TFT-Farb-Touchscreen-Display ILI9341 Shield " und klicken Sie dann auf "+ ", um es hinzuzufügen (Bild 2 )

Schritt 4:In Visuino:Textelement für den Textschatten hinzufügen

Als nächstes müssen wir Grafikelemente hinzufügen, um Text und Bitmap zu rendern. Zuerst fügen wir ein Grafikelement hinzu, um den Schatten des Textes zu zeichnen:

• Klicken Sie im Objektinspektor auf "... " neben dem Wert von "Elemente "-Eigenschaft des "TFT-Display " Element (Bild 1 )

• Wählen Sie im Elements-Editor "Text zeichnen . aus “ und klicken Sie dann auf das „+ "-Schaltfläche (Bild 2 ), um einen hinzuzufügen (Bild 3 )

• Setzen Sie im Objektinspektor den Wert der "Farbe "-Eigenschaft von "Text zeichnen1 "-Element zu "aclSilver " (Bild 3 )

• Setzen Sie im Objektinspektor den Wert der "Größe "-Eigenschaft von "Text zeichnen1 " Element zu "4 " (Bild 4 ). Dadurch wird der Text größer

• Legen Sie im Objektinspektor den Wert von "Text "-Eigenschaft von "Text zeichnen1 "-Element zu "Visuino " (Bild 5 )

• Setzen Sie im Objektinspektor den Wert des "X "-Eigenschaft von "Text zeichnen1 "-Element zu "43 " (Bild 6 )

• Setzen Sie im Objektinspektor den Wert von "Y "-Eigenschaft von "Text zeichnen1 " Element zu "278 " (Bild 6 )

Schritt 5:In Visuino:Textelement für den Textvordergrund hinzufügen

Jetzt fügen wir ein Grafikelement hinzu, um den Text zu zeichnen:

• Wählen Sie im Elements-Editor "Text zeichnen . aus “ und klicken Sie dann auf die Schaltfläche „“ (Bild 1 ), um das zweite hinzuzufügen (Bild 2 )

• Setzen Sie im Objektinspektor den Wert der "Größe "-Eigenschaft von "Text zeichnen1 " Element zu "4 " (Bild 2 )

• Legen Sie im Objektinspektor den Wert von "Text "-Eigenschaft von "Text zeichnen1 "-Element zu "Visuino " (Bild 3 )

• Setzen Sie im Objektinspektor den Wert des "X "-Eigenschaft von "Text zeichnen1 " Element zu "40 " (Bild 4 )

• Setzen Sie im Objektinspektor den Wert von "Y "-Eigenschaft von "Text zeichnen1 " Element zu "275 " (Bild 4 )

Schritt 6:In Visuino:Draw Bitmap Element für die Animation hinzufügen

Als nächstes fügen wir ein Grafikelement hinzu, um die Bitmap zu zeichnen:

• Wählen Sie im Elements-Editor "Bitmap zeichnen . aus “ und klicken Sie dann auf die Schaltfläche „“ (Bild 1 ), um einen hinzuzufügen (Bild 2 )

• Klicken Sie im Objektinspektor auf "... " neben dem Wert von "Bitmap "-Eigenschaft von "Draw Bitmap1 " Element (Bild 2 ), um den "Bitmap-Editor . zu öffnen " (Bild 3 )

• Im "Bitmap-Editor " klicken Sie auf "Laden... "-Schaltfläche (Bild 3 ), um den Datei-Öffnen-Dialog zu öffnen (Bild 4 )

• Wählen Sie im Dialogfeld "Datei öffnen" die zu zeichnende Bitmap aus und klicken Sie auf "Öffnen "-Schaltfläche (Bild 4 ). Wenn die Datei zu groß ist, passt sie möglicherweise nicht in den Arduino-Speicher. Wenn während der Kompilierung ein Speicherfehler auftritt, müssen Sie möglicherweise eine kleinere Bitmap auswählen

• Im "Bitmap-Editor " klicken Sie auf "OK ."-Schaltfläche (Bild 5 ) um den Dialog zu schließen

Schritt 7:In Visuino:Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu

Um die Bitmap zu animieren, müssen wir ihre X- und Y-Position steuern. Dazu fügen wir Pins für die X- und Y-Eigenschaften hinzu:

• Klicken Sie im Objektinspektor auf den "Pin "-Schaltfläche vor dem "X "-Eigenschaft von "Draw Bitmap1 "-Element (Bild 1 ) und wählen Sie "Integer SinkPin " (Bild 2 )

• Klicken Sie im Objektinspektor auf den "Pin "-Schaltfläche vor dem "Y "-Eigenschaft von "Draw Bitmap1 "-Element (Bild 3 ) und wählen Sie "Integer SinkPin " (Bild 4 )

Schritt 8:In Visuino:Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten

Wir verwenden 2 Integer-Sinusgeneratoren, um die Bitmap-Bewegung zu animieren:

• Geben Sie "Sinus . ein " im Filterfeld der Komponenten-Toolbox und wählen Sie dann "Sinus-Ganzzahl-Generator " Komponente (Bild 1 ) und lass zwei davon fallen es im Designbereich

• Legen Sie im Objektinspektor den Wert der "Amplitude . fest " Eigenschaft des SineIntegerGenerator1 Komponente zu "96 " (Bild 2 )

• Legen Sie im Objektinspektor den Wert von "Offset . fest " Eigenschaft des SineIntegerGenerator1 Komponente zu "96 " (Bild 3 )

• Legen Sie im Objektinspektor den Wert der "Häufigkeit " Eigenschaft des SineIntegerGenerator1 Komponente zu "0,2 " (Bild 4 )

Schritt 9:In Visuino:Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap

• Legen Sie im Objektinspektor den Wert der "Amplitude . fest " Eigenschaft des SineIntegerGenerator2 Komponente zu "120 " (Bild 1 )

• Legen Sie im Objektinspektor den Wert von "Offset . fest " Eigenschaft des SineIntegerGenerator2 Komponente zu "120 " (Bild 2 )

• Legen Sie im Objektinspektor den Wert der "Häufigkeit " Eigenschaft des SineIntegerGenerator2 Komponente zu "0.03 " (Bild 3 )

• Verbinden Sie das "Out " Ausgangspin des SineIntegerGenerator1 Komponente zum "X " Eingangspin des "Shields.TFT Sisplay.Elements.Draw Bitmap1 " Element des Arduino Komponente (Bild 4 )

• Verbinden Sie das "Out " Ausgangspin des SineIntegerGenerator2 Komponente zum "Y " Eingangspin des "Shields.TFT Display.Elements.Draw Bitmap1 " Element des Arduino Komponente (Bild 5 )

Schritt 10:In Visuino:Hinzufügen und Verbinden von Start- und Clock-Multi-Source-Komponenten

Um die Bitmap jedes Mal zu rendern, wenn die X- und Y-Position aktualisiert wird, müssen wir ein Taktsignal an das Element "Draw Bitmap1" senden. Um den Befehl zu senden, nachdem die Positionen geändert wurden, benötigen wir eine Möglichkeit, die Ereignisse zu synchronisieren. Dazu verwenden wir die Repeat-Komponente, um ständig Events zu generieren, und Clock Multi Source, um 2 Events nacheinander zu generieren. Das erste Ereignis taktet die Sinusgeneratoren, um die X- und Y-Positionen zu aktualisieren, und das zweite taktet "Draw Bitmap1" :

• Geben Sie "wiederholen ein " im Filterfeld der Komponenten-Toolbox und wählen Sie dann "Wiederholen " Komponente (Bild 1 ) und legen Sie es im Designbereich ab (Bild 2 )

• Geben Sie "Mehrfach . ein " im Filterfeld der Komponenten-Toolbox und wählen Sie dann "Clock Multi Source " Komponente (Bild 2 ) und legen Sie es im Designbereich ab (Bild 3 )

• Verbinden Sie das "Out " Ausgangspin des Repeat1 Komponente zum "In " Eingangspin der ClockMultiSource1 Komponente (Bild 3 )

• Verbinde den "Pin[ 0 ] " Ausgangspin des "Out " Pins der ClockMultiSource1 Komponente zum "In " Eingangspin des SineIntegerGenerator1 Komponente (Bild 4 )

• Verbinde den "Pin[ 0 ] " Ausgangspin des "Out " Pins der ClockMultiSource2 Komponente zum "In " Eingangspin des SineIntegerGenerator1 Komponente (Bild 5 )

• Verbinde den "Pin[ 1 ] " Ausgangspin der "Uhr " Eingangspin des "Shields.TFT Display.Elements.Draw Bitmap1 " Element des Arduino Komponente (Bild 6 )

Schritt 11:Arduino-Code generieren, kompilieren und hochladen

• In Visuino , Drücken Sie F9 oder klicken Sie auf die Schaltfläche in Bild 1 um den Arduino-Code zu generieren und die Arduino-IDE zu öffnen

• In der Arduino-IDE , klicken Sie auf Hochladen Schaltfläche, um den Code zu kompilieren und hochzuladen (Bild 2 )

Schritt 12:Und spielen...

Herzlichen Glückwunsch! Sie haben das Projekt abgeschlossen.

Bilder 2, 3, 4 und 5 und das Video zeigt das verbundene und eingeschaltete Projekt an. Sie werden sehen, wie sich die Bitmap um das ILI9341-basierte TFT-Touchscreen-Display-Schild bewegt wie im Video zu sehen .

Auf Bild 1 Sie können das komplette Visuino sehen Diagramm.Anbei ist auch das Visuino Projekt, das ich für dieses Tutorial erstellt habe, und die Bitmap mit dem Visuino Logo. Sie können es herunterladen und in Visuino öffnen :https://www.visuino.com