Arduino Uno: Bitmap -animering på ILI9341 TFT -pekskärmskärm med Visuino: 12 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:46

ILI9341 -baserade TFT -pekskärmskärmar är mycket populära billiga skärmar för Arduino. Visuino har haft stöd för dem ett bra tag, men jag hade aldrig chansen att skriva en handledning om hur jag använder dem. Nyligen ställde dock få människor frågor om hur man använder skärmar med Visuino, så jag bestämde mig för att göra en självstudie.

I denna handledning kommer jag att visa dig hur enkelt det är att ansluta skölden till Arduino och programmera den med Visuino för att animera en bitmapp för att flytta runt på skärmen.

Steg 1: Komponenter

1. Ett Arduino Uno -kompatibelt kort (det kan fungera med Mega också, men jag har inte testat skölden med det än)
2. Ett ILI9341 2,4 "TFT pekskärmskydd för Arduino

Steg 2: Anslut ILI9341 TFT pekskärmskärm till Arduino

Anslut TFT -skärmen ovanpå Arduino Uno som visas på bilderna

Steg 3: Starta Visuino och lägg till TFT -skärm

För att börja programmera Arduino måste du ha Arduino IDE installerat härifrån:

Se till att du installerar 1.6.7 eller högre, annars fungerar inte denna instruktionsbok

Visuino: https://www.visuino.com måste också installeras.

1. Starta Visuino som visas på den första bilden
2. Klicka på "pil ned" -knappen på Arduino -komponenten för att öppna rullgardinsmenyn (bild 1)
3. Välj "Lägg till sköldar" på menyn (bild 1)
4. I dialogrutan "Sköldar" expanderar du kategorin "Skärmar" och väljer "TFT -färgpekskärmsdisplay ILI9341 -sköld", klicka sedan på "+" -knappen för att lägga till den (bild 2)

Steg 4: I Visuino: Lägg till Draw Text Element för Text Shadow

Därefter måste vi lägga till grafikelement för att återge text och bitmapp. Först lägger vi till grafikelement för att rita textens skugga:

1. I objektinspektören klickar du på "…" -knappen bredvid värdet för egenskapen "Elements" för "TFT -skärm" -elementet (bild 1)
2. I Elements -redigeraren väljer du "Rita text" och klickar sedan på "+" - knappen (bild 2) för att lägga till en (bild 3)
3. I Objektinspektören ställer du in värdet för egenskapen "Färg" för elementet "Rita text1" till "aclSilver" (bild 3)
4. I Objektinspektören ställer du in värdet för egenskapen "Storlek" för "Rita text1" till "4" (bild 4). Detta gör texten större
5. I objektinspektören ställer du in värdet för egenskapen "Text" för "Rita text1" till "Visuino" (bild 5)
6. I objektinspektören ställer du in värdet för "X" -egenskapen för "Draw Text1" -elementet till "43" (bild 6)
7. I objektinspektören ställer du in värdet för "Y" -egenskapen för "Draw Text1" -elementet till "278" (bild 6)

Steg 5: I Visuino: Lägg till Draw Text Element för textförgrunden

Nu lägger vi till grafikelement för att rita texten:

1. I Elements -redigeraren väljer du "Rita text" och klickar sedan på "+" - knappen (bild 1) för att lägga till den andra (bild 2)
2. I objektinspektören ställer du in värdet för egenskapen "Storlek" för "Rita text1" till "4" (bild 2)
3. I objektinspektören ställer du in värdet för egenskapen "Text" för "Rita text1" till "Visuino" (bild 3)
4. I objektinspektören ställer du in värdet för "X" -egenskapen för "Draw Text1" -elementet till "40" (bild 4)
5. I objektinspektören ställer du in värdet på "Y" -egenskapen för "Rita text1" -elementet till "275" (bild 4)

Steg 6: I Visuino: Lägg till Draw Bitmap -element för animationen

Därefter lägger vi till grafikelement för att rita bitmappen:

1. I Elements -redigeraren väljer du "Draw Bitmap" och klickar sedan på knappen "+" (bild 1) för att lägga till en (bild 2)
2. I Objektinspektören klickar du på "…" -knappen bredvid värdet för "Bitmap" -egenskapen för "Draw Bitmap1" -elementet (bild 2) för att öppna "Bitmap Editor" (bild 3)
3. I "Bitmap Editor" klickar du på knappen "Ladda …" (bild 3) för att öppna dialogrutan File Open (bild 4)
4. I dialogrutan Öppna fil, välj den bitmapp som ska ritas och klicka på knappen "Öppna" (bild 4). Om filen är för stor kanske den inte får plats i Arduino -minnet. Om du får bort minnesfelet under sammanställningen kan du behöva välja en mindre bitmapp
5. Klicka på "OK" i "Bitmap Editor". -knappen (bild 5) för att stänga dialogrutan

Steg 7: I Visuino: Lägg till pins för X- och Y -egenskaperna för Draw Bitmap -elementet

För att animera bitmappen måste vi kontrollera dess X- och Y -position. För detta kommer vi att lägga till stift för X- och Y -egenskaperna:

1. I Object Inspector klickar du på "Pin" -knappen framför "X" -egenskapen för "Draw Bitmap1" -elementet (bild 1) och väljer "Integer SinkPin" (bild 2)
2. I Object Inspector klickar du på knappen "Pin" framför "Y" -egenskapen för "Draw Bitmap1" -elementet (bild 3) och väljer "Integer SinkPin" (bild 4)

Steg 8: I Visuino: Lägg till 2 heltalssine -generatorer och konfigurera den första

Vi kommer att använda 2 heltal sinusgeneratorer för att animera bitmappsrörelsen:

1. Skriv "sinus" i rutan Filter i komponentverktygslådan och välj sedan komponenten "Sinus heltalsgenerator" (bild 1) och släpp två av dem i designområdet
2. I objektinspektören ställer du in värdet för egenskapen "Amplitude" för komponenten SineIntegerGenerator1 till "96" (bild 2)
3. I objektinspektören ställer du in värdet för egenskapen "Offset" för komponenten SineIntegerGenerator1 till "96" (bild 3)
4. I objektinspektören ställer du in värdet för egenskapen "Frekvens" för komponenten SineIntegerGenerator1 till "0,2" (bild 4)

Steg 9: I Visuino: Konfigurera den andra sinusgeneratorn och anslut sinusgeneratorerna till X- och Y -koordinatstiftet för bitmappen

1. I objektinspektören ställer du in värdet för egenskapen "Amplitude" för komponenten SineIntegerGenerator2 till "120" (bild 1)
2. I objektinspektören ställer du in värdet för egenskapen "Offset" för komponenten SineIntegerGenerator2 till "120" (bild 2)
3. I objektinspektören ställer du in värdet för egenskapen "Frekvens" för komponenten SineIntegerGenerator2 till "0,03" (bild 3)
4. Anslut "Out" -uttaget på SineIntegerGenerator1 -komponenten till "X" -ingången på "Shields. TFT Sisplay. Elements. Draw Bitmap1" -elementet på Arduino -komponenten (bild 4)
5. Anslut "Out" -uttaget på SineIntegerGenerator2 -komponenten till "Y" -ingången på elementet "Shields. TFT Display. Elements. Draw Bitmap1" på Arduino -komponenten (bild 5)

Steg 10: I Visuino: Lägg till och anslut Start och klocka flera källkomponenter

För att återge bitmappen varje gång X- och Y -positionen uppdateras måste vi skicka en klocksignal till elementet "Draw Bitmap1". För att skicka kommandot efter att positionerna har ändrats behöver vi ett sätt att synkronisera händelserna. För detta kommer vi att använda Repeat -komponenten för att ständigt generera händelser och Clock Multi Source för att generera två händelser i följd. Den första händelsen klockar sinusgeneratorerna för att uppdatera X- och Y -positionerna, och den andra kommer att klocka på "Draw Bitmap1":

1. Skriv "repeat" i rutan Filter i komponentverktygslådan, välj sedan "Repeat" -komponenten (bild 1) och släpp den i designområdet (bild 2)
2. Skriv "multi" i rutan Filter i komponentverktygslådan, välj sedan "Clock Multi Source" -komponenten (bild 2) och släpp den i designområdet (bild 3)
3. Anslut utgångsstiftet "Out" på Repeat1 -komponenten till ingångsstiftet "In" på ClockMultiSource1 -komponenten (bild 3)
4. Anslut utgångsstiftet "Pin [0]" på "Out" -stiften på ClockMultiSource1 -komponenten till ingångsstiftet "In" på komponenten SineIntegerGenerator1 (bild 4)
5. Anslut utgångsstiftet "Pin [0]" på "Out" -stiften på ClockMultiSource2 -komponenten till ingångsstiftet "In" på komponenten SineIntegerGenerator1 (bild 5)
6. Anslut utgångsstiftet "Pin [1]" på ingångsstiftet "Clock" på elementet "Shields. TFT Display. Elements. Draw Bitmap1" på Arduino -komponenten (bild 6)

Steg 11: Generera, kompilera och ladda upp Arduino -koden

1. I Visuino, tryck på F9 eller klicka på knappen som visas på bild 1 för att generera Arduino -koden och öppna Arduino IDE
2. I Arduino IDE klickar du på knappen Upload för att kompilera och ladda upp koden (bild 2)

Steg 12: Och spela …

Grattis! Du har slutfört projektet.

Bilderna 2, 3, 4 och 5 och videon visar det anslutna och uppstartade projektet. Du kommer att se bitmappen flytta runt den ILI9341 -baserade TFT -pekskärmsskärmen som visas på videon.

På bild 1 kan du se det fullständiga Visuino -diagrammet. Visuino -projektet som jag skapade för denna instruktionsboken bifogades också och bitmappen med Visuino -logotypen. Du kan ladda ner och öppna den i Visuino: