BluBerriSix - 'n TFT -aanraakskerm / Arduino -tutoriaal: 12 stappe (met foto's)

2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:26

2019 is die 20ste herdenking van die RIM Blackberry 850! Hierdie klein Kanadese uitvinding het die manier waarop die wêreld kommunikeer, verander. Dit is lankal verby, maar die nalatenskap daarvan gaan voort!

In hierdie instruksies leer u hoe u die MCUfriend.com 2,4 TFT -skermskerm vir die Uno/Mega kan gebruik. U leer hoe om grafiese voorwerpe en teks te vertoon en hoe u aanraking kan ontvang en optree tydens die aanraakgebeurtenisse. die skerm is baie soortgelyk aan Adafruit en ander TFT -skilde/skerms. As u hier is, bly dan vir die vertoning.

Ons sal 'n vereenvoudigde 2 -app -weergawe van my bluBerriSIX -skets bou.

Laat ons begin!

Stap 1: BluBerriSIX - Oorsig

Die bluBerriSIX -app is 'n TFT -projek met ses funksies.

Dit sluit in:

'N Flitslig

'N Saucy' 7 'app (soos 'n Magic' 8 'Ball)

'N Sakrekenaar

'N Afstandmetings-app met behulp van die SR-04 ultrasoniese afstandsensor

'N Temperatuur- en humiditeitsapp wat ook real-time data aanmeld tot 1,5 km met die HC-12-ontvanger

'N SMS-app met behulp van HC-12.

Hierdie projek het 1100 reëls kode geneem. Ons bou 'n aansienlik eenvoudiger weergawe wat steeds 'n TFT -skerm en konsepte vir aanraking toon.

Stap 2: Wat is nodig?

- 'n Arduino Uno of Mega 2560

- 'n MCUfriend 2.4 TFT -skild

Die volgende biblioteke:

- Adafruit_GFX biblioteek

- Adafruit Touchscreen -biblioteek

- MCUFRIEND_kbv -biblioteek

Hierdie biblioteke kan geïnstalleer word met die biblioteekbestuurder in die Arduino IDE.

Om 'n biblioteek te laai, gaan na die menu -opsie Skets -> Sluit biblioteek in -> Bestuur biblioteke …

Voer die eerste paar karakters van die naam van die biblioteek in die veld 'filter u soektog …' in en kies en installeer dan die toepaslike biblioteek. As u klaar is, moet u net uit hierdie skerm kom.

As u die TFT -skild op die Uno/Mega monteer, moet u baie versigtig wees om seker te maak dat u die penne reg in lyn bring. Ek het my eerste skild verkeerd in lyn gebring en gebraai. Ek het twee weke se groeiende frustrasie deurgebring om die regte biblioteke te vind voordat ek besef het dat die skerm dood is. WEES VERSIGTIG

Stap 3: Ons projek

Ons bou 'n eenvoudiger weergawe van die bluBerriSIX -skets.

Dit sal hê, - 'n spatskerm

- 'n hoofkieslys met twee knoppies

- 'n Saucy 7 -app

- 'n vereenvoudigde teksinskrywing -app

U kan ook terugkeer na die hoofkieslys deur op die 'Tuis' -ikoon links onder in hierdie spesifieke skerm te druk. As u nie so 'n ikoon het nie, moet u 'n 'tuis' -gebied van u skerm definieer. In hierdie tutoriaal leer u hoe u die aanraakstreke op die skerm kan bepaal.

Alhoewel dit 'n vereenvoudigde projek is, is dit nogal lank. Ek sal weergawes van die Arduino -sketse in elke hoofstadium verskaf, sodat u dit kan oplaai as u wil.

Stap 4: Koptekst, globale veranderlikes, skermopstelling

Die hele projek is hoogs gedokumenteer. Maar die besonderhede volg.

Begin 'n nuwe Arduino -projek en noem dit 'tft demo' of enige ander naam wat u wil hê.

Die eerste kodepaneel hierbo wys hoe ons globale veranderlikes definieer. Ons voeg ook die biblioteke by wat ons moet gebruik vir die vertoonfunksie van die skerm en die aanraakopsporing van die skerm.

Ons definieer ook die analoog penne aan die hand van hul skermspesifieke doeleindes.

Ons definieer die tft -voorwerp (vertoning) en die ts -voorwerp (aanraking) as verwysings vir hul onderskeie funksies.

Ons definieer 'n paar 16 -bits kleurkonstante om dit maklik te maak om die kleure vir die skerm en vir teks- en grafiese voorwerpe weer te gee. U sal sien dat daar 'n URL is na 'n webwerf met 'n Color Picker en converter om sigbare kleure om te skakel na hul 16 -bit heksadesimale waardes. Dit is 'n baie nuttige hulpmiddel.

In die tweede kodepaneel definieer ons die globale veranderlikes vir ons app-spesifieke doeleindes.

Die cString-, letter- en letterX- en letterY -snare en skikkings word gebruik om a) die letters op die knoppies vir die teksinvoerapp te vertoon en b) die x- en y -koördinate van 'n aanraking met die x- en y -koördinate van elke onderskeie letter op te pas die sleutelbord. Meer hieroor as ons by die gedeelte van die skets kom.

funcX , funcY en func is skikkings wat werk om te bepaal watter programknoppie op die hoofkieslysskerm gedruk is en gebruik dan die inligting om die onderskeie app te begin.

lastTouch en tThresh word in die aanraakmetodes gebruik om seker te maak dat ons nie meer raak as ons die skerm te lank druk nie. Meer hieroor later.

Die modus veranderlike sal bepaal watter skerm vertoon word en die tMode veranderlike sal bepaal watter aanraakmetodes op enige gegewe tydstip gebruik word.

In die setup () -blok maak ons 'n seriële kanaal oop as ons Serial.println () -opdragte wil gebruik vir ontfouting. U benodig hierdie reël nie as u nie Serial Monitor -ontfouting wil doen nie.

Die volgende vier reëls is slegs 'n opstellingskode vir die tft -voorwerp.

Vervolgens stel ons die oriëntasie van die skerm in die portretmodus.

Die randomSeed () -opdrag begin net die generator vir ewekansige getalle vir latere gebruik deur die Saucy 7 -app.

Uiteindelik noem ons die spatskerm -metode.

Stap 5: Bou die spash -skerm en verstaan display versus touch -kartering

Ons begin nou met die bou van die spash -skerm.

Maar kyk eers na die prentjie vir skerm- en aanrakingskaarte. Let op dat die oorsprong op verskillende plekke is. Vir vertoning is die oorsprong (0, 0) links bo in die skerm (as die RESET -knoppie bo is) en groei dit van links na regs en van bo na onder.

Vir aanraakopsporing is die oorsprong in die onderste linkerhoek van die skerm en groei dit van links na regs en van onder na bo.

UITSKRIFTE EN KAARTKaarte word dus afsonderlik gedefinieer en het verskillende resolusies. Die skerm het 'n resolusie van 240 by 320 en die aanraking het 'n baie hoër resolusie, soos u binnekort sal sien.

Gaan na 'n gebied van u skets onder die lus () {} metode en ons voer die splash () metode kode in.

Ons begin met 'n fillScreen () opdrag om die skerm te vul met die WIT kleur wat ons in die kopkode gedefinieer het.

Dan stel ons die teksgrootte op '5'. Dit is 'n relatief groot basiese teksgrootte. Ons stel die x en y posisie vir die teks wyser en ons stel die teks kleur. Uiteindelik teken die opdrag print ("TFT") eintlik die blou, grootte '5' teks op die gespesifiseerde posisie.

As u die teksgrootte vergroot, sien u dat die karakters al hoe meer dik word. Om bo 5 te gaan, is waarskynlik nie nuttig nie. Aan die einde van hierdie tutoriaal sal ek u wys hoe u bitmap -lettertipes kan gebruik om teks in u app 'n beter voorkoms te kry

Ons herhaal soortgelyke opdragte vir die ander twee teksitems op die spatskerm.

Uiteindelik vertraag ons 2,5 sekondes om die gebruiker die kans te gee om die inhoud van die skerm te lees voordat die app na die hoofkieslysskerm gaan.

Laai hierdie skets na u Arduino op. Dit moet die spatskerm vertoon.

Stap 6: Maak 'n Touch Mapping Diagnostic Tool

Die showTouch () -metode is baie handig om u te help om die raakkoördinate van verskillende dele van die skerm te kry. U moet dit doen om die aanraakgebiede vir u knoppies te definieer.

Gaan voort en voer hierdie metode in onder u splash () -metode wat voorheen gedoen is.

Hier is hoe dit werk.

Die if -verklaring bepaal of daar genoeg tyd verloop het sedert die laaste aanraking. Dit neem die huidige stelseltyd millis () en trek die laaste Touch -tyd af. As dit groter is as die tThresh -waarde (200 millisekondes), aanvaar dit die aanraking. Andersins sal dit toevallige multi-touch-geleenthede verontagsaam.

Vervolgens kry die opdrag getpoint () die x-, y- en z -koördinate van die aanraking. Die z -koördinaat is 'n maatstaf van raakdruk.

As die druk binne die maksimum- en min -konstantes is wat ons in die sketsopskrif gedefinieer het, verander die metode eers die YP- en XM -penne na UITGANG en plaas die skerm in die DISPLAY -modus.

Daarna teken dit 'n wit reghoek om alle koördinate wat voorheen vertoon is, uit te vee.

Die skets stel dan die lettertipe in grootte 2, swart kleur en vertoon die x (p.x) en y (p.y) koördinate op die skerm. U kan dan hierdie plekke aanteken om u aanraakgebiede vir u eie sketse te programmeer.

Die if -verklaring onderaan die metode kyk of die 'Huis' -knoppie op die skerm ingedruk is. die '<=' operateurs maak voorsiening vir die breedte en hoogte van die tuisknoppie. Die gespesifiseerde koördinate is die x-middel- en y-sentrum-koördinate van die tuisknoppie. As dit ingedruk word, word die modus op 0 gestel, wat uiteindelik beteken 'Gaan na die hoofkieslys'. Meer hieroor later.

Uiteindelik werk ons lastTouch by tot die huidige stelseltyd millis () om gereed te maak vir 'n latere aanraking.

Gaan nou na die lus () -blok en voeg die reël showTouch () by;

Laai op hierdie stadium u skets op en probeer dit. Dit sal die spatskerm teken en as u aan die skerm begin raak, word die TOUCH x- en y -koördinate op die skerm vertoon.

Voordat ons verder gaan, kom ons kyk weer na twee belangrike reëls kode:

pinMode (YP, OUTPUT); // herstel die TFT -beheerpenne

pinMode (XM, OUTPUT); // vir vertoning na die opsporing van 'n aanraking

Elke keer as u iets op die skerm wil vertoon, MOET u hierdie twee opdragte uitvoer om die skerm van TOUCH -modus na DISPLAY -modus te verander. Anders werk u skermopdragte nie.

Goed gedoen tot dusver! Neem 'n blaaskans!

Stap 7: Bou die hoofkieslysskerm

Ons bou nou ons hoofkieslysskerm met twee knoppies waarop u kan druk om elke program te aktiveer. Die metode word menuScreen () genoem.

Ons begin deur die skerm in die DISPLAY -modus te plaas.

Dan stel ons die lettergrootte, kleur en posisie in en druk die 'Hoofkieslys' -teks af.

Ons teken nou twee reghoeke wat die knoppies is.

Alle grafiese opdragte het 'n soortgelyke struktuur:

graphicShape (x koördinaat, y koördinaat, breedte, hoogte, KLEUR)

- x koördinaat - links bo vir reghoekige voorwerpe, middelpunt vir sirkels

- y koördinaat - links bo vir reghoekige voorwerpe, middelpunt vir sirkels

- breedte - breedte van die voorwerp in pixels

- KLEUR - 'n kleurkonstante wat ons in die koptekst gedefinieer het

Laastens noem ons twee metodes om die Saucy 7 -ikoon en die QWERTY -teksinskrywing -ikoon te teken. Dit is afsonderlike metodes.

Die draw7icon (0) metode neem 'n heelgetal parameter, wat die y-offset is om die bal te trek. Ons doen dit sodat ons dieselfde metode kan gebruik om die bal op die spyskaart EN op die Saucy 7 -appskerm te teken. Die offset laat ons toe om die y-koördinaat van die bal op of af te stel.

Die draw7Ball (0) metode word van binne draw7Icon (0) genoem. Dit verg ook 'n parameter waarmee ons die vertikale posisie van die bal kan aanpas, afhangende van of ons dit op die spyskaart of op die appskerm teken.

Die fillCircle () -opdrag neem 4 argumente.

- x koördinaat van die middelpunt van die sirkel

- y koördinaat van die middelpunt van die sirkel

- radius van die sirkel (in pixels)

- KLEUR - 'n kleurkonstante wat ons in die koptekst gedefinieer het

Uiteindelik word die drawTextIcon () -metode genoem om die ikoon vir die Text Entry -app te teken.

U kan probeer om die metode uit te voer deur kommentaar te lewer op die splash () metode in setup () en menuScreen () by te voeg.

Laai die skets op na u Arduino en probeer dit!

Stap 8: Die Saucy 7 -app en die hoofkieslysmetodes

Die SevenScreen () -metode teken die skerm vir die app, insluitend die bal teken en dan die instruksies vertoon.

Die SevenInstr () -metode vertoon die instruksies, asook om die skerm van vorige antwoorde skoon te maak. Dit teken ook die 'Reaksie' -knoppie.

Die show7Response () -metode hanteer die verwydering van die vorige reaksiemetode van die skerm, vertoon 'n geanimeerde 'denkende' -boodskap en vertoon dan die willekeurig gekose antwoordboodskap.

read7Touch () is die metode wat wag vir 'n aanraakgebeurtenis om die lukraak gegenereerde boodskap te lewer. Die aanraakkode is baie soortgelyk aan die diagnostiese metode van showTouch () wat vroeër beskryf is. Vir die eenvoud sal die metode oral op die skerm 'n aanraking aanvaar as die 'Reageer' knoppie.

Bo -aan die metode definieer ons 'n reeks reeks stringe wat die boodskappe is wat uit 'n aanraakgebeurtenis gegenereer kan word.

As u op die tuisknoppie druk, sal die app eindig en terugkeer na die hoofkieslys. Andersins sal die metode 'n ewekansige getal tussen 0 en 7 (eksklusief) genereer en die ooreenstemmende teksboodskap van die reaksie -reeks na die show7Response () -metode stuur.

Laastens kyk die backToMenu () -metode na die aanraking van die tuisknoppie en keer die beheer terug na die hoofkieslys.

Die readMenuTouch () -metode kyk na 'n raakgeleentheid as u op die hoofkieslys verskyn. As 'n aanraking opgespoor word, gee dit die x- en y -koördinate deur na die getFunc (x, y) metode wat in die funcX en funcY skikkings kyk om by die x en y koördinate van die aanraking te pas. Dit gee dan die nommer terug uit die func -skikking vir die gekose program. '1' is Saucy 7 en '2' is die teksinskrywing -app. Dit stel dan die modus in op die waarde van die app, sodat die app uitgevoer kan word.

Stap 9: Die Loop () -blok

Ons sal nou die lus () blokkode begin bou om die toepaslike skerm te vertoon en dan die toepaslike aanraakmetodes te noem, gebaseer op die opsie wat tans gekies is.

Die lus () metode bestaan uit twee skakelaar () strukture.

Die struktuur van die boonste skakelaar hanteer die toepaslike skerm, afhangende van watter opsie gekies is. Dit stel ook die tMode -waarde in vir die toepaslike aanraakmetode vir die huidige geselekteerde opsie. Uiteindelik stel dit die moduswaarde op 9 sodat die skerm nie eindeloos kan teken nie.

Die onderste skakelaarstruktuur bepaal watter aanraakmetodes uitgevoer word op grond van die deur die gebruiker gekose app-opsie, verteenwoordig deur die waarde van tMode.

Laai die skets in u Arduino, en u moet die Saucy 7 -app kan kies en gebruik.

Jy het baie werk gedoen! Neem 'n blaaskans:-)

Stap 10: Die teksinskrywing -app - ons is in die huisrek

Ons sal nou die metodes van die teksinskrywing -app insluit.

makeKbd () teken die sleutelbord op die skerm.

Dit teken ses gevulde afgeronde reghoeke en lê dan die toepaslike letter op elke 'sleutel' deur die letter van die cString -string wat dit op die skerm druk, oor die sleutel te kry. Let op dat die tweede laaste parameter in 'n fillRoundedRect () -opdrag die radius van elke hoek in pixels is. Hoe hoër hierdie waarde, hoe meer afgerond is die hoeke.

Die readKbdTouch () -metode werk soortgelyk aan die ander aanraakopsporingsmetodes.

As 'n aanraking ontdek word wat NIE op die tuisknoppie is nie, gee dit die x- en y -koördinate deur na die curChar (x, y) -metode wat die karakter wat ooreenstem met die x- en y -ligging op die skerm terugstuur. Die boodskap wat 'getik' is, word dan op die skerm vertoon met die 'displayMsg (theChar) metode.

Die curChar (x, y) metode soek deur die letterX en letterY skikkings om 'n pasmaat te vind wat naby die x- en y -koördinate is wat deur readKbdTouch () oorgedra word. As dit 'n ooreenstemming vind, gee dit die ooreenstemmende letter terug na die readKbdTouch -metode. Let op dat ons die veranderlike theChar inisialiseer tot 32, wat die ASCII -kode vir 'n spasiekarakter is, ''. Ons doen dit sodat as die gebruiker 'n gebied weg van die sleutelbord raak, dit nie-beskikbare karakters sal vertoon.

Die displayMsg (theChar) metode neem die karakter terug van curChar (x, y) en voeg dit by die msg string. Dit wys dan die boodskap op die skerm.

Laastens werk ons die lus () -blok by om die keuse van die teksinskrywing -app te aanvaar.

Laai die tftDemo -skets op na u Arduino, en u moet die voltooide app kan gebruik.

Baie geluk! u het 'n TFT -raakskerm -app gebou! Neem die res van die dag rustig!

Stap 11: Word glad! - Gebruik Adafruit Bitmap -lettertipes in u skets

Die standaard tft -lettertipe is goed. Maar dit is lekkerder as ons behoorlike bitmapped fonts in ons TFT -sketse kan gebruik.

Die nadeel is dat die laai van lettertipes in die Arduino -geheue aansienlike ruimte inneem. Dit is eintlik baie maklik om u skets met soveel lettertipes te vul dat dit nie in die Arduino kan laai nie.

Die lettertipes is beskikbaar in die Adafruit_GFX biblioteekmap wat u reeds vir hierdie projek geïnstalleer het. Op hierdie webwerf is 'n uitstekende handleiding oor die gebruik van lettertipes.

Voeg die lettertipe verwysing by die lettertipe wat u wil gebruik in die koptekstgebied van u skets. Ons gebruik die FreeSerifBoldItalic18p7b lettertipe vir hierdie voorbeeld.

#insluit

Gee u tft.setTextSize () kommentaar op u splash () -metode; bevel.

Voeg die volgende opdrag by,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Nou gebruik enige opdrag () opdragte die huidige lettertipe. Om na 'n ander lettertipe te verander, gebruik u 'n ander tft.setFont () opdrag met die volgende lettertipe wat u wil gebruik.

Gebruik die tft.setFont () om die lettertipe terug te stel na die standaard tft -lettertipe; opdrag sonder parameter.

Laai die skets op na u Arduino, en u moet sien dat die spatskerm nou die bitmap -lettertipe gebruik om die teks op die skerm weer te gee. U sal sien dat die grootte van die skets aansienlik groter is noudat u 'n lettertipe ingesluit het.

Stap 12: Laaste gedagtes

Daar is baie ander opdragte vir grafiese voorwerpe wat u beskikbaar het. Dit sluit in:

tft.drawRect (x, y, breedte, hoogte, KLEUR);

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

Die volgende voorbeelde gebruik die tft.color565 -metode om die kleur te spesifiseer op grond van rooi, groen en blou waardes. Dit is 'n alternatiewe manier om die konstante gedefinieerde HEX -kleurwaardes wat ons in ons skets gebruik het, te gebruik.

tft.drawRoundRect (x, y, breedte, hoogte, radius, tft.color565 (255, 0, 0)); // dit sou rooi wees

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // dit sal groen wees

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

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

Speel met hierdie opdragte en ontdek hoe dit by u TFT -projekte kan voeg.

Dit is 'n uitdaging om 'n TFT -skerm te gebruik, en u moet trots wees op uself omdat u die tyd geneem het om hierdie eerste stappe te leer.

TFT -skerms kan 'n aantreklike en nuttige grafiese gebruikerskoppelvlak -aspek by u Arduino -projekte voeg.

Dankie dat u hierdie tutoriaal deurgewerk het.

GAAN NOU UIT EN MAAK IETS WONDERLIK!