BluBerriSix - en TFT TouchScreen / Arduino -opplæring: 12 trinn (med bilder)

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

2019 er 20 -årsjubileet for RIM Blackberry 850! Denne lille kanadiske oppfinnelsen forandret måten verden kommuniserer på. Det er lenge borte, men arven fortsetter!

I denne instruksjonen lærer du hvordan du bruker MCUfriend.com 2,4 TFT -skjermskjerm for Uno/Mega. Du lærer hvordan du viser grafiske objekter og tekst og hvordan du mottar berøringer og virker på berøringshendelsene. Dette skjermen ligner veldig på Adafruit og andre TFT -skjold/skjermer. Så hvis du er her, hold deg til showet.

Vi bygger en forenklet 2 -app -versjon av bluBerriSIX -skissen min.

La oss komme i gang!

Trinn 1: BluBerriSIX - Oversikt

BluBerriSIX -appen er et TFT -prosjekt med seks funksjoner.

Det inkluderer:

En lommelykt

En Saucy '7' app (som en Magic '8' Ball)

En kalkulator

En avstandsmåling-app ved hjelp av ultralydavstandssensoren SR-04

En temperatur- og fuktighetsapp som også gjør datalogging i sanntid opptil 1,5 km med HC-12-mottakeren

En sms-app som bruker HC-12.

Dette prosjektet tok 1100 linjer med kode. Vi bygger en betydelig enklere versjon som fremdeles demonstrerer TFT -skjerm og berøringsfølende konsepter.

Trinn 2: Hva trengs?

- En Arduino Uno eller Mega 2560

- Et MCUfriend 2,4 TFT -skjerm

Følgende biblioteker:

- Adafruit_GFX bibliotek

- Adafruit berøringsskjermbibliotek

- MCUFRIEND_kbv bibliotek

Disse bibliotekene kan installeres med Library Manager inne i Arduino IDE.

For å laste inn et bibliotek, gå til menyen Sketch -> Include Library -> Manage Libraries….

I feltet "filtrer søket ditt …" skriver du inn de første tegnene i biblioteksnavnet, og velger og installerer deretter det riktige biblioteket. Når du er ferdig, er det bare å komme deg ut av denne skjermen.

Når du monterer TFT -skjoldet på Uno/Mega, må du være veldig forsiktig for å være sikker på at du setter tappene riktig. Jeg justerte mitt første skjold feil og stekte det. Jeg brukte to uker med voksende frustrasjon på å finne riktige biblioteker før jeg innså at skjermen var død. VÆR FORSIKTIG

Trinn 3: Prosjektet vårt

Vi bygger en enklere versjon av bluBerriSIX -skissen.

Det vil ha, - en sprutskjerm

- en hovedmenyskjerm med to knapper

- en Saucy 7 -app

- en forenklet tekstoppføringsapp

Du kan også gå tilbake til hovedmenyen ved å trykke på "Hjem" -ikonet nederst til venstre på denne skjermen. Hvis du ikke har et slikt ikon, må du bare definere et "hjem" -område på skjermen. Du lærer hvordan du bestemmer berøringsområder på skjermen i denne opplæringen.

Selv om dette er et forenklet prosjekt, er det fortsatt ganske langt. Jeg vil levere versjoner av Arduino -skissene på hvert større stadium, slik at du kan laste dem opp hvis du ønsker det.

Trinn 4: Overskriftskode, Globale variabler, Skjermoppsett

Hele prosjektet er sterkt dokumentert. Men detaljene følger.

Start et nytt Arduino -prosjekt og kall det 'tft demo' eller et annet navn du ønsker.

Det første kodepanelet ovenfor viser oss definere globale variabler. Vi legger også til bibliotekene vi må bruke både for skjermens visningsfunksjon og berøringsdeteksjon av skjermen.

Vi definerer også de analoge pinnene med henvisning til deres skjermspesifikke formål.

Vi definerer tft -objektet (display) og ts -objektet (touch) som referanser for deres respektive funksjoner.

Vi definerer noen 16 biters fargekonstanter for å gjøre det enkelt å gjengi fargene for skjermen og for tekst- og grafikkobjekter. Du vil legge merke til at det er en URL til et nettsted som har en fargevelger og omformer for å konvertere synlige farger til sine 16 biters heksadesimale verdier. Det er et veldig nyttig verktøy.

I det andre kodepanelet definerer vi de globale variablene for våre appspesifikke formål.

CString-, letter- og letterX- og letterY -strengene og -matrisene brukes til a) å vise bokstavene på knappene for tekstoppføringsappen og b) matche x- og y -koordinatene for et trykk med x- og y -koordinatene for hver bokstav på tastaturet. Mer om dette når vi kommer til den delen av skissen.

funcX , funcY og func er matriser som fungerer for å bestemme hvilken appknapp som ble trykket på hovedmenyskjermen, og deretter bruke denne informasjonen til å starte den respektive appen.

lastTouch og tThresh brukes i berøringsmetodene for å sikre at vi ikke får flere berøringer ved å trykke for lenge på skjermen. Mer om det senere.

Modusvariabelen vil kontrollere hvilken skjerm som vises og tMode -variabelen vil kontrollere hvilke berøringsmetoder som brukes til enhver tid.

I setup () -blokken åpner vi en seriekanal hvis vi ønsker å bruke Serial.println () -kommandoer for feilsøking. Du trenger ikke denne linjen hvis du ikke ønsker å feilsøke Serial Monitor.

De fire neste linjene er bare oppsettskode for tft -objektet.

Deretter setter vi retningen på skjermen til portrettmodus.

Kommandoen randomSeed () starter bare tilfeldighetsgeneratoren for senere bruk av Saucy 7 -appen.

Til slutt kaller vi sprutskjerm -metoden.

Trinn 5: Bygg søppelskjermbildet og forstå Display Versus Touch Mapping

Vi begynner nå å bygge skjermbildet for søppel.

Men først, se på bildet for skjerm- og berøringskartlegging. Legg merke til at opprinnelsen er på forskjellige steder. For visning er opprinnelsen (0, 0) øverst til venstre på skjermen (når RESET -knappen er øverst) og vokser fra venstre til høyre og fra topp til bunn.

For berøringsdeteksjon er opprinnelsen i nedre venstre hjørne av skjermen og vokser fra venstre til høyre og fra bunn til topp.

Så DISPLAY OG TOUCH KARTER ER DEFINERT separat og har forskjellige oppløsninger. Skjermen har en oppløsning på 240 x 320, og berøringen har en mye høyere oppløsning som du snart vil se.

Gå til et område av skissen din under loop () {} -metoden, så skriver vi inn splash () -metodekoden.

Vi starter med å utføre en fillScreen () -kommando for å fylle skjermen med den HVITE fargen vi definerte i overskriftskoden.

Deretter setter vi tekststørrelsen til '5'. Dette er en relativt stor grunnleggende tekststørrelse. Vi angir posisjonen x og y for tekstmarkøren, og vi angir tekstfargen. Til slutt tegner kommandoen for utskrift ("TFT") faktisk den blå teksten "5" i den angitte posisjonen.

Når du øker tekststørrelsen, vil du se at tegnene blir mer og mer klumpete. Så å gå over 5 er sannsynligvis ikke nyttig. På slutten av denne opplæringen vil jeg vise deg hvordan du bruker bitmap -fonter for å få finere tekst i appene dine. Kompromissen er at bruk av bitmap -skriftsett tar mye minne i Arduino som vil begrense skissestørrelsene dine

Vi gjentar lignende kommandoer for de to andre tekstelementene på sprutskjermen.

Til slutt forsinker vi 2,5 sekunder for å gi brukeren en sjanse til å lese innholdet på skjermen før appen går til hovedmenyen.

Fortsett og last opp denne skissen til din Arduino. Den skal vise sprutskjermen.

Trinn 6: Lag et diagnostisk verktøy for berøringskartlegging

ShowTouch () -metoden er veldig nyttig for å hjelpe deg med å få berøringskoordinater for forskjellige deler av skjermen. Du må gjøre dette for å definere berøringsområdene for knappene dine.

Gå videre og skriv inn denne metoden under splash () -metoden din som er gjort tidligere.

Slik fungerer det.

If -setningen avgjør om det har gått tilstrekkelig tid siden siste berøring. Det tar gjeldende systemtid millis () og trekker fra siste Touch -tid. Hvis den er større enn tThresh -verdien (200 millisekunder), godtar den berøring. Ellers vil det se bort fra utilsiktede multi-touch-hendelser.

Deretter får kommandoen getpoint () x-, y- og z -koordinatene for berøringen. Z -koordinaten er et mål på berøringstrykk.

Hvis trykket er innenfor maks- og minkonstantene vi definerte i skisseoverskriften, vil metoden først endre YP- og XM -pinnene tilbake til OUTPUT, og sette skjermen i DISPLAY -modus.

Deretter tegner det et hvitt rektangel for å slette eventuelle koordinater som kan ha blitt vist tidligere.

Skissen setter deretter skriften til størrelse 2, svart farge og viser koordinatene x (s.x) og y (p.y) på skjermen. Du kan deretter notere disse stedene for å hjelpe deg med å programmere berøringssonene dine for dine egne skisser.

If -setningen nederst i metoden sjekker om 'Home' -knappen på skjermen ble trykket ned. '<=' operatørene tillater bredden og høyden på Hjem -knappen. Koordinatene som er angitt er x-senter og y-senter-koordinatene til Hjem-knappen. Hvis den trykkes inn, er modusen satt til 0, noe som til slutt vil bety 'Gå til hovedmenyskjerm'. Mer om det senere.

Til slutt oppdaterer vi lastTouch til gjeldende systemtid millis () for å gjøre deg klar for en senere berøringshendelse.

Vennligst nå gå til loop -blokken () og legg til linjen showTouch ();

På dette tidspunktet, last opp skissen din og prøv den. Det vil tegne sprutskjermen, og hvis du begynner å berøre skjermen, vises TOUCH x- og y -koordinatene på skjermen.

Før vi går videre, la oss gå tilbake til to viktige kodelinjer:

pinMode (YP, OUTPUT); // gjenopprett TFT -kontrollpinnene

pinMode (XM, OUTPUT); // for visning etter å ha oppdaget en berøring

Hver gang du vil vise noe på skjermen, MÅ du utføre disse to kommandoene for å endre skjermen fra TOUCH -modus til DISPLAY -modus. Ellers fungerer ikke skjermkommandoene.

Godt gjort så langt! Ta en pause!

Trinn 7: Bygg hovedmenyen

Vi bygger nå hovedmenyskjermen med to knapper du kan trykke på for å aktivere hver app. Metoden kalles menuScreen ().

Vi starter med å sette skjermen i DISPLAY -modus.

Deretter angir vi skriftstørrelse, farge og posisjon og skriver ut hovedmenyen.

Vi tegner nå to rektangler som er knappene.

Alle grafikkommandoer har en lignende struktur:

graphicShape (x koordinat, y koordinat, bredde, høyde, COLOR)

- x koordinat - øverst til venstre for rektangulære objekter, senter for sirkler

- y -koordinat - øverst til venstre for rektangulære objekter, senter for sirkler

- bredde - bredden på objektet i piksler

- COLOR - en fargekonstant vi definerte i toppteksten

Til slutt kaller vi to metoder for å tegne Saucy 7 -ikonet og QWERTY Text Entry -ikonet. Det er separate metoder.

Draw7icon (0) metoden tar en heltallsparameter som er y-offset for å tegne ballen. Vi gjør dette slik at vi kan bruke samme metode for å tegne ballen på menyskjermen OG på Saucy 7 app -skjermen. Forskyvningen lar oss bare programmere y-koordinaten til ballen opp eller ned.

Draw7Ball (0) -metoden kalles innen draw7Icon (0). Det krever også en parameter som lar oss justere ballens vertikale posisjon, avhengig av om vi tegner den på menyskjermen eller på appskjermen.

Kommandoen fillCircle () tar fire argumenter.

- x koordinat for midten av sirkelen

- y koordinat for midten av sirkelen

- sirkelens radius (i piksler)

- COLOR - en fargekonstant vi definerte i toppteksten

Til slutt kalles drawTextIcon () -metoden for å tegne ikonet for Text Entry -appen.

Du kan prøve å kjøre metoden ved å kommentere splash () -metoden i setup () og legge til menuScreen ().

Last opp skissen til din Arduino og prøv den!

Trinn 8: Saucy 7 -appen og hovedmenymetodene

Metoden SevenScreen () vil tegne skjermen for appen, inkludert å tegne ballen og deretter vise instruksjonene.

Metoden SevenInstr () viser instruksjonene, i tillegg til å fjerne skjermen fra tidligere svar. Det tegner også knappen "Svar".

Show7Response () -metoden håndterer sletting av forrige svarmetode fra skjermen, visning av en animert "tenkning …" -melding og deretter visning av den tilfeldig valgte svarmeldingen.

read7Touch () er metoden som venter på en berøringshendelse for å produsere den tilfeldig genererte meldingen. Berøringskoden er veldig lik diagnosemetoden showTouch () som er beskrevet tidligere. For enkelhets skyld godtar metoden et trykk hvor som helst på skjermen som 'Svar' -knappen.

På toppen av metoden definerer vi en respons rekke med strenger som er meldingene som kan genereres fra en berøringshendelse.

Hvis du trykker på Hjem -knappen, vil appen avslutte og gå tilbake til hovedmenyskjermen. Ellers vil metoden generere et tilfeldig tall mellom 0 og 7 (eksklusivt) og sende den tilsvarende tekstmeldingen fra respons -matrisen til show7Response () -metoden.

Til slutt ser backToMenu () -metoden på et trykk på Hjem -knappen og returnerer kontrollen til hovedmenyskjermen.

ReadMenuTouch () -metoden ser etter en berøringshendelse når du er på hovedmenyskjermen. Når en berøring oppdages, sender den x- og y -koordinatene til getFunc (x, y) -metoden som ser ut i funcX og funcY matriser for å matche x og y koordinatene for berøringen. Den returnerer deretter nummeret fra func -arrayen for appen som ble valgt. '1' er Saucy 7 og '2' er tekstoppføringsappen. Den setter deretter modusen til appens verdi slik at appen vil bli utført.

Trinn 9: Loop () -blokken

Vi begynner nå å bygge loop () -blokkoden for å håndtere visning av den riktige skjermen og deretter kalle de riktige berøringsmetodene basert på alternativet som er valgt for øyeblikket.

Loop () metoden består av to switch () strukturer.

Den øverste bryterstrukturen håndterer å vise den riktige skjermen, avhengig av hvilket alternativ som er valgt. Den angir også tMode -verdien for den aktuelle berøringsmetoden som skal kjøres for det gjeldende valgte alternativet. Til slutt setter den modusverdien til 9 slik at skjermen ikke tegner uendelig.

Den nederste bryterstrukturen styrer hvilke berøringsmetoder som utføres basert på det brukervalgte appalternativet representert av verdien av tMode.

Legg skissen inn i Arduino, så skal du kunne velge og bruke Saucy 7 -appen.

Du har gjort mye arbeid! Ta en pause:-)

Trinn 10: Tekstoppføringsappen - Vi er i hjemmestrekningen

Vi vil nå inkludere tekstoppføringsappens metoder.

makeKbd () tegner tastaturet på skjermen.

Den tegner seks fylte avrundede rektangler og legger deretter den aktuelle bokstaven på hver 'nøkkel' ved å hente bokstaven fra cString -strengen som den skriver ut på skjermen over tasten. Legg merke til at den nest siste parameteren i en fillRoundedRect () -kommando er radiusen til hvert hjørne i piksler. Jo høyere denne verdien, jo mer avrundede hjørner.

Metoden readKbdTouch () fungerer på samme måte som de andre berøringsdeteksjonsmetodene.

Hvis det oppdages en berøring som IKKE er på Hjem -knappen, sender den x- og y -koordinatene til curChar (x, y) -metoden som returnerer tegnet som tilsvarer det x- og y -stedet på skjermen. Meldingen som har blitt 'skrevet' vises deretter på skjermen ved hjelp av 'displayMsg (theChar) -metoden.

CurChar (x, y) -metoden søker gjennom bokstavene X og letterY for å prøve å finne en treff som er nær x- og y -koordinatene som er sendt fra readKbdTouch (). Hvis den finner en treff, returnerer den den tilsvarende bokstaven til metoden readKbdTouch. Legg merke til at vi initialiserer theChar -variabelen til 32 som er ASCII -koden for et mellomromstegn, ''. Vi gjør dette slik at hvis brukeren berører et område vekk fra tastaturet, vil det ikke vise tegn som ikke er tilgjengelige.

DisplayMsg (theChar) -metoden tar tegnet som returneres fra curChar (x, y) og legger det til msg -strengen. Den viser deretter meldingen på skjermen.

Til slutt oppdaterer vi loop () blokken for å godta valg av tekstoppføring.

Last opp tftDemo -skissen til din Arduino, og du bør kunne bruke den ferdige appen.

Gratulerer! du har bygget en TFT berøringsskjerm -app! Ta fri resten av dagen!

Trinn 11: Bli slick! - Bruke Adafruit Bitmap Fonts i skissen din

Standard tft -skriftsett er greit. Men det er hyggeligere hvis vi kan bruke riktige bitmapper i våre TFT -skisser.

Ulempen er at lasting av skriftsett i Arduino -minnet tar mye plass. Faktisk er det veldig enkelt å fylle skissen din med så mange fonter at den ikke kan lastes inn i Arduino.

Skriftene er tilgjengelige i biblioteksmappen Adafruit_GFX som du allerede har installert for dette prosjektet. En utmerket opplæring om bruk av fonter er på dette nettstedet.

I overskriftsområdet på skissen legger du til skriftreferansen for skrifttypen du ønsker å bruke. Vi bruker FreeSerifBoldItalic18p7b skriften for dette eksemplet.

#inkludere

Kommenter tft.setTextSize () i splash () -metoden din; kommando.

Legg til følgende kommando,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Alle kommandoer for utskrift () vil nå bruke den spesifiserte skriften. Hvis du vil bytte til en annen skrift, bruker du en annen tft.setFont () -kommando med den neste skriften du vil bruke.

For å sette fonten tilbake til standard tft -skrift, bare bruk en tft.setFont (); kommando uten parameter.

Last opp skissen til Arduino, så skulle du se at sprutskjermen nå bruker bitmap -skriften for å gjengi teksten på skjermen. Du vil legge merke til at størrelsen på skissen er betydelig større nå som du har tatt med en skrift.

Trinn 12: Avsluttende tanker

Det er mange andre grafiske objektkommandoer tilgjengelig for deg. De inkluderer:

tft.drawRect (x, y, bredde, høyde, COLOR);

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

Følgende eksempler bruker metoden tft.color565 for å angi fargen basert på røde, grønne og blå verdier. Dette er en alternativ måte å bruke de konstant definerte HEX -fargeverdiene vi brukte i skissen vår.

tft.drawRoundRect (x, y, bredde, høyde, radius, tft.color565 (255, 0, 0)); // dette ville være rødt

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // dette ville være grønt

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

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

Spill med disse kommandoene og utforsk hvordan de kan legge til i TFT -prosjektene dine.

Å lære å bruke en TFT -skjerm er utfordrende, og du bør være stolt av deg selv for at du tok deg tid til å lære disse første trinnene.

TFT -skjermer kan legge til et attraktivt og nyttig grafisk brukergrensesnittaspekt i Arduino -prosjektene dine.

Takk for at du gikk gjennom denne opplæringen.

NÅ GÅ UT OG GJØR NOE UNDERLIGT!