Professionelle Bitmap-Animation auf dem ILI9341 2,4″ TFT Touchscreen Shield mit Visuino

Komponenten und Materialien

• 1 × Arduino UNO (kompatibel)
• 1 × ILI9341 2,4″ TFT Touchscreen Shield für Arduino

Software und Online-Dienste

• Visuino – Grafische Entwicklungsumgebung für Arduino
• Arduino IDE (Version 1.6.7 oder höher)

Projektbeschreibung

ILI9341-basierte TFT-Touchscreen-Shields sind beliebte, preiswerte Displays für Arduino. Visuino unterstützt sie bereits länger, doch fehlte bisher ein Tutorial. Dieses zeigt, wie einfach sich das Shield anschließen und mit Visuino programmieren lässt, um eine Bitmap animiert über den Bildschirm zu bewegen.

Schritt 1: Hardware verbinden

Stecken Sie das TFT-Shield einfach auf den Arduino Uno. Die Pins werden dabei direkt durchgereicht – keine zusätzlichen Verbindungen nötig.

Schritt 2: Visuino einrichten und Shield hinzufügen

1. Visuino starten.
2. Auf den Pfeil-nach-unten-Button beim Arduino-Komponenten-Symbol klicken → „Add Shields…“.
3. In der Kategorie „Displays“ den Eintrag „TFT Color Touch Screen Display ILI9341 Shield“ auswählen und mit „+“ hinzufügen.

Schritt 3: Grafikelemente für Text (Schatten & Vordergrund)

Im Object Inspector beim TFT-Display auf „Elements“ → „...“ klicken. Zwei „Draw Text“-Elemente hinzufügen:

• Schatten: Farbe aclSilver, Größe 4, Text „Visuino“, Position X=43, Y=278.
• Vordergrund: Standardfarbe, Größe 4, Text „Visuino“, Position X=40, Y=275.

Schritt 4: Bitmap-Element für Animation hinzufügen

1. „Draw Bitmap“-Element hinzufügen.
2. Über „Bitmap Editor“ → „Load…“ eine Bitmap-Datei laden (nicht zu groß, sonst Speicherprobleme).
3. Dialog mit „OK“ schließen.

Schritt 5: X- und Y-Pins für Bitmap-Position freigeben

Bei „Draw Bitmap1“ die Eigenschaften X und Y per Pin-Button auf „Integer SinkPin“ setzen.

Schritt 6: Zwei Sinus-Generatoren für Bewegung erzeugen

Zwei „Sine Integer Generator“-Komponenten aus der Toolbox in den Designbereich ziehen:

• Generator 1 (X-Richtung): Amplitude=96, Offset=96, Frequenz=0,2
• Generator 2 (Y-Richtung): Amplitude=120, Offset=120, Frequenz=0,03

Schritt 7: Generatoren mit Bitmap-Pins verbinden

• Out von Generator 1 → X-Pin von Draw Bitmap1
• Out von Generator 2 → Y-Pin von Draw Bitmap1

Schritt 8: Taktung mit Repeat & Clock Multi Source

Damit die Bitmap nach Positionsänderung neu gezeichnet wird:

1. Repeat-Komponente hinzufügen (erzeugt kontinuierlich Events).
2. Clock Multi Source hinzufügen (erzeugt zwei Events nacheinander).
3. Repeat.Out → ClockMultiSource.In
4. ClockMultiSource.Pin[0] → In von Generator 1 und Generator 2
5. ClockMultiSource.Pin[1] → Clock-Pin von Draw Bitmap1

Schritt 9: Code generieren und hochladen

1. In Visuino F9 drücken oder Generieren-Button klicken → Arduino IDE öffnet sich.
2. In der Arduino IDE auf „Hochladen“ klicken.

Ergebnis

Die Bitmap (z. B. das Visuino-Logo) bewegt sich wellenförmig über den Bildschirm. Das komplette Visuino-Projekt und die Bitmap-Datei sind als Download verfügbar.

Visuino herunterladen