BluBerriSix - një TFT TouchScreen / Arduino Tutorial: 12 hapa (me fotografi)

2024 Autor: John Day | [email protected]. E modifikuara e fundit: 2024-01-30 12:20

2019 është 20 vjetori i RIM Blackberry 850! Kjo shpikje e vogël kanadeze ndryshoi mënyrën e komunikimit të botës. Ka kaluar shumë kohë, por trashëgimia e tij vazhdon!

Në këtë udhëzues, do të mësoni se si të përdorni mburojën e ekranit TFT MCUfriend.com 2.4 për Uno/Mega. Do të mësoni se si të shfaqni objekte dhe tekst grafik dhe si të merrni prekje dhe të veproni në ngjarjet e prekjes. Kjo ekrani është shumë i ngjashëm me Adafruit dhe mburojat/ekranet e tjera TFT. Pra, nëse jeni këtu, qëndroni pranë për shfaqjen.

Ne do të ndërtojmë një version të thjeshtuar të 2 aplikacioneve të skicës sime bluBerriSIX.

Le të fillojmë!

Hapi 1: BluBerriSIX - Vështrim i përgjithshëm

Aplikacioni bluBerriSIX është një projekt TFT me gjashtë funksione.

Ai përfshin:

Një elektrik dore

Një aplikacion i shijshëm '7' (si një top magjik '8')

Një Llogaritës

Një aplikacion i Matjes së Distancës duke përdorur sensorin e distancës tejzanor SR-04

Një aplikacion i Temperaturës dhe Lagështisë që gjithashtu regjistron të dhëna në kohë reale deri në 1.5 km me marrësin HC-12

Një aplikacion për dërgimin e mesazheve duke përdorur HC-12.

Ky projekt mori 1100 rreshta kodesh. Ne do të ndërtojmë një version shumë më të thjeshtë që ende demonstron koncepte të ekranit TFT dhe prekjes.

Hapi 2: Çfarë nevojitet?

- Një Arduino Uno ose Mega 2560

- Një mburojë TFT 2.4 MCUfriend

Bibliotekat e mëposhtme:

- Biblioteka Adafruit_GFX

- Biblioteka e Adafruit Touchscreen

- biblioteka MCUFRIEND_kbv

Këto biblioteka mund të instalohen me Menaxherin e Bibliotekës brenda Arduino IDE.

Për të ngarkuar një bibliotekë, shkoni te opsioni i menysë Sketch -> Include Library -> Manage Libraries ….

Në fushën filtroni kërkimin … Kur të keni mbaruar, thjesht kthehuni nga ky ekran.

Kur montoni mburojën TFT në Uno/Mega, KENI SHUM KUJDES për t'u siguruar që po rreshtoni kunjat në mënyrë korrekte. Unë e shtrembërova mburojën time të parë dhe e skuqa. Kalova dy javë të frustrimit në rritje duke u përpjekur të gjeja bibliotekat e sakta para se të kuptoja që ekrani ishte i vdekur. BEJ KUJDES

Hapi 3: Projekti ynë

Ne do të ndërtojmë një version më të thjeshtë të skicës bluBerriSIX.

Do të ketë, - një ekran spërkatjeje

- një ekran i menysë kryesore me dy butona

- një aplikacion Saucy 7

- një aplikacion i thjeshtuar i futjes së tekstit

Ju gjithashtu do të jeni në gjendje të ktheheni në menunë kryesore duke shtypur ikonën "Home" në pjesën e poshtme të majtë të këtij ekrani të veçantë. Nëse nuk keni një ikonë të tillë, thjesht do të duhet të përcaktoni një zonë 'shtëpie' të ekranit tuaj. Ju do të mësoni se si të përcaktoni rajonet e prekjes së ekranit në këtë tutorial.

Edhe pse ky është një projekt i thjeshtuar, ai është ende mjaft i gjatë. Unë do të ofroj versione të skicave Arduino në secilën fazë kryesore, kështu që ju mund t'i ngarkoni ato nëse dëshironi.

Hapi 4: Kodi i titullit, Ndryshoret globale, Konfigurimi i ekranit

I gjithë projekti është shumë i dokumentuar. Por detajet vijojnë.

Filloni një projekt të ri Arduino dhe quajeni 'tft demo' ose ndonjë emër tjetër që dëshironi.

Paneli i parë i kodit më lart na tregon përcaktimin e variablave globale. Ne gjithashtu shtojmë në bibliotekat që do të duhet të përdorim si për funksionin e shfaqjes së ekranit ashtu edhe për zbulimin me prekje të ekranit.

Ne gjithashtu përcaktojmë kunjat analoge duke iu referuar qëllimeve të tyre specifike të ekranit.

Ne përcaktojmë objektin tft (ekranin) dhe objektin ts (prekjen) si referenca për funksionet e tyre përkatëse.

Ne përcaktojmë disa konstante ngjyra 16 bit për ta bërë më të lehtë dhënien e ngjyrave për ekranin dhe për tekstet dhe objektet grafike. Ju do të vini re se ka një URL në një faqe në internet që ka një Zgjedhës të ngjyrave dhe konvertues për të kthyer ngjyrat e dukshme në vlerat e tyre 16 bit heksadecimale. Shtë një mjet shumë i dobishëm.

Në panelin e kodit të dytë, ne përcaktojmë ndryshoret globale për qëllimet tona specifike të aplikacionit.

Vargjet dhe vargjet cString, shkronja dhe shkronja X dhe letterY përdoren për të a) shfaqur shkronjat në butonat për aplikacionin e futjes së tekstit dhe b) përputhen me koordinatat x dhe y të një prekje me koordinatat x dhe y të secilës shkronjë përkatëse në tastiera Më shumë për këtë kur arrijmë në atë pjesë të skicës.

funcX , funcY dhe func janë grupe që funksionojnë për të përcaktuar se cili buton i aplikacionit është shtypur në ekranin e menysë kryesore dhe më pas përdorni atë informacion për të nisur aplikacionin përkatës.

lastTouch dhe tThresh përdoren në metodat e prekjes për t'u siguruar që të mos marrim prekje të shumta nga shtypja e gjatë e ekranit. Më shumë për këtë më vonë.

Ndryshorja e modalitetit do të kontrollojë se cili ekran shfaqet dhe ndryshorja tMode do të kontrollojë cilat metoda të prekjes janë duke u përdorur në çdo kohë të caktuar.

Në bllokun e konfigurimit (), ne hapim një kanal Serial nëse duam të përdorim komandat Serial.println () për korrigjim. Ju nuk keni nevojë për këtë linjë nëse nuk dëshironi të bëni korrigjim të Serial Monitor.

Katër rreshtat e ardhshëm janë thjesht kodi i konfigurimit për objektin tft.

Tjetra ne vendosim orientimin e ekranit në modalitetin Portret.

Komanda randomSeed () sapo fillon gjeneratorin e numrave të rastit për përdorim të mëvonshëm nga aplikacioni Saucy 7.

Më në fund ne e quajmë metodën splash screen.

Hapi 5: Ndërtimi i ekranit të spërkatjes dhe kuptimi i ekranit kundrejt hartës me prekje

Tani do të fillojmë të ndërtojmë ekranin e spërkatjes.

Por së pari, ju lutemi shikoni figurën për ekranin dhe prekni hartën. Vini re se origjina është në vende të ndryshme. Për shfaqje, origjina (0, 0) është në pjesën e sipërme të majtë të ekranit (kur butoni RESET është në krye) dhe rritet nga e majta në të djathtë dhe nga lart poshtë.

Për zbulimin e prekjes, origjina është në këndin e poshtëm të majtë të ekranit dhe rritet nga e majta në të djathtë dhe nga poshtë lart.

Pra, HARTAT E PISRSHKRIMIT DHE T TO Prekjes P DRCAKTUHEN PARAS dhe kanë rezolucione të ndryshme. Ekrani ka një rezolucion prej 240 me 320 dhe prekja ka një rezolucion shumë më të lartë siç do ta shihni së shpejti.

Shkoni në një zonë të skicës suaj nën metodën loop () {} dhe ne do të futim kodin e metodës splash ().

Fillojmë duke bërë një komandë fillScreen () për të mbushur ekranin me ngjyrën WHITE që kemi përcaktuar në kodin e kokës.

Pastaj vendosim madhësinë e tekstit në '5'. Kjo është një madhësi relativisht e madhe e tekstit bazë. Vendosim pozicionin x dhe y për kursorin e tekstit dhe vendosim ngjyrën e tekstit. Së fundi, komanda print ("TFT") në fakt tërheq tekstin blu, me madhësi '5' në pozicionin e specifikuar.

Ndërsa rritni madhësinë e tekstit, do të shihni që personazhet bëhen gjithnjë e më të trashë. Pra, të shkosh mbi 5 ndoshta nuk është e dobishme. Në fund të këtij tutoriali, unë do t'ju tregoj se si të përdorni fontet bitmap për të pasur tekst më të bukur në aplikacionet tuaja. Kompromisi është se përdorimi i grupeve të shkronjave bitmap merr shumë kujtesë në Arduino -n tuaj e cila do të kufizojë madhësinë e skicës tuaj

Ne përsërisim komanda të ngjashme për dy artikujt e tjerë të tekstit në ekranin e spërkatjes.

Së fundi, ne vonojmë për 2.5 sekonda për t'i dhënë përdoruesit një shans për të lexuar përmbajtjen e ekranit para se aplikacioni të kalojë në ekranin e menysë kryesore.

Vazhdoni dhe ngarkoni këtë skicë në Arduino tuaj. Duhet të shfaqë ekranin e spërkatjes.

Hapi 6: Krijimi i një mjeti diagnostikues të hartës me prekje

Metoda showTouch () është shumë e dobishme për t'ju ndihmuar të merrni koordinatat e prekjes të pjesëve të ndryshme të ekranit. Ju do të duhet ta bëni këtë për të përcaktuar zonat e prekjes për butonat tuaj.

Vazhdoni dhe futni këtë metodë nën metodën tuaj splash () të bërë më parë.

Ja si funksionon.

Deklarata if përcakton nëse ka kaluar një kohë e mjaftueshme nga prekja e fundit. Ai merr kohën e sistemit aktual millis () dhe zbret kohën e fundit të Prekjes. Nëse është më e madhe se vlera tThresh (200 milisekonda), ajo e pranon prekjen. Përndryshe, nuk do të marrë parasysh ngjarjet aksidentale me shumë prekje.

Tjetra, komanda getpoint () merr koordinatat x, y dhe z të prekjes. Koordinata z është një masë e presionit të prekjes.

Nëse presioni është brenda konstanteve max dhe min që kemi përcaktuar në kokën e skicës, metoda së pari do të ndryshojë kunjat e YP dhe XM përsëri në OUTPUT, duke e vendosur ekranin në modalitetin DISPLAY.

Më tej do të vizatojë një drejtkëndësh të bardhë për të fshirë çdo koordinatë që mund të jetë shfaqur më parë.

Skica pastaj vendos fontin në madhësinë 2, ngjyrë të zezë dhe shfaq koordinatat x (p.x) dhe y (p.y) në ekran. Më pas mund t'i shënoni këto vende për t'ju ndihmuar të programoni zonat tuaja të prekjes për skicat tuaja.

Deklarata if në fund të metodës kontrolloni për të parë nëse butoni 'Home' në ekran është shtypur. operatorët '<=' lejojnë gjerësinë dhe lartësinë e butonit Home. Koordinatat e specifikuara janë koordinatat e qendrës x dhe y-qendra të butonit Home. Nëse shtypet, modaliteti është vendosur në 0 që përfundimisht do të thotë 'Shko te Ekrani i Menysë Kryesore'. Më shumë për këtë më vonë.

Më në fund ne përditësojmë lastTouch në sistemin aktual të kohës millis () për t'u bërë gati për një ngjarje të mëvonshme të prekjes.

Ju lutemi shkoni në bllokun loop () dhe shtoni linjën showTouch ();

Në këtë pikë, ngarkoni skicën tuaj dhe provojeni. Do të tërheqë ekranin e spërkatjes dhe nëse filloni të prekni ekranin, koordinatat TOUCH x dhe y do të shfaqen në ekran.

Para se të vazhdoni, le të rishikojmë dy rreshta të rëndësishëm të kodit:

pinMode (YP, OUTPUT); // rivendosni kunjat e kontrollit TFT

pinMode (XM, OUTPUT); // për shfaqje pas zbulimit të një prekjeje

Sa herë që dëshironi të shfaqni diçka në ekran, DUHET të ekzekutoni këto dy komanda për të ndryshuar ekranin nga modaliteti TOUCH në modalitetin DISPLAY. Përndryshe, komandat tuaja të ekranit nuk do të funksionojnë.

Bravo deri tani! Bëni një pushim!

Hapi 7: Ndërtoni ekranin e menysë kryesore

Tani do të ndërtojmë ekranin tonë të Menysë Kryesore me dy butona që mund të shtypni për të aktivizuar secilin aplikacion. Metoda quhet menuScreen ().

Fillojmë duke e vendosur ekranin në modalitetin DISPLAY.

Pastaj vendosim madhësinë e shkronjave, ngjyrën dhe pozicionin dhe shtypim tekstin 'Menyja kryesore'.

Tani vizatojmë dy drejtkëndësha që janë butona.

Të gjitha komandat grafike kanë një strukturë të ngjashme:

grafik Shape (koordinata x, koordinata y, gjerësia, lartësia, NGJYRA)

- koordinata x - majtas lart për objektet drejtkëndëshe, qendra për qarqet

- koordinata y - lart majtas për objektet drejtkëndëshe, qendra për qarqet

- gjerësia - gjerësia e objektit në piksele

- NGJYRA - një konstante ngjyrash të përcaktuar në kokë

Së fundi ne thërrasim dy metoda për të vizatuar ikonën Saucy 7 dhe ikonën QWERTY Text Entry. Këto janë metoda të ndara.

Metoda draw7icon (0) merr një parametër të plotë i cili është y-offset për tërheqjen e topit. Ne e bëjmë këtë në mënyrë që të mund të përdorim të njëjtën metodë për vizatimin e topit në ekranin e menysë DHE në ekranin e aplikacionit Saucy 7. Kompensimi thjesht na lejon të rregullojmë në mënyrë programore koordinatën y të topit lart ose poshtë.

Metoda draw7Ball (0) thirret nga brenda draw7Icon (0). Gjithashtu merr një parametër i cili na lejon të rregullojmë pozicionin vertikal të topit në varësi të faktit nëse e vizatojmë në ekranin e menysë ose në ekranin e aplikacionit.

Komanda fillCircle () merr 4 argumente.

- koordinata x e qendrës së rrethit

- y koordinata e qendrës së rrethit

- rrezja e rrethit (në pixel)

- NGJYRA - një konstante ngjyrash të përcaktuar në kokë

Më në fund metoda drawTextIcon () thirret për të vizatuar ikonën për aplikacionin Text Entry.

Mund të provoni të ekzekutoni metodën duke komentuar metodën splash () në konfigurimin () dhe duke shtuar menuScreen ().

Ngarko skicën në Arduino tuaj dhe provojeni!

Hapi 8: Aplikacioni Saucy 7 dhe Metodat kryesore të menysë

Metoda heftScreen () do të vizatojë ekranin për aplikacionin, duke përfshirë vizatimin e topit dhe më pas shfaqjen e udhëzimeve.

Metoda heftInstr () shfaq udhëzimet, si dhe pastron ekranin nga përgjigjet e mëparshme. Gjithashtu tërheq butonin 'Përgjigje'.

Metoda show7Response () trajton pastrimin e metodës së mëparshme të përgjigjes nga ekrani, shfaqjen e një mesazhi të animuar 'duke menduar …' dhe më pas shfaqur mesazhin e përgjigjes të zgjedhur rastësisht.

read7Touch () është metoda që pret një ngjarje prekëse për të prodhuar mesazhin e krijuar rastësisht. Kodi i prekjes është shumë i ngjashëm me metodën diagnostikuese showTouch () të përshkruar më herët. Për thjeshtësi, metoda do të pranojë një prekje kudo në ekran si prekja e butonit 'Përgjigju'.

Në krye të metodës, ne përcaktojmë një grup përgjigjesh të vargjeve që janë mesazhet që mund të gjenerohen nga një ngjarje prekëse.

Nëse shtypet butoni Home, ai do të përfundojë aplikacionin dhe do të kthehet në ekranin e menysë kryesore. Përndryshe, metoda do të gjenerojë një numër të rastit midis 0 dhe 7 (ekskluziv) dhe do të kalojë mesazhin tekstual përkatës nga grupi i përgjigjes në metodën show7Response ().

Së fundi, metoda backToMenu () shikon për një prekje të butonit Home dhe kthen kontrollin në ekranin e menysë kryesore.

Metoda readMenuTouch () shikon për një ngjarje me prekje kur jeni në ekranin e menysë kryesore. Kur zbulohet një prekje, ai i kalon koordinatat x dhe y tek metoda getFunc (x, y) e cila duket në vargjet funcX dhe funcY që të përputhen me koordinatat x dhe y të prekjes. Pastaj kthen numrin nga grupi func për aplikacionin e zgjedhur. '1' është Saucy 7 dhe '2' është aplikacioni i futjes së tekstit. Pastaj vendos modalitetin në vlerën e atij aplikacioni në mënyrë që aplikacioni të ekzekutohet.

Hapi 9: Blloku Loop ()

Tani do të fillojmë të ndërtojmë kodin bllok loop () për të trajtuar shfaqjen e ekranit të duhur dhe më pas thirrjen e metodave të përshtatshme të prekjes bazuar në opsionin e zgjedhur aktualisht.

Metoda loop () përbëhet nga dy struktura switch ().

Struktura e kalimit të sipërm trajton shfaqjen e ekranit të duhur në varësi të cilës opsion është zgjedhur. Ai gjithashtu vendos vlerën tMode për metodën e duhur të prekjes që të ekzekutohet për opsionin aktual të zgjedhur. Së fundi, ai vendos vlerën e modalitetit në 9 në mënyrë që ekrani i ekranit të mos rishikohet pafund.

Struktura e kalimit të poshtëm kontrollon se cilat metoda prekëse po ekzekutohen bazuar në opsionin e aplikacionit të zgjedhur nga përdoruesi, siç përfaqësohet nga vlera e tMode.

Ngarkoni skicën në Arduino tuaj dhe duhet të jeni në gjendje të zgjidhni dhe përdorni aplikacionin Saucy 7.

Ju keni bërë shumë punë! Bëni një pushim:-)

Hapi 10: Aplikacioni i hyrjes së tekstit - Ne jemi në shtrirjen e shtëpisë

Tani do të përfshijmë metodat e aplikacionit të futjes së tekstit.

makeKbd () vizaton tastierën në ekran.

Vizaton gjashtë drejtkëndësha të rrumbullakosur të mbushur dhe më pas mbulon shkronjën e duhur në secilin 'çelës' duke marrë shkronjën nga vargu cString të cilin e printon në ekran mbi çelës. Vini re se parametri i dytë i fundit në një komandë fillRoundedRect () është rrezja e secilit cep në pixel. Sa më e lartë kjo vlerë, aq më të rrumbullakosura qoshet.

Metoda readKbdTouch () punon e ngjashme me metodat e tjera të zbulimit të prekjes.

Nëse zbulohet një prekje që NUK është në butonin Home, ai kalon koordinatat x dhe y në metodën curChar (x, y) e cila kthen karakterin që korrespondon me atë vendndodhje x dhe y në ekran. Mesazhi që është 'shtypur' më pas shfaqet në ekran duke përdorur metodën 'displayMsg (theChar).

Metoda curChar (x, y) kërkon përmes grupit të shkronjave X dhe letterY për të provuar të gjejë një ndeshje që është afër koordinatave x dhe y të kaluara nga readKbdTouch (). Nëse gjen një ndeshje, ai kthen shkronjën përkatëse në metodën readKbdTouch. Vini re se ne inicializojmë ndryshoren theChar në 32 që është kodi ASCII për një karakter hapësirë, Ne e bëjmë këtë në mënyrë që nëse përdoruesi prek një zonë larg nga tastiera, nuk do të shfaqë karaktere të padisponueshme.

Metoda displayMsg (theChar) merr karakterin e kthyer nga curChar (x, y) dhe e shton atë në vargun msg. Pastaj shfaq mesazhin në ekran.

Së fundi, ne do të azhurnojmë bllokun loop () për të pranuar përzgjedhjen e aplikacionit të futjes së tekstit.

Ngarko skicën tftDemo në Arduino tuaj dhe duhet të jeni në gjendje të përdorni aplikacionin e përfunduar.

Urime! keni krijuar një aplikacion TFT me prekje! Merrni pjesën tjetër të ditës së pushimit!

Hapi 11: Bëhuni të shkëlqyeshëm! - Përdorimi i Adafruit Bitmap Fonts në Skicën tuaj

Seti standard i shkronjave tft është në rregull. Por është më mirë nëse mund të përdorim fontet e duhura të bitmapped në skicat tona TFT.

Ana negative është se ngarkimi i grupeve të shkronjave në kujtesën Arduino merr hapësirë të konsiderueshme. Në fakt, është shumë e lehtë të mbushni skicën tuaj me aq shumë shkronja saqë nuk do të ngarkohet në Arduino.

Shkronjat janë të disponueshme brenda dosjes së bibliotekës Adafruit_GFX që keni instaluar tashmë për këtë projekt. Një udhëzues i shkëlqyeshëm për përdorimin e shkronjave është në këtë faqe.

Në zonën Header të skicës tuaj, shtoni referencën e fontit për fontin që dëshironi të përdorni. Ne do të përdorim fontin FreeSerifBoldItalic18p7b për këtë shembull.

#përfshi

Në metodën tuaj splash (), komentoni tft.setTextSize (); komanda.

Shtoni komandën e mëposhtme,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Tani çdo komandë print () do të përdorë fontin e specifikuar aktualisht. Për të ndryshuar një font të ndryshëm, do të përdorni një komandë tjetër tft.setFont () me fontin tjetër që dëshironi të përdorni.

Për ta kthyer fontin në fontin standard tft, thjesht përdorni një tft.setFont (); komandë pa parametër.

Ngarko skicën në Arduino tuaj dhe duhet të shihni që splash screen tani përdor fontin bitmap për paraqitjen e tekstit në ekran. Ju do të vini re se madhësia e skicës është dukshëm më e madhe tani që keni përfshirë një font.

Hapi 12: Mendimet përfundimtare

Ka shumë komanda të tjera të objekteve grafike në dispozicion për ju. Ato përfshijnë:

tft.drawRect (x, y, gjerësia, lartësia, NGJYRA);

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

Shembujt e mëposhtëm përdorin metodën tft.color565 për t'ju lejuar të specifikoni ngjyrën bazuar në vlerat e kuqe, jeshile dhe blu. Kjo është një mënyrë alternative për të përdorur vlerat konstante të përcaktuara të ngjyrës HEX që kemi përdorur në skicën tonë.

tft.drawRoundRect (x, y, gjerësia, lartësia, rrezja, tft.color565 (255, 0, 0)); // kjo do të ishte e kuqe

tft.drawCircle (x, y, rrezja, tft.color565 (0, 255, 0)); // kjo do të ishte e gjelbër

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // blu

tft.fillTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (255, 0, 0);

Luani me këto komanda dhe eksploroni sesi ato mund të shtohen në projektet tuaja TFT.

Të mësosh të përdorësh një ekran TFT është sfiduese dhe duhet të jesh krenar për veten që ke marrë kohë për të mësuar këto hapa të parë.

Ekranet TFT mund të shtojnë një aspekt tërheqës dhe të dobishëm të Ndërfaqes Grafike të Përdoruesit në projektet tuaja Arduino.

Faleminderit që punuat përmes këtij mësimi.

Tani dilni dhe bëni diçka të mrekullueshme!