„BluBerriSix“- TFT jutiklinis ekranas / „Arduino“pamoka: 12 žingsnių (su paveikslėliais)

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:47

2019 -ieji yra „RIM Blackberry 850“20 -mečio jubiliejus! Šis mažas Kanados išradimas pakeitė pasaulio bendravimo būdą. Jo jau seniai nebėra, bet jo palikimas tęsiasi!

Šioje instrukcijoje sužinosite, kaip naudoti „MCUfriend.com“2,4 colio TFT ekrano skydą „Uno“/„Mega“. Išmoksite rodyti grafinius objektus ir tekstą bei priimti prisilietimus ir veikti prisilietimo atveju. ekranas yra labai panašus į „Adafruit“ir kitus TFT skydus/ekranus. Taigi, jei esate čia, apsilankykite parodoje.

Sukursime supaprastintą 2 „bluBerriSIX“eskizo programos versiją.

Pradėkime!

1 žingsnis: „BluBerriSIX“- apžvalga

„BluBerriSIX“programa yra šešių funkcijų TFT projektas.

Tai įeina:

Žibintuvėlis

Švelni „7“programa (kaip „Magic“8 “kamuolys)

Skaičiuotuvas

Atstumo matavimo programa, naudojant ultragarsinį atstumo jutiklį SR-04

Temperatūros ir drėgmės programa, kuri realiuoju laiku registruoja duomenis iki 1,5 km su HC-12 siųstuvu-imtuvu

SMS žinutė naudojant HC-12.

Šis projektas užėmė 1100 kodo eilučių. Sukursime žymiai paprastesnę versiją, kuri vis dar demonstruoja TFT ekraną ir jutiklinius jutiklius.

2 žingsnis: ko reikia?

- „Arduino Uno“arba „Mega 2560“

- „MCUfriend“2,4 colio TFT skydas

Šios bibliotekos:

- „Adafruit_GFX“biblioteka

- „Adafruit“jutiklinio ekrano biblioteka

- MCUFRIEND_kbv biblioteka

Šias bibliotekas galima įdiegti naudojant „Arduino IDE“bibliotekos tvarkyklę.

Norėdami įkelti biblioteką, eikite į meniu parinktį Eskizas -> Įtraukti biblioteką -> Tvarkyti bibliotekas …

Lauke „filtruoti paiešką …“įveskite pirmuosius bibliotekos vardo simbolius, tada pasirinkite ir įdiekite atitinkamą biblioteką. Kai tai padarysite, tiesiog pasitraukite iš šio ekrano.

Montuodami TFT ekraną ant „Uno“/„Mega“, BŪKITE ATSARGIAI, kad įsitikintumėte, ar teisingai išdėstėte kaiščius. Aš netinkamai sureguliavau savo pirmąjį skydą ir jį pakepinau. Praleidau dvi savaites didėjantį nusivylimą bandydamas rasti tinkamas bibliotekas, kol supratau, kad ekranas negyvas. BŪK ATSARGUS

3 žingsnis: mūsų projektas

Sukursime paprastesnę „bluBerriSIX“eskizo versiją.

Tai turės, - rodomas ekranas

- pagrindinis meniu su dviem mygtukais

- „Saucy 7“programa

- supaprastinta teksto įvedimo programa

Taip pat galėsite grįžti į pagrindinį meniu paspausdami piktogramą „Pagrindinis“apatiniame kairiajame šio ekrano kampe. Jei tokios piktogramos neturite, turėsite apibrėžti ekrano „namų“sritį. Šioje pamokoje sužinosite, kaip nustatyti ekrano lietimo sritis.

Nors tai yra supaprastintas projektas, jis vis dar gana ilgas. Kiekviename pagrindiniame etape pateiksiu „Arduino“eskizų versijas, kad galėtumėte jas įkelti, jei norite.

4 veiksmas: antraštės kodas, visuotiniai kintamieji, ekrano sąranka

Visas projektas yra labai dokumentuotas. Bet detalės seka.

Pradėkite naują „Arduino“projektą ir pavadinkite jį „tft demo“arba kitu norimu vardu.

Pirmame pirmame kodų skydelyje parodyta, kaip apibrėžiame pasaulinius kintamuosius. Taip pat įtraukiame bibliotekas, kurias turėsime naudoti ir ekrano rodymo funkcijai, ir ekrano jutikliniam aptikimui.

Mes taip pat apibrėžiame analoginius kaiščius, atsižvelgdami į jų konkrečius ekrano tikslus.

Mes apibrėžiame „tft“objektą (ekraną) ir „ts“objektą (lietimą) kaip jų atitinkamų funkcijų nuorodas.

Mes apibrėžiame maždaug 16 bitų spalvų konstantas, kad būtų lengviau perteikti ekrano, teksto ir grafikos objektų spalvas. Pastebėsite, kad yra svetainės URL, kuriame yra spalvų parinkiklis ir keitiklis, kad matomos spalvos būtų konvertuotos į 16 bitų šešioliktainę reikšmę. Tai labai naudinga priemonė.

Antrame kodų skydelyje mes apibrėžiame visuotinius kintamuosius konkrečioms programoms.

C eilutės, raidės ir raidės X ir raidės Y eilutės ir masyvai naudojami a) rodyti teksto įvedimo programos mygtukų raides ir b) suderinti prisilietimo x ir y koordinates su kiekvienos atitinkamos raidės x ir y koordinatėmis. klaviatūra. Daugiau apie tai, kai pateksime į tą eskizo skyrių.

funcX , funcY ir func yra masyvai, kurie nustato, kuris programos mygtukas buvo paspaustas pagrindinio meniu ekrane, ir tada naudoja šią informaciją atitinkamai programai paleisti.

„lastTouch“ir „tThresh“naudojami liečiant metodus, siekiant užtikrinti, kad per ilgai nepaspaudę ekrano nesiliesime kelis kartus. Daugiau apie tai vėliau.

Režimo kintamasis valdys, koks ekranas bus rodomas, o kintamasis tMode valdys, kurie prisilietimo metodai naudojami bet kuriuo metu.

Sąrankos () bloke atidarome serijinį kanalą, jei norime derinimui naudoti komandas Serial.println (). Šios eilutės jums nereikia, jei nenorite atlikti „Serial Monitor“derinimo.

Kitos keturios eilutės yra tik tft objekto sąrankos kodas.

Toliau nustatome ekrano orientaciją į portreto režimą.

Komanda randomSeed () tik paleidžia atsitiktinių skaičių generatorių, kad vėliau jį naudotų „Saucy 7“programa.

Galiausiai mes vadiname pradžios ekrano metodą.

5 veiksmas: sukurkite „Spash“ekraną ir supraskite ekraną prieš jutiklinį atvaizdavimą

Dabar pradėsime kurti apsauginį ekraną.

Tačiau pirmiausia pažiūrėkite į paveikslėlį, kad būtų rodomas ekranas ir prisilietimas. Atkreipkite dėmesį, kad kilmės vietos yra skirtingos. Rodymo atveju kilmė (0, 0) yra ekrano viršuje kairėje (kai mygtukas RESET yra viršuje) ir auga iš kairės į dešinę ir iš viršaus į apačią.

Lietimui aptikti kilmė yra apatiniame kairiajame ekrano kampe ir auga iš kairės į dešinę ir iš apačios į viršų.

Taigi EKRANAI IR LITTELIŲ ŽEMĖLAPIAI APRAŠOMI ATSKIRAI ir turi skirtingą skiriamąją gebą. Ekrano skiriamoji geba yra 240 x 320, o jutiklinė - daug didesnė, kaip netrukus pamatysite.

Eikite į eskizo sritį žemiau metodo loop () {} ir mes įvesime splash () metodo kodą.

Pradedame atlikdami komandą fillScreen (), kad užpildytume ekraną BALTA spalva, kurią apibrėžėme antraštės kode.

Tada mes nustatome teksto dydį į „5“. Tai gana didelis pagrindinis teksto dydis. Mes nustatome teksto žymeklio x ir y padėtį ir nustatome teksto spalvą. Galiausiai spausdinimo („TFT“) komanda iš tikrųjų atkreipia mėlyną, 5 dydžio tekstą nurodytoje vietoje.

Padidinę teksto dydį pamatysite, kad simboliai tampa vis stambesni. Taigi viršyti 5 greičiausiai nėra naudinga. Šios pamokos pabaigoje parodysiu, kaip naudoti bitmap šriftus, kad jūsų programose būtų gražesnis tekstas. Kompromisas yra tas, kad naudojant bitmap šriftų rinkinius jūsų „Arduino“užima daug atminties, o tai apribos jūsų eskizo dydžius

Panašias komandas kartojame ir kitiems dviem teksto elementams pradžios ekrane.

Galiausiai atidėliojame 2,5 sekundės, kad vartotojas galėtų perskaityti ekrano turinį prieš programai pereinant į pagrindinio meniu ekraną.

Pirmyn ir įkelkite šį eskizą į „Arduino“. Jis turėtų rodyti pradinį ekraną.

6 veiksmas: sukurkite jutiklinio atvaizdavimo diagnostikos įrankį

„ShowTouch“() metodas yra labai naudingas norint padėti gauti skirtingų ekrano dalių prisilietimo koordinates. Tai turėsite padaryti norėdami apibrėžti mygtukų lietimo sritis.

Eikite į priekį ir įveskite šį metodą žemiau savo splash () metodo, atlikto anksčiau.

Štai kaip tai veikia.

Jei teiginys nustato, ar nuo paskutinio prisilietimo praėjo pakankamai laiko. Dabartinis sistemos laikas paimamas milis () ir atimamas paskutinio prisilietimo laikas. Jei jis didesnis nei tThresh vertė (200 milisekundžių), jis priima prisilietimą. Priešingu atveju jis neatsižvelgs į atsitiktinius kelių prisilietimų įvykius.

Tada komanda getpoint () gauna prisilietimo x, y ir z koordinates. Z koordinatė yra prisilietimo slėgio matas.

Jei slėgis neviršija eskizo antraštėje nustatytų maks. Ir min. Konstantų, metodas pirmiausia pakeis YP ir XM kaiščius atgal į OUTPUT, o ekranas bus perjungtas į DISPLAY režimą.

Tada jis nupieš baltą stačiakampį, kad ištrintų visas anksčiau rodytas koordinates.

Tada eskizas nustato šriftą į 2 dydžio juodą spalvą ir ekrane rodo x (p.x) ir y (p.y) koordinates. Tada galite užsirašyti šias vietas, kad padėtumėte užprogramuoti jutiklines zonas savo eskizams.

Metodo apačioje esantis teiginys patikrina, ar ekrane buvo paspaustas mygtukas „Pagrindinis“. „<=“operatoriai leidžia nustatyti pagrindinio mygtuko plotį ir aukštį. Nurodytos koordinatės yra pagrindinio mygtuko x centro ir y centro koordinatės. Jei paspausite, režimas bus nustatytas į 0, o tai galiausiai reikš „Eiti į pagrindinio meniu ekraną“. Daugiau apie tai vėliau.

Galiausiai atnaujiname lastTouch iki dabartinio sistemos laiko milis (), kad pasiruoštume vėlesniam prisilietimo įvykiui.

Dabar eikite į ciklo () bloką ir pridėkite eilutę showTouch ();

Šiuo metu įkelkite eskizą ir išbandykite. Jis nubraižys pradinį ekraną ir, jei pradėsite liesti ekraną, ekrane bus rodomos TOUCH x ir y koordinatės.

Prieš tęsdami, peržiūrėkime dvi svarbias kodo eilutes:

pinMode (YP, OUTPUT); // atkurti TFT valdymo kaiščius

pinMode (XM, OUTPUT); // rodyti, kai aptinkamas prisilietimas

Kiekvieną kartą, kai norite ką nors parodyti ekrane, PRIVALOME vykdyti šias dvi komandas, kad ekranas iš TOUCH režimo būtų pakeistas į DISPLAY režimą. Priešingu atveju jūsų rodymo komandos neveiks.

Gerai padaryta iki šiol! Padarykite pertrauką!

7 veiksmas: sukurkite pagrindinio meniu ekraną

Dabar sukursime pagrindinio meniu ekraną su dviem mygtukais, kuriuos galite paspausti, kad suaktyvintumėte kiekvieną programą. Metodas vadinamas menuScreen ().

Pradedame ekraną įjungdami DISPLAY režimą.

Tada mes nustatome šrifto dydį, spalvą ir vietą ir spausdiname „Pagrindinio meniu“tekstą.

Dabar nupiešiame du stačiakampius, kurie yra mygtukai.

Visos grafikos komandos turi panašią struktūrą:

graphicShape (x koordinatė, y koordinatė, plotis, aukštis, SPALVA)

- x koordinatė - viršuje kairėje stačiakampiams objektams, centre apskritimams

- y koordinatė - stačiakampių objektų viršuje kairėje, apskritimų centre

- plotis - objekto plotis pikseliais

- COLOR - spalvų konstanta, kurią apibrėžėme antraštėje

Galiausiai mes vadiname dviem būdais nupiešti „Saucy 7“piktogramą ir „QWERTY“teksto įvedimo piktogramą. Tai yra atskiri metodai.

Draw7icon (0) metodas naudoja sveikojo skaičiaus parametrą, kuris yra y poslinkis rutuliui traukti. Mes tai darome, kad galėtume naudoti tą patį metodą piešdami rutulį meniu ekrane IR programos „Saucy 7“ekrane. Poslinkis leidžia mums programiškai koreguoti rutulio y koordinatę aukštyn arba žemyn.

Draw7Ball (0) metodas iškviečiamas iš draw7Icon (0). Taip pat reikalingas parametras, leidžiantis reguliuoti rutulio vertikalią padėtį, atsižvelgiant į tai, ar piešiame jį meniu, ar programos ekrane.

Komanda fillCircle () apima 4 argumentus.

- apskritimo centro x koordinatė

- y apskritimo centro koordinatė

- apskritimo spindulys (taškais)

- COLOR - spalvų konstanta, kurią apibrėžėme antraštėje

Galiausiai metodas drawTextIcon () yra pašauktas piešti teksto įvedimo programos piktogramą.

Galite pabandyti paleisti metodą, pakomentuodami splash () metodą sąrankoje () ir pridėdami menuScreen ().

Įkelkite eskizą į „Arduino“ir išbandykite!

8 veiksmas: „Saucy 7“programa ir pagrindinio meniu metodai

„SevenScreen“() metodas parodys programos ekraną, įskaitant rutulio piešimą ir tada instrukcijų rodymą.

SeptyniInstr () metodas rodo instrukcijas, taip pat išvalo ekraną nuo ankstesnių atsakymų. Taip pat nupiešiamas mygtukas „Atsakymas“.

„Show7Response“() metodas pašalina ankstesnį atsakymo metodą iš ekrano, parodo animacinį „mąstymo…“pranešimą ir parodo atsitiktinai pasirinktą atsakymo pranešimą.

read7Touch () yra metodas, kuris laukia prisilietimo įvykio, kad gautų atsitiktinai sugeneruotą pranešimą. Jutiklinis kodas labai panašus į anksčiau aprašytą „showTouch“() diagnostikos metodą. Kad būtų paprasčiau, metodas bet kur ekrane palies prisilietimą prie mygtuko „Atsakyti“.

Metodo viršuje mes apibrėžiame atsakymo eilučių masyvą, kuris yra pranešimai, kuriuos galima generuoti iš lietimo įvykio.

Jei paspaudžiamas pagrindinis mygtukas, programa bus baigta ir grįš į pagrindinio meniu ekraną. Priešingu atveju metodas sugeneruos atsitiktinį skaičių nuo 0 iki 7 (išskirtinis) ir perduos atitinkamą tekstinį pranešimą iš masyvo „[“] į „show7Response ()“metodą.

Galiausiai „backToMenu“() metodas stebi, kaip paspaudžiamas pagrindinis mygtukas, ir grąžina valdymą į pagrindinio meniu ekraną.

„ReadMenuTouch“() metodas stebi jutiklinį įvykį, kai esate pagrindinio meniu ekrane. Kai aptinkamas prisilietimas, jis perduoda x ir y koordinates į „getFunc“(x, y) metodą, kuris atrodo funcX ir funcY masyvuose, kad atitiktų prisilietimo x ir y koordinates. Tada jis grąžina pasirinktos programos skaičių iš funkcijų masyvo. „1“yra „Saucy 7“, o „2“- teksto įvedimo programa. Tada režimas nustatomas pagal tos programos vertę, kad programa būtų vykdoma.

9 veiksmas: ciklo () blokas

Dabar pradėsime kurti ciklo () bloko kodą, kad būtų galima rodyti atitinkamą ekraną ir tada iškviesti atitinkamus lietimo metodus, remiantis šiuo metu pasirinkta parinktimi.

Ciklo () metodą sudaro dvi jungiklio () struktūros.

Viršutinė jungiklio struktūra leidžia rodyti atitinkamą ekraną, priklausomai nuo pasirinktos parinkties. Ji taip pat nustato tMode reikšmę atitinkamam jutikliniam metodui paleisti pagal pasirinktą parinktį. Galiausiai režimo reikšmė nustatoma į 9, kad ekrano ekranas nesibaigtų.

Apatinio jungiklio struktūra valdo, kurie lietimo būdai atliekami, atsižvelgiant į vartotojo pasirinktą programos parinktį, kurią rodo tMode reikšmė.

Įkelkite eskizą į „Arduino“ir turėtumėte turėti galimybę pasirinkti ir naudoti programą „Saucy 7“.

Jūs padarėte daug darbo! Padaryk pertrauką:-)

10 veiksmas: teksto įvedimo programa - mes esame namuose

Dabar įtraukime teksto įvedimo programos metodus.

makeKbd () piešia klaviatūrą ekrane.

Jis nubrėžia šešis užpildytus suapvalintus stačiakampius ir uždengia atitinkamą raidę ant kiekvieno rakto, gaudamas raidę iš eilutės „cString“, kurią ji spausdina ekrane virš klavišo. Atkreipkite dėmesį, kad antrasis paskutinis parametras „fillRoundedRect ()“komandoje yra kiekvieno kampo spindulys taškais. Kuo didesnė ši vertė, tuo labiau suapvalinti kampai.

Metodas readKbdTouch () veikia panašiai kaip kiti jutiklinio aptikimo metodai.

Jei aptinkamas prisilietimas, kurio NĖRA pagrindiniame mygtuke, jis perduoda x ir y koordinates curChar (x, y) metodui, kuris grąžina simbolį, atitinkantį tą x ir y vietą ekrane. Pranešimas, kuris buvo „įvestas“, ekrane rodomas naudojant „displayMsg“(theChar) metodą.

CurChar (x, y) metodas ieško raidžių X ir raidžių Y masyvų, kad būtų galima rasti atitiktį, kuri yra artima x ir y koordinatėms, perduotoms iš readKbdTouch (). Jei randa atitiktį, ji grąžina atitinkamą raidę į readKbdTouch metodą. Atkreipkite dėmesį, kad inicijuojame kintamąjį theChar į 32, kuris yra tarpo simbolio ASCII kodas. Tai darome taip, kad jei vartotojas palies sritį, esančią toliau nuo klaviatūros, nebus rodomi nepasiekiami simboliai.

„DisplayMsg“(theChar) metodas paima iš curChar (x, y) grąžintą simbolį ir prideda jį prie žinutės eilutės. Tada ekrane rodomas pranešimas.

Galiausiai atnaujinsime ciklo () bloką, kad būtų priimtas teksto įvedimo programos pasirinkimas.

Įkelkite „tftDemo“eskizą į „Arduino“ir turėtumėte turėti galimybę naudotis užbaigta programa.

Sveikinu! sukūrėte TFT jutiklinio ekrano programą! Išnaudokite likusią dienos dalį!

11 veiksmas: tapk slidus! - „Adafruit Bitmap“šriftų naudojimas eskize

Standartinis tft šriftų rinkinys yra tinkamas. Bet gražiau, jei TFT eskizuose galime naudoti tinkamus bitų atvaizdavimo šriftus.

Neigiama yra tai, kad šriftų rinkinių įkėlimas į „Arduino“atmintį užima daug vietos. Tiesą sakant, labai lengva užpildyti eskizą tiek šriftų, kad jis nebus įkeltas į „Arduino“.

Šriftus galima rasti „Adafruit_GFX“bibliotekos aplanke, kurį jau įdiegėte šiam projektui. Šioje svetainėje yra puiki šriftų naudojimo pamoka.

Eskizo antraštės srityje pridėkite norimo naudoti šrifto šrifto nuorodą. Šiame pavyzdyje naudosime „FreeSerifBoldItalic18p7b“šriftą.

#įtraukti

Savo splash () metodu pakomentuokite tft.setTextSize (); komandą.

Pridėkite šią komandą,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Dabar bet kurioms spausdinimo () komandoms bus naudojamas šiuo metu nurodytas šriftas. Norėdami pakeisti kitą šriftą, naudokite kitą komandą tft.setFont () su kitu norimu naudoti šriftu.

Norėdami grąžinti šriftą į standartinį tft šriftą, tiesiog naudokite tft.setFont (); komanda be parametrų.

Įkelkite eskizą į savo „Arduino“ir pamatysite, kad ekrano vaizdas dabar naudoja bitmap šriftą, kad atvaizduotų tekstą ekrane. Pastebėsite, kad dabar, kai įtraukėte šriftą, eskizo dydis yra žymiai didesnis.

12 žingsnis: paskutinės mintys

Jums prieinama daugybė kitų grafinių objektų komandų. Jie įtraukia:

tft.drawRect (x, y, plotis, aukštis, SPALVA);

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

Tolesniuose pavyzdžiuose naudojamas tft.color565 metodas, leidžiantis nurodyti spalvą pagal raudoną, žalią ir mėlyną reikšmes. Tai yra alternatyvus būdas naudoti pastoviai apibrėžtas HEX spalvų reikšmes, kurias naudojome eskize.

tft.drawRoundRect (x, y, plotis, aukštis, spindulys, tft.color565 (255, 0, 0)); // tai būtų raudona

tft.drawCircle (x, y, spindulys, tft.color565 (0, 255, 0)); // tai būtų žalia

tft.drawTriangle (viršūnė1x, viršūnė1y, viršūnė2x, viršūnė2y, viršūnė3x, viršūnė3y, tft.color565 (0, 0, 255)); // mėlyna

tft.fillTriangle (viršūnė1x, viršūnė1y, viršūnė2x, viršūnė2y, viršūnė3x, viršūnė3y, tft.color565 (255, 0, 0);

Žaiskite naudodami šias komandas ir ištirkite, kaip jos gali prisidėti prie jūsų TFT projektų.

Išmokti naudotis TFT ekranu yra sudėtinga ir turėtumėte didžiuotis savimi, kad skyrėte laiko pirmiesiems žingsniams išmokti.

TFT ekranai gali pridėti patrauklų ir naudingą grafinės vartotojo sąsajos aspektą jūsų „Arduino“projektams.

Dėkojame, kad dirbote su šia pamoka.

DABAR EISK IR PADARYK KAŽKĄ NUOSTABIĄ!