BluBerriSix - TFT TouchScreen / Arduino оқулығы: 12 қадам (суреттермен)

2024 Автор: John Day | [email protected]. Соңғы өзгертілген: 2024-01-30 10:25

2019 жылы RIM Blackberry 850 -ге 20 жыл! Бұл кішкентай канадалық өнертабыс әлеммен қарым -қатынасты өзгертті. Бұл әлдеқашан кетті, бірақ оның мұрасы жалғасуда!

Бұл нұсқаулықта сіз Uno/Mega үшін MCUfriend.com 2.4 «TFT дисплей қалқанын қалай қолдануды білесіз. Сіз графикалық объектілер мен мәтінді көрсетуді, түртуді және сенсорлық оқиғаларға әрекет етуді үйренесіз. экран Adafruit -ке және басқа TFT қалқандарына/экрандарына өте ұқсас, сондықтан егер сіз осында болсаңыз, шоуға назар аударыңыз.

Біз bluBerriSIX эскизінің 2 қосымшасының жеңілдетілген нұсқасын құрамыз.

Бастайық!

1 -қадам: BluBerriSIX - шолу

BluBerriSIX қолданбасы - бұл алты функциялы TFT жобасы.

Ол мыналарды қамтиды:

Шам

Saucy '7' қосымшасы (сиқырлы '8' доп сияқты)

Калькулятор

SR-04 ультрадыбыстық қашықтық датчигін қолданатын қашықтықты өлшеу бағдарламасы

HC-12 трансиверінің көмегімен 1,5 км-ге дейін нақты уақыттағы деректерді тіркеуді жүзеге асыратын температура мен ылғалдылық қосымшасы

HC-12 көмегімен мәтіндік хабар алмасу бағдарламасы.

Бұл жоба 1100 код кодын алды. Біз TFT дисплейі мен сенсорлық сенсорлық тұжырымдамаларды көрсететін әлдеқайда қарапайым нұсқаны құрамыз.

2 -қадам: не қажет?

- Arduino Uno немесе Mega 2560

- MCUfriend 2,4 дюймдік TFT қалқаны

Келесі кітапханалар:

- Adafruit_GFX кітапханасы

- Adafruit сенсорлы экран кітапханасы

- MCUFRIEND_kbv кітапханасы

Бұл кітапханаларды Arduino IDE ішіндегі Кітапхана менеджері арқылы орнатуға болады.

Кітапхананы жүктеу үшін эскиз -> Кітапхананы қосу -> Кітапханаларды басқару … мәзір опциясына өтіңіз.

'Іздеуді сүзу…' өрісіне кітапхана атауының алғашқы бірнеше таңбасын енгізіңіз, содан кейін сәйкес кітапхананы таңдап орнатыңыз. Аяқтағаннан кейін, бұл экраннан шығыңыз.

TFT қалқанын Uno/Mega -ге орнатқан кезде, түйреуіштердің дұрыс бекітілгеніне көз жеткізу үшін өте абай болыңыз. Мен бірінші қалқанды қателестім және оны қуырдым. Мен экранның өлі екенін білмей тұрып, дұрыс кітапханаларды табуға тырысып, екі апта бойы ашуландым. САҚ БОЛЫҢЫЗ

3 -қадам: Біздің жоба

Біз bluBerriSIX эскизінің қарапайым нұсқасын құрамыз.

Ол болады, - ашылмалы экран

- екі түйме бар негізгі мәзір экраны

- Saucy 7 қосымшасы

- мәтінді енгізудің жеңілдетілген қосымшасы

Бұл дисплейдің төменгі сол жағындағы 'Үй' белгішесін басу арқылы сіз негізгі мәзірге ораласыз. Егер сізде мұндай белгіше болмаса, сізге экранның «үй» аймағын анықтау қажет болады. Сіз бұл оқулықта экранның сенсорлық аймақтарын қалай анықтау керектігін білесіз.

Бұл жеңілдетілген жоба болғанымен, ол әлі де ұзақ. Мен әр негізгі кезеңде Arduino эскиздерінің нұсқаларын ұсынамын, егер қаласаңыз, оларды жүктей аласыз.

4 -қадам: тақырып коды, жаһандық айнымалылар, экранды орнату

Бүкіл жоба жоғары құжатталған. Бірақ егжей -тегжейлі.

Жаңа Arduino жобасын бастаңыз және оны 'tft demo' немесе өзіңіз қалаған басқа атау деп атаңыз.

Жоғарыдағы бірінші код тақтасы жаһандық айнымалыларды анықтауды көрсетеді. Біз сонымен қатар экранның дисплей функциясы үшін де, экранның сенсорлық анықтамасы үшін де қажет кітапханаларды қосамыз.

Біз сондай-ақ аналогтық түйреуіштерді олардың экранға қатысты мақсаттарына қарай анықтаймыз.

Біз tft объектісін (дисплей) және ts объектісін (түрту) сәйкес функцияларға сілтеме ретінде анықтаймыз.

Біз экранның, мәтіндік және графикалық объектілердің түстерін көрсетуді жеңілдету үшін 16 биттік түс тұрақтыларын анықтаймыз. Түстерді таңдаушы мен түрлендіргіші бар веб -сайттың URL мекен -жайы бар екенін байқайсыз, олар 16 бит он алтылық мәндерге көрінетін түстерді түрлендіреді. Бұл өте пайдалы құрал.

Екінші код тақтасында біз қолданбаға арналған мақсаттар үшін жаһандық айнымалыларды анықтаймыз.

CString, letter және letterX және letterY жолдары мен массивтері а) мәтін енгізу бағдарламасының түймелеріндегі әріптерді көрсету үшін және b) әрбір тиісті әріптің x және y координаталарымен x және y координаттарын сәйкестендіру үшін қолданылады. пернетақта. Бұл туралы толығырақ біз эскиздің сол бөліміне жеткенде.

funcX , funcY және func - бұл негізгі мәзір экранында қандай бағдарлама батырмасы басылғанын анықтайтын, содан кейін сәйкес бағдарламаны іске қосу үшін сол ақпаратты қолданатын массивтер.

lastTouch және tThresh сенсорлық әдістерде экранды ұзақ басудан бірнеше рет тиіп кетпеуіміз үшін қолданылады. Бұл туралы толығырақ кейінірек.

Режим айнымалысы қай экранның көрсетілетінін, ал tMode айнымалысы кез келген уақытта қандай сенсорлық әдістердің қолданылатынын басқарады.

Setup () блогында Serial.println () пәрмендерін отладтау үшін қолданғымыз келсе, біз Serial арнасын ашамыз. Сериялық мониторды жөндеуді қаламасаңыз, сізге бұл жол қажет емес.

Келесі төрт жол - tft объектісінің баптау коды.

Содан кейін біз экранның бағытын Портрет режиміне орнатамыз.

RandomSeed () пәрмені кейінірек Saucy 7 қосымшасында қолдану үшін кездейсоқ сандар генераторын іске қосады.

Соңында біз экранды экрандағы әдіс деп атаймыз.

5 -қадам: Экрандық экранды құру және сенсорлық картаға қарсы дисплейді түсіну

Енді біз экраны құруды бастаймыз.

Алдымен экранды және сенсорлық картаны суретке қараңыз. Назар аударыңыз, шығу тегі әр түрлі жерлерде. Дисплей үшін бастапқы мән (0, 0) экранның жоғарғы сол жағында (RESET түймесі жоғарыда болғанда) және солдан оңға және жоғарыдан төмен қарай өседі.

Сенсорлық анықтау үшін бастапқы экранның төменгі сол жақ бұрышында орналасқан және солдан оңға және төменнен жоғары қарай өседі.

ДИПЛАЙСЫ ЖӘНЕ ТИІСТІК КАРТАЛАР БӨЛІКТЕЛІП АНЫҚТАЛДЫ және әр түрлі ажыратымдылыққа ие. Дисплейдің ажыратымдылығы 240 -тан 320 -ға дейін, сенсорлық ажыратымдылығы әлдеқайда жоғары.

Цикл () {} әдісінің астындағы эскиз аймағына өтіңіз, біз splash () әдісінің кодын енгіземіз.

Біз тақырыпты кодта анықтаған АҚЫС түске толтыру үшін fillScreen () командасын орындаудан бастаймыз.

Содан кейін біз мәтін өлшемін '5' деңгейіне қойдық. Бұл салыстырмалы түрде үлкен мәтін өлшемі. Біз мәтіндік курсор үшін x және y позициясын орнатамыз және мәтін түсін өзгертеміз. Ақырында басып шығару («TFT») пәрмені көк түсте, '5' өлшемді мәтінді көрсетілген орынға шығарады.

Мәтіннің көлемін ұлғайта отырып, кейіпкерлердің қаттырақ болатынын көресіз. Сондықтан 5 -тен жоғары өту пайдалы емес шығар. Бұл оқулықтың соңында мен сізге қолданбалардағы мәтінді әдемі ету үшін нүктелік кескінді қаріптерді қалай пайдалану керектігін көрсетемін. Айырмашылығы - нүктелік кескіннің қаріптер жиынтығын пайдалану сіздің эскиздеріңіздің өлшемін шектейтін Arduino -да көп жадты алады

Біз экрандағы басқа екі мәтіндік элементтерге ұқсас командаларды қайталаймыз.

Қолданушыға негізгі мәзір экранына өтпес бұрын экран мазмұнын оқу мүмкіндігін беру үшін біз 2,5 секундқа кешіктіреміз.

Жалғастырыңыз және осы эскизді Arduino -ға жүктеңіз. Ол ашылмалы экранды көрсетуі керек.

6 -қадам: Сенсорлық картаның диагностикалық құралы

ShowTouch () әдісі экранның әртүрлі бөліктерінің сенсорлық координаттарын алуға көмектесу үшін өте пайдалы. Түймелердің сенсорлық аймақтарын анықтау үшін мұны істеу керек.

Жалғастырыңыз және бұл әдісті бұрын жасалған splash () әдісінің астына енгізіңіз.

Міне, ол қалай жұмыс істейді.

If операторы соңғы түрткеннен кейін жеткілікті уақыт өткенін анықтайды. Ол ағымдағы жүйелік уақытты миллис () алады және соңғыTouch уақытын азайтады. Егер ол tThresh мәнінен үлкен болса (200 миллисекунд), ол жанасуды қабылдайды. Әйтпесе, ол кездейсоқ көп түрту оқиғаларын елемейді.

Содан кейін getpoint () пәрмені x, y және z түрту координаттарын алады. Z координаты сенсорлық қысымның өлшемі болып табылады.

Егер қысым эскиз тақырыбында біз анықтаған максималды және минималды тұрақтылықта болса, бұл әдіс алдымен YP және XM түйреуіштерін OUTPUT -қа өзгертеді, экранды DISPLAY режиміне қояды.

Содан кейін ол бұрын көрсетілген координаттарды өшіру үшін ақ төртбұрыш салады.

Содан кейін эскиз қаріпті 2 өлшемге, қара түске орнатады және экранда x (p.x) және y (p.y) координаттарын көрсетеді. Сіз өзіңіздің эскиздеріңізге сенсорлық аймақтарды бағдарламалауға көмектесу үшін осы орындарды жазып ала аласыз.

Әдістің төменгі жағындағы if операторы экрандағы 'Home' түймесінің басылғанын тексереді. '<=' операторлары Басты түймесінің ені мен биіктігіне рұқсат береді. Көрсетілген координаттар Басты түймешігінің x-орталығы мен y-орталығының координаттары болып табылады. Егер ол басылса, режим 0 мәніне орнатылады, бұл ақыр соңында 'Негізгі мәзір экранына өту' дегенді білдіреді. Бұл туралы толығырақ кейінірек.

Соңында біз сенсорлық оқиғаға дайын болу үшін lastTouch жүйесін қазіргі уақыт миллисіне () жаңартамыз.

Енді цикл () блогына өтіп, showTouch () жолын қосыңыз;

Осы сәтте эскизіңізді жүктеп, көріңіз. Ол экрандағы экранды шығарады, егер сіз экранды түрте бастасаңыз, TOUCH x және y координаттары экранда көрсетіледі.

Жалғастырмас бұрын, кодтың екі маңызды жолын қайта қарастырайық:

pinMode (YP, OUTPUT); // TFT басқару түйреуіштерін қалпына келтіру

pinMode (XM, OUTPUT); // жанасуды анықтағаннан кейін көрсету үшін

Экранда бірдеңе көрсеткіңіз келсе, экранды TOUCH режимінен DISPLAY режиміне ауыстыру үшін осы екі пәрменді орындау қажет. Әйтпесе, дисплей командалары жұмыс істемейді.

Әзірге жақсы! Үзіліс алу!

7 -қадам: Негізгі мәзір экранын жасаңыз

Енді біз негізгі мәзір экранын екі батырмамен жасаймыз, оны басу арқылы әр қосымшаны іске қосуға болады. Бұл әдіс menuScreen () деп аталады.

Біз экранды DISPLAY режиміне қоюдан бастаймыз.

Содан кейін біз қаріп өлшемін, түсін және орнын орнатамыз және «Негізгі мәзір» мәтінін басып шығарамыз.

Енді біз түймелер болып табылатын екі тіктөртбұрыш саламыз.

Барлық графикалық командалар ұқсас құрылымға ие:

graphicShape (x координаты, y координаты, ені, биіктігі, ТҮС)

- x координаты - тікбұрышты нысандар үшін жоғарғы сол жақ, шеңберлер орталығы

- y координаты - тікбұрышты нысандар үшін жоғарғы сол жақ, шеңберлердің орталығы

- width - объектінің пиксельдегі ені

- COLOR - біз тақырыпта анықтаған түс тұрақтысы

Ақырында біз Saucy 7 белгісін және QWERTY мәтінді енгізу белгісін салудың екі әдісін шақырамыз. Бұл бөлек әдістер.

Draw7icon (0) әдісі допты салудың y-офсеті болып табылатын бүтін санды қабылдайды. Біз мұны допты мәзір экранында және Saucy 7 қолданба экранында салу үшін сол әдісті қолдану үшін жасаймыз. Есептеу бізге шардың у координатасын бағдарламалық түрде жоғары немесе төмен реттеуге мүмкіндік береді.

Draw7Ball (0) әдісі draw7Icon (0) ішінен шақырылады. Сондай -ақ, ол шардың мәзір экранында немесе қолданба экранында салынғанына байланысты доптың тік орналасуын реттеуге мүмкіндік беретін параметрді алады.

FillCircle () пәрмені 4 аргументті қабылдайды.

- x центрінің координатасы

- y шеңбер шеңберінің координатасы

- шеңбердің радиусы (пиксельмен)

- COLOR - біз тақырыпта анықтаған түс тұрақтысы

Соңында drawTextIcon () әдісі Мәтін енгізу бағдарламасының белгішесін салу үшін шақырылады.

Орнату () кезінде splash () әдісін түсіндіру және menuScreen () қосу арқылы әдісті іске қосуға болады.

Эскизді Arduino -ға жүктеп, көріңіз!

8 -қадам: Saucy 7 қосымшасы және негізгі мәзір әдістері

SevenScreen () әдісі доптың суретін, содан кейін нұсқауларды көрсетуді қоса, қолданба экранын салады.

SevenInstr () әдісі нұсқауларды көрсетеді, сонымен қатар экранды алдыңғы жауаптардан тазартады. Ол сонымен қатар «Жауап беру» түймесін шығарады.

Show7Response () әдісі алдыңғы жауап әдісін экрандан тазартуды, «ойлау …» анимациялық хабарламасын көрсетуді, содан кейін кездейсоқ таңдалған жауап хабарын көрсетуді қамтиды.

read7Touch () - кездейсоқ жасалған хабарды шығару үшін сенсорлық оқиғаны күтетін әдіс. Сенсорлық код бұрын сипатталған showTouch () диагностикалық әдісіне өте ұқсас. Қарапайымдылық үшін бұл әдіс экранның кез келген жерінде «Жауап беру» батырмасын басу ретінде қабылдайды.

Әдістің жоғарғы жағында біз сенсорлық оқиғадан жасалуы мүмкін хабарламалар болып табылатын жауаптардың массивін анықтаймыз.

Егер «Бастапқы» түймесі басылса, ол бағдарламаны тоқтатады және негізгі мәзір экранына оралады. Әйтпесе, әдіс 0 -ден 7 -ге дейінгі кездейсоқ санды шығарады (эксклюзивті) және тиісті мәтіндік хабарды массивінен show7Response () әдісіне жібереді.

Ақырында, backToMenu () әдісі «Үй» түймесін басуды бақылайды және басқаруды негізгі мәзір экранына қайтарады.

ReadMenuTouch () әдісі негізгі мәзір экранында болған кезде сенсорлық оқиғаны бақылайды. Түрту анықталған кезде, ол x және y координаттарын x және y координаттарына сәйкес келетін funcX және funcY массивтерінде көрінетін getFunc (x, y) әдісіне береді. Содан кейін ол таңдалған бағдарламаның func массивіндегі нөмірді қайтарады. '1' - Saucy 7 және '2' - мәтінді енгізуге арналған қосымша. Содан кейін ол осы қолданбаның мәніне режимді орнатады, осылайша бағдарлама орындалады.

9 -қадам: Loop () блогы

Біз енді тиісті экранды көрсету үшін цикл () блок -кодын құруды бастаймыз, содан кейін қазіргі таңда таңдалған опцияға сәйкес тиісті сенсорлық әдістерді шақырамыз.

Loop () әдісі екі switch () құрылымынан тұрады.

Жоғарғы коммутатор құрылымы қай опция таңдалғанына байланысты сәйкес экранды көрсетеді. Ол сонымен қатар tMode мәнін ағымдағы таңдалған опция үшін іске қосылатын сәйкес түрту әдісі үшін орнатады. Соңында, ол дисплей экраны шексіз қайта тартылмауы үшін режим мәнін 9 -ға орнатады.

Төменгі коммутатор құрылымы tMode мәнімен көрсетілген пайдаланушы таңдаған қолданба опциясының негізінде қандай жанасу әдістері орындалатынын басқарады.

Эскизді Arduino -ға жүктеңіз, сонда сіз Saucy 7 қосымшасын таңдап, пайдалана аласыз.

Сіз көп жұмыс жасадыңыз! Үзіліс алу:-)

10 -қадам: Мәтінді енгізуге арналған қосымша - біз үйге қараймыз

Енді біз мәтін енгізу бағдарламасының әдістерін енгіземіз.

makeKbd () пернетақтаны экранға шығарады.

Ол алты толтырылған дөңгелектелген тіктөртбұрыш салады, содан кейін экранда пернеге басып шығаратын cString жолынан әріпті алу арқылы әр «кілтке» сәйкес әріпті жабады. FillRoundedRect () пәрменіндегі екінші соңғы параметр пиксельдегі әр бұрыштың радиусы екенін ескеріңіз. Бұл мән неғұрлым жоғары болса, бұрыштар соғұрлым дөңгеленеді.

ReadKbdTouch () әдісі сенсорлық анықтаудың басқа әдістеріне ұқсас жұмыс істейді.

Егер «Home» түймесінде ЕМЕС жанасу анықталса, ол x және y координаттарын curChar (x, y) әдісіне береді, ол экрандағы осы x және y орнына сәйкес келетін таңбаны қайтарады. Содан кейін 'терілген' хабарлама экранда 'displayMsg (theChar) әдісі арқылы көрсетіледі.

CurChar (x, y) әдісі readKbdTouch () арқылы берілген x және y координаттарына жақын сәйкестікті табуға тырысу үшін [X] және letterY массивтерін іздейді. Егер ол сәйкестікті тапса, ол readKbdTouch әдісіне сәйкес әріпті қайтарады. Біз theChar айнымалы мәнін 32 -ге инициализациялаймыз, бұл бос орын үшін ASCII коды. ''. Біз мұны пайдаланушы пернетақтадан алыс аймаққа тиіп кетсе, ол қол жетімді емес таңбаларды көрсетпеуі үшін жасаймыз.

DisplayMsg (theChar) әдісі curChar (x, y) қайтарылған таңбаны қабылдайды және оны msg жолына қосады. Содан кейін ол экранда хабарламаны көрсетеді.

Ақырында, біз мәтін енгізу бағдарламасының таңдауын қабылдау үшін loop () блогын жаңартамыз.

TftDemo эскизін Arduino -ға жүктеңіз, сіз аяқталған қосымшаны пайдалана аласыз.

Құттықтаймын! Сіз TFT сенсорлық экран қосымшасын құрдыңыз! Қалған демалыс күнін алыңыз!

11 -қадам: жұмсақ болыңыз! Adafruit Bitmap қаріптерін эскизде қолдану

Стандартты tft қаріптер жинағы жақсы. Бірақ егер біз TFT эскиздерінде тиісті нүктелік кескінді қаріптерді қолдана алсақ, бұл жақсы.

Кемшілігі - қаріп жиындарын Arduino жадына жүктеу айтарлықтай орын алады. Шындығында, сіздің эскизіңізді Arduino -ға жүктелмейтін көптеген қаріптермен толтыру өте оңай.

Қаріптер сіз осы жобаға орнатқан Adafruit_GFX кітапхана қалтасында қол жетімді. Қаріптерді қолдану бойынша тамаша нұсқаулық осы сайтта.

Эскиздің үстіңгі деректеме аймағында пайдаланғыңыз келетін қаріпке қаріп сілтемесін қосыңыз. Біз бұл мысал үшін FreeSerifBoldItalic18p7b қаріпін қолданамыз.

#қосу

Splash () әдісінде tft.setTextSize () түсініктеме беріңіз; команда

Келесі пәрменді қосыңыз,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Енді кез келген print () командалары ағымдағы көрсетілген қаріпті қолданады. Басқа қаріпке ауысу үшін келесі tft.setFont () пәрменін келесі қаріппен бірге қолданасыз.

Қаріпті стандартты tft қаріпіне қайтару үшін tft.setFont () пайдаланыңыз; параметрі жоқ команда.

Эскизді Arduino -ға жүктеңіз, сонда сіз экранда мәтінді көрсету үшін нүктелік кескін қарпін қолданатынын көресіз. Сіз шрифт енгізгеннен кейін эскиздің көлемі айтарлықтай үлкен екенін байқайсыз.

12 -қадам: Қорытынды ойлар

Сізге қол жетімді графикалық объектінің басқа да көптеген командалары бар. Оларға:

tft.drawRect (x, y, ені, биіктігі, COLOR);

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

Келесі мысалдар tft.color565 әдісін қолданып, қызыл, жасыл және көк мәндерге негізделген түсті көрсетуге мүмкіндік береді. Бұл эскизде HEX түсінің тұрақты анықталған мәндерін қолданудың балама әдісі.

tft.drawRoundRect (x, y, ені, биіктігі, радиусы, tft.color565 (255, 0, 0)); // бұл қызыл болар еді

tft.drawCircle (x, y, радиус, tft.color565 (0, 255, 0)); // бұл жасыл болар еді

tft.drawTriangle (шыңы1x, шыңы1y, шыңы2x, шыңы2y, шыңы3х, шыңы3y, tft.color565 (0, 0, 255)); // көк

tft.fillTriangle (шыңы1x, шыңы1y, шыңы2x, шыңы2y, шыңы3x, шыңы3y, tft.color565 (255, 0, 0);

Осы командалармен ойнаңыз және олардың сіздің TFT жобаларыңызға қалай қосылатынын біліңіз.

TFT экранын қолдануды үйрену қиын және сіз осы алғашқы қадамдарды үйренуге уақыт бөлгеніңіз үшін мақтануға тиіссіз.

TFT экрандары Arduino жобаларына тартымды және пайдалы графикалық интерфейс аспектісін қоса алады.

Бұл оқулықпен жұмыс жасағаныңыз үшін рахмет.

ҚАЗІР ШЫҒЫҢЫЗ ЖӘНЕ БІРДЕН КЕРЕМЕТ ЖАСАҢЫЗ!