BluBerriSix - en TFT -pekskärm / Arduino -handledning: 12 steg (med bilder)

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

2019 är det 20 -årsjubileum för RIM Blackberry 850! Denna lilla kanadensiska uppfinning förändrade hur världen kommunicerar. Det är länge sedan, men dess arv fortsätter!

I denna instruktion lär du dig hur du använder MCUfriend.com 2,4 TFT -skärm för Uno/Mega. Du lär dig hur du visar grafiska objekt och text och hur du tar emot beröringar och agerar vid beröringshändelserna. Detta skärmen är mycket lik Adafruit och andra TFT -sköldar/skärmar. Så om du är här, håll dig kvar för showen.

Vi bygger en förenklad 2 -appversion av min bluBerriSIX -skiss.

Låt oss börja!

Steg 1: BluBerriSIX - Översikt

BluBerriSIX -appen är ett TFT -projekt med sex funktioner.

Det inkluderar:

En ficklampa

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

En miniräknare

En avståndsmätningsapp med ultraljudsavståndssensorn SR-04

En temperatur- och luftfuktighetsapp som också gör dataloggning i realtid upp till 1,5 km med HC-12-sändtagaren

En sms-app med HC-12.

Detta projekt tog 1100 rader kod. Vi bygger en betydligt enklare version som fortfarande visar TFT -display och beröringsavkänningskoncept.

Steg 2: Vad behövs?

- En Arduino Uno eller Mega 2560

- En MCUfriend 2,4 TFT -skärm

Följande bibliotek:

- Adafruit_GFX -bibliotek

- Adafruit pekskärmsbibliotek

- MCUFRIEND_kbv -bibliotek

Dessa bibliotek kan installeras med Library Manager inuti Arduino IDE.

För att ladda ett bibliotek, gå till menyalternativet Skiss -> Inkludera bibliotek -> Hantera bibliotek …

I fältet "filtrera din sökning …" anger du de första tecknen i biblioteksnamnet och väljer och installerar sedan rätt bibliotek. När du är klar, backa bara ut från den här skärmen.

När du monterar TFT -skärmen på Uno/Mega, VAR MYCKET FÖRSIKTIG för att se till att du stänger stiften korrekt. Jag justerade min första sköld fel och stekte den. Jag tillbringade två veckor av växande frustration med att försöka hitta rätt bibliotek innan jag insåg att skärmen var död. VAR FÖRSIKTIG

Steg 3: Vårt projekt

Vi bygger en enklare version av bluBerriSIX -skissen.

Det kommer att ha, - en stänkskärm

- en huvudmenyskärm med två knappar

- en Saucy 7 -app

- en förenklad textinmatningsapp

Du kommer också att kunna återgå till huvudmenyn genom att trycka på "Hem" -ikonen längst ner till vänster på den här skärmen. Om du inte har en sådan ikon måste du bara definiera en "hem" -region på skärmen. Du lär dig hur du bestämmer skärmens beröringsregioner i den här självstudien.

Även om detta är ett förenklat projekt, är det fortfarande ganska långt. Jag tillhandahåller versioner av Arduino -skisserna vid varje större etapp så att du kan ladda upp dem om du vill.

Steg 4: Rubrikkod, globala variabler, skärminställning

Hela projektet är mycket dokumenterat. Men detaljerna följer.

Starta ett nytt Arduino -projekt och kalla det 'tft demo' eller något annat namn du vill.

Den första kodpanelen ovan visar oss definiera globala variabler. Vi lägger också till de bibliotek vi kommer att behöva använda för både skärmens visningsfunktion och skärmens beröringsdetektering.

Vi definierar också de analoga stiften med hänvisning till deras skärmspecifika ändamål.

Vi definierar tft -objektet (display) och ts -objektet (touch) som referenser för deras respektive funktioner.

Vi definierar några 16 -bitars färgkonstanter för att göra det enkelt att återge färgerna för skärmen och för text- och grafikobjekt. Du kommer att märka att det finns en URL till en webbplats som har en färgväljare och omvandlare för att konvertera synliga färger till deras 16 -bitars hexadecimala värden. Det är ett mycket hjälpsamt verktyg.

I den andra kodpanelen definierar vi de globala variablerna för våra appspecifika ändamål.

Strängarna och matriserna cString, letter och letterX och letterY används för att a) visa bokstäverna på knapparna för textinmatningsappen och b) matcha x- och y -koordinaterna för en touch med x- och y -koordinaterna för respektive bokstav på tangentbordet. Mer om detta när vi kommer till den delen av skissen.

funcX , funcY och func är matriser som fungerar för att avgöra vilken appknapp som trycktes på huvudmenyskärmen och sedan använda den informationen för att starta respektive app.

lastTouch och tThresh används i beröringsmetoderna för att se till att vi inte får flera beröringar genom att trycka på skärmen för länge. Mer om det senare.

Lägesvariabeln styr vilken skärm som visas och tMode -variabeln styr vilka beröringsmetoder som används vid varje given tidpunkt.

I blocket setup () öppnar vi en seriekanal om vi vill använda Serial.println () -kommandon för felsökning. Du behöver inte den här raden om du inte vill felsöka seriell bildskärm.

De följande fyra raderna är bara installationskod för tft -objektet.

Därefter ställer vi in skärmens orientering till porträttläge.

Kommandot randomSeed () startar bara slumptalsgeneratorn för senare användning av Saucy 7 -appen.

Slutligen kallar vi splash screen -metoden.

Steg 5: Skapa skräppostskärmen och förstå Display Versus Touch Mapping

Vi börjar nu bygga skräppostskärmen.

Men först, titta på bilden för skärm- och beröringskartläggning. Lägg märke till att ursprunget finns på olika platser. För visning finns ursprunget (0, 0) längst upp till vänster på skärmen (när RESET -knappen är överst) och växer från vänster till höger och uppifrån och ner.

För beröringsdetektering finns ursprunget i skärmens nedre vänstra hörn och växer från vänster till höger och nedifrån till toppen.

Så DISPLAY OCH TOUCH -KARTOR DEFINERAS Separat och har olika upplösningar. Displayen har en upplösning på 240 x 320 och touchen har en mycket högre upplösning som du snart kommer att se.

Gå till ett område av din skiss under loop () {} -metoden så anger vi metodskoden för splash ().

Vi börjar med att göra ett fillScreen () -kommando för att fylla skärmen med den VITA färgen som vi definierade i rubrikkoden.

Sedan ställer vi in textstorleken till '5'. Detta är en relativt stor grundtextstorlek. Vi ställer in x och y -positionen för textmarkören och vi ställer in textfärgen. Slutligen ritar utskriftskommandot ("TFT") faktiskt den blå texten "5" i den angivna positionen.

När du ökar textstorleken ser du att karaktärerna blir mer och mer tjocka. Så att gå över 5 är förmodligen inte till hjälp. I slutet av den här självstudien visar jag dig hur du använder bitmappsteckensnitt för att få snyggare text i dina appar. Avvägningen är att användningen av bitmappsuppsättningar tar mycket minne i din Arduino vilket kommer att begränsa dina skissstorlekar

Vi upprepar liknande kommandon för de andra två textobjekten på stänkskärmen.

Slutligen dröjer vi med 2,5 sekunder för att ge användaren en chans att läsa skärmens innehåll innan appen går till huvudmenyn.

Ladda upp den här skissen till din Arduino. Det ska visa stänkskärmen.

Steg 6: Skapa ett Touch Mapping Diagnostic Tool

ShowTouch () -metoden är mycket användbar för att hjälpa dig att få beröringskoordinaterna för olika delar av skärmen. Du måste göra detta för att definiera beröringsområdena för dina knappar.

Fortsätt och ange den här metoden under din splash () -metod som gjorts tidigare.

Så här fungerar det.

If -satsen avgör om en tillräckligt lång tid har gått sedan den senaste touchen. Det tar den aktuella systemtiden millis () och subtraherar den senaste Touch -tiden. Om det är större än tThresh -värdet (200 millisekunder) accepterar det beröringen. Annars kommer det att bortse från oavsiktliga multi-touch-händelser.

Därefter får kommandot getpoint () x-, y- och z -koordinaterna för touchen. Z -koordinaten är ett mått på beröringstryck.

Om trycket ligger inom max- och minkonstanterna som vi definierade i skisshuvudet, kommer metoden först att ändra YP- och XM -stiften tillbaka till OUTPUT, vilket sätter skärmen i DISPLAY -läge.

Därefter kommer den att rita en vit rektangel för att radera alla koordinater som kan ha visats tidigare.

Skissen ställer sedan in teckensnittet i storlek 2, svart färg och visar koordinaterna x (p.x) och y (p.y) på skärmen. Du kan sedan anteckna dessa platser för att hjälpa dig att programmera dina pekzoner för dina egna skisser.

If -satsen längst ner i metoden kontrollerar om 'Home' -knappen på skärmen trycktes in. '<=' operatörerna tillåter bredden och höjden på hemknappen. Koordinaterna som anges är x-center- och y-center-koordinaterna för hemknappen. Om den trycks in är läget inställt på 0 vilket så småningom betyder "Gå till huvudmenyskärmen". Mer om det senare.

Slutligen uppdaterar vi lastTouch till den aktuella systemtiden millis () för att göra dig redo för en senare touchhändelse.

Vänligen gå nu i loop () -blocket och lägg till linjen showTouch ();

Ladda nu upp din skiss och prova den. Det kommer att rita stänkskärmen och om du börjar vidröra skärmen visas TOUCH x- och y -koordinaterna på skärmen.

Innan vi går vidare, låt oss gå tillbaka till två viktiga kodrader:

pinMode (YP, OUTPUT); // återställ TFT -kontrollnålarna

pinMode (XM, OUTPUT); // för visning efter detektering av en beröring

Varje gång du vill visa något på skärmen måste du utföra dessa två kommandon för att ändra skärmen från TOUCH -läge till DISPLAY -läge. Annars fungerar inte dina displaykommandon.

Bra gjort hittills! Ta en paus!

Steg 7: Skapa huvudmenyskärmen

Vi bygger nu vår huvudmenyskärm med två knappar du kan trycka på för att aktivera varje app. Metoden kallas menuScreen ().

Vi börjar med att sätta skärmen i DISPLAY -läge.

Sedan ställer vi in teckenstorlek, färg och position och skriver ut texten "Huvudmeny".

Vi ritar nu två rektanglar som är knapparna.

Alla grafikkommandon har en liknande struktur:

graphicShape (x koordinat, y koordinat, bredd, höjd, FÄRG)

- x koordinat - överst till vänster för rektangulära objekt, centrum för cirklar

- y -koordinat - överst till vänster för rektangulära objekt, centrum för cirklar

- bredd - objektets bredd i pixlar

- COLOR - en färgkonstant som vi definierade i rubriken

Slutligen kallar vi två metoder för att rita Saucy 7 -ikonen och QWERTY Text Entry -ikonen. Det är separata metoder.

Draw7icon (0) -metoden tar en heltalsparameter som är y-offset för att dra bollen. Vi gör detta så att vi kan använda samma metod för att rita bollen på menyskärmen OCH på Saucy 7 -appskärmen. Förskjutningen låter oss bara justera bollens y-koordinat uppåt eller nedåt.

Draw7Ball (0) -metoden anropas inom draw7Icon (0). Det krävs också en parameter som gör att vi kan justera bollens vertikala position beroende på om vi ritar den på menyskärmen eller på appskärmen.

Kommandot fillCircle () tar fyra argument.

- x koordinat för cirkelns mitt

- y -koordinaten för cirkelns mitt

- cirkelns radie (i pixlar)

- FÄRG - en färgkonstant som vi definierade i rubriken

Slutligen kallas metoden drawTextIcon () för att rita ikonen för textinmatningsappen.

Du kan försöka köra metoden genom att kommentera splash () -metoden i setup () och lägga till menuScreen ().

Ladda upp skissen till din Arduino och prova den!

Steg 8: Saucy 7 -appen och huvudmenymetoderna

Metoden sevenScreen () kommer att rita skärmen för appen, inklusive att rita bollen och sedan visa instruktionerna.

Metoden SevenInstr () visar instruktionerna samt rensar skärmen från tidigare svar. Det drar också knappen "Svar".

Show7Response () -metoden hanterar rensning av den tidigare svarsmetoden från skärmen, visar ett animerat "tänkande …" -meddelande och visar sedan det slumpmässigt valda svarsmeddelandet.

read7Touch () är metoden som väntar på en beröringshändelse för att producera det slumpmässigt genererade meddelandet. Pekskoden liknar den diagnostiska metod showTouch () som beskrivits tidigare. För enkelhetens skull, kommer metoden att acceptera en touch var som helst på skärmen som knappen "Svara".

Högst upp i metoden definierar vi en respons -matris av strängar som är meddelanden som kan genereras från en pekhändelse.

Om du trycker på hemknappen avslutas appen och återgår till huvudmenyskärmen. Annars genererar metoden ett slumpmässigt tal mellan 0 och 7 (exklusivt) och skickar motsvarande textmeddelande från svars -matrisen till show7Response () -metoden.

Slutligen tittar backToMenu () -metoden efter ett tryck på hemknappen och återgår kontrollen till huvudmenyskärmen.

ReadMenuTouch () -metoden tittar på en pekhändelse när du är på huvudmenyskärmen. När en beröring detekteras, passerar den x- och y -koordinaterna till getFunc (x, y) -metoden som ser ut i funcX - och funcY -matriserna för att matcha x- och y -koordinaterna för touchen. Det returnerar sedan numret från func -matrisen för den app som valdes. '1' är Saucy 7 och '2' är textinmatningsappen. Det ställer sedan in läget till appens värde så att appen körs.

Steg 9: Loop () -blocket

Vi börjar nu bygga loop () -blockskoden för att hantera visning av lämplig skärm och sedan ringa till lämpliga beröringsmetoder baserat på det valda alternativet.

Loop () -metoden består av två switch () -strukturer.

Den översta switchstrukturen hanterar att visa lämplig skärm beroende på vilket alternativ som väljs. Det anger också tMode -värdet för lämplig beröringsmetod för det aktuella valda alternativet. Slutligen ställer det in lägesvärdet till 9 så att skärmen inte ritar om ändlöst.

Den nedre switchstrukturen styr vilka beröringsmetoder som körs baserat på det användarvalda appalternativet som representeras av värdet på tMode.

Ladda skissen i din Arduino så ska du kunna välja och använda Saucy 7 -appen.

Du har gjort mycket jobb! Ta en paus:-)

Steg 10: Textinmatningsappen - Vi är i hemmastretch

Vi kommer nu att inkludera textinmatningsappens metoder.

makeKbd () ritar tangentbordet på skärmen.

Den ritar sex fyllda rundade rektanglar och överlagrar sedan lämplig bokstav på varje "nyckel" genom att få bokstaven från cString -strängen som den skriver ut på skärmen över tangenten. Observera att den näst sista parametern i ett kommando fillRoundedRect () är radien för varje hörn i pixlar. Ju högre detta värde desto mer rundade hörn.

Metoden readKbdTouch () fungerar ungefär som de andra beröringsdetekteringsmetoderna.

Om en touch upptäcks som INTE finns på hemknappen, skickar den x- och y -koordinaterna till curChar (x, y) -metoden som returnerar tecknet som motsvarar den x- och y -platsen på skärmen. Meddelandet som har "skrivits" visas sedan på skärmen med "displayMsg (theChar) -metoden.

CurChar (x, y) -metoden söker igenom bokstäverna X och letterY för att försöka hitta en matchning som ligger nära x- och y -koordinaterna som skickats från readKbdTouch (). Om den hittar en matchning returnerar den motsvarande bokstav till metoden readKbdTouch. Observera att vi initierar variabeln theChar till 32 som är ASCII -koden för ett mellanslagstecken, ''. Vi gör detta så att om användaren rör vid ett område från tangentbordet, kommer det inte att visa icke-tillgängliga tecken.

DisplayMsg (theChar) -metoden tar tecknet som returneras från curChar (x, y) och lägger till det i msg -strängen. Det visar sedan meddelandet på skärmen.

Slutligen uppdaterar vi loop () -blocket för att acceptera textinmatningsappen.

Ladda upp tftDemo -skissen till din Arduino så ska du kunna använda den färdiga appen.

Grattis! du har byggt en TFT -pekskärmsapp! Ta ledigt resten av dagen!

Steg 11: Gettin 'Slick! - Använda Adafruit Bitmap -teckensnitt i din skiss

Standard tft -teckenuppsättning är okej. Men det är trevligare om vi kan använda rätt bitmappade teckensnitt i våra TFT -skisser.

Nackdelen är att laddning av teckensnitt i Arduino -minnet tar mycket plats. Det är faktiskt väldigt enkelt att fylla din skiss med så många teckensnitt att den inte laddas in i Arduino.

Teckensnitten är tillgängliga i biblioteksmappen Adafruit_GFX som du redan har installerat för det här projektet. En utmärkt handledning om hur du använder teckensnitt finns på den här webbplatsen.

Lägg till teckensnittsreferensen för det teckensnitt du vill använda i rubrikområdet på din skiss. Vi använder teckensnittet FreeSerifBoldItalic18p7b för detta exempel.

#omfatta

Kommentera tft.setTextSize () i din splash () -metod; kommando.

Lägg till följande kommando,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Nu använder alla kommandon för utskrift () det för närvarande angivna teckensnittet. Om du vill byta till ett annat teckensnitt använder du ett annat tft.setFont () -kommando med nästa teckensnitt du vill använda.

För att ställa in teckensnittet tillbaka till standard tft -teckensnitt, använd bara ett tft.setFont (); kommando utan parameter.

Ladda upp skissen till din Arduino och du bör se att stänkskärmen nu använder bitmappsteckensnittet för att återge texten på skärmen. Du kommer att märka att skissens storlek är betydligt större nu när du har inkluderat ett teckensnitt.

Steg 12: Sista tankarna

Det finns många andra grafiska objektkommandon tillgängliga för dig. De inkluderar:

tft.drawRect (x, y, bredd, höjd, FÄRG);

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

Följande exempel använder metoden tft.color565 för att ange färgen baserat på röda, gröna och blåa värden. Detta är ett alternativt sätt att använda de konstant definierade HEX -färgvärdena som vi använde i vår skiss.

tft.drawRoundRect (x, y, bredd, höjd, radie, tft.color565 (255, 0, 0)); // det här skulle vara rött

tft.drawCircle (x, y, radie, tft.color565 (0, 255, 0)); // det här skulle vara 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);

Lek med dessa kommandon och utforska hur de kan lägga till dina TFT -projekt.

Att lära sig använda en TFT -skärm är utmanande och du bör vara stolt över dig själv för att du tog dig tid att lära dig dessa första steg.

TFT -skärmar kan lägga till en attraktiv och användbar grafisk användargränssnittsaspekt till dina Arduino -projekt.

Tack för att du arbetade igenom denna handledning.

NU GÅ UT OCH GÖR NÅGOT UNDERBART!