Arduino Uno: Bitmap -animation på ILI9341 TFT Touchscreen Display Shield With Visuino: 12 trin (med billeder)

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:29

ILI9341 -baserede TFT Touchscreen Display Shields er meget populære billige Display Shields til Arduino. Visuino har haft support til dem i et stykke tid, men jeg har aldrig haft mulighed for at skrive en vejledning om, hvordan man bruger dem. For nylig stillede der dog få mennesker spørgsmål om brug af skærme med Visuino, så jeg besluttede at lave en tutorial.

I denne vejledning vil jeg vise dig, hvor let det er at forbinde skjoldet til Arduino og programmere det med Visuino for at animere et bitmap til at flytte rundt på skærmen.

Trin 1: Komponenter

1. Et Arduino Uno -kompatibelt kort (Det kan også fungere med Mega, men jeg har ikke testet skjoldet med det endnu)
2. Et ILI9341 2,4 "TFT touchscreen -skærm til Arduino

Trin 2: Tilslut ILI9341 TFT Touchscreen Display Shield til Arduino

Sæt TFT -skærmen oven på Arduino Uno som vist på billederne

Trin 3: Start Visuino, og tilføj TFT -skærm

For at starte programmeringen af Arduino skal du have Arduino IDE installeret herfra:

Sørg for, at du installerer 1.6.7 eller højere, ellers fungerer denne instruks ikke

Visuino: https://www.visuino.com skal også installeres.

1. Start Visuino som vist på det første billede
2. Klik på knappen "Pil ned" på Arduino -komponenten for at åbne rullemenuen (billede 1)
3. Vælg "Tilføj skjold …" i menuen (billede 1)
4. I dialogboksen "Shields" udvides kategorien "Displays", og vælger "TFT Color Touch Screen Display ILI9341 Shield", klik derefter på knappen "+" for at tilføje det (billede 2)

Trin 4: I Visuino: Tilføj Draw Text Element til tekstskyggen

Dernæst skal vi tilføje grafikelementer for at gengive tekst og bitmap. Først tilføjer vi grafikelement for at tegne skyggen af teksten:

1. I Object Inspector skal du klikke på knappen "…" ved siden af værdien af egenskaben "Elements" for "TFT Display" -elementet (billede 1)
2. I Elements -editoren skal du vælge "Tegn tekst", og derefter klikke på knappen "+" (billede 2) for at tilføje en (billede 3)
3. Indstil værdien af egenskaben "Farve" i elementet "Tegn tekst1" til Objektinspektør til "aclSilver" (billede 3)
4. Indstil værdien af egenskaben "Størrelse" i elementet "Tegn tekst1" til Objektinspektøren til "4" (billede 4). Dette gør teksten større
5. Indstil værdien af egenskaben "Tekst" i elementet "Tegn tekst1" til "Visuino" i objektinspektøren (billede 5)
6. Indstil værdien af egenskaben "X" i elementet "Tegn tekst1" til "43" i objektinspektøren (billede 6)
7. Indstil værdien af egenskaben "Y" for elementet "Tegn tekst1" til "278" i objektinspektøren (billede 6)

Trin 5: I Visuino: Tilføj Draw Text Element til tekstforgrunden

Nu tilføjer vi grafikelement for at tegne teksten:

1. I Elements -editoren skal du vælge "Tegn tekst", og derefter klikke på knappen "+" (billede 1) for at tilføje den anden (billede 2)
2. Indstil værdien af egenskaben "Størrelse" i elementet "Tegn tekst1" til "4" i objektinspektøren (billede 2)
3. Indstil værdien af egenskaben "Tekst" i elementet "Tegn tekst1" til "Visuino" i objektinspektøren (billede 3)
4. Indstil værdien af egenskaben "X" i elementet "Tegn tekst1" til "40" i objektinspektøren (billede 4)
5. I objektinspektøren skal værdien af egenskaben "Y" for elementet "Tegn tekst1" til "275" (billede 4)

Trin 6: I Visuino: Tilføj Draw Bitmap -element til animationen

Dernæst tilføjer vi grafikelement for at tegne bitmap:

1. I Elements -editoren vælg “Draw Bitmap”, og klik derefter på knappen “+” (billede 1) for at tilføje en (billede 2)
2. I objektinspektøren skal du klikke på knappen "…" ved siden af værdien af egenskaben "Bitmap" i "Draw Bitmap1" -elementet (billede 2) for at åbne "Bitmap Editor" (billede 3)
3. I "Bitmap Editor" skal du klikke på knappen "Indlæs …" (billede 3) for at åbne dialogboksen Filåbning (billede 4)
4. I dialogboksen Åbn fil skal du vælge det bitmap, der skal tegnes, og klikke på knappen "Åbn" (billede 4). Hvis filen er for stor, kan den muligvis ikke passe i Arduino -hukommelsen. Hvis du kommer ud af hukommelsesfejl under kompilering, skal du muligvis vælge et mindre bitmap
5. Klik på "OK" i "Bitmap Editor". knappen (Billede 5) for at lukke dialogboksen

Trin 7: I Visuino: Tilføj stifter til X- og Y -egenskaberne i Draw Bitmap -elementet

For at animere bitmapet skal vi kontrollere dets X- og Y -position. Til dette tilføjer vi stifter til X- og Y -egenskaberne:

1. I Object Inspector klikker du på knappen "Pin" foran "X" -egenskaben for "Draw Bitmap1" -elementet (billede 1), og vælger "Integer SinkPin" (billede 2)
2. I Object Inspector klikker du på knappen "Pin" foran "Y" -egenskaben for "Draw Bitmap1" -elementet (billede 3), og vælger "Integer SinkPin" (billede 4)

Trin 8: I Visuino: Tilføj 2 heltal sinusgeneratorer, og konfigurer den første

Vi vil bruge 2 heltal sinusgeneratorer til at animere bitmapbevægelsen:

1. Skriv "sinus" i filterboksen i komponentværktøjskassen, vælg derefter komponenten "Sinus heltalsgenerator" (billede 1), og slip to af dem i designområdet
2. I objektinspektøren skal du indstille værdien af egenskaben "Amplitude" for komponenten SineIntegerGenerator1 til "96" (billede 2)
3. I Object Inspector skal du indstille værdien af egenskaben "Offset" for SineIntegerGenerator1 -komponenten til "96" (billede 3)
4. I objektinspektøren skal du indstille værdien af egenskaben "Frekvens" for komponenten SineIntegerGenerator1 til "0,2" (billede 4)

Trin 9: I Visuino: Konfigurer den anden sinusgenerator, og tilslut sinusgeneratorerne til X- og Y -koordinatpinnene i bitmappen

1. I objektinspektøren skal du indstille værdien af egenskaben "Amplitude" for komponenten SineIntegerGenerator2 til "120" (billede 1)
2. I Object Inspector skal du indstille værdien af egenskaben "Offset" for komponenten SineIntegerGenerator2 til "120" (billede 2)
3. I objektinspektøren skal du indstille værdien af egenskaben "Frekvens" for komponenten SineIntegerGenerator2 til "0,03" (billede 3)
4. Tilslut "Out" output pin på SineIntegerGenerator1 komponenten til "X" input pin på "Shields. TFT Sisplay. Elements. Draw Bitmap1" elementet i Arduino komponenten (Billede 4)
5. Tilslut "Out" output pin på SineIntegerGenerator2 komponenten til "Y" input pin på "Shields. TFT Display. Elements. Draw Bitmap1" elementet i Arduino komponenten (Billede 5)

Trin 10: I Visuino: Tilføj og tilslut Start and Clock Multi Source Components

For at gengive bitmap hver gang X- og Y -positionen opdateres, skal vi sende et ur -signal til elementet "Draw Bitmap1". For at sende kommandoen, efter at positionerne er blevet ændret, har vi brug for en måde at synkronisere begivenhederne. Til dette vil vi bruge Repeat -komponenten til konstant at generere hændelser, og Clock Multi Source til at generere 2 hændelser i rækkefølge. Den første begivenhed vil sætte sinusgeneratorerne i uret for at opdatere X- og Y -positionerne, og den anden vil uret "Draw Bitmap1":

1. Skriv "gentag" i filterboksen i komponentværktøjskassen, vælg derefter "Gentag" -komponenten (billede 1), og slip den i designområdet (billede 2)
2. Skriv "multi" i filterboksen i komponentværktøjskassen, vælg derefter "Clock Multi Source" -komponenten (billede 2), og slip den i designområdet (billede 3)
3. Tilslut "Out" output pin på Repeat1 komponenten til "In" input pin på ClockMultiSource1 komponenten (billede 3)
4. Tilslut "Pin [0]" output pin på "Out" pins på ClockMultiSource1komponenten til "In" input pin på SineIntegerGenerator1 komponenten (Billede 4)
5. Tilslut "Pin [0]" output pin på "Out" pins på ClockMultiSource2komponenten til "In" input pin på SineIntegerGenerator1 komponenten (Billede 5)
6. Tilslut "Pin [1]" output pin på "Clock" input pin på "Shields. TFT Display. Elements. Draw Bitmap1" elementet i Arduino komponenten (Billede 6)

Trin 11: Generer, kompiler og upload Arduino -koden

1. I Visuino skal du trykke på F9 eller klikke på knappen vist på billede 1 for at generere Arduino -koden, og åbne Arduino IDE
2. I Arduino IDE skal du klikke på knappen Upload for at kompilere og uploade koden (billede 2)

Trin 12: Og spil …

Tillykke! Du har afsluttet projektet.

Billeder 2, 3, 4 og 5 og videoen viser det tilsluttede og tændte projekt. Du vil se Bitmap bevæge sig rundt om det ILI9341 -baserede TFT Touchscreen Display Shield som det ses på videoen.

På billede 1 kan du se det komplette Visuino -diagram. Også vedhæftet er Visuino -projektet, som jeg har oprettet til denne Instructable, og bitmap med Visuino -logoet. Du kan downloade og åbne den i Visuino: