BluBerriSix - TFT TouchScreen / Arduino vodič: 12 koraka (sa slikama)

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:07

2019. je 20. godišnjica RIM Blackberry 850! Ovaj mali kanadski izum promijenio je način na koji svijet komunicira. Odavno ga nema, ali njegovo naslijeđe se nastavlja!

U ovom uputstvu ćete naučiti kako koristiti MCUfriend.com 2.4 TFT ekran za Uno/Mega. Naučit ćete kako prikazati grafičke objekte i tekst i kako primati dodire i djelovati na događaje dodira. Ovo ekran je vrlo sličan Adafruit -u i drugim TFT štitnicima/ekranima, pa ako ste ovdje, ostanite ovdje radi predstave.

Napravit ćemo pojednostavljenu verziju 2 aplikacije moje bluBerriSIX skice.

Hajde da počnemo!

Korak 1: BluBerriSIX - Pregled

Aplikacija bluBerriSIX je TFT projekt sa šest funkcija.

To uključuje:

Svjetiljka

Ukusna aplikacija "7" (poput čarobne lopte "8")

A Calculator

Aplikacija za mjerenje udaljenosti pomoću ultrazvučnog senzora udaljenosti SR-04

Aplikacija za temperaturu i vlažnost koja također bilježi podatke u stvarnom vremenu do 1,5 km s primopredajnikom HC-12

Aplikacija za slanje poruka pomoću HC-12.

Ovaj projekat je uzeo 1100 linija koda. Napravićemo znatno jednostavniju verziju koja i dalje demonstrira koncepte TFT ekrana i osećaja dodira.

Korak 2: Šta je potrebno?

- Arduino Uno ili Mega 2560

- MCUfriend 2.4 TFT štit

Sljedeće biblioteke:

- Adafruit_GFX biblioteka

- Adafruit biblioteka osjetljiva na dodir

- MCUFRIEND_kbv biblioteka

Ove se biblioteke mogu instalirati s Upraviteljem knjižnica unutar Arduino IDE -a.

Da biste učitali biblioteku, idite na opciju menija Sketch -> Include Library -> Manage Libraries….

U polje 'filtriraj pretraživanje …' unesite prvih nekoliko znakova imena biblioteke, a zatim odaberite i instalirajte odgovarajuću biblioteku. Kada završite, samo se vratite s ovog ekrana.

Prilikom postavljanja TFT štita na Uno/Mega, BUDITE VEOMA PAŽLJIVI kako biste bili sigurni da ste pravilno postavili pinove. Pogrešno sam postavio svoj prvi štit i ispržio ga. Proveo sam dvije sedmice rastuće frustracije pokušavajući pronaći ispravne biblioteke prije nego što sam shvatio da je ekran mrtav. BUDI PAZLJIV

Korak 3: Naš projekat

Napravit ćemo jednostavniju verziju bluBerriSIX skice.

Imaće, - ekran za prskanje

- ekran glavnog menija sa dva dugmeta

- aplikacija Saucy 7

- pojednostavljena aplikacija za unos teksta

Takođe ćete se moći vratiti u glavni meni pritiskom na ikonu 'Početna' u donjem lijevom kutu ovog prikaza. Ako nemate takvu ikonu, morat ćete samo definirati 'kućnu' regiju vašeg ekrana. U ovom ćete vodiču naučiti kako odrediti regije dodira ekrana.

Iako je ovo pojednostavljen projekt, ipak je prilično dug. Dostavit ću verzije Arduino skica u svakoj važnoj fazi kako biste ih mogli prenijeti ako želite.

Korak 4: Kôd zaglavlja, globalne varijable, postavljanje ekrana

Cijeli projekt je visoko dokumentiran. No detalji slijede.

Pokrenite novi Arduino projekt i nazovite ga 'tft demo' ili bilo koje drugo ime koje želite.

Prvi gornji kodni panel prikazuje nam definiranje globalnih varijabli. Takođe dodajemo biblioteke koje ćemo morati koristiti i za funkciju prikaza ekrana i za detekciju dodira ekrana.

Također definiramo analogne pinove u odnosu na njihovu namjenu specifičnu za ekran.

Definiramo tft objekt (prikaz) i ts objekt (dodir) kao reference za njihove odgovarajuće funkcije.

Definiramo neke 16 -bitne konstante boja kako bismo olakšali iscrtavanje boja za ekran i za tekstualne i grafičke objekte. Primijetit ćete da postoji URL web stranice koja ima birač boja i pretvarač za pretvaranje vidljivih boja u njihove 16 -bitne heksadecimalne vrijednosti. To je vrlo koristan alat.

Na drugom panelu koda definiramo globalne varijable za naše potrebe specifične za aplikaciju.

Niz i nizovi cString, letter i letterX i letterY koriste se za a) prikaz slova na dugmadima za aplikaciju za unos teksta i b) usklađivanje x i y koordinata dodira sa x i y koordinatama svakog odgovarajućeg slova na tastaturu. Više o ovome kada dođemo do tog odjeljka skice.

funcX , funcY i func su nizovi koji utvrđuju koje je dugme aplikacije pritisnuto na ekranu glavnog menija, a zatim koriste te informacije za pokretanje odgovarajuće aplikacije.

lastTouch i tThresh se koriste u metodama dodira kako bismo bili sigurni da nećemo dobiti više dodira ako predugo pritisnemo ekran. O tome kasnije.

Varijabla načina će kontrolirati koji će se zaslon prikazati, a varijabla tMode će kontrolirati koje se metode dodira koriste u bilo kojem trenutku.

U bloku setup () otvaramo serijski kanal ako želimo koristiti naredbe Serial.println () za otklanjanje grešaka. Ova linija vam ne treba ako ne želite otklanjanje grešaka u serijskom monitoru.

Sljedeća četiri retka su samo kod za postavljanje tft objekta.

Zatim smo orijentaciju ekrana postavili u portretni način.

Naredba randomSeed () upravo pokreće generator slučajnih brojeva za kasniju upotrebu u aplikaciji Saucy 7.

Na kraju pozivamo metodu splash ekrana.

Korak 5: Izgradnja Spash ekrana i razumijevanje prikaza nasuprot mapiranju dodirom

Sada ćemo početi s izradom zaštitnog zaslona.

Ali prvo, pogledajte sliku za mapiranje ekrana i dodira. Primijetite da su podrijetla na različitim lokacijama. Za prikaz, ishodište (0, 0) je u gornjem lijevom kutu ekrana (kada je tipka RESET na vrhu) i raste slijeva nadesno i odozgo prema dolje.

Za otkrivanje dodira, ishodište se nalazi u donjem lijevom kutu ekrana i raste slijeva nadesno i odozdo prema gore.

Dakle, ZASLONSKE I DODIRNE KARTE SE DEFINIRAJU ODVOJENO i imaju različite rezolucije. Ekran ima rezoluciju 240 x 320, a dodir ima mnogo veću rezoluciju kao što ćete uskoro videti.

Idite na područje vaše skice ispod metode loop () {} i mi ćemo unijeti kod metode splash ().

Počinjemo tako što ćemo izvršiti naredbu fillScreen () da ispunimo ekran belom bojom koju smo definisali u zaglavlju koda.

Zatim smo postavili veličinu teksta na '5'. Ovo je relativno velika osnovna veličina teksta. Postavljamo x i y poziciju za tekstualni kursor i boju teksta. Konačno, naredba print ("TFT") zapravo iscrtava plavi tekst veličine '5' na navedenoj poziciji.

Kako povećavate veličinu teksta, vidjet ćete da likovi postaju sve zrnatiji. Dakle, prelazak iznad 5 vjerojatno nije od pomoći. Na kraju ovog vodiča pokazat ću vam kako koristiti bitmap fontove da biste dobili ljepši tekst u svojim aplikacijama. Kompromis je u tome što korištenje skupova bitmap fontova zauzima puno memorije u vašem Arduinu što će ograničiti veličinu skice

Ponavljamo slične naredbe za ostale dvije tekstualne stavke na početnom ekranu.

Na kraju odgađamo 2,5 sekunde kako bismo dali korisniku priliku da pročita sadržaj ekrana prije nego što se aplikacija premjesti na ekran glavnog izbornika.

Samo naprijed i prenesite ovu skicu na svoj Arduino. Trebao bi prikazati početni ekran.

Korak 6: Izrada dijagnostičkog alata za mapiranje dodirom

Metoda showTouch () je vrlo korisna da vam pomogne da dobijete koordinate dodira različitih dijelova ekrana. To ćete morati učiniti da biste definirali dodirne regije za svoje tipke.

Samo naprijed i unesite ovu metodu ispod svoje metode splash () koju ste već radili.

Evo kako to funkcionira.

Naredba if određuje je li prošlo dovoljno vremena od zadnjeg dodira. Uzima trenutno sistemsko vrijeme millis () i oduzima vrijeme posljednjeg dodira. Ako je veća od vrijednosti tThresh (200 milisekundi), prihvaća dodir. U suprotnom će zanemariti slučajne događaje s više dodira.

Zatim naredba getpoint () dobiva x, y i z koordinate dodira. Z koordinata je mjera dodirnog pritiska.

Ako je pritisak unutar max i min konstanti koje smo definirali u zaglavlju skice, metoda će prvo promijeniti YP i XM pinove natrag u OUTPUT, stavljajući ekran u način prikaza.

Zatim će nacrtati bijeli pravokutnik kako bi izbrisao sve koordinate koje su možda već bile prikazane.

Skica zatim postavlja font na veličinu 2, crnu boju i prikazuje koordinate x (p.x) i y (p.y) na ekranu. Zatim možete zabilježiti ove lokacije kako biste lakše programirali svoje dodirne zone za vlastite skice.

Naredba if na dnu metode provjerava je li pritisnuto dugme 'Početna' na ekranu. operatori '<=' dozvoljavaju širinu i visinu dugmeta Home. Navedene koordinate su koordinate x-centra i y-centra tipke Home. Ako se pritisne, način rada se postavlja na 0 što će na kraju značiti 'Idi na ekran glavnog izbornika'. O tome kasnije.

Na kraju ažuriramo lastTouch na trenutno sistemsko vrijeme millis () kako bismo se pripremili za kasniji dodirni događaj.

Sada idite na blok loop () i dodajte red showTouch ();

U ovom trenutku postavite svoju skicu i isprobajte je. Povući će ekran za početak i ako počnete dodirivati ekran, na ekranu će se prikazati TOUCH x i y koordinate.

Prije nego nastavimo, vratimo se na dvije važne linije koda:

pinMode (YP, OUTPUT); // vraćanje TFT kontrolnih pinova

pinMode (XM, OUTPUT); // za prikaz nakon otkrivanja dodira

Svaki put kada želite prikazati nešto na ekranu, MORATE izvršiti ove dvije naredbe za promjenu ekrana iz načina DODIR u način prikaza. U suprotnom, vaše naredbe za prikaz neće raditi.

Bravo do sada! Odmori se!

Korak 7: Izgradite ekran glavnog menija

Sada ćemo izgraditi naš zaslon s glavnim izbornikom s dva gumba koja možete pritisnuti za aktiviranje svake aplikacije. Metoda se naziva menuScreen ().

Započinjemo postavljanjem ekrana u način prikaza.

Zatim postavljamo veličinu fonta, boju i položaj i ispisujemo tekst 'Glavnog menija'.

Sada nacrtamo dva pravokutnika koja su dugmad.

Sve grafičke naredbe imaju sličnu strukturu:

graphicShape (x koordinata, y koordinata, širina, visina, COLOR)

- x koordinata - gore lijevo za pravokutne objekte, centar za krugove

- y koordinata - gore lijevo za pravokutne objekte, centar za krugove

- width - širina objekta u pikselima

- COLOR - konstanta boje koju smo definirali u zaglavlju

Na kraju pozivamo dvije metode za crtanje ikone Saucy 7 i ikone QWERTY Text Entry. To su odvojene metode.

Metoda draw7icon (0) uzima cijeli parametar koji je y-pomak za izvlačenje loptice. To činimo kako bismo mogli koristiti istu metodu za crtanje loptice na ekranu izbornika I na ekranu aplikacije Saucy 7. Odmak nam samo omogućuje programsko podešavanje y-koordinate loptice gore ili dolje.

Metoda draw7Ball (0) poziva se iznutra draw7Icon (0). Također uzima parametar koji nam omogućuje podešavanje okomitog položaja loptice ovisno o tome crtamo li je na ekranu izbornika ili na ekranu aplikacije.

Naredba fillCircle () uzima 4 argumenta.

- x koordinata središta kruga

- y koordinatu središta kruga

- poluprečnik kruga (u pikselima)

- COLOR - konstanta boje koju smo definirali u zaglavlju

Na kraju se poziva metoda drawTextIcon () za crtanje ikone za aplikaciju Unos teksta.

Možete pokušati pokrenuti metodu tako što ćete komentirati metodu splash () u setup () i dodati menuScreen ().

Prenesite skicu na svoj Arduino i isprobajte je!

Korak 8: Aplikacija Saucy 7 i metode glavnog menija

Metoda sevenScreen () će nacrtati ekran za aplikaciju, uključujući crtanje loptice i zatim prikaz uputstava.

Metoda sevenInstr () prikazuje upute, kao i čišćenje ekrana od prethodnih odgovora. Takođe iscrtava dugme „Odgovori“.

Metoda show7Response () upravlja brisanjem prethodne metode odgovora s ekrana, prikazivanjem animirane poruke 'razmišljanja …', a zatim prikazivanjem nasumično odabrane poruke odgovora.

read7Touch () je metoda koja čeka da dodirni događaj proizvede nasumično generiranu poruku. Dodirni kôd je vrlo sličan ranije opisanoj dijagnostičkoj metodi showTouch (). Radi jednostavnosti, metoda će prihvatiti dodir bilo gdje na ekranu kao dodir dugmeta 'Odgovori'.

Na vrhu metode definiramo niz nizova response koji su poruke koje se mogu generirati iz dodirnog događaja.

Ako pritisnete gumb Početna, aplikacija će se zatvoriti i vratiti se na zaslon glavnog izbornika. U suprotnom, metoda će generirati slučajni broj između 0 i 7 (isključivo) i proslijediti odgovarajuću tekstualnu poruku iz polja response metodi show7Response ().

Konačno, metoda backToMenu () traži dodir tipke Home i vraća kontrolu na ekran glavnog izbornika.

Metoda readMenuTouch () nadzire dodirni događaj kada ste na ekranu glavnog menija. Kada se dodir otkrije, on prosljeđuje koordinate x i y metodi getFunc (x, y) koja u nizovima funcX i funcY gleda u koordinate x i y dodira. Zatim vraća broj iz func niza za aplikaciju koja je odabrana. '1' je Saucy 7, a '2' je aplikacija za unos teksta. Zatim postavlja način rada na vrijednost te aplikacije kako bi se aplikacija izvršila.

Korak 9: Blok petlje ()

Sada ćemo početi sa izgradnjom blok koda loop () za rukovanje prikazom odgovarajućeg ekrana, a zatim pozivanjem odgovarajućih metoda dodira na osnovu trenutno odabrane opcije.

Metoda loop () sastoji se od dvije switch () strukture.

Struktura gornjeg prekidača rukuje prikazom odgovarajućeg ekrana ovisno o tome koja je opcija odabrana. Također postavlja vrijednost tMode za odgovarajuću metodu dodira za trenutno odabranu opciju. Konačno, postavlja vrijednost načina rada na 9 tako da se ekran ne iscrtava beskrajno.

Donja struktura prekidača kontrolira koje se metode dodira izvode na osnovu opcije aplikacije koju je odabrao korisnik predstavljene vrijednošću tMode.

Učitajte skicu u svoj Arduino i trebali biste moći odabrati i koristiti aplikaciju Saucy 7.

Uradili ste mnogo posla! Odmorite se:-)

Korak 10: Aplikacija za unos teksta - u toku smo

Sada ćemo ugraditi metode aplikacije za unos teksta.

makeKbd () iscrtava tastaturu na ekranu.

Crta šest ispunjenih zaobljenih pravokutnika, a zatim prekriva odgovarajuće slovo na svakom 'ključu' uzimajući slovo iz cString niza koje ispisuje na ekranu preko tipke. Primijetite da je drugi posljednji parametar u naredbi fillRoundedRect () polumjer svakog ugla u pikselima. Što je veća ova vrijednost, to su zaobljeni uglovi.

Metoda readKbdTouch () radi slično kao i druge metode detekcije dodira.

Ako se otkrije dodir koji NIJE na tipki Home, on prosljeđuje koordinate x i y metodi curChar (x, y) koja vraća znak koji odgovara toj lokaciji x i y na ekranu. Poruka koja je 'otkucana' tada se prikazuje na ekranu pomoću 'displayMsg (theChar) metode.

Metoda curChar (x, y) pretražuje nizove letterX i letterY pokušavajući pronaći podudaranje koje je blizu koordinatama x i y prenesenim iz readKbdTouch (). Ako pronađe podudaranje, vraća odgovarajuće slovo metodi readKbdTouch. Uočite da inicijaliziramo varijablu theChar na 32, što je ASCII kod za razmak, ''. To činimo tako da ako korisnik dodirne područje udaljeno od tipkovnice, neće prikazati nedostupne znakove.

Metoda displayMsg (theChar) uzima znak vraćen iz curChar (x, y) i dodaje ga nizu poruka. Zatim prikazuje poruku na ekranu.

Konačno, ažurirat ćemo blok loop () kako bismo prihvatili odabir aplikacije za unos teksta.

Prenesite tftDemo skicu na svoj Arduino i trebali biste moći koristiti dovršenu aplikaciju.

Čestitamo! izgradili ste aplikaciju TFT ekrana osjetljivog na dodir! Iskoristite ostatak dana slobodno!

Korak 11: Postanite glatki! - Korištenje Adafruit Bitmap fontova u vašoj skici

Standardni set fontova tft je u redu. Ali ljepše je ako možemo koristiti odgovarajuće bitmapirane fontove u našim TFT skicama.

Nedostatak je to što učitavanje setova fontova u Arduino memoriju zauzima značajan prostor. U stvari, vrlo je jednostavno napuniti skicu s toliko fontova da se neće učitati u Arduino.

Fontovi su dostupni u fascikli biblioteke Adafruit_GFX koju ste već instalirali za ovaj projekat. Odličan vodič za korištenje fontova nalazi se na ovoj web stranici.

U područje zaglavlja skice dodajte referencu fonta za font koji želite koristiti. Za ovaj primjer koristit ćemo font FreeSerifBoldItalic18p7b.

#include

U vašoj metodi splash (), komentarišite tft.setTextSize (); komanda.

Dodajte sledeću komandu,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Sada će sve naredbe print () koristiti trenutno navedeni font. Da biste promijenili font, upotrijebit ćete drugu naredbu tft.setFont () sa sljedećim fontom koji želite koristiti.

Da biste font vratili na standardni tft font, samo koristite tft.setFont (); komanda bez parametra.

Prenesite skicu na svoj Arduino i trebali biste vidjeti da početni ekran sada koristi bitmap font za iscrtavanje teksta na ekranu. Primijetit ćete da je veličina skice znatno veća sada kada ste uključili font.

Korak 12: Završne misli

Na raspolaganju su vam mnoge druge komande grafičkih objekata. Oni uključuju:

tft.drawRect (x, y, širina, visina, BOJA);

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

Sljedeći primjeri koriste metodu tft.color565 za omogućavanje određivanja boje na osnovu vrijednosti crvene, zelene i plave. Ovo je alternativni način korištenja konstantno definiranih vrijednosti HEX boje koje smo koristili u skici.

tft.drawRoundRect (x, y, širina, visina, radijus, tft.color565 (255, 0, 0)); // ovo bi bilo crveno

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

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

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

Poigrajte se ovim naredbama i istražite kako se mogu dodati vašim TFT projektima.

Naučiti koristiti TFT ekran je izazov i trebali biste biti ponosni na sebe što ste odvojili vrijeme da naučite ove prve korake.

TFT ekrani mogu dodati atraktivan i koristan aspekt grafičkog korisničkog sučelja vašim Arduino projektima.

Hvala vam što ste radili kroz ovaj vodič.

ODMAH IZAĐITE I UČINITE NEŠTO DIVNO!