BluBerriSix - TFT puuteekraan / Arduino õpetus: 12 sammu (piltidega)

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:48

2019 on RIM Blackberry 850 20. aastapäev! See väike Kanada leiutis muutis maailma suhtlemisviisi. See on ammu möödas, kuid selle pärand jätkub!

Selles juhendis saate teada, kuidas kasutada Uno/Mega jaoks MCUfriend.com 2,4 -tollist TFT -ekraanikilpi. Õpid, kuidas kuvada graafilisi objekte ja teksti ning kuidas puudutusi vastu võtta ja puuteüritustel tegutseda. See ekraan on väga sarnane Adafruuti ja teiste TFT -kilpide/ekraanidega. Nii et kui olete siin, jääge näituse juurde.

Ehitame minu bluBerriSIX visandist lihtsustatud 2 rakenduse versiooni.

Alustame!

1. samm: BluBerriSIX - ülevaade

Rakendus bluBerriSIX on kuue funktsiooniga TFT -projekt.

See sisaldab:

Taskulamp

Õnnelik "7" rakendus (nagu Magic "8" pall)

Kalkulaator

Kauguse mõõtmise rakendus, mis kasutab ultraheli kaugusandurit SR-04

Temperatuuri ja niiskuse rakendus, mis võimaldab reaalajas andmete registreerimist kuni 1,5 km kaugusele koos transiiveriga HC-12

Sõnumite saatmise rakendus, kasutades HC-12.

See projekt võttis 1100 rida koodi. Ehitame tunduvalt lihtsama versiooni, mis demonstreerib endiselt TFT -ekraani ja puutetundlikke kontseptsioone.

2. samm: mida on vaja?

- Arduino Uno või Mega 2560

- MCUfriend 2,4 -tolline TFT -kilp

Järgmised raamatukogud:

- Adafruit_GFX raamatukogu

- Adafruit puuteekraani raamatukogu

- MCUFRIEND_kbv raamatukogu

Neid teeke saab installida koos Arduino IDE raamatukoguhalduriga.

Raamatukogu laadimiseks avage menüü Sketch -> Include Library -> Manage Libraries….

Sisestage väljale „Otsingu filtreerimine…” raamatukogu nime esimesed paar märki ning seejärel valige ja installige sobiv raamatukogu. Kui olete lõpetanud, minge sellest ekraanist tagasi.

Kui paigaldate TFT -katet Uno/Mega seadmele, olge VÄGA HOIATLIK, et veenduda, et asetate tihvtid õigesti. Joondasin oma esimese kilbi valesti ja praadisin ära. Veetsin kaks nädalat kasvavat pettumust, püüdes leida õigeid raamatukogusid, enne kui mõistsin, et ekraan on surnud. OLE ETTEVAATLIK

3. samm: meie projekt

Ehitame bluBerriSIX visandist lihtsama versiooni.

Sellel saab olema, - pritsmeekraan

- peamenüü ekraan kahe nupuga

- rakendus Saucy 7

- lihtsustatud tekstisisestusrakendus

Samuti saate peamenüüsse naasta, vajutades selle ekraani vasakus alanurgas asuvat ikooni „Kodu”. Kui teil sellist ikooni pole, peate lihtsalt määrama oma ekraani kodupiirkonna. Sellest õpetusest saate teada, kuidas ekraani puutepiirkondi määrata.

Kuigi see on lihtsustatud projekt, on see siiski üsna pikk. Esitan Arduino visandite versioonid igal suuremal etapil, et saaksite need soovi korral üles laadida.

Samm: päise kood, globaalsed muutujad, ekraani seadistamine

Kogu projekt on kõrgelt dokumenteeritud. Kuid üksikasjad järgnevad.

Alustage värsket Arduino projekti ja nimetage see tft -demoks või muuks soovitud nimeks.

Ülaltoodud esimene koodipaneel näitab meile globaalsete muutujate määratlemist. Lisame ka teegid, mida peame kasutama nii ekraani kuvamisfunktsiooni kui ka ekraani puutetundliku tuvastamise jaoks.

Samuti määratleme analoogpoldid nende ekraanipõhiste eesmärkide alusel.

Me määratleme tft -objekti (kuva) ja ts -objekti (puutetundliku) kui vastavate funktsioonide viiteid.

Me määratleme umbes 16 -bitised värvikonstandid, et hõlbustada ekraani ning teksti- ja graafikaobjektide värvide renderdamist. Märkate, et veebisaidil on URL, millel on värvivalija ja muundur, et teisendada nähtavad värvid 16 -bitiste kuueteistkümnendsüsteemi väärtusteks. See on väga kasulik tööriist.

Teises koodipaneelis määratleme rakendusepõhisteks eesmärkideks globaalsed muutujad.

Stringi, tähte ja tähte X ning tähe Y stringe ja massiive kasutatakse a) tekstisisestusrakenduse nuppude tähtede kuvamiseks ja b) puudutuse x- ja y -koordinaatide sobitamiseks iga vastava tähe x- ja y -koordinaatidega. klaviatuuri. Lisateavet selle kohta, kui jõuame visandi selle sektsiooni.

funcX , funcY ja func on massiivid, mille abil tehakse kindlaks, millist rakenduse nuppu peamenüüekraanil vajutati, ja seejärel kasutatakse seda teavet vastava rakenduse käivitamiseks.

LastTouch ja tThresh kasutatakse puutemeetodites tagamaks, et me ei saaks ekraani liiga pikalt vajutamisel mitut puudutust. Sellest pikemalt hiljem.

Režiimi muutuja kontrollib kuvatavat ekraani ja muutuja tMode kontrollib, milliseid puudutusmeetodeid igal ajal kasutatakse.

Plokis setup () avame jadakanali, kui tahame silumiseks kasutada käske Serial.println (). Te ei vaja seda rida, kui te ei soovi Serial Monitori silumist teha.

Järgmised neli rida on lihtsalt tft -objekti seadistuskood.

Järgmisena seadsime ekraani orientatsiooni portreerežiimi.

Käsk randomSeed () käivitab just juhuslike numbrite generaatori, mida Saucy 7 rakendus saab hiljem kasutada.

Lõpuks nimetame pritsmeekraani meetodiks.

Samm 5: Spash -ekraani loomine ja ekraani ja puutetundliku kaardistamise mõistmine

Alustame nüüd pritsmekraani ehitamist.

Kuid kõigepealt vaadake pilti ekraani ja puutetundliku kaardistamise jaoks. Pange tähele, et päritolu on erinevates kohtades. Ekraani jaoks on lähtekoht (0, 0) ekraani vasakus ülanurgas (kui nupp RESET on üleval) ja kasvab vasakult paremale ja ülevalt alla.

Puute tuvastamiseks on lähtekoht ekraani vasakus alanurgas ja kasvab vasakult paremale ja alt üles.

Seega on kuvarid ja puutetundlikud kaardid eraldi määratletud ja nende eraldusvõime on erinev. Ekraani eraldusvõime on 240 x 320 ja puutetundlikkus on palju suurem, nagu varsti näete.

Minge oma visandi alale meetodi loop () {} alla ja me sisestame splash () meetodi koodi.

Alustame käsuga fillScreen (), et täita ekraan päise koodis määratletud valge värviga.

Seejärel seadsime teksti suuruseks '5'. See on suhteliselt suur põhiteksti suurus. Seadsime tekstikursori jaoks positsiooni x ja y ning teksti värvi. Lõpuks joonistab käsk print ("TFT") tegelikult sinise suurusega "5" teksti määratud kohale.

Teksti suurust suurendades näete, et tähemärgid muutuvad üha paksemaks. Nii et üle 5 ei ole ilmselt kasulik. Selle õpetuse lõpus näitan teile, kuidas kasutada bitmap -fonte, et saada oma rakendustes ilusam tekst. Kompromiss on see, et bitmap -fondikomplektide kasutamine võtab teie Arduino'is palju mälu, mis piirab teie visandite suurust

Kordame sarnaseid käske kahele ülejäänud tekstiüksusele pritsmeekraanil.

Lõpuks viivitame 2,5 sekundiga, et anda kasutajale võimalus lugeda ekraani sisu enne rakenduse liikumist peamenüü ekraanile.

Jätkake ja laadige see visand oma Arduinole üles. See peaks kuvama pritsmeekraani.

6. samm: puutekaardistamise diagnostikatööriista tegemine

ShowTouch () meetod on väga kasulik, et aidata teil saada ekraani erinevate osade puutekoordinaate. Seda peate tegema nuppude puutepiirkondade määratlemiseks.

Jätkake ja sisestage see meetod varem tehtud splash () meetodi alla.

See toimib järgmiselt.

Lause if määrab, kas viimasest puudutusest on möödunud piisavalt aega. See võtab süsteemi praeguse aja millis () ja lahutab viimase puudutuse aja. Kui see on suurem kui tThresh väärtus (200 millisekundit), võtab see puudutuse vastu. Vastasel juhul ignoreerib see juhuslikke mitme puutega sündmusi.

Järgmisena saab käsk getpoint () puudutuse x, y ja z koordinaadid. Z -koordinaat on puudutusrõhu mõõt.

Kui rõhk on visandi päises määratletud maksimum- ja minikonstantides, muudab meetod kõigepealt YP- ja XM -tihvtid tagasi OUTPUT -i, viies ekraani kuvarirežiimi.

Järgmisena joonistab see valge ristküliku, et kustutada kõik varem kuvatud koordinaadid.

Seejärel eskiis määrab fondi suuruseks 2, musta värvi ja kuvab ekraanil x (p.x) ja y (p.y) koordinaadid. Seejärel saate need asukohad märkida, et aidata teil oma visandite jaoks puutetsoone programmeerida.

Meetodi allosas olev if -lause kontrollib, kas ekraanil on nuppu „Kodu” vajutatud. operaatorid '<=' lubavad avalehe laiust ja kõrgust. Määratud koordinaadid on nupu Avaleht x- ja y-keskkoordinaadid. Kui seda vajutada, on režiimiks seatud 0, mis lõpuks tähendab 'Mine peamenüü ekraanile'. Sellest pikemalt hiljem.

Lõpuks värskendame lastTouch süsteemi praeguseks aja milliks (), et olla valmis hilisemaks puudutussündmuseks.

Palun mine nüüd loop () plokki ja lisa rida showTouch ();

Sel hetkel laadige oma visand üles ja proovige seda. See joonistab pritsmeekraani ja kui hakkate ekraani puudutama, kuvatakse ekraanile TOUCH x ja y koordinaadid.

Enne jätkamist vaatame uuesti läbi kaks olulist koodirida:

pinMode (YP, OUTPUT); // TFT juhtnuppude taastamine

pinMode (XM, OUTPUT); // kuvamiseks pärast puudutuse tuvastamist

Iga kord, kui soovite ekraanil midagi kuvada, PEATE täitma need kaks käsku, et muuta ekraan TOUCH -režiimist DISPLAY -režiimiks. Vastasel korral teie kuvamiskäsud ei tööta.

Hästi tehtud siiani! Puhka!

Samm: looge peamenüü ekraan

Nüüd ehitame oma peamenüü ekraani kahe nupuga, mida saate iga rakenduse aktiveerimiseks vajutada. Meetodi nimi on menuScreen ().

Alustuseks paneme ekraani kuvarirežiimi.

Seejärel seadistame fondi suuruse, värvi ja asukoha ning prindime teksti „Peamenüü”.

Nüüd joonistame kaks ristkülikut, mis on nupud.

Kõigil graafikakäskudel on sarnane struktuur:

graphicShape (x koordinaat, y koordinaat, laius, kõrgus, VÄRV)

- x koordinaat - üleval vasakul ristkülikukujuliste objektide jaoks, keskel ringide jaoks

- y koordinaat - ristkülikukujuliste objektide jaoks üleval vasakul, ringide keskel

- laius - objekti laius pikslites

- VÄRV - värvikonstant, mille määrasime päises

Lõpuks kutsume kahte meetodit Saucy 7 ikooni ja QWERTY tekstisisestuse ikooni joonistamiseks. Need on eraldi meetodid.

Draw7icon (0) meetod võtab täisarvu parameetri, mis on palli joonistamiseks y-nihe. Me teeme seda selleks, et saaksime sama meetodit kasutada palli joonistamiseks menüüekraanil JA rakenduse Saucy 7 ekraanil. Nihe võimaldab meil palli y-koordinaati programmeerivalt üles või alla reguleerida.

Draw7Ball (0) meetodit kutsutakse draw7Icon (0) seest. See võtab ka parameetri, mis võimaldab meil reguleerida palli vertikaalset asendit sõltuvalt sellest, kas joonistame selle menüü- või rakenduseekraanile.

Käsk fillCircle () võtab 4 argumenti.

- ringi keskpunkti x koordinaat

- ringi keskpunkti y koordinaat

- ringi raadius (pikslites)

- VÄRV - värvikonstant, mille määrasime päises

Lõpuks kutsutakse meetodit drawTextIcon (), et joonistada teksti sisestamise rakenduse ikoon.

Võite proovida meetodit käivitada, kommenteerides seadistuses () meetodit splash () ja lisades menuScreen ().

Laadige sketš oma Arduinole üles ja proovige seda!

8. samm: rakendus Saucy 7 ja peamenüü meetodid

Seitsmeekraani () meetod joonistab rakenduse ekraani, sealhulgas palli joonistamise ja seejärel juhiste kuvamise.

Meetod sevenInstr () kuvab juhiseid ja kustutab ekraani eelmistest vastustest. Samuti joonistab nupp "Vastus".

Meetod show7Response () eemaldab ekraanilt eelmise vastusmeetodi, kuvab animeeritud sõnumi „mõtlemine…” ja kuvab seejärel juhuslikult valitud vastusteate.

read7Touch () on meetod, mis ootab puutesündmust juhuslikult genereeritud sõnumi koostamiseks. Puutekood on väga sarnane eelnevalt kirjeldatud showTouch () diagnostikameetodiga. Lihtsuse huvides võtab meetod vastu puudutuse kõikjal ekraanil nupu „Vasta” puudutusena.

Meetodi ülaosas määratleme string [vastuse massiivi, mis on sõnumid, mida saab genereerida puuteüritusest.

Kui vajutate nuppu Kodu, lõpetab see rakenduse ja naaseb peamenüü ekraanile. Vastasel juhul genereerib meetod juhusliku numbri vahemikus 0 kuni 7 (eksklusiivne) ja edastab vastava tekstisõnumi massiivist vastus meetodile show7Response ().

Lõpuks vaatab backToMenu () meetod, et puudutada avakuva nuppu ja naasta juhtimine peamenüü ekraanile.

Meetod readMenuTouch () jälgib puudutussündmust, kui olete peamenüü ekraanil. Puudutuse tuvastamisel edastab see x- ja y -koordinaadid getFunc (x, y) meetodile, mis näeb välja funcX ja funcY massiivides, et need sobiksid puudutuse x- ja y -koordinaatidega. Seejärel tagastab see valitud rakenduse massiivi func numbri. "1" on Saucy 7 ja "2" on tekstisisestusrakendus. Seejärel määrab see režiimi selle rakenduse väärtusele, nii et rakendus käivitatakse.

9. samm: silmus () plokk

Nüüd hakkame koostama silmuse () plokk -koodi, et käidelda sobiva ekraani kuvamist ja seejärel sobivate puutemeetodite helistamist, lähtudes praegu valitud valikust.

Silmus () meetod koosneb kahest lüliti () struktuurist.

Ülemise lüliti struktuur võimaldab kuvada sobivat ekraani sõltuvalt sellest, milline suvand on valitud. See määrab ka tMode väärtuse sobiva puutemeetodi jaoks, mida praeguse valitud suvandi jaoks käivitada. Lõpuks määrab see režiimi väärtuseks 9, et ekraan ei joonistaks lõputult ümber.

Alumine lüliti struktuur juhib, milliseid puudutusmeetodeid rakendatakse, lähtudes kasutaja valitud rakenduse valikust, mida tähistab tMode väärtus.

Laadige visand oma Arduinosse ja peaksite saama valida ja kasutada rakendust Saucy 7.

Olete palju tööd teinud! Puhka:-)

10. toiming: tekstisisestusrakendus - oleme kodus venitatud

Nüüd kaasame teksti sisestamise rakenduse meetodid.

makeKbd () joonistab ekraanile klaviatuuri.

See joonistab kuus täidetud ümarat ristkülikut ja katab seejärel igale klahvile sobiva tähe, saades tähe cString stringist, mille see klahvi kohale ekraanile prindib. Pange tähele, et fillRoundedRect () käsu teine viimane parameeter on iga nurga raadius pikslites. Mida kõrgem see väärtus, seda ümaramad nurgad.

Meetod readKbdTouch () töötab sarnaselt teiste puute tuvastamise meetoditega.

Kui tuvastatakse puudutus, mida EI ole nupul Avaleht, edastab see x- ja y -koordinaadid curChar (x, y) meetodile, mis tagastab märgi, mis vastab sellele x ja y asukohale ekraanil. „Sisestatud” sõnum kuvatakse seejärel ekraanil, kasutades meetodit „displayMsg (theChar)”.

CurChar (x, y) meetod otsib tähe X ja tähe Y massiive, et leida vaste, mis on lähedane readKbdTouch () edastatud x- ja y -koordinaatidele. Kui see leiab vaste, tagastab see vastava tähe meetodile readKbdTouch. Pange tähele, et lähtestame muutuja theChar väärtuseks 32, mis on tühimärgi ASCII -kood. Me teeme seda nii, et kui kasutaja puudutab klaviatuurist eemal asuvat piirkonda, siis ei kuvata mittekasutatavaid märke.

Meetod displayMsg (theChar) võtab curCharilt (x, y) tagastatud märgi ja lisab selle sõnumi stringile. Seejärel kuvab see sõnumi ekraanil.

Lõpuks värskendame silmuse () plokki, et aktsepteerida tekstisisestusrakenduse valikut.

Laadige tftDemo visand oma Arduinole üles ja peaksite saama valmis rakendust kasutada.

Palju õnne! olete loonud puutetundliku TFT -rakenduse! Võtke ülejäänud päev vabaks!

11. samm: muutuge libedaks! - Adafruit Bitmap Fontide kasutamine oma visandis

Tavaline TFT fondikomplekt sobib. Kuid on toredam, kui saame oma TFT -visandites kasutada korralikke bitikaardistatud fonte.

Negatiivne külg on see, et fondikomplektide laadimine Arduino mällu võtab märkimisväärselt ruumi. Tegelikult on väga lihtne oma visand täita nii paljude fontidega, et seda Arduinosse ei laadita.

Fondid on saadaval Adafruit_GFX raamatukogu kaustas, mille olete selle projekti jaoks juba installinud. Sellel saidil on suurepärane õpetus fontide kasutamiseks.

Lisage oma visandi päisealale fondiviide selle fondi kohta, mida soovite kasutada. Selles näites kasutame fondi FreeSerifBoldItalic18p7b.

#kaasake

Kommenteerige oma splash () meetodis tft.setTextSize (); käsk.

Lisage järgmine käsk,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Nüüd kasutavad kõik printimise () käsud parajasti määratud fonti. Teise fondi muutmiseks kasutaksite teist käsku tft.setFont () koos järgmise fondiga, mida soovite kasutada.

Fondi standardse tft -fondi taastamiseks kasutage lihtsalt tft.setFont (); käsk ilma parameetriteta.

Laadige eskiis oma Arduinole üles ja näete, et pritsmeekraan kasutab nüüd ekraanil oleva teksti renderdamiseks bitikaardi fonti. Märkate, et pärast fondi lisamist on visandi suurus oluliselt suurem.

12. samm: lõplikud mõtted

Teile on saadaval palju muid graafiliste objektide käske. Nad sisaldavad:

tft.drawRect (x, y, laius, kõrgus, VÄRV);

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

Järgmised näited kasutavad tft.color565 meetodit, mis võimaldab teil määrata värvi punase, rohelise ja sinise väärtuse alusel. See on alternatiivne viis meie visandis kasutatud konstantselt määratletud HEX -värviväärtuste kasutamiseks.

tft.drawRoundRect (x, y, laius, kõrgus, raadius, tft.color565 (255, 0, 0)); // see oleks punane

tft.drawCircle (x, y, raadius, tft.color565 (0, 255, 0)); // see oleks roheline

tft.drawTriangle (tipp1x, tipp1y, tipp2x, tipp2y, tipp3x, tipp3y, tft.värv565 (0, 0, 255)); // sinine

tft.fillTriangle (tipp1x, tipp1y, tipp2x, tipp2y, tipp3x, tipp3y, tft.värv565 (255, 0, 0);

Mängige nende käskudega ringi ja uurige, kuidas need saavad teie TFT -projektidele lisada.

TFT -ekraani kasutamise õppimine on keeruline ja peaksite olema uhke enda üle, et leidsite aega nende esimeste sammude õppimiseks.

TFT -ekraanid võivad teie Arduino projektidele lisada atraktiivse ja kasuliku graafilise kasutajaliidese aspekti.

Täname, et töötasite selle õpetuse läbi.

NÜÜD NÜÜD VÄLJA JA TEE MIDAGI IMELINE!