Inhaltsverzeichnis:

Arduino Uno: Bitmap-Animation auf ILI9341 TFT-Touchscreen-Display-Schild mit Visuino - Gunook
Arduino Uno: Bitmap-Animation auf ILI9341 TFT-Touchscreen-Display-Schild mit Visuino - Gunook

Video: Arduino Uno: Bitmap-Animation auf ILI9341 TFT-Touchscreen-Display-Schild mit Visuino - Gunook

Video: Arduino Uno: Bitmap-Animation auf ILI9341 TFT-Touchscreen-Display-Schild mit Visuino - Gunook
Video: Animations on OLED display - Arduino 2024, Juli
Anonim
Image
Image

ILI9341 basierte TFT Touchscreen Display Shields sind sehr beliebte kostengünstige Display Shields für Arduino. Visuino unterstützt sie schon seit einiger Zeit, 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 beschloss ich, ein Tutorial zu erstellen.

In diesem Tutorial zeige ich Ihnen, wie einfach es ist, das Shield mit Arduino zu verbinden und mit Visuino zu programmieren, um eine Bitmap zu animieren, die sich auf dem Display bewegt.

Schritt 1: Komponenten

Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino
Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino
  1. Ein Arduino Uno-kompatibles Board (Es kann auch mit Mega funktionieren, aber ich habe das Schild noch nicht damit getestet)
  2. Ein ILI9341 2.4" TFT Touchscreen Shield für Arduino

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

Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino
Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino
Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino
Verbinden Sie das ILI9341 TFT Touchscreen Display Shield mit Arduino

Stecken Sie das TFT-Shield wie auf den Bildern gezeigt auf den Arduino Uno

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

Visuino starten und TFT Display Shield hinzufügen
Visuino starten und TFT Display Shield hinzufügen
Visuino starten und TFT Display Shield hinzufügen
Visuino starten und TFT Display Shield hinzufügen

Um mit der Programmierung des Arduino zu beginnen, müssen Sie die Arduino IDE von hier installieren:

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

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

  1. Starten Sie Visuino wie im ersten Bild gezeigt
  2. Klicken Sie auf die Schaltfläche "Pfeil nach unten" der Arduino-Komponente, um das Dropdown-Menü zu öffnen (Bild 1)
  3. Wählen Sie aus dem Menü "Schilde hinzufügen …" (Bild 1)
  4. Erweitern Sie im Dialog "Shields" die Kategorie "Displays" und wählen Sie das "TFT Color Touch Screen Display ILI9341 Shield" aus und klicken Sie dann auf die Schaltfläche "+", um es hinzuzufügen (Bild 2)

Schritt 4: In Visuino: Fügen Sie das Zeichentextelement für den Textschatten hinzu

In Visuino: Zeichentextelement für den Textschatten hinzufügen
In Visuino: Zeichentextelement für den Textschatten hinzufügen
In Visuino: Zeichentextelement für den Textschatten hinzufügen
In Visuino: Zeichentextelement für den Textschatten hinzufügen
In Visuino: Zeichentextelement für den Textschatten hinzufügen
In Visuino: Zeichentextelement 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:

  1. Klicken Sie im Objektinspektor auf die Schaltfläche "…" neben dem Wert der Eigenschaft "Elements" des Elements "TFT Display" (Bild 1)
  2. Wählen Sie im Elements-Editor "Text zeichnen" und klicken Sie dann auf die Schaltfläche "+" (Bild 2), um einen hinzuzufügen (Bild 3)
  3. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Color" des Elements "Draw Text1" auf "aclSilver" (Bild 3)
  4. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Size" des Elements "Draw Text1" auf "4" (Bild 4). Dadurch wird der Text größer
  5. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Text" des Elements "Draw Text1" auf "Visuino" (Bild 5)
  6. Setzen Sie im Objektinspektor den Wert der Eigenschaft "X" des Elements "Draw Text1" auf "43" (Bild 6)
  7. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Y" des Elements "Draw Text1" auf "278" (Bild 6)

Schritt 5: In Visuino: Fügen Sie das Zeichentextelement für den Textvordergrund hinzu

In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen
In Visuino: Zeichentextelement für den Textvordergrund hinzufügen

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

  1. Wählen Sie im Elements-Editor "Text zeichnen" und klicken Sie dann auf die Schaltfläche "+" (Bild 1), um einen zweiten hinzuzufügen (Bild 2)
  2. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Size" des Elements "Draw Text1" auf "4" (Bild 2)
  3. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Text" des Elements "Draw Text1" auf "Visuino" (Bild 3)
  4. Setzen Sie im Objektinspektor den Wert der Eigenschaft "X" des Elements "Draw Text1" auf "40" (Bild 4)
  5. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Y" des Elements "Draw Text1" auf "275" (Bild 4)

Schritt 6: In Visuino: Fügen Sie ein Draw-Bitmap-Element für die Animation hinzu

In Visuino: Draw Bitmap Element für die Animation hinzufügen
In Visuino: Draw Bitmap Element für die Animation hinzufügen
In Visuino: Draw Bitmap Element für die Animation hinzufügen
In Visuino: Draw Bitmap Element für die Animation hinzufügen
In Visuino: Draw Bitmap Element für die Animation hinzufügen
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:

  1. Wählen Sie im Elements-Editor "Bitmap zeichnen" und klicken Sie dann auf die Schaltfläche "+" (Bild 1), um eine hinzuzufügen (Bild 2)
  2. Klicken Sie im Objektinspektor auf die Schaltfläche "…" neben dem Wert der Eigenschaft "Bitmap" des Elements "Draw Bitmap1" (Bild 2), um den "Bitmap-Editor" (Bild 3) zu öffnen
  3. Klicken Sie im "Bitmap-Editor" auf die Schaltfläche "Laden…" (Bild 3), um den Datei-Öffnen-Dialog zu öffnen (Bild 4)
  4. Wählen Sie im Datei-Öffnen-Dialog die zu zeichnende Bitmap aus und klicken Sie auf die Schaltfläche "Öffnen" (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
  5. Klicken Sie im "Bitmap-Editor" auf "OK". (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

In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
In Visuino: Fügen Sie Pins für die X- und Y-Eigenschaften des Draw Bitmap-Elements hinzu
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:

  1. Klicken Sie im Objektinspektor auf die Schaltfläche "Pin" vor der Eigenschaft "X" des Elements "Draw Bitmap1" (Bild 1) und wählen Sie "Integer SinkPin" (Bild 2)
  2. Klicken Sie im Objektinspektor auf die Schaltfläche "Pin" vor der Eigenschaft "Y" des Elements "Draw Bitmap1" (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

In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
In Visuino: Fügen Sie 2 Integer-Sinus-Generatoren hinzu und konfigurieren Sie den ersten
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:

  1. Geben Sie "Sinus" in das Filterfeld der Komponenten-Toolbox ein, wählen Sie dann die Komponente "Sine Integer Generator" (Bild 1) und legen Sie zwei davon im Designbereich ab
  2. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Amplitude" der Komponente SineIntegerGenerator1 auf "96" (Bild 2)
  3. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Offset" der Komponente SineIntegerGenerator1 auf "96" (Bild 3)
  4. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Frequency" der Komponente SineIntegerGenerator1 auf "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

In Visuino: Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap
In Visuino: Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap
In Visuino: Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap
In Visuino: Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap
In Visuino: Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap
In Visuino: Konfigurieren Sie den zweiten Sinusgenerator und verbinden Sie die Sinusgeneratoren mit den X- und Y-Koordinatenpins der Bitmap
  1. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Amplitude" der Komponente SineIntegerGenerator2 auf "120" (Bild 1)
  2. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Offset" der Komponente SineIntegerGenerator2 auf "120" (Bild 2)
  3. Setzen Sie im Objektinspektor den Wert der Eigenschaft "Frequency" der Komponente SineIntegerGenerator2 auf "0.03" (Bild 3)
  4. Verbinden Sie den "Out"-Ausgangspin der SineIntegerGenerator1-Komponente mit dem "X"-Eingangspin des "Shields. TFT Sisplay. Elements. Draw Bitmap1"-Elements der Arduino-Komponente (Bild 4)
  5. Verbinden Sie den "Out"-Ausgangspin der SineIntegerGenerator2-Komponente mit dem "Y"-Eingangspin des "Shields. TFT Display. Elements. Draw Bitmap1"-Elements der Arduino-Komponente (Bild 5)

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

In Visuino: Hinzufügen und Verbinden von Start- und Clock-Multi-Source-Komponenten
In Visuino: Hinzufügen und Verbinden von Start- und Clock-Multi-Source-Komponenten
In Visuino: Hinzufügen und Verbinden von Start- und Clock-Multi-Source-Komponenten
In Visuino: Hinzufügen und Verbinden von Start- und Clock-Multi-Source-Komponenten
In Visuino: Hinzufügen und Verbinden von Start- und Clock-Multi-Source-Komponenten
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":

  1. Geben Sie "repeat" in das Filterfeld der Component Toolbox ein, wählen Sie dann die Komponente "Repeat" (Bild 1) und legen Sie sie im Designbereich ab (Bild 2)
  2. Geben Sie "multi" in das Filterfeld der Component Toolbox ein, wählen Sie dann die Komponente "Clock Multi Source" (Bild 2) und legen Sie sie im Designbereich ab (Bild 3)
  3. Verbinden Sie den "Out"-Ausgangspin der Repeat1-Komponente mit dem "In"-Eingangspin der ClockMultiSource1-Komponente (Bild 3)
  4. Verbinden Sie den "Pin[0]"-Ausgangspin der "Out"-Pins der ClockMultiSource1-Komponente mit dem "In"-Eingangspin der SineIntegerGenerator1-Komponente (Bild 4)
  5. Verbinden Sie den "Pin[0]"-Ausgangspin der "Out"-Pins der ClockMultiSource2-Komponente mit dem "In"-Eingangspin der SineIntegerGenerator1-Komponente (Bild 5)
  6. Verbinden Sie den "Pin[1]"-Ausgangspin des "Clock"-Eingangspins des "Shields. TFT Display. Elements. Draw Bitmap1"-Elements der Arduino-Komponente (Bild 6)

Schritt 11: Generieren, Kompilieren und Hochladen des Arduino-Codes

Generieren, kompilieren und laden Sie den Arduino-Code hoch
Generieren, kompilieren und laden Sie den Arduino-Code hoch
Generieren, kompilieren und laden Sie den Arduino-Code hoch
Generieren, kompilieren und laden Sie den Arduino-Code hoch
  1. Drücken Sie in Visuino F9 oder klicken Sie auf die in Bild 1 gezeigte Schaltfläche, um den Arduino-Code zu generieren, und öffnen Sie die Arduino-IDE
  2. Klicken Sie in der Arduino IDE auf die Schaltfläche Hochladen, um den Code zu kompilieren und hochzuladen (Bild 2)

Schritt 12: Und spielen …

Image
Image
Und Spiel…
Und Spiel…
Und Spiel…
Und Spiel…

Herzliche Glückwünsche! Sie haben das Projekt abgeschlossen.

Die Bilder 2, 3, 4 und 5 und das Video zeigen das angeschlossene und eingeschaltete Projekt. Sie werden sehen, wie sich die Bitmap um das auf dem ILI9341 basierende TFT Touchscreen Display Shield bewegt, wie im Video zu sehen ist.

Auf Bild 1 sehen Sie das komplette Visuino-Diagramm. Ebenfalls angehängt ist das Visuino-Projekt, das ich für dieses Instructable erstellt habe, und die Bitmap mit dem Visuino-Logo. Sie können es in Visuino herunterladen und öffnen:

Empfohlen:

DIY So zeigen Sie die Zeit auf dem M5StickC ESP32 mit Visuino an - Einfach zu tun: 9 Schritte

DIY So zeigen Sie die Zeit auf dem M5StickC ESP32 mit Visuino an - Einfach zu tun: 9 Schritte

DIY So zeigen Sie die Zeit auf dem M5StickC ESP32 mit Visuino an - Einfach zu machen: In diesem Tutorial lernen wir, wie Sie den ESP32 M5Stack StickC mit Arduino IDE und Visuino programmieren, um die Zeit auf dem LCD anzuzeigen

M5STACK So zeigen Sie Temperatur, Feuchtigkeit und Druck auf dem M5StickC ESP32 mit Visuino an - Einfach zu tun: 6 Schritte

M5STACK So zeigen Sie Temperatur, Feuchtigkeit und Druck auf dem M5StickC ESP32 mit Visuino an - Einfach zu tun: 6 Schritte

M5STACK So zeigen Sie Temperatur, Luftfeuchtigkeit und Druck auf dem M5StickC ESP32 mit Visuino an - Einfach zu machen: In diesem Tutorial lernen wir, wie Sie den ESP32 M5Stack StickC mit Arduino IDE und Visuino programmieren, um Temperatur, Luftfeuchtigkeit und Druck mit dem ENV-Sensor (DHT12, BMP280, BMM150)

So kopieren Sie Spielstände auf einfache Weise auf eine Microsoft- oder Drittanbieter-MU.: 9 Schritte

So kopieren Sie Spielstände auf einfache Weise auf eine Microsoft- oder Drittanbieter-MU.: 9 Schritte

So kopieren Sie Spielstände einfach auf eine Microsoft- oder Drittanbieter-MU.: Original-Tutorial HIER CD, die es einfach macht, genau das zu tun. Dies ist kein vollständiges Softmod-Tutorial, dies

So bauen Sie Ihr eigenes Anemometer mit Reed-Schaltern, Hall-Effekt-Sensor und einigen Schrott auf Nodemcu. - Teil 1 - Hardware: 8 Schritte (mit Bildern)

So bauen Sie Ihr eigenes Anemometer mit Reed-Schaltern, Hall-Effekt-Sensor und einigen Schrott auf Nodemcu. - Teil 1 - Hardware: 8 Schritte (mit Bildern)

So bauen Sie Ihr eigenes Anemometer mit Reed-Schaltern, Hall-Effekt-Sensor und einigen Schrott auf Nodemcu. - Teil 1 - Hardware: EinführungSeit ich mit dem Studium von Arduino und der Maker-Kultur begonnen habe, habe ich gerne nützliche Geräte aus Schrott- und Schrottstücken wie Kronkorken, PVC-Stücken, Getränkedosen usw. gebaut. Ich liebe es, eine Sekunde zu geben Leben für jedes Stück oder jeden Kumpel

Wie zeichne ich einen Computerbildschirm auf einem Mac auf?: 7 Schritte

Wie zeichne ich einen Computerbildschirm auf einem Mac auf?: 7 Schritte

Wie zeichne ich den Computerbildschirm auf dem Mac auf?: Wie zeichne ich den Bildschirm auf dem Mac auf? Wollten Sie schon immer etwas aufzeichnen, was auf Ihrem Computer oder Telefon passiert? Vielleicht sehen Sie sich ein Video an und möchten einen Clip aufnehmen; Vielleicht versuchst du jemandem zu zeigen, wie man etwas macht, und ein Video würde es schaffen