BluBerriSix - TFT skārienekrāns / Arduino apmācība: 12 soļi (ar attēliem)

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:56

2019. gads ir RIM Blackberry 850 20. gadadiena! Šis mazais Kanādas izgudrojums mainīja pasaules saziņas veidu. Tas jau sen ir pagājis, bet tā mantojums turpinās!

Šajā pamācībā jūs uzzināsit, kā izmantot MCUfriend.com 2,4 collu TFT displeja vairogu Uno/Mega. Jūs uzzināsit, kā attēlot grafiskos objektus un tekstu, kā arī saņemt pieskārienus un rīkoties pēc skāriena notikumiem. ekrāns ir ļoti līdzīgs Adafruit un citiem TFT vairogiem/ekrāniem. Tātad, ja jūs esat šeit, palieciet uz izstādi.

Mēs izveidosim vienkāršotu 2 lietotnes versiju no manas bluBerriSIX skices.

Sāksim!

1. darbība: BluBerriSIX - pārskats

Lietotne bluBerriSIX ir sešu funkciju TFT projekts.

Tas iekļauj:

Lukturis

Smaga lietotne “7” (piemēram, burvju “8” bumba)

Kalkulators

Attāluma mērīšanas lietotne, izmantojot ultraskaņas attāluma sensoru SR-04

Temperatūras un mitruma lietotne ar reāllaika datu reģistrēšanu līdz 1,5 km, izmantojot raidītāju HC-12

Īsziņu sūtīšanas lietotne, izmantojot HC-12.

Šis projekts aizņēma 1100 koda rindas. Mēs izveidosim ievērojami vienkāršāku versiju, kas joprojām demonstrē TFT displeja un skārienjūtīgās koncepcijas.

2. darbība. Kas ir nepieciešams?

- Arduino Uno vai Mega 2560

- MCUfriend 2,4 collu TFT vairogs

Šādas bibliotēkas:

- Adafruit_GFX bibliotēka

- Adafruit skārienekrāna bibliotēka

- MCUFRIEND_kbv bibliotēka

Šīs bibliotēkas var instalēt ar bibliotēkas pārvaldnieku Arduino IDE iekšpusē.

Lai ielādētu bibliotēku, dodieties uz izvēlnes opciju Skice -> Iekļaut bibliotēku -> Pārvaldīt bibliotēkas …

Laukā "filtrējiet meklēšanu …" ievadiet pirmās dažas bibliotēkas vārda rakstzīmes un pēc tam atlasiet un instalējiet atbilstošo bibliotēku. Kad esat pabeidzis, atgriezieties no šī ekrāna.

Uzstādot TFT vairogu uz Uno/Mega, esiet ĻOTI UZMANĪGI, lai pārliecinātos, ka pareizi sakārtojat tapas. Es nepareizi izlīdzināju savu pirmo vairogu un cepu to. Es pavadīju divas nedēļas pieaugošu neapmierinātību, mēģinot atrast pareizas bibliotēkas, pirms sapratu, ka ekrāns ir miris. ESI UZMANĪGS

3. solis: mūsu projekts

Mēs izveidosim vienkāršāku bluBerriSIX skices versiju.

Tam būs, - šļakatu ekrāns

- galvenās izvēlnes ekrāns ar divām pogām

- lietotne Saucy 7

- vienkāršota teksta ievades lietotne

Varat arī atgriezties galvenajā izvēlnē, nospiežot ikonu Sākums šī displeja apakšējā kreisajā stūrī. Ja jums nav šādas ikonas, jums vienkārši jānosaka ekrāna “mājas” reģions. Šajā apmācībā jūs uzzināsit, kā noteikt ekrāna skāriena reģionus.

Lai gan šis ir vienkāršots projekts, tas joprojām ir diezgan garš. Es sniegšu Arduino skices versijas katrā galvenajā posmā, lai jūs varētu tās augšupielādēt, ja vēlaties.

4. darbība: galvenes kods, globālie mainīgie, ekrāna iestatīšana

Viss projekts ir ļoti dokumentēts. Bet detaļas seko.

Sāciet jaunu Arduino projektu un nosauciet to par “tft demo” vai jebkuru citu nosaukumu, kuru vēlaties.

Pirmā koda panelis parāda, kā mēs definējam globālos mainīgos. Mēs pievienojam arī bibliotēkas, kas mums jāizmanto gan ekrāna displeja funkcijai, gan ekrāna skārienjūtīgai noteikšanai.

Mēs definējam arī analogās tapas, atsaucoties uz to ekrāna specifiskajiem mērķiem.

Mēs definējam tft objektu (displeju) un ts objektu (pieskārienu) kā atsauces to attiecīgajām funkcijām.

Mēs definējam dažas 16 bitu krāsu konstantes, lai būtu vieglāk atveidot ekrāna, kā arī teksta un grafikas objektu krāsas. Jūs pamanīsit, ka vietnei ir URL, kurā ir krāsu atlasītājs un pārveidotājs, lai redzamās krāsas pārvērstu 16 bitu heksadecimālajās vērtībās. Tas ir ļoti noderīgs rīks.

Otrajā koda panelī mēs definējam globālos mainīgos mūsu lietotņu vajadzībām.

Virknes cString, burts un burtsX un burts Y tiek izmantotas, lai a) parādītu burtus uz teksta ievades lietotnes pogām un b) saskaņotu pieskāriena x un y koordinātas ar katra attiecīgā burta x un y koordinātām. tastatūru. Vairāk par to, kad nonāksim pie šīs skices sadaļas.

funcX , funcY un func ir masīvi, kas nosaka, kuras lietotnes poga tika nospiesta galvenās izvēlnes ekrānā, un pēc tam izmanto šo informāciju, lai palaistu attiecīgo lietotni.

skārienjūtīgajās metodēs tiek izmantoti lastTouch un tThresh, lai pārliecinātos, ka mēs nesaņemam vairākus pieskārienus, pārāk ilgi nospiežot ekrānu. Vairāk par to vēlāk.

Režīma mainīgais kontrolēs, kurš ekrāns tiks parādīts, un mainīgais tMode kontrolēs, kuras pieskāriena metodes tiek izmantotas jebkurā laikā.

Iestatīšanas () blokā mēs atveram sērijas kanālu, ja mēs vēlamies atkļūdošanai izmantot komandas Serial.println (). Jums nav nepieciešama šī rinda, ja nevēlaties veikt Serial Monitor atkļūdošanu.

Nākamās četras rindas ir tikai tft objekta iestatīšanas kods.

Tālāk mēs iestatām ekrāna orientāciju portreta režīmā.

Komanda randomSeed () tikai sāk nejaušo skaitļu ģeneratoru, lai to vēlāk varētu izmantot lietotne Saucy 7.

Visbeidzot, mēs saucam par šļakatu ekrāna metodi.

5. darbība: izveidojiet ekrānuzņēmuma ekrānu un izprotiet displeju pret skārienkartēšanu

Tagad mēs sāksim veidot izplūdes ekrānu.

Bet vispirms, lūdzu, apskatiet attēlu ekrānam un pieskārienu kartēšanai. Ņemiet vērā, ka izcelsme ir dažādās vietās. Displejam izcelsme (0, 0) atrodas ekrāna augšējā kreisajā stūrī (kad poga RESET ir augšpusē) un aug no kreisās uz labo un no augšas uz leju.

Skāriena noteikšanai izcelsme atrodas ekrāna apakšējā kreisajā stūrī un aug no kreisās uz labo un no apakšas uz augšu.

Tātad displeja un pieskārienu kartes ir definētas atsevišķi, un tām ir atšķirīga izšķirtspēja. Displeja izšķirtspēja ir 240 x 320, un pieskārienam ir daudz lielāka izšķirtspēja, kā jūs drīz redzēsit.

Dodieties uz savu skices apgabalu zem metodes loop () {}, un mēs ievadīsim metodes splash () kodu.

Mēs sākam, izpildot komandu fillScreen (), lai aizpildītu ekrānu ar BALTU krāsu, ko definējām galvenes kodā.

Tad mēs iestatījām teksta lielumu uz “5”. Tas ir salīdzinoši liels pamata teksta izmērs. Mēs iestatām teksta kursora pozīciju x un y un iestatām teksta krāsu. Visbeidzot drukāšanas ("TFT") komanda faktiski zīmē zilo 5 izmēra tekstu norādītajā vietā.

Palielinot teksta lielumu, redzēsit, ka rakstzīmes kļūst arvien kuplākas. Tātad, pārsniedzot 5, iespējams, nav noderīgi. Šīs apmācības beigās es parādīšu, kā lietot bitkartes fontus, lai savās lietotnēs iegūtu glītāku tekstu. Kompromiss ir tāds, ka bitkartes fontu kopu izmantošana jūsu Arduino aizņem daudz atmiņas, kas ierobežos jūsu skices izmērus

Mēs atkārtojam līdzīgas komandas pārējiem diviem teksta vienumiem uzplaiksnījuma ekrānā.

Visbeidzot, mēs aizkavējamies 2,5 sekundes, lai dotu lietotājam iespēju izlasīt ekrāna saturu, pirms lietotne pāriet uz galvenās izvēlnes ekrānu.

Iet uz priekšu un augšupielādējiet šo skici savā Arduino. Tam vajadzētu parādīt slampšanas ekrānu.

6. darbība. Pieskāriena kartēšanas diagnostikas rīka izveide

ShowTouch () metode ir ļoti noderīga, lai palīdzētu iegūt dažādu ekrāna daļu pieskārienu koordinātas. Tas ir jādara, lai definētu taustiņu pieskāriena apgabalus.

Iet uz priekšu un ievadiet šo metodi zem savas iepriekš izšļakstītās () metodes.

Lūk, kā tas darbojas.

Ja paziņojums nosaka, vai ir pagājis pietiekami ilgs laiks kopš pēdējā pieskāriena. Tas paņem pašreizējo sistēmas laiku milis () un atņem pēdējo pieskāriena laiku. Ja tas ir lielāks par tTresh vērtību (200 milisekundes), tas pieņem pieskārienu. Pretējā gadījumā tas neņems vērā nejaušus vairāku pieskārienu notikumus.

Tālāk komanda getpoint () iegūst pieskāriena x, y un z koordinātas. Z koordināta ir pieskāriena spiediena mērs.

Ja spiediens ir maksimālās un min konstantes robežās, kuras mēs definējām skices galvenē, metode vispirms mainīs YP un XM tapas uz OUTPUT, ievietojot ekrānu DISPLAY režīmā.

Tālāk tiks uzzīmēts balts taisnstūris, lai izdzēstu visas iepriekš parādītās koordinātas.

Pēc tam skice nosaka fontu 2. izmērā, melnā krāsā un ekrānā parāda x (p.x) un y (p.y) koordinātas. Pēc tam varat pierakstīt šīs atrašanās vietas, lai palīdzētu ieprogrammēt pieskāriena zonas savām skicēm.

Ja paziņojums metodes apakšā pārbauda, vai ekrānā ir nospiesta poga Sākums. “<=” operatori pieļauj pogas Sākums platumu un augstumu. Norādītās koordinātas ir pogas Sākums x centra un y centra koordinātas. Ja tas tiek nospiests, režīms ir iestatīts uz 0, kas galu galā nozīmēs “Doties uz galvenās izvēlnes ekrānu”. Vairāk par to vēlāk.

Visbeidzot, mēs atjauninām lastTouch uz pašreizējo sistēmas laika milis (), lai sagatavotos vēlākam pieskāriena notikumam.

Lūdzu, tagad dodieties uz cilpas () bloku un pievienojiet līniju showTouch ();

Šajā brīdī augšupielādējiet savu skici un izmēģiniet to. Tas uzzīmēs šļakatu ekrānu, un, ja sāksit pieskarties ekrānam, ekrānā tiks parādītas TOUCH x un y koordinātas.

Pirms turpināt, pārskatīsim divas svarīgas koda rindas:

pinMode (YP, OUTPUT); // atjaunot TFT vadības tapas

pinMode (XM, OUTPUT); // displejam pēc pieskāriena noteikšanas

Ikreiz, kad vēlaties kaut ko parādīt ekrānā, jums IR jāizpilda šīs divas komandas, lai ekrānu no pieskāriena režīma pārslēgtu uz displeja režīmu. Pretējā gadījumā jūsu displeja komandas nedarbosies.

Labi darīts līdz šim! Paņem pauzi!

7. darbība: izveidojiet galvenās izvēlnes ekrānu

Tagad mēs izveidosim galveno izvēlnes ekrānu ar divām pogām, kuras varat nospiest, lai aktivizētu katru lietotni. Metodi sauc par menuScreen ().

Mēs sākam, ievietojot ekrānu DISPLAY režīmā.

Pēc tam mēs iestatām fonta lielumu, krāsu un novietojumu un izdrukājam “Galvenās izvēlnes” tekstu.

Tagad mēs uzzīmējam divus taisnstūrus, kas ir pogas.

Visām grafiskajām komandām ir līdzīga struktūra:

graphicShape (x koordināta, y koordināta, platums, augstums, KRĀSA)

- x koordināta - augšējā kreisajā stūrī taisnstūra objektiem, centrā apļiem

- y koordināta - augšējā kreisajā stūrī taisnstūra objektiem, centrā apļiem

- platums - objekta platums pikseļos

- KRĀSA - krāsu konstante, ko definējām galvenē

Visbeidzot, mēs saucam divas metodes, kā uzzīmēt ikonu Saucy 7 un QWERTY teksta ievades ikonu. Tās ir atsevišķas metodes.

Draw7icon (0) metode ņem veselu skaitļa parametru, kas ir y-nobīde bumbas vilkšanai. Mēs to darām, lai mēs varētu izmantot to pašu metodi, lai zīmētu bumbu izvēlnes ekrānā UN lietotnes Saucy 7 ekrānā. Nobīde ļauj programmētiski pielāgot bumbas y koordinātu uz augšu vai uz leju.

Draw7Ball (0) metode tiek izsaukta no draw7Icon (0). Tam ir vajadzīgs arī parametrs, kas ļauj pielāgot bumbiņas vertikālo stāvokli atkarībā no tā, vai zīmējam to izvēlnes ekrānā vai lietotnes ekrānā.

Komandai fillCircle () ir 4 argumenti.

- apļa centra x koordināta

- apļa centra y koordināta

- apļa rādiuss (pikseļos)

- KRĀSA - krāsu konstante, ko definējām galvenē

Visbeidzot, tiek izsaukta metode drawTextIcon (), lai uzzīmētu teksta ievades lietotnes ikonu.

Jūs varat mēģināt palaist metodi, iestatot () komentējot metodi splash () un pievienojot menuScreen ().

Augšupielādējiet skici savā Arduino un izmēģiniet to!

8. darbība: lietotne Saucy 7 un galvenās izvēlnes metodes

Septiņu ekrāna () metode uzzīmēs lietotnes ekrānu, ieskaitot bumbiņas zīmēšanu un pēc tam norādījumu parādīšanu.

Metode sevenInstr () parāda instrukcijas, kā arī notīra ekrānu no iepriekšējām atbildēm. Tas arī uzzīmē pogu “Atbildēt”.

Ar show7Response () metodi tiek noņemta iepriekšējā atbildes metode no ekrāna, parādīts animēts ziņojums “domāšana…” un pēc tam tiek parādīts nejauši izvēlēts atbildes ziņojums.

read7Touch () ir metode, kas gaida pieskāriena notikumu, lai izveidotu nejauši ģenerētu ziņojumu. Pieskāriena kods ir ļoti līdzīgs iepriekš aprakstītajai showTouch () diagnostikas metodei. Vienkāršības labad metode pieņems pieskārienu jebkurā ekrāna vietā, nospiežot pogu “Atbildēt”.

Metodes augšpusē mēs definējam atbildes virkņu masīvu, kas ir ziņojumi, kurus var ģenerēt no pieskāriena notikuma.

Ja tiek nospiesta sākuma poga, tā pārtrauks lietotni un atgriezīsies galvenās izvēlnes ekrānā. Pretējā gadījumā metode ģenerēs nejaušu skaitli no 0 līdz 7 (neieskaitot) un atbilstošo īsziņu no atbildes masīva nodos show7Response () metodei.

Visbeidzot, metode backToMenu () vēro pieskārienu sākuma pogai un atgriež vadību galvenās izvēlnes ekrānā.

Izmantojot metodi readMenuTouch (), tiek skatīts pieskāriena notikums, kad atrodaties galvenās izvēlnes ekrānā. Kad tiek konstatēts pieskāriens, tas nodod x un y koordinātas getFunc (x, y) metodei, kas izskatās funcX un funcY masīvos, lai tie atbilstu pieskāriena x un y koordinātām. Pēc tam tas atgriež numuru no funkcijas masīva atlasītajai lietotnei. “1” ir Saucy 7 un “2” ir teksta ievades lietotne. Pēc tam tiek iestatīts režīms uz šīs lietotnes vērtību, lai lietotne tiktu izpildīta.

9. darbība: cilpas () bloks

Tagad mēs sāksim veidot cilpas () bloķēšanas kodu, lai parādītu atbilstošo ekrānu un pēc tam izsauktu atbilstošās pieskāriena metodes, pamatojoties uz pašlaik izvēlēto opciju.

Cilpas () metode sastāv no divām slēdža () struktūrām.

Augšējā slēdža struktūra nodrošina atbilstoša ekrāna parādīšanu atkarībā no izvēlētās opcijas. Tas arī nosaka tMode vērtību attiecīgajai skārienmetodei, kas jāizpilda pašreizējai izvēlētajai opcijai. Visbeidzot, tā nosaka režīma vērtību uz 9, lai displeja ekrāns nebūtu bezgalīgi jāpārzīmē.

Apakšējā slēdža struktūra kontrolē, kuras pieskārienu metodes tiek izpildītas, pamatojoties uz lietotāja izvēlēto lietotnes opciju, ko attēlo tMode vērtība.

Ielādējiet skici savā Arduino, un jums vajadzētu būt iespējai izvēlēties un izmantot lietotni Saucy 7.

Jūs esat paveikuši daudz darba! Paņem pauzi:-)

10. darbība: teksta ievades lietotne - mēs sākam strādāt mājās

Tagad mēs iekļausim teksta ievades lietotnes metodes.

makeKbd () zīmē tastatūru uz ekrāna.

Tas uzzīmē sešus aizpildītus noapaļotus taisnstūrus un pēc tam uz katra “taustiņa” pārklāj atbilstošo burtu, iegūstot burtu no cString virknes, ko tā izdrukā ekrānā virs atslēgas. Ņemiet vērā, ka otrais pēdējais parametrs komandā fillRoundedRect () ir katra stūra rādiuss pikseļos. Jo augstāka šī vērtība, jo vairāk noapaļoti stūri.

Metode readKbdTouch () darbojas līdzīgi kā citas skāriena noteikšanas metodes.

Ja tiek atklāts pieskāriens, kas NAV uz pogas Sākums, tas nodod x un y koordinātas curChar (x, y) metodei, kas atgriež rakstzīmi, kas atbilst šai x un y atrašanās vietai ekrānā. “Ierakstītais” ziņojums pēc tam tiek parādīts ekrānā, izmantojot metodi “displayMsg (theChar)”.

CurChar (x, y) metode meklē burtu X un burtu Y masīvus, lai atrastu atbilstību, kas ir tuvu x un y koordinātām, kas nodotas no readKbdTouch (). Ja tas atrod atbilstību, tas atgriež atbilstošo burtu readKbdTouch metodei. Ņemiet vērā, ka mēs inicializējam mainīgo theChar līdz 32, kas ir atstarpes rakstzīmes ASCII kods. Mēs to darām tā, lai, ja lietotājs pieskaras apgabalam, kas atrodas tālāk no tastatūras, tas nerādīs nepieejamas rakstzīmes.

DisplayMsg (theChar) metode ņem no curChar (x, y) atgriezto rakstzīmi un pievieno to ziņojuma virknei. Pēc tam ekrānā tiek parādīts ziņojums.

Visbeidzot, mēs atjaunināsim cilpas () bloku, lai akceptētu teksta ievades lietotnes izvēli.

Augšupielādējiet tftDemo skici savā Arduino, un jums vajadzētu būt iespējai izmantot pabeigto lietotni.

Apsveicam! jūs esat izveidojis TFT skārienekrāna lietotni! Atlikušo dienu atpūtieties!

11. solis: kļūst gluds! - Adafruit Bitmap fontu izmantošana savā skicē

Standarta tft fontu komplekts ir kārtībā. Bet tas ir jaukāk, ja TFT skicēs varam izmantot pareizus bitkartes fontus.

Negatīvie ir tas, ka fontu kopu ielāde Arduino atmiņā aizņem ievērojamu vietu. Patiesībā ir ļoti viegli aizpildīt savu skici ar tik daudziem fontiem, ka tā netiks ielādēta Arduino.

Fonti ir pieejami Adafruit_GFX bibliotēkas mapē, kuru jau instalējāt šim projektam. Šajā vietnē ir lieliska apmācība par fontu izmantošanu.

Skices galvenes apgabalā pievienojiet fonta atsauci fontu, kuru vēlaties izmantot. Šajā piemērā mēs izmantosim fontu FreeSerifBoldItalic18p7b.

#iekļaut

Savā splash () metodē komentējiet tft.setTextSize (); komandu.

Pievienojiet šādu komandu,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Tagad visas print () komandas izmantos pašlaik norādīto fontu. Lai mainītu uz citu fontu, izmantojiet citu komandu tft.setFont () ar nākamo fontu, kuru vēlaties izmantot.

Lai fontu iestatītu atpakaļ uz standarta tft fontu, vienkārši izmantojiet tft.setFont (); komanda bez parametra.

Augšupielādējiet skici savā Arduino, un jums vajadzētu redzēt, ka ekrāns tagad izmanto bitkartes fontu teksta atveidošanai ekrānā. Jūs pamanīsit, ka tagad, kad esat iekļāvis fontu, skices izmērs ir ievērojami lielāks.

12. solis: pēdējās domas

Jums ir pieejamas daudzas citas grafisko objektu komandas. Tajos ietilpst:

tft.drawRect (x, y, platums, augstums, KRĀSA);

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

Turpmākajos piemēros tiek izmantota metode tft.color565, lai jūs varētu norādīt krāsu, pamatojoties uz sarkanām, zaļām un zilām vērtībām. Tas ir alternatīvs veids, kā izmantot nemainīgi noteiktās HEX krāsu vērtības, kuras mēs izmantojām mūsu skicē.

tft.drawRoundRect (x, y, platums, augstums, rādiuss, tft.color565 (255, 0, 0)); // tas būtu sarkans

tft.drawCircle (x, y, rādiuss, tft.color565 (0, 255, 0)); // tas būtu zaļš

tft.drawTriangle (virsotne1x, virsotne1y, virsotne2x, virsotne2y, virsotne3x, virsotne3y, tft.krāsa565 (0, 0, 255)); // zils

tft.fillTriangle (virsotne1x, virsotne1y, virsotne2x, virsotne2y, virsotne3x, virsotne3y, tft.krāsa565 (255, 0, 0);

Spēlējiet ar šīm komandām un izpētiet, kā tās var papildināt jūsu TFT projektus.

Mācīties lietot TFT ekrānu ir izaicinoši, un jums vajadzētu lepoties ar sevi, ka veltījāt laiku šo pirmo soļu apgūšanai.

TFT ekrāni var pievienot pievilcīgu un noderīgu grafiskās lietotāja saskarnes aspektu jūsu Arduino projektiem.

Paldies, ka strādājāt ar šo apmācību.

TAGAD EJ ĀRĀ UN PADARI KO PĀRBAUDĪGU!