BluBerriSix - TFT zaslon na dotik / Arduino Vadnica: 12 korakov (s slikami)

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:05

2019 je 20. obletnica RIM Blackberry 850! Ta mali kanadski izum je spremenil način komuniciranja sveta. Davno ni več, vendar se njegova zapuščina nadaljuje!

V tem navodilu se boste naučili, kako uporabljati 2.4 -palčni zaslon TFT MCUfriend.com za Uno/Mega. Naučili se boste prikazati grafične predmete in besedilo ter sprejemati dotike in ukrepati ob dogodkih na dotik. Zaslon je zelo podoben Adafruit in drugim TFT ščitnikom/zaslonom. Če ste tukaj, ostanite na razstavi.

Zgradili bomo poenostavljeno različico 2 aplikacije moje skice bluBerriSIX.

Začnimo!

1. korak: BluBerriSIX - Pregled

Aplikacija bluBerriSIX je projekt s šestimi funkcijami TFT.

Vključuje:

Svetilka

Ostra "7" aplikacija (kot čarobna "8" žoga)

Kalkulator

Aplikacija za merjenje razdalje z uporabo ultrazvočnega senzorja razdalje SR-04

Aplikacija za temperaturo in vlažnost, ki omogoča tudi beleženje podatkov v realnem času do 1,5 km s oddajnikom HC-12

Aplikacija za pošiljanje sporočil z uporabo HC-12.

Ta projekt je vzel 1100 vrstic kode. Izdelali bomo precej enostavnejšo različico, ki še vedno prikazuje koncepte TFT zaslona in zaznavanja dotika.

Korak: Kaj je potrebno?

- Arduino Uno ali Mega 2560

- MCUfriend 2,4 -palčni TFT ščit

Naslednje knjižnice:

- Knjižnica Adafruit_GFX

- Knjižnica zaslona na dotik Adafruit

- knjižnica MCUFRIEND_kbv

Te knjižnice je mogoče namestiti z upraviteljem knjižnic v IDE Arduino.

Če želite naložiti knjižnico, pojdite v meni Sketch -> Include Library -> Manage Libraries….

V polje 'filtriraj iskanje …' vnesite prvih nekaj znakov imena knjižnice, nato izberite in namestite ustrezno knjižnico. Ko končate, pojdite nazaj s tega zaslona.

Ko montirate ščit TFT na Uno/Mega, BODITE ZELO PREVIDNI, da se prepričate, da ste pravilno postavili zatiče. Napačno sem položil svoj prvi ščit in ga ocvrt. Dva tedna naraščajoče frustracije sem poskušal najti prave knjižnice, preden sem spoznal, da je zaslon mrtev. BODI PREVIDEN

3. korak: Naš projekt

Zgradili bomo enostavnejšo različico skice bluBerriSIX.

Imelo bo, - zasilni zaslon

- zaslon glavnega menija z dvema gumboma

- aplikacija Saucy 7

- poenostavljena aplikacija za vnos besedila

V glavni meni se boste lahko vrnili tudi s pritiskom na ikono »Domov« v spodnjem levem kotu tega zaslona. Če te ikone nimate, boste morali določiti "domačo" regijo zaslona. V tej vadnici se boste naučili, kako določiti območja dotika zaslona.

Čeprav je to poenostavljen projekt, je še vedno precej dolg. Na vsaki pomembni stopnji bom zagotovil različice skic Arduino, da jih lahko naložite, če želite.

4. korak: Koda glave, globalne spremenljivke, nastavitev zaslona

Celoten projekt je zelo dokumentiran. Toda podrobnosti sledijo.

Začnite nov projekt Arduino in ga pokličite 'tft demo' ali katero koli drugo ime, ki ga želite.

Prva plošča s kodo zgoraj prikazuje definiranje globalnih spremenljivk. Dodamo tudi knjižnice, ki jih bomo morali uporabiti tako za funkcijo prikaza zaslona kot za zaznavanje dotika zaslona.

Opredelimo tudi analogne zatiče glede na njihove namene, značilne za zaslon.

Objekt tft (prikaz) in objekt ts (dotik) opredelimo kot referenci za njuni funkciji.

Opredelimo nekaj 16 -bitnih barvnih konstant, da olajšamo upodabljanje barv za zaslon ter za besedilne in grafične objekte. Opazili boste, da obstaja URL spletnega mesta, ki ima izbirnik barv in pretvornik za pretvorbo vidnih barv v njihove 16 -bitne šestnajstiške vrednosti. To je zelo koristno orodje.

V drugi kodni plošči definiramo globalne spremenljivke za naše namene, specifične za aplikacijo.

Niz in nizi cString, letter in letterX ter letterY se uporabljajo za a) prikaz črk na gumbih za aplikacijo za vnos besedila in b) ujemanje koordinat x in y dotika s koordinatama x in y vsake ustrezne črke na tipkovnico. Več o tem, ko pridemo do tistega dela skice.

funcX , funcY in func so matrike, ki določajo, kateri gumb aplikacije je bil pritisnjen na zaslonu glavnega menija, in nato te podatke uporabijo za zagon ustrezne aplikacije.

LastTouch in tThresh se uporabljata v metodah dotika, da zagotovimo, da s predolgim pritiskom na zaslon ne dobimo več dotikov. Več o tem kasneje.

Spremenljivka načina bo nadzirala, kateri zaslon je prikazan, spremenljivka tMode pa bo nadzorovala, katere metode dotika se uporabljajo v danem trenutku.

V bloku setup () odpremo serijski kanal, če želimo za odpravljanje napak uporabiti ukaze Serial.println (). Te vrstice ne potrebujete, če ne želite odpravljanja napak v serijskem monitorju.

Naslednje štiri vrstice so samo nastavitvena koda za objekt tft.

Nato nastavimo orientacijo zaslona na portretni način.

Ukaz randomSeed () pravkar zažene generator naključnih števil za kasnejšo uporabo v aplikaciji Saucy 7.

Končno pokličemo metodo splash screen.

5. korak: Izdelava zaslona Spash in razumevanje prikaza v primerjavi s preslikavo na dotik

Zdaj bomo začeli izdelovati zaslon za spash.

Najprej pa poglejte sliko za prikaz zaslona in dotik. Upoštevajte, da so izvori na različnih lokacijah. Za prikaz je izvor (0, 0) v zgornjem levem kotu zaslona (ko je gumb RESET na vrhu) in raste od leve proti desni in od zgoraj navzdol.

Za zaznavanje dotika je izvor v spodnjem levem kotu zaslona in raste od leve proti desni in od spodaj navzgor.

KARTE ZASLONA IN DOTIKA SO TAKO DOLOČENI LOČNO in imajo različne ločljivosti. Zaslon ima ločljivost 240 x 320, dotik pa ima veliko večjo ločljivost, kot boste kmalu videli.

Pojdite na območje skice pod metodo loop () {} in vnesli bomo kodo metode splash ().

Začnemo z ukazom fillScreen (), da zaslon zapolnimo z BELO barvo, ki smo jo določili v kodi glave.

Nato nastavimo velikost besedila na '5'. To je relativno velika velikost besedila. Za besedilni kazalec nastavimo položaj x in y ter barvo besedila. Nazadnje ukaz print ("TFT") na določeno mesto nariše modro besedilo velikosti '5'.

Ko povečate velikost besedila, boste videli, da so znaki vedno bolj debeli. Torej preseganje 5 verjetno ni v pomoč. Na koncu te vadnice vam bom pokazal, kako z uporabo bitnih pisav pridobite lepše besedilo v svojih aplikacijah. Kompromis je, da uporaba nizov bitnih slik zavzame veliko pomnilnika v vašem Arduinu, kar bo omejilo velikosti skic

Podobne ukaze ponovimo za druga dva besedilna elementa na začetnem zaslonu.

Nazadnje zamudimo za 2,5 sekunde, da uporabniku omogočimo, da prebere vsebino zaslona, preden se aplikacija premakne na zaslon glavnega menija.

Pojdite naprej in naložite to skico v svoj Arduino. Prikazati bi moral začetni zaslon.

6. korak: Izdelava diagnostičnega orodja za preslikavo na dotik

Metoda showTouch () je zelo uporabna, da vam pomaga dobiti koordinate dotika različnih delov zaslona. To morate storiti, da določite območja dotika za svoje gumbe.

Pojdite naprej in vnesite to metodo pod predhodno metodo splash ().

Evo, kako to deluje.

Stavek if določa, ali je od zadnjega dotika minilo dovolj časa. Vzame trenutni sistemski čas millis () in odšteje čas zadnjega dotika. Če je večja od vrednosti tThresh (200 milisekund), sprejme dotik. V nasprotnem primeru ne bo upošteval nenamernih dogodkov z več dotiki.

Nato ukaz getpoint () dobi koordinate x, y in z dotika. Z koordinata je merilo pritiska na dotik.

Če je tlak znotraj max in min konstant, ki smo jih določili v glavi skice, bo metoda najprej spremenila zatiče YP in XM nazaj v OUTPUT, zaslon pa bo prestavljen v način DISPLAY.

Nato bo narisal bel pravokotnik, da izbriše vse koordinate, ki so bile morda prikazane prej.

Skica nato nastavi pisavo na velikost 2, črno barvo in prikaže koordinate x (p.x) in y (p.y) na zaslonu. Nato si lahko zabeležite te lokacije, da boste lažje programirali svoja območja dotika za svoje skice.

Stavek if na dnu metode preveri, ali je bil pritisnjen gumb 'Domov' na zaslonu. Operaterji '<=' omogočajo širino in višino gumba Domov. Določene koordinate so koordinate x-središča in y-središča gumba Domov. Če pritisnete, je način nastavljen na 0, kar bo sčasoma pomenilo 'Pojdi na zaslon glavnega menija'. Več o tem kasneje.

Nazadnje posodobimo lastTouch na trenutni sistemski čas millis (), da se pripravimo na kasnejši dogodek na dotik.

Zdaj pojdite v blok loop () in dodajte vrstico showTouch ();

Na tej točki naložite svojo skico in jo preizkusite. Prikazal bo začetni zaslon in če se začnete dotikati zaslona, se na zaslonu prikažeta koordinati TOUCH x in y.

Preden nadaljujemo, pojdimo na dve pomembni vrstici kode:

pinMode (YP, OUTPUT); // obnovimo kontrolne zatiče TFT

pinMode (XM, OUTPUT); // za prikaz po zaznavanju dotika

Kadar koli želite prikazati nekaj na zaslonu, morate MORATI izvršiti ta dva ukaza, da spremenite zaslon iz načina TOUCH v način DISPLAY. V nasprotnem primeru ukazi za prikaz ne bodo delovali.

Bravo do sedaj! Vzeti pavzo!

7. korak: Zgradite zaslon glavnega menija

Zdaj bomo zgradili zaslon glavnega menija z dvema gumboma, na katera lahko pritisnete, da aktivirate vsako aplikacijo. Metoda se imenuje menuScreen ().

Začnemo tako, da zaslon postavimo v način DISPLAY.

Nato nastavimo velikost pisave, barvo in položaj ter natisnemo besedilo »Glavni meni«.

Zdaj narišemo dva pravokotnika, ki sta gumba.

Vsi grafični ukazi imajo podobno strukturo:

graphicShape (x koordinata, y koordinata, širina, višina, COLOR)

- x koordinata - zgoraj levo za pravokotne predmete, sredina za kroge

- y koordinata - zgoraj levo za pravokotne predmete, sredina za kroge

- width - širina predmeta v pikslih

- BARVA - barvna konstanta, ki smo jo določili v glavi

Nazadnje pokličemo dve metodi za risanje ikone Saucy 7 in ikone za vnos besedila QWERTY. To sta ločeni metodi.

Metoda draw7icon (0) vzame celoštevilski parameter, ki je odmik y za vlečenje žoge. To naredimo zato, da lahko uporabimo isto metodo za risanje žoge na zaslonu menija IN na zaslonu aplikacije Saucy 7. Odmik nam omogoča le programsko prilagajanje y-koordinate žoge navzgor ali navzdol.

Metoda draw7Ball (0) se pokliče znotraj draw7Icon (0). Vzame tudi parameter, ki nam omogoča prilagajanje navpičnega položaja žoge glede na to, ali jo narišemo na zaslonu menija ali na zaslonu aplikacije.

Ukaz fillCircle () sprejme 4 argumente.

- x koordinata središča kroga

- y koordinata središča kroga

- polmer kroga (v pikslih)

- BARVA - barvna konstanta, ki smo jo določili v glavi

Končno se pokliče metoda drawTextIcon () za risanje ikone za aplikacijo Vnos besedila.

Metodo lahko poskusite zagnati tako, da komentirate metodo splash () v setup () in dodate menuScreen ().

Naložite skico v svoj Arduino in jo preizkusite!

8. korak: Aplikacija Saucy 7 in metode glavnega menija

Metoda sevenScreen () bo narisala zaslon aplikacije, vključno z risanjem žogice in nato prikazom navodil.

Metoda sevenInstr () prikaže navodila in počisti zaslon iz prejšnjih odgovorov. Nariše tudi gumb "Odziv".

Metoda show7Response () obravnava brisanje prejšnje odzivne metode z zaslona, prikaz animiranega sporočila 'razmišljanje …' in nato prikaz naključno izbranega odzivnega sporočila.

read7Touch () je metoda, ki čaka, da dogodek na dotik proizvede naključno generirano sporočilo. Koda na dotik je zelo podobna prej opisani diagnostični metodi showTouch (). Zaradi poenostavitve bo metoda sprejela dotik kjer koli na zaslonu kot dotik gumba 'Odgovori'.

Na vrhu metode definiramo niz odzivov , ki so sporočila, ki jih je mogoče ustvariti iz dogodka na dotik.

Če pritisnete gumb Domov, se aplikacija zapre in se vrne na zaslon glavnega menija. V nasprotnem primeru bo metoda ustvarila naključno število med 0 in 7 (izključno) in prenesla ustrezno besedilno sporočilo iz matrike response v metodo show7Response ().

Nazadnje metoda backToMenu () poišče dotik gumba Domov in vrne nadzor na zaslon glavnega menija.

Metoda readMenuTouch () opazuje dogodek na dotik, ko ste na zaslonu glavnega menija. Ko zazna dotik, posreduje koordinate x in y metodi getFunc (x, y), ki v matrikah funcX in funcY poišče ujemanje koordinat x in y dotika. Nato vrne številko iz matrike func za izbrano aplikacijo. '1' je Saucy 7, '2' pa je aplikacija za vnos besedila. Nato nastavi način na vrednost te aplikacije, tako da bo aplikacija izvedena.

9. korak: Blok zanke ()

Zdaj bomo začeli graditi blok kodo zanke () za obravnavo prikaza ustreznega zaslona in nato klicali ustrezne metode dotika na podlagi trenutno izbrane možnosti.

Metoda loop () je sestavljena iz dveh struktur switch ().

Zgornja struktura stikala omogoča prikaz ustreznega zaslona, odvisno od izbrane možnosti. Prav tako nastavi vrednost tMode za ustrezno metodo dotika za trenutno izbrano možnost. Nazadnje nastavi vrednost načina na 9, da se zaslon ne bo neskončno risal.

Struktura spodnjega stikala nadzoruje, kateri načini dotika se izvajajo na podlagi možnosti aplikacije, ki jo izbere uporabnik, kot jo predstavlja vrednost tMode.

Skico naložite v svoj Arduino in morali boste izbrati in uporabljati aplikacijo Saucy 7.

Opravili ste veliko dela! Vzeti pavzo:-)

10. korak: Aplikacija za vnos besedila - smo na domačem mestu

Zdaj bomo vključili metode aplikacije za vnos besedila.

makeKbd () nariše tipkovnico na zaslon.

Nariše šest zapolnjenih zaobljenih pravokotnikov in nato na vsako "tipko" prekriva ustrezno črko, tako da črko iz niza cString, ki jo natisne na zaslonu nad tipko. Upoštevajte, da je zadnji zadnji parameter v ukazu fillRoundedRect () polmer vsakega vogala v slikovnih pikah. Višja kot je ta vrednost, bolj so zaobljeni vogali.

Metoda readKbdTouch () deluje podobno kot druge metode zaznavanja dotika.

Če zazna gumb, ki NI na gumbu Domov, posreduje koordinate x in y metodi curChar (x, y), ki vrne znak, ki ustreza temu mestu x in y na zaslonu. Sporočilo, ki je bilo "vneseno", se nato prikaže na zaslonu z uporabo metode "displayMsg (theChar)".

Metoda curChar (x, y) išče po matrikah letterX in letterY , da bi poiskala ujemanje, ki je blizu koordinatama x in y, posredovanim iz readKbdTouch (). Če najde ujemanje, vrne ustrezno črko metodi readKbdTouch. Upoštevajte, da spremenljivko theCHar inicializiramo na 32, kar je koda ASCII za presledek, "". To storimo tako, da se uporabnik, če se dotakne območja stran od tipkovnice, ne prikaže nedostopnih znakov.

Metoda displayMsg (theChar) vzame znak, vrnjen iz curChar (x, y), in ga doda v niz sporočil. Nato prikaže sporočilo na zaslonu.

Nazadnje bomo posodobili blok loop (), da sprejmemo izbiro aplikacije za vnos besedila.

Naložite skico tftDemo v svoj Arduino in lahko boste lahko uporabljali dokončano aplikacijo.

Čestitamo! ustvarili ste aplikacijo z zaslonom na dotik TFT! Preostanek dneva izkoristite!

11. korak: Postanite gladki! - Uporaba pisav Adafruit Bitmap v vaši skici

Standardni nabor pisav tft je v redu. Lepše pa je, če lahko v svojih TFT skicah uporabimo ustrezne bitne pisave.

Slaba stran je, da nalaganje pisav v pomnilnik Arduino zavzame precejšen prostor. Pravzaprav je skico zelo enostavno napolniti s toliko pisavami, da se ne naloži v Arduino.

Pisave so na voljo v mapi knjižnice Adafruit_GFX, ki ste jo že namestili za ta projekt. Odlična vadnica o uporabi pisav je na tem mestu.

V področju glave skice dodajte sklic pisave za pisavo, ki jo želite uporabiti. Za ta primer bomo uporabili pisavo FreeSerifBoldItalic18p7b.

#vključi

V svoji metodi splash () komentirajte tft.setTextSize (); ukaz.

Dodajte naslednji ukaz,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Zdaj bodo vsi ukazi print () uporabljali trenutno določeno pisavo. Če želite spremeniti drugo pisavo, uporabite naslednji ukaz tft.setFont () z naslednjo pisavo, ki jo želite uporabiti.

Če želite vrniti pisavo na standardno pisavo tft, uporabite samo tft.setFont (); ukaz brez parametra.

Naložite skico v svoj Arduino in videli boste, da zaslon za vnos zdaj uporablja slikovno pisavo za upodabljanje besedila na zaslonu. Opazili boste, da je velikost skice bistveno večja, ko ste vključili pisavo.

12. korak: Zadnje misli

Na voljo so vam številni drugi ukazi za grafične objekte. Vključujejo:

tft.drawRect (x, y, širina, višina, BARVA);

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

Naslednji primeri uporabljajo metodo tft.color565 za določitev barve na podlagi vrednosti rdeče, zelene in modre. To je alternativni način uporabe konstantno določenih vrednosti HEX, ki smo jih uporabili v skici.

tft.drawRoundRect (x, y, širina, višina, polmer, tft.color565 (255, 0, 0)); // to bi bilo rdeče

tft.drawCircle (x, y, polmer, tft.color565 (0, 255, 0)); // to bi bilo zeleno

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

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

Poigrajte se s temi ukazi in raziščite, kako jih lahko dodajo vašim projektom TFT.

Učenje uporabe zaslona TFT je zahtevno, zato morate biti ponosni nase, ker ste si vzeli čas za učenje prvih korakov.

Zasloni TFT lahko vašim projektom Arduino dodajo privlačen in uporaben vidik grafičnega uporabniškega vmesnika.

Hvala za delo skozi to vadnico.

ZDAJ ZGORITE IN NAČINITE NEkaj ČUDOVITEGA!