BluBerriSix - TFT -kosketusnäyttö / Arduino -opetusohjelma: 12 vaihetta (kuvilla)

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 09:01

2019 on RIM Blackberry 850: n 20 -vuotisjuhla! Tämä pieni kanadalainen keksintö muutti maailman viestintätapaa. Se on kauan mennyt, mutta sen perintö jatkuu!

Tässä ohjeessa opit käyttämään MCUfriend.com 2.4 TFT -näytönsuojaa Uno/Megalle. Opit näyttämään graafisia esineitä ja tekstiä sekä vastaanottamaan kosketuksia ja toimimaan kosketustapahtumissa. Näyttö on hyvin samanlainen kuin Adafruit ja muut TFT -suojat/-näytöt. Joten jos olet täällä, pysy näyttelyssä.

Rakennamme yksinkertaistetun 2 -sovellusversion bluBerriSIX -luonnoksestani.

Aloitetaan!

Vaihe 1: BluBerriSIX - Yleiskatsaus

BluBerriSIX -sovellus on kuusitoiminen TFT -projekti.

Se sisältää:

Taskulamppu

Mehevä 7 -sovellus (kuten Magic -8 -pallo)

Laskin

Etäisyyden mittaussovellus, joka käyttää SR-04-ultraäänietäisyysanturia

Lämpötila- ja kosteussovellus, joka myös tallentaa reaaliaikaista tiedonsiirtoa jopa 1,5 km: n etäisyydelle HC-12-lähetinvastaanottimella

Tekstiviestisovellus HC-12: lla.

Tämä projekti kesti 1100 riviä koodia. Rakennamme huomattavasti yksinkertaisemman version, joka esittelee edelleen TFT -näytön ja kosketusanturin.

Vaihe 2: Mitä tarvitaan?

- Arduino Uno tai Mega 2560

- MCUfriend 2,4 TFT -suoja

Seuraavat kirjastot:

- Adafruit_GFX -kirjasto

- Adafruutin kosketusnäytön kirjasto

- MCUFRIEND_kbv -kirjasto

Nämä kirjastot voidaan asentaa Arduino IDE: n sisältämän Library Managerin avulla.

Voit ladata kirjaston siirtymällä valikkoon Luonnos -> Sisällytä kirjasto -> Hallinnoi kirjastoja….

Kirjoita "suodata haku …" -kenttään kirjaston nimen ensimmäiset merkit ja valitse ja asenna sitten sopiva kirjasto. Kun olet valmis, palaa tiesi ulos tästä näytöstä.

Kun asennat TFT -suojan Uno/Mega -laitteeseen, OLE ERITTÄIN Huolellinen varmistaaksesi, että asetat tapit oikein. Kohdistin ensimmäisen kilveni väärin ja paistoin sen. Vietin kaksi viikkoa kasvavaa turhautumista yrittäessäni löytää oikeita kirjastoja ennen kuin tajusin, että näyttö oli kuollut. OLE VAROVAINEN

Vaihe 3: Projektimme

Rakennamme yksinkertaisemman version bluBerriSIX -luonnoksesta.

Siinä tulee olemaan, - aloitusnäyttö

- päävalikko, jossa on kaksi painiketta

- Saucy 7 -sovellus

- yksinkertaistettu tekstinsyöttösovellus

Voit myös palata päävalikkoon painamalla tämän näytön vasemmassa alakulmassa olevaa Koti -kuvaketta. Jos sinulla ei ole tällaista kuvaketta, sinun on vain määritettävä näytön "kotialue". Tässä opetusohjelmassa opit näytön kosketusalueiden määrittämiseen.

Vaikka tämä on yksinkertaistettu projekti, se on silti melko pitkä. Annan versiot Arduinon luonnoksista jokaisessa suuressa vaiheessa, jotta voit ladata ne halutessasi.

Vaihe 4: Otsikkokoodi, globaalimuuttujat, näytön asetukset

Koko projekti on hyvin dokumentoitu. Mutta yksityiskohdat seuraavat.

Aloita uusi Arduino -projekti ja kutsu sitä tft -demoksi tai muuksi haluamaksesi nimeksi.

Yllä oleva ensimmäinen koodipaneeli näyttää globaalimuuttujien määrittelyn. Lisäämme myös kirjastoja, joita meidän on käytettävä sekä näytön näyttötoiminnossa että näytön kosketustunnistuksessa.

Määrittelemme myös analogiset nastat viittaamalla niiden näyttökohtaisiin tarkoituksiin.

Määritämme tft -objektin (näyttö) ja ts -objektin (kosketus) viitteiksi niiden toiminnoille.

Määritämme noin 16 -bittiset värivakiot, jotta näytön, sekä teksti- ja grafiikkaobjektien värit on helppo tehdä. Huomaat, että verkkosivustolla on URL -osoite, jossa on värinvalitsin ja muunnin, joka muuntaa näkyvät värit 16 -bittisiin heksadesimaaliarvoihinsa. Se on erittäin hyödyllinen työkalu.

Toisessa koodipaneelissa määritämme globaalimuuttujat sovelluskohtaisiin tarkoituksiimme.

CString-, kirjain- ja kirjainX- ja letterY -merkkijonoja ja -tauluja käytetään a) näyttämään tekstinsyöttösovelluksen painikkeiden kirjaimet ja b) vastaamaan kosketuksen x- ja y -koordinaatit kunkin kirjaimen x- ja y -koordinaatteihin näppäimistö. Lisää tästä, kun pääsemme luonnoksen tähän osaan.

funcX , funcY ja func ovat matriiseja, joiden avulla määritetään, mitä sovelluspainiketta painettiin päävalikkoruudussa, ja käynnistetään sitten näiden tietojen avulla vastaava sovellus.

LastTouchia ja tThreshiä käytetään kosketusmenetelmissä varmistaaksemme, ettemme saa useita kosketuksia, jos painat näyttöä liian pitkään. Siitä lisää myöhemmin.

Tilamuuttuja määrää, mikä näyttö näytetään, ja tMode -muuttuja ohjaa, mitä kosketusmenetelmiä käytetään kulloinkin.

Setup () -lohkossa avaamme sarjakanavan, jos haluamme käyttää Serial.println () - komentoja virheenkorjaukseen. Et tarvitse tätä riviä, jos et halua tehdä sarjamittarin virheenkorjausta.

Seuraavat neljä riviä ovat vain tft -objektin asennuskoodi.

Seuraavaksi asetamme näytön suunnan muotokuvaustilaan.

RandomSeed () -komento käynnistää satunnaislukugeneraattorin Saucy 7 -sovelluksen myöhempää käyttöä varten.

Lopuksi kutsumme aloitusnäyttömenetelmää.

Vaihe 5: Spash -näytön luominen ja näytön ja kosketuskartoituksen ymmärtäminen

Aloitamme nyt spash -näytön rakentamisen.

Mutta ensin, katso kuvaa ja kosketa kartoitusta. Huomaa, että alkuperät ovat eri paikoissa. Näytössä alkuperä (0, 0) on näytön vasemmassa yläkulmassa (kun RESET -painike on ylhäällä) ja kasvaa vasemmalta oikealle ja ylhäältä alas.

Kosketustunnistusta varten alkuperä on näytön vasemmassa alakulmassa ja kasvaa vasemmalta oikealle ja alhaalta ylös.

Joten NÄYTTÖ- JA KOSKETUSKARTAT MÄÄRITETÄÄN ERITYISESTI ja niillä on eri resoluutiot. Näytön resoluutio on 240 x 320 ja kosketuksella on paljon suurempi resoluutio, kuten pian näet.

Siirry luonnoksesi alueelle silmukan () {} menetelmän alapuolelle ja annamme splash () -menetelmän koodin.

Aloitamme täyttämällä fillScreen () -komennon täyttääksesi näytön VALKOISELLA värillä, jonka määritimme otsikkokoodissa.

Sitten asetimme tekstin koon '5'. Tämä on suhteellisen suuri perustekstikoko. Asetamme tekstikohdistimen x- ja y -sijainnin ja tekstin värin. Lopuksi print ("TFT") -komento piirtää sinisen, koon 5 tekstin määritettyyn kohtaan.

Kun kasvatat tekstin kokoa, huomaat, että merkit muuttuvat yhä paksuiksi. Joten yli 5 ei todennäköisesti auta. Tämän opetusohjelman lopussa näytän sinulle, kuinka voit käyttää bittikarttafontteja saadaksesi kauniimman tekstin sovelluksissasi

Toistamme samanlaiset komennot aloitusnäytön kahdelle muulle tekstikohteelle.

Lopuksi viivästymme 2,5 sekuntia, jotta käyttäjä voi lukea näytön sisällön ennen kuin sovellus siirtyy päävalikkoon.

Mene eteenpäin ja lataa tämä luonnos Arduinollesi. Sen pitäisi näyttää aloitusnäyttö.

Vaihe 6: Kosketuskartoituksen diagnostiikkatyökalun luominen

ShowTouch () -menetelmä on erittäin hyödyllinen näytön eri osien kosketuskoordinaattien saamisessa. Sinun on tehtävä tämä painikkeiden kosketusalueiden määrittämiseksi.

Siirry eteenpäin ja kirjoita tämä menetelmä aiemmin tekemäsi splash () -menetelmän alle.

Näin se toimii.

If -lause määrittää, onko viimeisestä kosketuksesta kulunut riittävästi aikaa. Se vie nykyisen järjestelmän ajan millisekunteina () ja vähentää viimeisen kosketuksen ajan. Jos se on suurempi kuin tThresh -arvo (200 millisekuntia), se hyväksyy kosketuksen. Muussa tapauksessa se jättää huomiotta vahingossa tapahtuvat monikosketustapahtumat.

Seuraavaksi getpoint () -komento saa kosketuksen x-, y- ja z -koordinaatit. Z -koordinaatti on kosketuspaineen mitta.

Jos paine on luonnosotsikossa määrittämiemme maksimi- ja minivakioiden rajoissa, menetelmä muuttaa ensin YP- ja XM -nastat takaisin OUTPUT -asentoon ja asettaa näytön DISPLAY -tilaan.

Seuraavaksi se piirtää valkoisen suorakulmion, joka poistaa aiemmin näytetyt koordinaatit.

Luonnos asettaa sitten fontin koon 2, mustaksi ja näyttää x (p.x) ja y (p.y) -koordinaatit näytöllä. Voit sitten merkitä nämä sijainnit muistiin helpottaaksesi kosketusvyöhykkeiden ohjelmointia omia luonnoksia varten.

Menetelmän alareunassa oleva if -lause tarkistaa, onko näytön Koti -painiketta painettu. '<=' -operaattorit sallivat Koti -painikkeen leveyden ja korkeuden. Määritetyt koordinaatit ovat Koti-painikkeen x- ja y-keskikoordinaatit. Jos sitä painetaan, tilaksi on asetettu 0, joka tarkoittaa lopulta 'Siirry päävalikkoon'. Siitä lisää myöhemmin.

Lopuksi päivitämme lastTouchin nykyiseen järjestelmäaikaan millis () valmistautuaksesi myöhempään kosketustapahtumaan.

Siirry nyt silmukan () lohkoon ja lisää rivi showTouch ();

Lataa tässä vaiheessa luonnos ja kokeile sitä. Se piirtää aloitusnäytön ja jos alat koskettaa näyttöä, KOSKETUS x- ja y -koordinaatit näkyvät näytöllä.

Ennen kuin siirrymme eteenpäin, tarkastelemme kahta tärkeää koodiriviä:

pinMode (YP, OUTPUT); // palauta TFT -ohjaustapit

pinMode (XM, OUTPUT); // näytölle kosketuksen havaitsemisen jälkeen

Aina kun haluat näyttää jotain ruudulla, sinun on suoritettava nämä kaksi komentoa vaihtaaksesi näytön KOSKETUS -tilasta NÄYTTÖ -tilaan. Muuten näyttökomennot eivät toimi.

Hyvin tehty tähän mennessä! Pidä tauko!

Vaihe 7: Rakenna päävalikkoruutu

Rakennamme nyt päävalikkoruudun kahdella painikkeella, joita voit aktivoida kunkin sovelluksen avulla. Menetelmää kutsutaan menuScreen ().

Aloitamme asettamalla näytön DISPLAY -tilaan.

Sitten asetamme fontin koon, värin ja sijainnin ja tulostamme päävalikon tekstin.

Piirrämme nyt kaksi suorakulmiota, jotka ovat painikkeita.

Kaikilla grafiikkakomennoilla on samanlainen rakenne:

graphicShape (x -koordinaatti, y -koordinaatti, leveys, korkeus, VÄRI)

- x koordinaatti - ylhäällä vasemmalla suorakulmaisia esineitä, keskellä ympyröitä

- y -koordinaatti - ylhäällä vasemmalla suorakulmaisia esineitä, keskellä ympyröitä

- leveys - kohteen leveys pikseleinä

- COLOR - värivakio, jonka määritimme otsikossa

Lopuksi kutsumme kaksi tapaa piirtää Saucy 7 -kuvakkeen ja QWERTY -tekstinsyöttökuvakkeen. Ne ovat erillisiä menetelmiä.

Draw7icon (0) -menetelmä ottaa kokonaislukuparametrin, joka on y-offset pallon vetämiseen. Teemme tämän niin, että voimme käyttää samaa tapaa piirtää pallo valikkoruudulle JA Saucy 7 -sovellusnäyttöön. Siirtymän avulla voimme vain ohjelmoida säätää pallon y-koordinaattia ylös tai alas.

Draw7Ball (0) -menetelmää kutsutaan draw7Icon (0) -kohdasta. Se vaatii myös parametrin, jonka avulla voimme säätää pallon pystysuoraa asentoa sen mukaan, piirtäisimmekö sen valikkonäytöllä vai sovellusnäytöllä.

FillCircle () -komento kestää 4 argumenttia.

- x ympyrän keskipisteen koordinaatti

- y ympyrän keskipisteen y -koordinaatti

- ympyrän säde (pikseleinä)

- COLOR - värivakio, jonka määritimme otsikossa

Lopuksi drawTextIcon () -menetelmää kutsutaan piirtämään tekstinsyöttösovelluksen kuvake.

Voit yrittää käyttää menetelmää kommentoimalla splash () -menetelmää asetuksissa () ja lisäämällä menuScreen ().

Lataa luonnos Arduinollesi ja kokeile sitä!

Vaihe 8: Saucy 7 -sovellus ja päävalikon menetelmät

Seitsemän näytön () menetelmä piirtää sovelluksen näytön, mukaan lukien pallon piirtäminen ja sitten ohjeiden näyttäminen.

Seitsemäninstr () -menetelmä näyttää ohjeet ja tyhjentää näytön aiemmista vastauksista. Se piirtää myös vastauspainikkeen.

Show7Response () -menetelmä poistaa edellisen vastausmenetelmän näytöltä, näyttää animoidun ajattelun… -viestin ja näyttää sitten satunnaisesti valitun vastausviestin.

read7Touch () on menetelmä, joka odottaa kosketustapahtumaa tuottamaan satunnaisesti muodostetun viestin. Kosketuskoodi on hyvin samanlainen kuin aiemmin kuvattu showTouch () -diagnostiikkamenetelmä. Yksinkertaisuuden vuoksi menetelmä hyväksyy kosketuksen missä tahansa ruudussa Vastaa -painikkeen kosketuksena.

Menetelmän yläosassa määritämme vastaus merkkijonon, joka on viestejä, jotka voidaan luoda kosketustapahtumasta.

Jos Koti -painiketta painetaan, se lopettaa sovelluksen ja palaa päävalikkoon. Muussa tapauksessa menetelmä luo satunnaisluvun välillä 0 ja 7 (yksinomainen) ja välittää vastaavan tekstiviestin vastaus - taulukosta show7Response () - menetelmään.

Lopuksi backToMenu () -metodi tarkkailee Home -painikkeen kosketusta ja palauttaa ohjauksen päävalikkoon.

ReadMenuTouch () -menetelmä tarkkailee kosketustapahtumaa, kun olet päävalikon näytössä. Kun kosketus havaitaan, se välittää x- ja y -koordinaatit getFunc (x, y) -metodille, joka näyttää funcX - ja funcY -matriiseista vastaamaan kosketuksen x- ja y -koordinaatteja. Sitten se palauttaa valitun sovelluksen funktion matriisin numeron. '1' on Saucy 7 ja '2' on tekstinsyöttösovellus. Sitten se asettaa tilan sovelluksen arvoon, jotta sovellus suoritetaan.

Vaihe 9: Silmukka () -lohko

Aloitamme nyt silmukan () lohkokoodin rakentamisen käsittelemään sopivan näytön näyttämistä ja sitten soittamaan sopivia kosketusmenetelmiä parhaillaan valitun vaihtoehdon perusteella.

Silmukka () -menetelmä koostuu kahdesta kytkimen () rakenteesta.

Yläkytkinrakenne hoitaa oikean näytön näyttämisen riippuen siitä, mikä vaihtoehto on valittu. Se asettaa myös tMode -arvon kullekin valitulle vaihtoehdolle suoritettavaan kosketusmenetelmään. Lopuksi se asettaa tilan arvoksi 9, jotta näyttö ei piirrä loputtomasti uudelleen.

Alempi kytkinrakenne ohjaa suoritettavia kosketusmenetelmiä käyttäjän valitseman sovellusvaihtoehdon perusteella, jota edustaa tMode-arvo.

Lataa luonnos Arduinoosi ja sinun pitäisi pystyä valitsemaan ja käyttämään Saucy 7 -sovellusta.

Olet tehnyt paljon työtä! Pidä tauko:-)

Vaihe 10: Tekstinsyöttösovellus - olemme kotijännityksessä

Sisällytämme nyt tekstinsyöttösovelluksen menetelmät.

makeKbd () piirtää näppäimistön näytölle.

Se piirtää kuusi täytettyä pyöristettyä suorakulmiota ja peittää sitten oikean kirjaimen kullekin 'näppäimelle' saamalla kirjaimen cString -merkkijonosta, jonka se tulostaa näytölle näppäimen päälle. Huomaa, että fillRoundedRect () -komennon toinen viimeinen parametri on jokaisen kulman säde pikseleinä. Mitä suurempi tämä arvo, sitä pyöristyneemmät kulmat.

ReadKbdTouch () -menetelmä toimii samalla tavalla kuin muut kosketustunnistusmenetelmät.

Jos havaitaan kosketus, joka EI ole Koti -painikkeessa, se välittää x- ja y -koordinaatit curChar (x, y) -menetelmälle, joka palauttaa merkin, joka vastaa kyseistä x- ja y -sijaintia näytöllä. Kirjoitettu viesti näytetään sitten näytöllä 'displayMsg (theChar) -menetelmällä.

CurChar (x, y) -metodi etsii kirjain X ja kirjain Y matriiseja ja yrittää löytää vastaavuuden, joka on lähellä x- ja y -koordinaatteja, jotka on siirretty readKbdTouch (): sta. Jos se löytää osuman, se palauttaa vastaavan kirjaimen readKbdTouch -menetelmään. Teemme tämän niin, että jos käyttäjä koskettaa jotakin näppäimistön ulkopuolista aluetta, se ei näytä ei-käytettävissä olevia merkkejä.

DisplayMsg (theChar) -metodi ottaa curChar (x, y) -merkistä palautetun merkin ja liittää sen viestijonoon. Sitten se näyttää viestin näytöllä.

Lopuksi päivitämme silmukan () lohkon hyväksymään tekstinsyöttösovelluksen valinnan.

Lataa tftDemo -luonnos Arduinollesi ja sinun pitäisi pystyä käyttämään valmiita sovelluksia.

Onnittelut! olet rakentanut TFT -kosketusnäytön sovelluksen! Pidä loppu päivä vapaana!

Vaihe 11: Glickin 'Slick! - Käyttämällä Adafruit -bittikarttafontteja luonnoksessasi

Vakio tft -kirjasinsarja on kunnossa. Mutta on hienompaa, jos voimme käyttää oikeita bittikartoitettuja fontteja TFT -luonnoksissamme.

Haittapuoli on, että kirjasinsarjojen lataaminen Arduinon muistiin vie paljon tilaa. Itse asiassa on erittäin helppo täyttää luonnos niin monilla kirjasimilla, että se ei lataudu Arduinoon.

Fontit ovat käytettävissä Adafruit_GFX -kirjastokansion sisällä, jonka olet jo asentanut tähän projektiin. Tällä sivustolla on erinomainen opas fonttien käyttöön.

Lisää luonnoksesi Otsikko -alueelle fonttiviittaus fontille, jota haluat käyttää. Käytämme tässä esimerkissä FreeSerifBoldItalic18p7b -kirjasinta.

#sisältää

Kommentoi splash () -menetelmässä tft.setTextSize (); komento.

Lisää seuraava komento,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Kaikki print () -komennot käyttävät nyt määritettyä fonttia. Jos haluat vaihtaa toiseen fonttiin, käytä toista tft.setFont () -komentoa seuraavan fontin kanssa, jota haluat käyttää.

Jos haluat asettaa fontin takaisin tft -vakiokirjasimeksi, käytä tft.setFont (); komento ilman parametria.

Lataa luonnos Arduinoosi ja näet, että aloitusnäyttö käyttää nyt bittikarttafonttia ruudun tekstin esittämiseen. Huomaat, että luonnoksen koko on huomattavasti suurempi nyt, kun olet lisännyt fontin.

Vaihe 12: Viimeiset ajatukset

Käytettävissäsi on monia muita graafisia objektikomentoja. Ne sisältävät:

tft.drawRect (x, y, leveys, korkeus, VÄRI);

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

Seuraavissa esimerkeissä tft.color565 -menetelmällä voit määrittää värin punaisen, vihreän ja sinisen arvon perusteella. Tämä on vaihtoehtoinen tapa käyttää luonnoksessamme käyttämiämme jatkuvasti määriteltyjä HEX -väriarvoja.

tft.drawRoundRect (x, y, leveys, korkeus, säde, tft.color565 (255, 0, 0)); // tämä olisi punainen

tft.drawCircle (x, y, säde, tft.color565 (0, 255, 0)); // tämä olisi vihreää

tft.drawTriangle (kärkipiste1x, piste1y, kärki2x, kärki2y, kärki3x, kärki3y, tft.väri565 (0, 0, 255)); // sininen

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

Pelaa näillä komennoilla ja tutustu siihen, miten ne voivat lisätä TFT -projekteihisi.

TFT -näytön käytön oppiminen on haastavaa, ja sinun pitäisi olla ylpeä itsestäsi siitä, että otit aikaa oppiaksesi nämä ensimmäiset vaiheet.

TFT -näytöt voivat lisätä houkuttelevan ja hyödyllisen graafisen käyttöliittymän Arduino -projekteihisi.

Kiitos tämän opetusohjelman käsittelystä.

MENE NYT ULKOON JA TEE JOTAIN IHANA!