Bitmap-animatie op ILI9341 TFT Touchscreen Display Shield

Over dit project

Op ILI9341 gebaseerde TFT-touchscreenschermen zijn erg populair goedkope Display Shields voor Arduino . Visuino heeft al een tijdje ondersteuning voor hen, maar ik heb nooit de kans gehad om een ​​tutorial te schrijven over hoe ze te gebruiken. Onlangs stelden echter maar weinig mensen vragen over het gebruik van schermen met Visuino , dus besloot ik een tutorial te maken.

In deze zelfstudie laat ik je zien hoe eenvoudig het is om het schild te verbinden met Arduino , en programmeer het met Visuino om een ​​Bitmap te animeren om op het scherm te bewegen.

Stap 1:Componenten

• Eén Arduino Uno compatibel bord (het werkt misschien ook met Mega, maar ik heb het schild er nog niet mee getest)

• Eén ILI9341 2,4" TFT-touchscreen-schild voor Arduino

Stap 2:Sluit de ILI9341 TFT Touchscreen Display Shield aan op Arduino

Sluit het TFT-schild aan bovenop de Arduino Uno zoals op de foto's.

Stap 3:Start Visuino en voeg TFT Display Shield toe

Om te beginnen met het programmeren van de Arduino, heb je de Arduino IDE . nodig geïnstalleerd vanaf hier:http://www.arduino.cc/.

Zorg ervoor dat je 1.6.7 of hoger installeert, anders werkt deze tutorial niet!

De Visuino :https://www.visuino.com moet ook worden geïnstalleerd.

• Start Visuino zoals getoond in de eerste foto

• Klik op de "Pijl omlaag " knop van de Arduino-component om het vervolgkeuzemenu te openen (Afbeelding 1 )

• Selecteer in het menu "Schilden toevoegen... " (Afbeelding 1 )

• In de "Schilden " dialoogvenster vouw de "Beeldschermen . uit " categorie en selecteer de "TFT kleuren touchscreen ILI9341 Shield ", en klik vervolgens op de "+ " om het toe te voegen (Afbeelding 2 )

Stap 4:In Visuino:Teken tekstelement toevoegen voor de tekstschaduw

Vervolgens moeten we grafische elementen toevoegen om tekst en bitmap weer te geven. Eerst zullen we een grafisch element toevoegen om de schaduw van de tekst te tekenen:

• Klik in de Object Inspector op de "... " knop naast de waarde van de "Elementen " eigenschap van het "TFT-scherm " Element (Afbeelding 1 )

• Selecteer in de Elementen-editor "Tekst tekenen ”, en klik vervolgens op de "+ " knop (Afbeelding 2 ) om er een toe te voegen (Afbeelding 3 )

• Stel in de Object Inspector de waarde van de "Kleur . in " eigenschap van de "Tekst tekenen1 " element naar "aclSilver " (Afbeelding 3 )

• Stel in de Object Inspector de waarde van de "Grootte . in " eigenschap van de "Tekst tekenen1 " element naar "4 " (Afbeelding 4 ). Dit maakt de tekst groter

• Stel in de Object Inspector de waarde van de "Tekst . in " eigenschap van de "Tekst tekenen1 " element naar "Visuino " (Afbeelding 5 )

• Stel in de Object Inspector de waarde van de "X . in " eigenschap van de "Tekst tekenen1 " element naar "43 " (Afbeelding 6 )

• Stel in de Object Inspector de waarde van de "Y . in " eigenschap van de "Tekst tekenen1 " element naar "278 " (Afbeelding 6 )

Stap 5:In Visuino:Teken tekstelement toevoegen voor de tekstvoorgrond

Nu gaan we een grafisch element toevoegen om de tekst te tekenen:

• Selecteer in de Elementen-editor "Tekst tekenen ”, en klik vervolgens op de knop "" (Afbeelding 1 ) om de tweede toe te voegen (Afbeelding 2 )

• Stel in de Object Inspector de waarde van de "Grootte . in " eigenschap van de "Tekst tekenen1 " element naar "4 " (Afbeelding 2 )

• Stel in de Object Inspector de waarde van de "Tekst . in " eigenschap van de "Tekst tekenen1 " element naar "Visuino " (Afbeelding 3 )

• Stel in de Object Inspector de waarde van de "X . in " eigenschap van de "Tekst tekenen1 " element naar "40 " (Afbeelding 4 )

• Stel in de Object Inspector de waarde van de "Y . in " eigenschap van de "Tekst tekenen1 " element naar "275 " (Afbeelding 4 )

Stap 6:In Visuino:Draw Bitmap Element toevoegen voor de animatie

Vervolgens zullen we een grafisch element toevoegen om de bitmap te tekenen:

• Selecteer in de Elementen-editor "Bitmap tekenen ”, en klik vervolgens op de knop "" (Afbeelding 1 ) om er een toe te voegen (Afbeelding 2 )

• Klik in de Object Inspector op de "... " naast de waarde van de "Bitmap " eigenschap van de "Bitmap tekenen1 " Element (Afbeelding 2 ) om de "Bitmap-editor . te openen " (Afbeelding 3 )

• In de "Bitmap-editor " klik op de "Laden... " knop (Afbeelding 3 ) om het dialoogvenster Bestand openen te openen (Afbeelding 4 )

• Selecteer in het dialoogvenster Bestand openen de bitmap die u wilt tekenen en klik op de knop "Openen " knop (Afbeelding 4 ). Als het bestand te groot is, past het mogelijk niet in het Arduino-geheugen. Als u tijdens de compilatie onvoldoende geheugen krijgt, moet u mogelijk een kleinere bitmap selecteren

• In de "Bitmap-editor " klik op de "OK ."-knop (Afbeelding 5 ) om het dialoogvenster te sluiten

Stap 7:In Visuino:pinnen toevoegen voor de X- en Y-eigenschappen van het Draw Bitmap Element

Om de Bitmap te animeren, moeten we de X- en Y-positie regelen. Hiervoor zullen we pinnen voor de X- en Y-eigenschappen toevoegen:

• Klik in de Object Inspector op de "Pin " knop aan de voorkant van de "X " eigenschap van de "Bitmap tekenen1 " element (Afbeelding 1 ), en selecteer "Integer SinkPin " (Afbeelding 2 )

• Klik in de Object Inspector op de "Pin " knop voor de "Y " eigenschap van de "Bitmap tekenen1 " element (Afbeelding 3 ), en selecteer "Integer SinkPin " (Afbeelding 4 )

Stap 8:In Visuino:voeg 2 integer-sinusgeneratoren toe en configureer de eerste

We zullen 2 integer-sinusgeneratoren gebruiken om de bitmapbeweging te animeren:

• Typ "sinus " in het vak Filter van de Component Toolbox selecteer vervolgens de "Sinus Integer Generator " component (Afbeelding 1 ), en laat twee van hen vallen het in het ontwerpgebied

• Stel in de Object Inspector de waarde van de "Amplitude . in " eigenschap van de SineIntegerGenerator1 component naar "96 " (Afbeelding 2 )

• Stel in de Object Inspector de waarde in van de "Offset " eigenschap van de SineIntegerGenerator1 component naar "96 " (Afbeelding 3 )

• Stel in de Object Inspector de waarde van de "Frequentie . in " eigenschap van de SineIntegerGenerator1 component naar "0,2 " (Afbeelding 4 )

Stap 9:In Visuino:Configureer de tweede sinusgenerator en sluit de sinusgenerators aan op de X- en Y-coördinaatpinnen van de Bitmap

• Stel in de Object Inspector de waarde van de "Amplitude . in " eigenschap van de SineIntegerGenerator2 component naar "120 " (Afbeelding 1 )

• Stel in de Object Inspector de waarde in van de "Offset " eigenschap van de SineIntegerGenerator2 component naar "120 " (Afbeelding 2 )

• Stel in de Object Inspector de waarde van de "Frequentie . in " eigenschap van de SineIntegerGenerator2 component naar "0,03 " (Afbeelding 3 )

• Sluit de "Out . aan " output pin van de SineIntegerGenerator1 component naar de "X " invoerpin van de "Shields.TFT Sisplay.Elements.Draw Bitmap1 " element van de Arduino component (Afbeelding 4 )

• Sluit de "Out . aan " output pin van de SineIntegerGenerator2 component naar de "Y " invoerpin van de "Shields.TFT Display.Elements.Draw Bitmap1 " element van de Arduino component (Afbeelding 5 )

Stap 10:In Visuino:Start en Clock Multi Source-componenten toevoegen en aansluiten

Om de bitmap weer te geven telkens wanneer de X- en Y-positie worden bijgewerkt, moeten we een kloksignaal naar het "Draw Bitmap1" -element sturen. Om de opdracht te verzenden nadat de posities zijn gewijzigd, hebben we een manier nodig om de gebeurtenissen te synchroniseren. Hiervoor gebruiken we de Repeat-component om constant gebeurtenissen te genereren, en Clock Multi Source om 2 gebeurtenissen achter elkaar te genereren. De eerste gebeurtenis klokt de sinusgeneratoren om de X- en Y-posities bij te werken, en de tweede klokt de "Draw Bitmap1":

• Typ "herhaal " in het vak Filter van de Component Toolbox en selecteer vervolgens de optie "Herhalen " component (Afbeelding 1 ), en zet het neer in het ontwerpgebied (Afbeelding 2 )

• Typ "multi " in het vak Filter van de Component Toolbox en selecteer vervolgens de "Klok meerdere bronnen " component (Afbeelding 2 ), en zet het neer in het ontwerpgebied (Afbeelding 3 )

• Sluit de "Out . aan " output pin van de Repeat1 component naar de "In " invoerpin van de ClockMultiSource1 component (Afbeelding 3 )

• Verbind de "Pin[ 0 ] " output pin van de "Out " pinnen van de ClockMultiSource1 component naar de "In " invoerpin van de SineIntegerGenerator1 component (Afbeelding 4 )

• Verbind de "Pin[ 0 ] " output pin van de "Out " pinnen van de ClockMultiSource2 component naar de "In " invoerpin van de SineIntegerGenerator1 component (Afbeelding 5 )

• Verbind de "Pin[ 1 ] " output pin van de "Klok " invoerpin van de "Shields.TFT Display.Elements.Draw Bitmap1 " element van de Arduino component (Afbeelding 6 )

Stap 11:Genereer, compileer en upload de Arduino-code

• In Visuino , Druk op F9 of klik op de knop die wordt weergegeven op Afbeelding 1 om de Arduino-code te genereren en de Arduino IDE te openen

• In de Arduino IDE , klik op de Uploaden knop, om de code te compileren en te uploaden (Afbeelding 2 )

Stap 12:En speel...

Gefeliciteerd! Je hebt het project voltooid.

Afbeeldingen 2, 3, 4 en 5 en de Video laat het aangesloten en ingeschakelde project zien. U zult de Bitmap zien bewegen over het ILI9341-gebaseerde TFT Touchscreen Display Shield zoals te zien op de Video .

Op Afbeelding 1 je kunt de volledige Visuino . zien diagram.Ook bijgevoegd is de Visuino project, dat ik voor deze tutorial heb gemaakt, en de bitmap met de Visuino logo. Je kunt het downloaden en openen in Visuino :https://www.visuino.com