Arduino Uno: Bitmap Animation on ILI9341 TFT Touchscreen Display Shield With Visuino: 12 Steps (with Pictures)

2025 Forfatter: John Day | [email protected]. Sist endret: 2025-01-23 15:02

ILI9341 -baserte TFT -berøringsskjermskjermer er veldig populære billige skjermskjermer for Arduino. Visuino har hatt støtte for dem en stund, men jeg har aldri hatt sjansen til å skrive en veiledning om hvordan jeg bruker dem. Nylig stilte imidlertid få mennesker spørsmål om bruk av skjermer med Visuino, så jeg bestemte meg for å lage en opplæring.

I denne opplæringen vil jeg vise deg hvor enkelt det er å koble skjoldet til Arduino og programmere det med Visuino for å animere et bitmap for å bevege deg rundt på skjermen.

Trinn 1: Komponenter

1. Ett Arduino Uno -kompatibelt brett (Det kan også fungere med Mega, men jeg har ikke testet skjoldet med det ennå)
2. Ett ILI9341 2,4 "TFT berøringsskjermskjerm for Arduino

Trinn 2: Koble ILI9341 TFT Touchscreen Display Shield til Arduino

Plugg TFT -skjoldet på toppen av Arduino Uno som vist på bildene

Trinn 3: Start Visuino og legg til TFT -skjerm

For å begynne å programmere Arduino, må du ha Arduino IDE installert herfra:

Sørg for at du installerer 1.6.7 eller nyere, ellers fungerer ikke denne instruksen

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

1. Start Visuino som vist på det første bildet
2. Klikk på "Pil ned" -knappen på Arduino -komponenten for å åpne rullegardinmenyen (Bilde 1)
3. Velg "Legg til skjold …" på menyen (bilde 1)
4. I dialogboksen "Shields" utvider du kategorien "Displays", velger "TFT -fargeberøringsskjerm ILI9341 Shield", klikker deretter på "+" - knappen for å legge den til (Bilde 2)

Trinn 4: I Visuino: Legg til Draw Text Element for Text Shadow

Deretter må vi legge til grafikkelementer for å gjengi tekst og bitmap. Først vil vi legge til grafikkelement for å tegne skyggen av teksten:

1. I objektinspektøren klikker du på "…" -knappen ved siden av verdien for "Elements" -egenskapen til "TFT -skjerm" -elementet (bilde 1)
2. I Elements -editoren velger du "Draw Text", og klikker deretter på "+" - knappen (Bilde 2) for å legge til en (Bilde 3)
3. I Objektinspektøren angir verdien av "Farge" -egenskapen for "Tegn tekst1" -elementet til "aclSilver" (Bilde 3)
4. I Objektinspektøren setter du verdien av egenskapen "Størrelse" for "Tegn tekst1" til "4" (Bilde 4). Dette gjør teksten større
5. I Objektinspektøren angir verdien av "Tekst" -egenskapen for "Tegn tekst1" -elementet til "Visuino" (Bilde 5)
6. Sett i objektinspektøren verdien av "X" -egenskapen for "Tegn tekst1" -elementet til "43" (Bilde 6)
7. Sett i objektinspektøren verdien av "Y" -egenskapen for "Tegn tekst1" -elementet til "278" (Bilde 6)

Trinn 5: I Visuino: Legg til Draw Text Element for Text Foreground

Nå vil vi legge til grafikkelement for å tegne teksten:

1. Velg “Draw Text” i Elements -editoren, og klikk deretter på “+” - knappen (Bilde 1) for å legge til den andre (Bilde 2)
2. I Objektinspektøren setter du verdien av egenskapen "Størrelse" for "Tegn tekst1" til "4" (Bilde 2)
3. I Objektinspektøren angir verdien av "Tekst" -egenskapen for "Tegn tekst1" -elementet til "Visuino" (Bilde 3)
4. Sett i objektinspektøren verdien av "X" -egenskapen for "Tegn tekst1" -elementet til "40" (Bilde 4)
5. Sett i objektinspektøren verdien av "Y" -egenskapen til "Tegn tekst1" -elementet til "275" (Bilde 4)

Trinn 6: I Visuino: Legg til Draw Bitmap -element for animasjonen

Deretter legger vi til grafikkelement for å tegne bitmap:

1. Velg “Draw Bitmap” i Elements -editoren, og klikk deretter på “+” - knappen (Bilde 1) for å legge til en (Bilde 2)
2. I Object Inspector klikker du på "…" -knappen ved siden av verdien for "Bitmap" -egenskapen for "Draw Bitmap1" -elementet (Bilde 2) for å åpne "Bitmap Editor" (Bilde 3)
3. I "Bitmap Editor" klikker du på "Load …" -knappen (Bilde 3) for å åpne dialogboksen File Open (Bilde 4)
4. I dialogboksen Åpne fil, velg bitmappen du vil tegne, og klikk på "Åpne" -knappen (Bilde 4). Hvis filen er for stor, kan det hende at den ikke får plass i Arduino -minnet. Hvis du får ut av minnefeil under samlingen, må du kanskje velge et mindre bitmap
5. I "Bitmap Editor" klikker du på "OK". -knappen (Bilde 5) for å lukke dialogboksen

Trinn 7: I Visuino: Legg til Pins for X- og Y -egenskapene til Draw Bitmap -elementet

For å animere Bitmap må vi kontrollere X- og Y -posisjonen. For dette vil vi legge til pins for X- og Y -egenskapene:

1. I Object Inspector klikker du på "Pin" -knappen foran "X" -egenskapen til "Draw Bitmap1" -elementet (Bilde 1), og velger "Integer SinkPin" (Bilde 2)
2. I Object Inspector klikker du på "Pin" -knappen foran "Y" -egenskapen til "Draw Bitmap1" -elementet (Bilde 3), og velger "Integer SinkPin" (Bilde 4)

Trinn 8: I Visuino: Legg til 2 Heltall Sinusgeneratorer, og konfigurer den første

Vi vil bruke 2 heltall sinusgeneratorer for å animere bitmapbevegelsen:

1. Skriv "sinus" i filterboksen i komponentverktøykassen, velg deretter komponenten "Sinus heltallgenerator" (bilde 1), og slipp to av dem i designområdet
2. I Objektinspektøren setter du verdien av "Amplitude" -egenskapen til SineIntegerGenerator1 -komponenten til "96" (Bilde 2)
3. I Objektinspektøren setter du verdien av "Offset" -egenskapen til SineIntegerGenerator1 -komponenten til "96" (Bilde 3)
4. I Objektinspektøren setter du verdien av "Frequency" -egenskapen til SineIntegerGenerator1 -komponenten til "0,2" (Bilde 4)

Trinn 9: I Visuino: Konfigurer den andre sinusgeneratoren, og koble sinegeneratorene til X- og Y -koordinatpinnene i bitmappen

1. I Objektinspektøren setter du verdien av "Amplitude" -egenskapen til SineIntegerGenerator2 -komponenten til "120" (Bilde 1)
2. I Objektinspektøren setter du verdien av "Offset" -egenskapen til SineIntegerGenerator2 -komponenten til "120" (Bilde 2)
3. I Objektinspektøren setter du verdien av "Frequency" -egenskapen til SineIntegerGenerator2 -komponenten til "0,03" (Bilde 3)
4. Koble "Out" utgangspinnen til SineIntegerGenerator1 -komponenten til "X" -inngangen på "Shields. TFT Sisplay. Elements. Draw Bitmap1" -elementet til Arduino -komponenten (Bilde 4)
5. Koble "Out" utgangspinnen til SineIntegerGenerator2 -komponenten til "Y" -inngangen på "Shields. TFT Display. Elements. Draw Bitmap1" -elementet til Arduino -komponenten (Bilde 5)

Trinn 10: I Visuino: Legg til og koble til Start and Clock Multi Source Components

For å gjengi bitmap hver gang X- og Y -posisjonen oppdateres må vi sende et klokkesignal til elementet "Draw Bitmap1". For å sende kommandoen etter at posisjonene er endret, trenger vi en måte å synkronisere hendelsene. For dette vil vi bruke Repeat -komponenten for å konstant generere hendelser, og Clock Multi Source for å generere 2 hendelser i rekkefølge. Den første hendelsen vil klokke sinusgeneratorene for å oppdatere X- og Y -posisjonene, og den andre vil klokke "Draw Bitmap1":

1. Skriv "gjenta" i Filter -boksen i komponentverktøykassen, velg deretter "Gjenta" -komponenten (Bilde 1), og slipp den i designområdet (Bilde 2)
2. Skriv "multi" i Filter -boksen i komponentverktøykassen, velg deretter "Clock Multi Source" -komponenten (Bilde 2), og slipp den i designområdet (Bilde 3)
3. Koble "Out" utgangspinnen til Repeat1 -komponenten til "In" -inngangen på ClockMultiSource1 -komponenten (Bilde 3)
4. Koble "Pin [0]" utgangspinnen til "Out" -pinnene på ClockMultiSource1 -komponenten til "In" -inngangen på SineIntegerGenerator1 -komponenten (Bilde 4)
5. Koble "Pin [0]" utgangspinnen til "Out" -pinnene på ClockMultiSource2 -komponenten til "In" -inngangen på SineIntegerGenerator1 -komponenten (Bilde 5)
6. Koble "Pin [1]" utgangsstiften til "Clock" -inngangen på "Shields. TFT Display. Elements. Draw Bitmap1" -elementet til Arduino -komponenten (Bilde 6)

Trinn 11: Generer, kompiler og last opp Arduino -koden

1. I Visuino trykker du på F9 eller klikker på knappen som vises på bilde 1 for å generere Arduino -koden, og åpner Arduino IDE
2. I Arduino IDE klikker du på Last opp -knappen for å kompilere og laste opp koden (Bilde 2)

Trinn 12: Og spill …

Gratulerer! Du har fullført prosjektet.

Bildene 2, 3, 4 og 5 og videoen viser det tilkoblede og oppstartede prosjektet. Du vil se bitmapet bevege seg rundt det ILI9341 -baserte TFT -berøringsskjermskjermbildet som sett på videoen.

På bilde 1 kan du se det komplette Visuino -diagrammet. Også vedlagt er Visuino -prosjektet, som jeg laget for denne instruksjonsbiten, og bitmap med Visuino -logoen. Du kan laste den ned og åpne den i Visuino: