BluBerriSix - TFT érintőképernyő / Arduino bemutató: 12 lépés (képekkel)

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

2019 a 20 éves a RIM Blackberry 850! Ez a kis kanadai találmány megváltoztatta a világ kommunikációját. Rég elmúlt, de öröksége folytatódik!

Ebben az utasításban megtanulhatja, hogyan kell használni az MCUfriend.com 2,4 hüvelykes TFT kijelzővédőjét az Uno/Mega készülékhez. Megtanulja megjeleníteni a grafikus objektumokat és szöveget, valamint az érintések fogadását és az érintéses eseményeket. képernyő nagyon hasonlít az Adafruithoz és más TFT pajzsokhoz/képernyőkhöz.

Felépítjük a bluBerriSIX vázlatom egyszerűsített 2 alkalmazás verzióját.

Lássunk neki!

1. lépés: BluBerriSIX - Áttekintés

A bluBerriSIX alkalmazás egy hat funkciós TFT projekt.

Magába foglalja:

Zseblámpa

Egy mulatságos „7” alkalmazás (mint egy varázslatos „8” labda)

Egy számológép

Távolságmérő alkalmazás az SR-04 ultrahangos távolságérzékelő segítségével

Hőmérséklet és páratartalom alkalmazás, amely valós idejű adatgyűjtést is végez akár 1,5 km-re a HC-12 adó-vevővel

Üzenetküldő alkalmazás a HC-12 használatával.

Ez a projekt 1100 sornyi kódot vett igénybe. Létrehozunk egy lényegesen egyszerűbb verziót, amely továbbra is a TFT kijelző és az érintésérzékelési koncepciókat mutatja be.

2. lépés: Mi szükséges?

- Egy Arduino Uno vagy Mega 2560

- Egy MCUfriend 2,4 hüvelykes TFT pajzs

A következő könyvtárak:

- Adafruit_GFX könyvtár

- Adafruit érintőképernyős könyvtár

- MCUFRIEND_kbv könyvtár

Ezek a könyvtárak az Arduino IDE könyvtárkezelőjével telepíthetők.

Könyvtár betöltéséhez lépjen a Vázlat -> Könyvtár felvétele -> Könyvtárak kezelése… menüpontra.

A „keresés szűrése…” mezőbe írja be a könyvtár nevének első néhány karakterét, majd válassza ki és telepítse a megfelelő könyvtárat. Ha elkészült, térjen vissza a képernyőről.

Amikor a TFT pajzsot az Uno/Mega készülékre szereli, NAGYON Óvatosan győződjön meg arról, hogy megfelelően illeszti a csapokat. Rosszul igazítottam az első pajzsomat, és megsütöttem. Két hétig növekvő csalódottsággal töltöttem a megfelelő könyvtárakat, mielőtt rájöttem, hogy a képernyő halott. LÉGY ÓVATOS

3. lépés: Projektünk

Felépítjük a bluBerriSIX vázlat egyszerűbb verzióját.

Lesz benne, - fröccsenő képernyő

- egy főmenü képernyő két gombbal

- Saucy 7 alkalmazás

- egyszerűsített szövegbeviteli alkalmazás

A főmenübe a képernyő bal alsó sarkában található "Kezdőlap" ikon megnyomásával is visszatérhet. Ha nincs ilyen ikonja, akkor csak meg kell határoznia a képernyő „otthoni” régióját. Ebben az oktatóanyagban megtudhatja, hogyan kell meghatározni a képernyő érintési régióit.

Bár ez egy egyszerűsített projekt, még mindig meglehetősen hosszú. Minden nagyobb szakaszban megadom az Arduino -vázlatok verzióit, hogy fel tudja őket tölteni, ha szeretné.

4. lépés: Fejléc kód, globális változók, képernyő beállítása

Az egész projekt magasan dokumentált. De a részletek következnek.

Indítson el egy friss Arduino projektet, és nevezze „tft demo” -nak vagy más tetszőleges névnek.

A fenti első kódpanel bemutatja a globális változók meghatározását. Hozzáadjuk azokat a könyvtárakat is, amelyeket használni kell a képernyő megjelenítési funkciójához és a képernyő érintésérzékeléséhez.

Az analóg csapokat a képernyő-specifikus céljaikra hivatkozva is definiáljuk.

A tft objektumot (kijelző) és a ts objektumot (érintés) hivatkozásként definiáljuk a funkcióikhoz.

Körülbelül 16 bites színállandókat definiálunk, hogy megkönnyítsük a képernyő, valamint a szöveges és grafikus objektumok színeinek megjelenítését. Észre fogja venni, hogy van egy URL egy olyan webhelyhez, amely rendelkezik színválasztóval és átalakítóval, hogy a látható színeket 16 bites hexadecimális értékké alakítsa át. Ez egy nagyon hasznos eszköz.

A második kódpanelen az alkalmazásspecifikus céljainkhoz definiáljuk a globális változókat.

A cString, letter and letterX és letterY karakterláncok és tömbök a) a szövegbeviteli alkalmazás gombjain megjelenő betűk megjelenítésére és b) az érintés x és y koordinátáinak illesztésére az egyes betűk x és y koordinátáival a billentyűzet. Erről bővebben, amikor a vázlatnak ehhez a részéhez érkezünk.

A funcX , a funcY és a func tömbök, amelyek meghatározzák, hogy melyik alkalmazásgombot nyomták meg a főmenü képernyőjén, majd ezek alapján indítják el az adott alkalmazást.

A lastTouch és a tThresh az érintési módszerek segítségével biztosítható, hogy ne érintsük meg többször a képernyő túl hosszú megnyomását. Erről majd később.

A módváltozó vezérli, hogy melyik képernyő jelenik meg, a tMode változó pedig azt, hogy mely érintési módokat használják egy adott időpontban.

A setup () blokkban megnyitunk egy soros csatornát, ha a Serial.println () parancsokat szeretnénk használni a hibakereséshez. Nincs szüksége erre a sorra, ha nem kívánja a soros monitor hibakeresését elvégezni.

A következő négy sor csak a tft objektum beállítási kódja.

Ezután állítsuk a képernyő tájolását portré módba.

A randomSeed () parancs csak elindítja a véletlenszám -generátort a Saucy 7 alkalmazás későbbi használatra.

Végül hívjuk a splash screen módszert.

5. lépés: A Spash képernyő felépítése és a kijelző és az érintéses leképezés megértése

Most elkezdjük építeni a kiömlő képernyőt.

De először nézze meg a képet a képernyő és az érintéses leképezés érdekében. Vegye figyelembe, hogy a származási helyek különböző helyeken vannak. Kijelző esetén az origó (0, 0) a képernyő bal felső sarkában található (amikor a RESET gomb felül van), és balról jobbra, valamint felülről lefelé növekszik.

Az érintésérzékeléshez a forrás a képernyő bal alsó sarkában található, és balról jobbra, valamint alulról felfelé növekszik.

Tehát a KIJELZŐ ÉS ÉRINTÉSI TÉRKÉPEK KÜLÖN MEGHATÁROZOTT, és különböző felbontásokkal rendelkeznek. A kijelző felbontása 240 x 320, az érintés pedig jóval nagyobb felbontású, mint hamarosan látni fogja.

Lépjen a vázlat egy területére a loop () {} metódus alatt, és megadjuk a splash () metóduskódot.

Kezdjük egy fillScreen () paranccsal, hogy a képernyőt a fejléc kódjában meghatározott FEHÉR színnel töltsük ki.

Ezután a szöveg méretét "5" -re állítjuk. Ez egy viszonylag nagy alapszövegméret. Beállítjuk az x és y pozíciót a szövegkurzorhoz, és beállítjuk a szöveg színét. Végül a print ("TFT") parancs ténylegesen lerajzolja a kék, "5" méretű szöveget a megadott helyre.

A szöveg méretének növelésével látni fogja, hogy a karakterek egyre vaskosabbak lesznek. Tehát 5 fölé menni valószínűleg nem segít. Ennek az oktatóanyagnak a végén megmutatom, hogyan használhat bitképes betűtípusokat, hogy szebb szöveget kapjon az alkalmazásokban. A kompromisszum az, hogy a bitképes betűkészletek használata sok memóriát foglal el az Arduino -ban, ami korlátozza a vázlatméretet

Hasonló parancsokat ismételünk meg a kezdőképernyő másik két szövegeleméhez.

Végül 2,5 másodpercet késleltetünk, hogy a felhasználónak lehetősége legyen elolvasni a képernyő tartalmát, mielőtt az alkalmazás a főmenü képernyőjére lép.

Folytassa, és töltse fel ezt a vázlatot Arduino -jához. Meg kell jelenítenie a splash képernyőt.

6. lépés: Érintéses leképezési diagnosztikai eszköz készítése

A showTouch () módszer nagyon hasznos, hogy segítsen lekérni a képernyő különböző részeinek érintési koordinátáit. Ezt meg kell tennie a gombok érintési régióinak meghatározásához.

Folytassa, és írja be ezt a módszert a korábban végzett splash () metódus alá.

Így működik.

Az if utasítás határozza meg, hogy elegendő idő telt el az utolsó érintés óta. Ez az aktuális rendszeridőt milliszekciókkal () veszi, és kivonja az utolsó érintési időt. Ha nagyobb, mint a tThresh érték (200 milliszekundum), akkor elfogadja az érintést. Ellenkező esetben figyelmen kívül hagyja a véletlen multi-touch eseményeket.

Ezután a getpoint () parancs megkapja az érintés x, y és z koordinátáit. A z koordináta az érintési nyomás mértékegysége.

Ha a nyomás a vázlat fejlécében meghatározott max és min állandók között van, a módszer először az YP és XM csapokat OUTPUT -ra állítja vissza, a képernyőt DISPLAY módba állítva.

Ezután fehér téglalapot rajzol, hogy törölje a korábban megjelenített koordinátákat.

A vázlat ezután a betűtípust 2 -es méretűre, fekete színre állítja, és megjeleníti a képernyőn az x (p.x) és y (p.y) koordinátákat. Jegyezze fel ezeket a helyeket, hogy segítsen programozni az érintési zónákat saját vázlataihoz.

A metódus alján található if utasítás ellenőrzi, hogy megnyomták -e a képernyőn a „Kezdőlap” gombot. a '<=' operátorok lehetővé teszik a Kezdőlap gomb szélességét és magasságát. A megadott koordináták a Kezdőlap gomb x-középpontja és y-középpontja. Ha megnyomja, a mód 0 -ra van állítva, ami végül azt jelenti, hogy "Ugrás a főmenü képernyőre". Erről majd később.

Végül frissítjük a lastTouch -t az aktuális rendszeridőre milliméterre (), hogy felkészüljünk egy későbbi érintési eseményre.

Most lépjen a loop () blokkba, és adja hozzá a showTouch ();

Ezen a ponton töltse fel a vázlatát, és próbálja ki. Megrajzolja a kezdőképernyőt, és ha elkezdi megérinteni a képernyőt, a TOUCH x és y koordináták megjelennek a képernyőn.

Mielőtt továbblépnénk, nézzük meg újra a kód két fontos sorát:

pinMode (YP, OUTPUT); // a TFT vezérlőcsapok visszaállítása

pinMode (XM, OUTPUT); // az érintés észlelése utáni megjelenítéshez

Bármikor, amikor valamit meg szeretne jeleníteni a képernyőn, ezt a két parancsot KELL hajtania, hogy a képernyő TOUCH módról DISPLAY módra váltson. Ellenkező esetben a megjelenítési parancsok nem fognak működni.

Eddig jól sikerült! Szünetet tartani!

7. lépés: Készítse el a főmenü képernyőt

Most elkészítjük a Főmenü képernyőt két gombbal, amelyeket megnyomva aktiválhat minden alkalmazást. A módszer neve menuScreen ().

Kezdjük azzal, hogy a képernyőt DISPLAY módba állítjuk.

Ezután beállítjuk a betűméretet, a színt és a pozíciót, és kinyomtatjuk a „Főmenü” szöveget.

Most rajzolunk két téglalapot, amelyek a gombok.

Minden grafikus parancs hasonló felépítésű:

graphicShape (x koordináta, y koordináta, szélesség, magasság, SZÍN)

- x koordináta - bal felső sarokban téglalap alakú tárgyak, középen körök

- y koordináta - bal felső sarokban téglalap alakú tárgyak, középen körök

- szélesség - az objektum szélessége pixelben

- COLOR - egy színállandó, amelyet a fejlécben definiáltunk

Végül két módszert hívunk meg a Saucy 7 és a QWERTY szövegbeviteli ikon rajzolásához. Ezek külön módszerek.

A draw7icon (0) metódus egész paramétert vesz fel, amely y-eltolás a labda megrajzolásához. Ezt azért tesszük, hogy ugyanazt a módszert használjuk a labda rajzolásához a menü képernyőn ÉS a Saucy 7 alkalmazás képernyőjén. Az eltolás csak lehetővé teszi, hogy programozzuk a labda Y-koordinátáját felfelé vagy lefelé.

A draw7Ball (0) metódust a draw7Icon (0) belülről hívjuk meg. Ez egy olyan paramétert is igényel, amely lehetővé teszi a labda függőleges helyzetének beállítását attól függően, hogy a menüképernyőn vagy az alkalmazás képernyőjén rajzoljuk -e.

A fillCircle () parancs 4 argumentumot tartalmaz.

- a kör középpontjának x koordinátája

- a kör középpontjának y koordinátája

- a kör sugara (pixelben)

- COLOR - egy színállandó, amelyet a fejlécben definiáltunk

Végül a drawTextIcon () metódust hívjuk meg a Szövegbevitel alkalmazás ikonjának rajzolásához.

Megpróbálhatja futtatni a módszert úgy, hogy megjegyzi a splash () metódust a setup () -ban, és hozzáadja a menuScreen () elemet.

Töltse fel a vázlatot az Arduino készülékére, és próbálja ki!

8. lépés: A Saucy 7 alkalmazás és a főmenü módszerei

A sevenScreen () módszer lerajzolja az alkalmazás képernyőjét, beleértve a labda rajzolását, majd az utasítások megjelenítését.

A sevenInstr () metódus megjeleníti az utasításokat, valamint törli a képernyőt a korábbi válaszoktól. A "Válasz" gombot is rajzolja.

A show7Response () módszer kezeli az előző válaszmód törlését a képernyőről, animált „gondolkodó…” üzenet megjelenítését, majd a véletlenszerűen kiválasztott válaszüzenet megjelenítését.

A read7Touch () az a módszer, amely egy érintési eseményre vár a véletlenszerűen generált üzenet létrehozásához. Az érintési kód nagyon hasonló a korábban leírt showTouch () diagnosztikai módszerhez. Az egyszerűség kedvéért a módszer bárhol a képernyőn elfogadja a „Válasz” gomb érintését.

A módszer tetején definiálunk egy válasz karakterlánc -tömböt, amelyek az érintéses eseményből előállítható üzenetek.

Ha megnyomja a Kezdőlap gombot, akkor leállítja az alkalmazást, és visszatér a főmenü képernyőjére. Ellenkező esetben a módszer véletlenszerű számot generál 0 és 7 között (kizárólagos), és átadja a megfelelő szöveges üzenetet a válasz tömbből a show7Response () metódusnak.

Végül a backToMenu () módszer figyeli a Kezdőképernyő gomb érintését, és visszaállítja a vezérlést a főmenü képernyőjére.

A readMenuTouch () módszer figyeli az érintéses eseményeket, amikor a főmenü képernyőjén tartózkodik. Érintés észlelésekor az x és y koordinátákat átadja a getFunc (x, y) metódusnak, amely a funcX és funcY tömbökben úgy néz ki, hogy megfeleljen az érintés x és y koordinátáinak. Ezután visszaadja a kiválasztott alkalmazás func tömbjének számát. Az „1” a Saucy 7 és a „2” a szövegbeviteli alkalmazás. Ezután a módot az adott alkalmazás értékére állítja, így az alkalmazás végrehajtásra kerül.

9. lépés: A hurok () blokk

Most elkezdjük építeni a loop () blokk kódot a megfelelő képernyő megjelenítéséhez, majd a megfelelő érintési módok meghívásához a jelenleg kiválasztott opció alapján.

A loop () módszer két kapcsoló () szerkezetből áll.

A felső kapcsolószerkezet kezeli a megfelelő képernyő megjelenítését attól függően, hogy melyik opciót választotta. Ezenkívül beállítja a tMode értéket a megfelelő érintési módszerhez az aktuális kiválasztott opcióhoz. Végül a mód értékét 9 -re állítja, hogy a kijelző ne rajzolódjon végtelenül újra.

Az alsó kapcsolószerkezet vezérli, hogy mely érintési módokat hajtja végre a felhasználó által kiválasztott alkalmazásopció alapján, amelyet a tMode értéke képvisel.

Töltse be a vázlatot az Arduino -ba, és képesnek kell lennie a Saucy 7 alkalmazás kiválasztására és használatára.

Sok munkát végeztél! Szünetet tartani:-)

10. lépés: A szövegbeviteli alkalmazás - Otthon vagyunk

Most beépítjük a szövegbeviteli alkalmazás módszereit.

A makeKbd () rajzolja a billentyűzetet a képernyőn.

Hat megtöltött lekerekített téglalapot rajzol, majd minden „kulcsra” ráfedi a megfelelő betűt azáltal, hogy a betűt a cString karakterláncból kapja, amelyet a képernyő fölött kinyomtat a kulcs fölé. Vegye figyelembe, hogy a fillRoundedRect () parancs második utolsó paramétere a sarkok sugara képpontokban. Minél magasabb ez az érték, annál lekerekítettebbek a sarkok.

A readKbdTouch () módszer hasonlóan működik a többi érintésérzékelő módszerhez.

Ha olyan érintést észlel, amely NEM található a Kezdőlap gombon, akkor az x és y koordinátákat átadja a curChar (x, y) metódusnak, amely az adott x és y helynek megfelelő karaktert adja vissza a képernyőn. A „begépelt” üzenet ezután megjelenik a képernyőn a „displayMsg (theChar) módszerrel.

A curChar (x, y) metódus az X és az Y betű tömbök között keres, és megpróbál egy olyan találatot találni, amely közel van a readKbdTouch () által átadott x és y koordinátákhoz. Ha talál egyezést, akkor visszaadja a megfelelő betűt a readKbdTouch metódusnak. Vegye figyelembe, hogy a theChar változót 32 -re inicializáljuk, amely a szóköz karakter ASCII kódja, "". Ezt úgy tesszük, hogy ha a felhasználó megérinti a billentyűzettől távol eső területet, nem jelennek meg nem elérhető karakterek.

A displayMsg (theChar) metódus átveszi a curChar (x, y) által visszaadott karaktert, és hozzáfűzi az msg karakterlánchoz. Ezután megjeleníti az üzenetet a képernyőn.

Végül frissítjük a loop () blokkot, hogy elfogadja a szövegbeviteli alkalmazás kiválasztását.

Töltse fel a tftDemo vázlatot az Arduino készülékére, és használnia kell az elkészült alkalmazást.

Gratulálunk! épített egy TFT érintőképernyős alkalmazást! Vegye ki a nap többi részét!

11. lépés: Slickin! - Az Adafruit Bitmap betűtípusok használata a vázlatában

A standard tft betűkészlet rendben van. De szebb, ha megfelelő bittérképes betűtípusokat használhatunk a TFT vázlatainkban.

A hátránya, hogy a betűkészletek betöltése az Arduino memóriába jelentős helyet foglal el. Valójában nagyon könnyű kitölteni a vázlatot annyi betűtípussal, hogy az nem töltődik be az Arduino -ba.

A betűtípusok a projekthez már telepített Adafruit_GFX könyvtármappában találhatók. Kiváló oktatóanyag a betűtípusok használatáról ezen az oldalon.

A vázlat Fejléc területén adja hozzá a használni kívánt betűtípus betűtípus -hivatkozását. Ebben a példában a FreeSerifBoldItalic18p7b betűtípust fogjuk használni.

#befoglalni

A splash () metódusában megjegyzést fűz a tft.setTextSize (); parancs.

Adja hozzá a következő parancsot,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Most minden print () parancs az aktuálisan megadott betűtípust fogja használni. Ha másik betűtípusra szeretne váltani, használjon egy másik tft.setFont () parancsot a következő használni kívánt betűtípussal.

Ha vissza szeretné állítani a betűtípust a standard tft betűtípusra, használja a tft.setFont (); parancs paraméter nélkül.

Töltse fel a vázlatot az Arduino készülékére, és látnia kell, hogy a kezdőképernyő a bitkép -betűtípust használja a képernyőn megjelenő szöveg megjelenítéséhez. Észre fogja venni, hogy a vázlat mérete lényegesen nagyobb, ha már betűtípust is mellékelt.

12. lépés: Utolsó gondolatok

Számos más grafikus objektum parancs is rendelkezésre áll. Tartalmazzák:

tft.drawRect (x, y, szélesség, magasság, SZÍN);

tft.drawLine (x1, y1, x2, y2, COLOR);

A következő példák a tft.color565 metódust használják a szín megadására a piros, zöld és kék értékek alapján. Ez egy alternatív módja a vázlatunkban használt állandóan meghatározott HEX színértékek használatának.

tft.drawRoundRect (x, y, szélesség, magasság, sugár, tft.color565 (255, 0, 0)); // ez piros lenne

tft.drawCircle (x, y, sugar, tft.color565 (0, 255, 0)); // ez zöld lenne

tft.drawTriangle (csúcs1x, csúcs1y, csúcs2x, csúcs2y, csúcs3x, csúcs3y, tft.szín565 (0, 0, 255)); // kék

tft.fillTriangle (csúcs1x, csúcs1y, csúcs2x, csúcs2y, csúcs3x, csúcs3y, tft.szín565 (255, 0, 0);

Játsszon ezekkel a parancsokkal, és fedezze fel, hogyan adhatnak hozzá a TFT projektekhez.

A TFT képernyő használatának megtanulása kihívást jelent, és büszkének kell lennie magára, hogy időt szán az első lépések megtanulására.

A TFT képernyők vonzó és hasznos grafikus felhasználói felületet adhatnak hozzá Arduino projektjeihez.

Köszönjük, hogy végigdolgozta ezt az oktatóanyagot.

MOST MENJEN KI, és tegyen valami csodálatosat!