BluBerriSix - en TFT TouchScreen / Arduino -vejledning: 12 trin (med billeder)

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:28

2019 er 20 -årsdagen for RIM Blackberry 850! Denne lille canadiske opfindelse ændrede den måde, verden kommunikerer på. Det er for længst gået, men arven fortsætter!

I denne instruktionsbog lærer du, hvordan du bruger MCUfriend.com 2,4 TFT -skærm til Uno/Mega. Du lærer, hvordan du viser grafiske objekter og tekst, og hvordan du modtager berøringer og reagerer på berøringshændelser. Dette skærmen ligner meget Adafruit og andre TFT -skjolde/skærme. Så hvis du er her, skal du holde dig til showet.

Vi bygger en forenklet 2 -app -version af min bluBerriSIX -skitse.

Lad os komme igang!

Trin 1: BluBerriSIX - Oversigt

BluBerriSIX -appen er et TFT -projekt med seks funktioner.

Det omfatter:

En lommelygte

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

En lommeregner

En app til afstandsmåling ved hjælp af ultralydsafstandssensoren SR-04

En temperatur- og fugtighedsapp, der også foretager datalogning i realtid op til 1,5 km med HC-12-transceiveren

En sms-app ved hjælp af HC-12.

Dette projekt tog 1100 linjer kode. Vi bygger en betydeligt enklere version, der stadig demonstrerer TFT -display og berøringsfølende koncepter.

Trin 2: Hvad er der brug for?

- En Arduino Uno eller Mega 2560

- Et MCUfriend 2,4 TFT -skjold

Følgende biblioteker:

- Adafruit_GFX bibliotek

- Adafruit Touchscreen -bibliotek

- MCUFRIEND_kbv bibliotek

Disse biblioteker kan installeres med Library Manager inde i Arduino IDE.

For at indlæse et bibliotek skal du gå til menuen Skitse -> Inkluder bibliotek -> Administrer biblioteker …

I feltet 'filtrer din søgning …' skal du indtaste de første par tegn i bibliotekets navn og derefter vælge og installere det relevante bibliotek. Når du er færdig, skal du bare vende tilbage fra denne skærm.

Når du monterer TFT -skjoldet på Uno/Mega, skal du være MEGET FORSIGTIG for at sikre, at du lægger stifterne korrekt op. Jeg justerede mit første skjold forkert og stegte det. Jeg brugte to uger med voksende frustration på at finde korrekte biblioteker, før jeg indså, at skærmen var død. VÆR FORSIGTIG

Trin 3: Vores projekt

Vi bygger en enklere version af bluBerriSIX -skitsen.

Det vil have, - en stænkskærm

- en hovedmenuskærm med to knapper

- en Saucy 7 app

- en forenklet tekstindtastningsapp

Du vil også være i stand til at vende tilbage til hovedmenuen ved at trykke på ikonet 'Hjem' nederst til venstre i dette særlige display. Hvis du ikke har et sådant ikon, skal du bare definere et 'hjem' område på din skærm. Du lærer, hvordan du bestemmer skærmens berøringsområder i denne vejledning.

Selvom dette er et forenklet projekt, er det stadig ret langt. Jeg leverer versioner af Arduino -skitserne på hvert større trin, så du kan uploade dem, hvis du ønsker det.

Trin 4: Overskriftskode, globale variabler, skærmopsætning

Hele projektet er stærkt dokumenteret. Men detaljerne følger.

Start et nyt Arduino -projekt, og kald det 'tft demo' eller et andet navn, du gerne vil have.

Det første kodepanel ovenfor viser os, hvad der definerer globale variabler. Vi tilføjer også de biblioteker, vi skal bruge til både skærmens visningsfunktion og berøringsdetektering af skærmen.

Vi definerer også de analoge stifter med henvisning til deres skærmspecifikke formål.

Vi definerer tft -objektet (display) og ts -objektet (touch) som referencer til deres respektive funktioner.

Vi definerer nogle 16 bit farvekonstanter for at gøre det let at gengive farverne på skærmen og for tekst- og grafikobjekter. Du vil bemærke, at der er en URL til et websted, der har en farvevælger og konverter til at konvertere synlige farver til deres 16 bit hexadecimale værdier. Det er et meget nyttigt værktøj.

I det andet kodepanel definerer vi de globale variabler til vores appspecifikke formål.

CString-, letter- og letterX- og letterY -strenge og arrays bruges til at a) vise bogstaverne på knapperne til tekstindtastningsappen og b) matche x- og y -koordinaterne for et tryk med x- og y -koordinaterne for hvert respektive bogstav på tastaturet. Mere om dette, når vi kommer til den sektion af skitsen.

funcX , funcY og func er arrays, der fungerer til at bestemme, hvilken app -knap der blev trykket på på hovedmenuskærmen, og derefter bruge disse oplysninger til at starte den respektive app.

lastTouch og tThresh bruges i berøringsmetoderne for at sikre, at vi ikke får flere berøringer ved at trykke for længe på skærmen. Mere om det senere.

Tilstandsvariablen styrer, hvilken skærm der vises, og tMode -variablen styrer, hvilke berøringsmetoder der bruges på et givet tidspunkt.

I opsætningsblokken () åbner vi en seriel kanal, hvis vi vil bruge Serial.println () -kommandoer til fejlfinding. Du behøver ikke denne linje, hvis du ikke ønsker at foretage fejlfinding i Serial Monitor.

De næste fire linjer er blot opsætningskode for tft -objektet.

Derefter indstiller vi skærmens retning til Portræt -tilstand.

Kommandoen randomSeed () starter lige tilfældigtalgeneratoren til senere brug af Saucy 7 -appen.

Endelig kalder vi splash screen -metoden.

Trin 5: Opbygning af Spash -skærmen og forståelse af Display Versus Touch Mapping

Vi begynder nu at bygge spash -skærmen.

Men først skal du se på billedet for skærm- og berøringskortlægning. Bemærk, at oprindelsen er forskellige steder. Til visning er oprindelsen (0, 0) øverst til venstre på skærmen (når RESET -knappen er øverst) og vokser fra venstre mod højre og fra top til bund.

Til berøringsdetektering er oprindelsen i nederste venstre hjørne af skærmen og vokser fra venstre mod højre og fra bund til top.

Så DISPLAY OG TOUCH MAPS ER DEFINERET SEPARAT og har forskellige opløsninger. Skærmen har en opløsning på 240 x 320, og berøringen har en meget højere opløsning, som du snart vil se.

Gå til et område af din skitse under metoden loop () {}, så indtaster vi splash () -metodekoden.

Vi starter med at udføre en fillScreen () -kommando for at fylde skærmen med den HVIDE farve, vi definerede i overskriftskoden.

Derefter indstiller vi tekststørrelsen til '5'. Dette er en relativt stor grundlæggende tekststørrelse. Vi indstiller x- og y -positionen for tekstmarkøren, og vi indstiller tekstfarven. Endelig tegner kommandoen print ("TFT") faktisk den blå tekst i størrelse '5' på den angivne position.

Når du øger tekststørrelsen, vil du se, at tegnene bliver mere og mere klumpede. Så at gå over 5 er sandsynligvis ikke nyttigt. I slutningen af denne vejledning vil jeg vise dig, hvordan du bruger bitmap -skrifttyper til at få pænere tekst i dine apps. Afvejningen er, at brug af bitmap -skrifttypesæt fylder meget i din Arduino, hvilket vil begrænse dine skitsestørrelser

Vi gentager lignende kommandoer for de to andre tekstelementer på stænkskærmen.

Endelig forsinker vi i 2,5 sekunder for at give brugeren en chance for at læse skærmens indhold, inden appen flytter til hovedmenuskærmen.

Fortsæt og upload denne skitse til din Arduino. Det skal vise stænkskærmen.

Trin 6: Lav et Touch Mapping Diagnostic Tool

ShowTouch () -metoden er meget nyttig til at hjælpe dig med at få berøringskoordinaterne for forskellige dele af skærmen. Du skal gøre dette for at definere berøringsområderne for dine knapper.

Gå videre og indtast denne metode under din splash () -metode, der er udført tidligere.

Sådan fungerer det.

If -sætningen afgør, om der er gået tilstrækkelig tid siden sidste tryk. Det tager den aktuelle systemtid millis () og trækker den sidste Touch -tid fra. Hvis den er større end tThresh -værdien (200 millisekunder), accepterer den berøringen. Ellers vil det se bort fra utilsigtede multi-touch-begivenheder.

Derefter får kommandoen getpoint () x, y og z koordinaterne for berøringen. Z -koordinaten er et mål for berøringstryk.

Hvis trykket er inden for de max- og minkonstanter, vi definerede i skitseoverskriften, ændrer metoden først YP- og XM -benene tilbage til OUTPUT, og skærmen sættes i DISPLAY -tilstand.

Dernæst tegner det et hvidt rektangel for at slette eventuelle koordinater, der tidligere er blevet vist.

Skitsen indstiller derefter skrifttypen til størrelse 2, sort farve og viser koordinaterne x (p.x) og y (p.y) på skærmen. Du kan derefter notere disse placeringer for at hjælpe dig med at programmere dine berøringszoner til dine egne skitser.

If -sætningen i bunden af metoden kontrollerer, om der blev trykket på knappen 'Hjem' på skærmen. '<=' operatorerne tillader bredden og højden af knappen Home. De angivne koordinater er x-center og y-center koordinaterne for knappen Home. Hvis der trykkes på den, indstilles tilstanden til 0, hvilket i sidste ende vil betyde 'Gå til hovedmenuskærmen'. Mere om det senere.

Endelig opdaterer vi lastTouch til den aktuelle systemtid millis () for at blive klar til en senere berøringshændelse.

Gå nu til loop -blokken () og tilføj linjen showTouch ();

På dette tidspunkt skal du uploade din skitse og prøve det. Det tegner stænkskærmen, og hvis du begynder at røre ved skærmen, vises TOUCH x- og y -koordinaterne på skærmen.

Inden vi går videre, lad os gå tilbage til to vigtige kodelinjer:

pinMode (YP, OUTPUT); // gendan TFT -kontrolstifterne

pinMode (XM, OUTPUT); // til visning efter registrering af et tryk

Hver gang du vil vise noget på skærmen, SKAL du udføre disse to kommandoer for at ændre skærmen fra TOUCH -tilstand til DISPLAY -tilstand. Ellers fungerer dine displaykommandoer ikke.

Godt gået indtil videre! Tag en pause!

Trin 7: Byg hovedmenuskærmen

Vi bygger nu vores hovedmenuskærm med to knapper, du kan trykke på for at aktivere hver app. Metoden kaldes menuScreen ().

Vi starter med at sætte skærmen i DISPLAY -tilstand.

Derefter indstiller vi skriftstørrelse, farve og placering og udskriver teksten 'Hovedmenu'.

Vi tegner nu to rektangler, der er knapperne.

Alle grafikkommandoer har en lignende struktur:

graphicShape (x koordinat, y koordinat, bredde, højde, FARVE)

- x koordinat - øverst til venstre for rektangulære objekter, center for cirkler

- y -koordinat - øverst til venstre for rektangulære objekter, center for cirkler

- bredde - bredden af objektet i pixels

- COLOR - en farvekonstant, vi definerede i overskriften

Endelig kalder vi to metoder til at tegne ikonet Saucy 7 og ikonet QWERTY Text Entry. Det er separate metoder.

Draw7icon (0) -metoden tager en heltalsparameter, som er y-offset for at tegne bolden. Vi gør dette, så vi kan bruge den samme metode til at tegne bolden på menuskærmen OG på Saucy 7 app -skærmen. Forskydningen tillader os bare at programmatisk justere y-koordinaten for bolden op eller ned.

Draw7Ball (0) -metoden kaldes indefra draw7Icon (0). Det kræver også en parameter, som giver os mulighed for at justere boldens lodrette position afhængigt af, om vi tegner den på menuskærmen eller på appskærmen.

Kommandoen fillCircle () tager 4 argumenter.

- x koordinat af midten af cirklen

- y koordinat af midten af cirklen

- cirkelens radius (i pixels)

- COLOR - en farvekonstant, vi definerede i overskriften

Endelig kaldes metoden drawTextIcon () for at tegne ikonet for tekstindtastningsappen.

Du kan prøve at køre metoden ved at kommentere splash () -metoden i setup () og tilføje menuScreen ().

Upload skitsen til din Arduino, og prøv den!

Trin 8: Saucy 7 -appen og metoderne i hovedmenuen

Metoden SevenScreen () tegner skærmen til appen, herunder tegning af bolden og derefter visning af instruktionerne.

Metoden SevenInstr () viser instruktionerne samt rydder skærmen fra tidligere svar. Det tegner også knappen 'Svar'.

Show7Response () -metoden håndterer sletning af den tidligere svarmetode fra skærmen, visning af en animeret "tænkning …" -meddelelse og derefter visning af den tilfældigt valgte svarmeddelelse.

read7Touch () er den metode, der venter på en berøringshændelse for at producere den tilfældigt genererede besked. Berøringskoden ligner meget showTouch () diagnosemetoden beskrevet tidligere. For nemheds skyld accepterer metoden et tryk et vilkårligt sted på skærmen som 'Svar' -knappen.

Øverst på metoden definerer vi et respons array af strenge, der er de meddelelser, der kan genereres fra en berøringshændelse.

Hvis der trykkes på knappen Hjem, afslutter appen og vender tilbage til hovedmenuskærmen. Ellers vil metoden generere et tilfældigt tal mellem 0 og 7 (eksklusivt) og videregive den tilsvarende tekstmeddelelse fra respons array til show7Response () metoden.

Endelig ser backToMenu () -metoden et tryk på startknappen og returnerer kontrollen til hovedmenuskærmen.

ReadMenuTouch () -metoden holder øje med en berøringsbegivenhed, når du er på hovedmenuskærmen. Når et tryk detekteres, sender det x- og y -koordinaterne til getFunc (x, y) -metoden, der ser i funcX og funcY arrays for at matche x og y koordinaterne for touch. Det returnerer derefter nummeret fra func -arrayet til den app, der blev valgt. '1' er Saucy 7 og '2' er tekstindtastningsappen. Det indstiller derefter tilstanden til den apps værdi, så appen vil blive eksekveret.

Trin 9: Loop () -blokken

Vi begynder nu at opbygge loop () -blokkoden til håndtering af visning af den relevante skærm og derefter kalde de relevante berøringsmetoder baseret på den valgte mulighed.

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

Den øverste switchstruktur håndterer visning af den relevante skærm afhængigt af hvilken mulighed der er valgt. Det angiver også tMode -værdien for den relevante berøringsmetode, der skal køre for den aktuelle valgte indstilling. Endelig indstiller den tilstandsværdien til 9, så skærmen ikke uendeligt tegner om.

Bundkontaktstrukturen styrer, hvilke berøringsmetoder der udføres baseret på den brugervalgte appindstilling repræsenteret af værdien af tMode.

Indlæs skitsen i din Arduino, og du skal kunne vælge og bruge Saucy 7 -appen.

Du har gjort meget arbejde! Tag en pause:-)

Trin 10: Tekstindtastningsappen - Vi er i hjemmestretch

Vi vil nu indarbejde tekstindtastningsappens metoder.

makeKbd () tegner tastaturet på skærmen.

Det tegner seks fyldte afrundede rektangler og overlejrer derefter det relevante bogstav på hver 'nøgle' ved at få brevet fra cString -strengen, som det udskriver på skærmen, over tasten. Bemærk, at den næstsidste parameter i en fillRoundedRect () kommando er radius for hvert hjørne i pixels. Jo højere denne værdi er, jo mere afrundede hjørner.

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

Hvis der registreres et tryk, der IKKE er på knappen Hjem, sender det x- og y -koordinaterne til curChar (x, y) -metoden, der returnerer det tegn, der svarer til den x- og y -placering på skærmen. Meddelelsen, der er blevet 'skrevet', vises derefter på skærmen ved hjælp af 'displayMsg (theChar) -metoden.

CurChar (x, y) metoden søger gennem letterX og letterY arrays for at prøve at finde et match, der er tæt på x- og y -koordinaterne, der er sendt fra readKbdTouch (). Hvis det finder et match, returnerer det det tilsvarende bogstav til readKbdTouch -metoden. Bemærk, at vi initialiserer theChar -variablen til 32, som er ASCII -koden for et mellemrumstegn, ''. Vi gør dette, så hvis brugeren rører et område væk fra tastaturet, viser det ikke ikke-tilgængelige tegn.

DisplayMsg (theChar) metoden tager tegnet returneret fra curChar (x, y) og tilføjer det til msg -strengen. Det viser derefter meddelelsen på skærmen.

Endelig opdaterer vi loop () blokken for at acceptere tekstindtastningsappen.

Upload tftDemo -skitsen til din Arduino, og du skal kunne bruge den færdige app.

Tillykke! du har bygget en TFT touchscreen app! Hold resten af dagen fri!

Trin 11: Bliv slank! - Brug af Adafruit Bitmap -skrifttyper i din skitse

Standard tft -skriftsæt er i orden. Men det er pænere, hvis vi kan bruge ordentlige bitmappede skrifttyper i vores TFT -skitser.

Bagsiden er, at indlæsning af skrifttyper i Arduino -hukommelsen fylder betydeligt. Faktisk er det meget let at fylde din skitse med så mange skrifttyper, at den ikke kan indlæses i Arduino.

Skrifttyperne er tilgængelige i biblioteksmappen Adafruit_GFX, som du allerede har installeret til dette projekt. En glimrende vejledning i brug af skrifttyper findes på dette websted.

I overskriftsområdet på din skitse skal du tilføje skrifttypehenvisningen til den skrifttype, du ønsker at bruge. Vi vil bruge FreeSerifBoldItalic18p7b skrifttype til dette eksempel.

#omfatte

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

Tilføj følgende kommando,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Nu bruger alle print () -kommandoer den aktuelt angivne skrifttype. Hvis du vil skifte til en anden skrifttype, skal du bruge en anden tft.setFont () kommando med den næste skrifttype, du gerne vil bruge.

Hvis du vil indstille skrifttypen tilbage til standard tft -skrifttype, skal du bare bruge en tft.setFont (); kommando uden parameter.

Upload skitsen til din Arduino, og du skulle se, at stænkskærmen nu bruger bitmap -skrifttypen til at gengive teksten på skærmen. Du vil bemærke, at størrelsen på skitsen er betydeligt større, nu hvor du har inkluderet en skrifttype.

Trin 12: Endelige tanker

Der er mange andre grafiske objektkommandoer til rådighed for dig. De omfatter:

tft.drawRect (x, y, bredde, højde, FARVE);

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

Følgende eksempler bruger metoden tft.color565 til at angive farven baseret på røde, grønne og blå værdier. Dette er en alternativ måde at bruge de konstant definerede HEX -farveværdier, vi brugte i vores skitse.

tft.drawRoundRect (x, y, bredde, højde, 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);

Leg med disse kommandoer, og udforsk, hvordan de kan føje til dine TFT -projekter.

At lære at bruge en TFT -skærm er udfordrende, og du bør være stolt af dig selv for at have taget dig tid til at lære disse første trin.

TFT -skærme kan tilføje et attraktivt og nyttigt grafisk brugergrænseflade -aspekt til dine Arduino -projekter.

Tak fordi du gennemførte denne vejledning.

GÅ NU UD OG GØR NOGET FORunderligt!