Arduino Uno: Bitmap animáció az ILI9341 TFT érintőképernyős kijelzővédőn Visuino -val: 12 lépés (képekkel)

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:43

Az ILI9341 alapú TFT érintőképernyős kijelzőpajzsok nagyon népszerűek olcsó kijelzőpajzsok az Arduino számára. Visuino már régóta támogatja őket, de soha nem volt alkalmam leírást készíteni a használatukról. A közelmúltban azonban kevesen tettek fel kérdéseket a Visuino kijelzőkkel való használatáról, ezért úgy döntöttem, hogy készítek egy oktatóanyagot.

Ebben az oktatóanyagban megmutatom, milyen egyszerű csatlakoztatni a pajzsot az Arduino -hoz, és programozni a Visuino -val, hogy animálja a Bitmap -ot a kijelzőn való mozgáshoz.

1. lépés: Alkatrészek

1. Egy Arduino Uno kompatibilis tábla (Mega esetén is működhet, de a pajzsot még nem teszteltem vele)
2. Egy ILI9341 2,4 hüvelykes TFT érintőképernyős pajzs az Arduino számára

2. lépés: Csatlakoztassa az ILI9341 TFT érintőképernyős kijelzővédőt az Arduino -hoz

Csatlakoztassa a TFT pajzsot az Arduino Uno tetejére, ahogy a képeken látható

3. lépés: Indítsa el a Visuino programot, és adjon hozzá TFT kijelzővédőt

Az Arduino programozásának megkezdéséhez telepítenie kell az Arduino IDE -t innen:

Győződjön meg arról, hogy az 1.6.7 -es vagy újabb verzióját telepítette, különben ez az utasítás nem fog működni

A Visuino: https://www.visuino.com webhelyet is telepíteni kell.

1. Indítsa el Visuino -t az első képen látható módon
2. A legördülő menü megnyitásához kattintson az Arduino komponens "Lefelé mutató nyíl" gombjára (1. kép)
3. A menüben válassza a „Pajzsok hozzáadása…” lehetőséget (1. kép)
4. A "Pajzsok" párbeszédpanelen bontsa ki a "Kijelzők" kategóriát, és válassza ki a "TFT színes érintőképernyős ILI9341 pajzs" lehetőséget, majd kattintson a "+" gombra a hozzáadáshoz (2. kép)

4. lépés: Visuino programban: Rajzszöveg elem hozzáadása a szövegárnyékhoz

Ezután grafikus elemeket kell hozzáadnunk a szöveg és a bitkép megjelenítéséhez. Először grafikus elemet adunk hozzá a szöveg árnyékának rajzolásához:

1. Az Objektumfelügyelőben kattintson a "…" gombra a "TFT kijelző" elem "Elemek" tulajdonsága értéke mellett (1. kép)
2. Az Elements szerkesztőben válassza a „Szöveg rajzolása” lehetőséget, majd kattintson a „+” gombra (2. kép) egy hozzáadásához (3. kép)
3. Az Objektumfelügyelőben állítsa a "Szöveg rajzolása" elem "Szín" tulajdonságának értékét "aclSilver" értékre (3. kép)
4. Az Objektumfelügyelőben állítsa a "Szöveg rajzolása" elem "Méret" tulajdonságának értékét "4" -re (4. kép). Így nagyobb lesz a szöveg
5. Az Objektumvizsgálóban állítsa a "Szöveg rajzolása" elem "Szöveg" tulajdonságának értékét "Visuino" értékre (5. kép)
6. Az Objektumvizsgálóban állítsa a "Szöveg rajzolása" elem "X" tulajdonságának értékét "43" -ra (6. kép)
7. Az Objektumvizsgálóban állítsa a "Szöveg rajzolása" elem "Y" tulajdonságának értékét "278" értékre (6. kép)

5. lépés: Visuino programban: Rajzszöveg elem hozzáadása a szöveg előtérhez

Most grafikai elemet adunk hozzá a szöveg rajzolásához:

1. Az Elements szerkesztőben válassza a „Szöveg rajzolása” lehetőséget, majd kattintson a „+” gombra (1. kép) a második hozzáadásához (2. kép)
2. Az Objektumvizsgálóban állítsa a "Szöveg rajzolása" elem "Méret" tulajdonságának értékét "4" értékre (2. kép)
3. Az Objektumfelügyelőben állítsa a "Szöveg rajzolása" elem "Szöveg" tulajdonságának értékét "Visuino" értékre (3. kép)
4. Az Objektumvizsgálóban állítsa a "Szöveg rajzolása" elem "X" tulajdonságának értékét "40" értékre (4. kép)
5. Az Objektumvizsgálóban állítsa a "Szöveg rajzolása" elem "Y" tulajdonságának értékét "275" értékre (4. kép)

6. lépés: Visuino programban: Rajz Bitmap elem hozzáadása az animációhoz

Ezután grafikai elemet adunk hozzá a bitkép elkészítéséhez:

1. Az Elements szerkesztőben válassza a „Bitmap rajzolása” lehetőséget, majd kattintson a „+” gombra (1. kép) egy hozzáadásához (2. kép)
2. Az Objektumellenőrben kattintson a "…" gombra a "Bitmap1" elem "Bitmap" tulajdonsága értéke mellett (2. kép) a "Bitmap Editor" megnyitásához (3. kép)
3. A "Bitmap Editorban" kattintson a "Load …" gombra (3. kép) a Fájl megnyitása párbeszédpanel megnyitásához (4. kép)
4. A Fájl megnyitása párbeszédpanelen válassza ki a rajzolni kívánt bitképet, majd kattintson a "Megnyitás" gombra (4. kép). Ha a fájl túl nagy, előfordulhat, hogy nem fér el az Arduino memóriájában. Ha a fordítás során kimerül a memóriahiba, előfordulhat, hogy ki kell választania egy kisebb bitképet
5. A "Bitmap Editorban" kattintson az "OK" gombra. gombot (5. kép) a párbeszédablak bezárásához

7. lépés: Visuino programban: Adjon hozzá csapokat a Draw Bitmap elem X és Y tulajdonságaihoz

A Bitmap animálásához szabályoznunk kell az X és Y pozícióját. Ehhez hozzáadunk csapokat az X és Y tulajdonságokhoz:

1. Az Objektumfelügyelőben kattintson a "Pin" gombra a "Bit Bitmap1" elem "X" tulajdonsága előtt (1. kép), és válassza az "Integer SinkPin" lehetőséget (2. kép)
2. Az Objektumfelügyelőben kattintson a "Pin" gombra a "Bit Bitmap1" elem "Y" tulajdonsága előtt (3. kép), és válassza az "Integer SinkPin" lehetőséget (4. kép)

8. lépés: Visuino programban: Adjon hozzá 2 egész szinuszgenerátort, és konfigurálja az elsőt

2 egész szinuszgenerátort fogunk használni a bitkép mozgásának animálásához:

1. Írja be a "szinusz" -t a Komponens eszköztár Szűrő mezőjébe, majd válassza ki a "Szinusz egész generátor" összetevőt (1. kép), és ejtsen kettőt a tervezési területre
2. Az Object Inspectorban állítsa a SineIntegerGenerator1 összetevő "Amplitude" tulajdonságának értékét "96" értékre (2. kép)
3. Az Object Inspectorban állítsa a SineIntegerGenerator1 komponens "Offset" tulajdonságát "96" értékre (3. kép)
4. Az Object Inspectorban állítsa a SineIntegerGenerator1 komponens "Frequency" tulajdonságának értékét "0.2" értékre (4. kép)

9. lépés: Visuino programban: Konfigurálja a második szinuszgenerátort, és csatlakoztassa a szinuszgenerátorokat a bitkép X és Y koordinátacsapjaihoz

1. Az Object Inspectorban állítsa a SineIntegerGenerator2 összetevő "Amplitude" tulajdonságának értékét "120" értékre (1. kép)
2. Az Object Inspectorban állítsa a SineIntegerGenerator2 komponens "Offset" tulajdonságát "120" értékre (2. kép)
3. Az Object Inspectorban állítsa a SineIntegerGenerator2 komponens "Frequency" tulajdonságának értékét "0.03" értékre (3. kép)
4. Csatlakoztassa a SineIntegerGenerator1 komponens "Out" kimeneti csapját az Arduino komponens "Shields. TFT Sisplay. Elements. Draw Bitmap1" elemének "X" bemeneti tűjéhez (4. kép)
5. Csatlakoztassa a SineIntegerGenerator2 komponens "Out" kimeneti tüskéjét az Arduino komponens "Shields. TFT Display. Elements. Draw Bitmap1" elemének "Y" bemeneti tűjéhez (5. kép)

10. lépés: Visuino programban: Adja hozzá és csatlakoztassa a Start és Óra több forrásból összetevőket

Ahhoz, hogy a bitkép minden alkalommal, amikor az X és Y pozíció frissítésre kerüljön, órajelet kell küldenünk a "Bitmap1 rajzolása" elemre. A parancs elküldéséhez a pozíciók megváltoztatása után szükségünk van az események szinkronizálásának módjára. Ehhez az Ismétlés komponenst használjuk az események folyamatos generálásához, és az Óra több forrást a két esemény egymás utáni generálásához. Az első esemény a szinuszgenerátorokat fogja figyelni az X és Y pozíció frissítésére, a második pedig a "Bittérkép1 rajzolása":

1. Írja be az "ismétlés" parancsot a Komponens eszköztár Szűrő mezőjébe, majd válassza ki az "Ismétlés" összetevőt (1. kép), és dobja a tervezési területre (2. kép)
2. Írja be a "multi" parancsot a Component Toolbox Filter mezőjébe, majd válassza ki a "Clock Multi Source" összetevőt (2. kép), és dobja a tervezési területre (3. kép)
3. Csatlakoztassa a Repeat1 komponens "Out" kimeneti érintkezőjét a ClockMultiSource1 komponens "In" bemeneti tűjéhez (3. kép)
4. Csatlakoztassa a ClockMultiSource1 komponens "Out" csapjainak "Pin [0]" kimeneti csapját a SineIntegerGenerator1 komponens "In" bemeneti tűjéhez (4. kép)
5. Csatlakoztassa a ClockMultiSource2 komponens "Out" csapjainak "Pin [0]" kimeneti tűjét a SineIntegerGenerator1 komponens "In" bemeneti tűjéhez (5. kép)
6. Csatlakoztassa az Arduino komponens "Shields. TFT Display. Elements. Draw Bitmap1" elemének "Clock" bemeneti csapjának "Pin [1]" kimeneti tűjét (6. kép)

11. lépés: Az Arduino kód létrehozása, fordítása és feltöltése

1. Visuino esetén nyomja meg az F9 billentyűt, vagy kattintson az 1. képen látható gombra az Arduino kód létrehozásához, és nyissa meg az Arduino IDE -t
2. Az Arduino IDE -ben kattintson a Feltöltés gombra a kód összeállításához és feltöltéséhez (2. kép)

12. lépés: és játssz…

Gratulálunk! Befejezte a projektet.

A 2., 3., 4. és 5. kép és a videó a csatlakoztatott és bekapcsolt projektet mutatja. Látni fogja, hogy a Bitmap mozog az ILI9341 alapú TFT érintőképernyős kijelzőpajzs körül, amint a videón látható.

Az 1. képen a teljes Visuino diagram látható. Mellékelve a Visuino projekt, amelyet ehhez az Instructable -hoz készítettem, és a Visuino logóval ellátott bittérkép. Letöltheti és megnyithatja a Visuino -ból: