Professionele gids voor bitmap-animatie op de ILI9341 2,4″ TFT Touchscreen Shield

Onderdelen en benodigdheden

Apps en online diensten

• Visuino – Grafische ontwikkelomgeving voor Arduino
• Arduino IDE (versie 1.6.7 of hoger vereist)

Over dit project

ILI9341-gebaseerde TFT Touchscreen Display Shields zijn populaire, goedkope displayshields voor Arduino. Visuino ondersteunt deze al enige tijd, maar er was nog geen tutorial voor. Omdat er vragen kwamen over het gebruik van displays met Visuino, heb ik deze stapsgewijze handleiding geschreven.

In deze tutorial laat ik zien hoe je de shield op de Arduino plaatst en hoe je met Visuino een bitmap animeert die over het scherm beweegt.

Stap 1: Onderdelen

• Eén Arduino Uno compatibel bord (kan ook met Mega werken, maar niet getest)
• Eén ILI9341 2,4″ TFT Touchscreen Shield voor Arduino

Stap 2: ILI9341 TFT Touchscreen Display Shield op Arduino plaatsen

Plaats de TFT Shield bovenop de Arduino Uno zoals op de afbeeldingen getoond.

Stap 3: Visuino starten en TFT Display Shield toevoegen

1. Start Visuino
2. Klik op de pijl-omlaag-knop van het Arduino-component om het dropdown-menu te openen
3. Selecteer Add Shields...
4. In het dialoogvenster Shields, vouw Displays uit, selecteer TFT Color Touch Screen Display ILI9341 Shield en klik op + om toe te voegen

Stap 4: Draw Text-element toevoegen voor teksschaduw

1. In de Object Inspector, klik op de ...-knop bij de Elements-eigenschap van het TFT Display-element
2. Selecteer Draw Text en klik op +
3. Stel Color in op aclSilver
4. Stel Size in op 4
5. Stel Text in op Visuino
6. Stel X in op 43 en Y op 278

Stap 5: Draw Text-element toevoegen voor tekst voorgrond

1. Voeg een tweede Draw Text-element toe
2. Stel Size in op 4
3. Stel Text in op Visuino
4. Stel X in op 40 en Y op 275 (licht verspringend ten opzichte van de schaduw)

Stap 6: Draw Bitmap-element toevoegen voor de animatie

1. Selecteer Draw Bitmap in de Elements-editor en klik op +
2. Klik op de ...-knop bij de Bitmap-eigenschap om de Bitmap Editor te openen
3. Klik op Load... en selecteer een bitmap-bestand (let op: te grote bestanden passen niet in het Arduino-geheugen)
4. Klik op OK om de editor te sluiten

Stap 7: Pinnen toevoegen voor X- en Y-posities van de bitmap

1. Klik op de Pin-knop bij de X-eigenschap van Draw Bitmap1, selecteer Integer SinkPin
2. Doe hetzelfde voor de Y-eigenschap

Stap 8: Twee Integer Sine Generators toevoegen en de eerste configureren

1. Typ sine in de filterbox van de Component Toolbox, selecteer Sine Integer Generator en sleep er twee in het ontwerpgebied
2. Configureer SineIntegerGenerator1:
   • Amplitude: 96
   • Offset: 96
   • Frequency: 0,2

Stap 9: Tweede sine generator configureren en koppelen aan bitmap-coördinaten

1. Configureer SineIntegerGenerator2:
   • Amplitude: 120
   • Offset: 120
   • Frequency: 0,03
2. Verbind Out van SineIntegerGenerator1 met X-invoer van Draw Bitmap1
3. Verbind Out van SineIntegerGenerator2 met Y-invoer van Draw Bitmap1

Stap 10: Start- en Clock Multi Source-componenten toevoegen en verbinden

Om de bitmap te renderen telkens X en Y worden bijgewerkt, gebruiken we een Repeat-component voor continue events en een Clock Multi Source voor gesynchroniseerde event-reeksen.

1. Voeg een Repeat-component toe
2. Voeg een Clock Multi Source-component toe
3. Verbind Out van Repeat1 met In van ClockMultiSource1
4. Verbind Pin[0] van ClockMultiSource1 met In van SineIntegerGenerator1 én SineIntegerGenerator2
5. Verbind Pin[1] van ClockMultiSource1 met Clock-invoer van Draw Bitmap1

Stap 11: Arduino-code genereren, compileren en uploaden

1. In Visuino: druk F9 of klik op de generatieknop om de Arduino-code te genereren en de Arduino IDE te openen
2. In de Arduino IDE: klik op Upload om te compileren en uploaden

Stap 12: Genieten van het resultaat

Gefeliciteerd! Het project is compleet. De bitmap beweegt nu over het ILI9341-scherm. Het volledige Visuino-diagram en het projectbestand (inclusief het Visuino-logo bitmap) zijn beschikbaar voor download: visuino.com