BluBerriSix - TFT TouchScreen / Arduino Урок: 12 стъпки (със снимки)

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:52

2019 е 20 -годишнината на RIM Blackberry 850! Това малко канадско изобретение промени начина, по който светът комуникира. Отдавна го няма, но наследството му продължава!

В тази инструкция ще научите как да използвате MCUfriend.com 2.4 TFT дисплей за Uno/Mega. Ще научите как да показвате графични обекти и текст и как да получавате докосвания и да действате при събития с докосване. Това екранът е много подобен на Adafruit и други TFT щитове/екрани. Така че, ако сте тук, останете наоколо за шоуто.

Ще изградим опростена версия на 2 приложения на моята скица bluBerriSIX.

Да започваме!

Стъпка 1: BluBerriSIX - Общ преглед

Приложението bluBerriSIX е шестфункционален TFT проект.

Включва:

Фенерче

Смело приложение "7" (като вълшебна топка "8")

Калкулатор

Приложение за измерване на разстояние, използващо ултразвуков сензор за разстояние SR-04

Приложение за температура и влажност, което също регистрира данни в реално време до 1,5 км с трансивъра HC-12

Приложение за текстови съобщения, използващо HC-12.

Този проект отне 1100 реда код. Ще изградим значително по -опростена версия, която все още демонстрира TFT дисплей и концепции за докосване.

Стъпка 2: Какво е необходимо?

- Arduino Uno или Mega 2560

- MCUfriend 2.4 TFT щит

Следните библиотеки:

- Библиотека Adafruit_GFX

- Библиотека със сензорен екран Adafruit

- MCUFRIEND_kbv библиотека

Тези библиотеки могат да бъдат инсталирани с мениджъра на библиотеки в IDE на Arduino.

За да заредите библиотека, отидете на опцията от менюто Sketch -> Include Library -> Manage Libraries….

В полето „филтрирайте вашето търсене …“въведете първите няколко знака от името на библиотеката и след това изберете и инсталирайте подходящата библиотека. Когато приключите, просто се върнете от този екран.

Когато монтирате TFT щита на Uno/Mega, БЪДЕТЕ МНОГО ВНИМАНИ, за да сте сигурни, че подреждате щифтовете правилно. Неправилно подравних първия си щит и го изпържих. Прекарах две седмици на нарастващо разочарование, опитвайки се да намеря правилни библиотеки, преди да осъзная, че екранът е мъртъв. БЪДИ ВНИМАТЕЛЕН

Стъпка 3: Нашият проект

Ще изградим по -опростена версия на скицата bluBerriSIX.

Ще има, - начален екран

- екран на главното меню с два бутона

- приложение Saucy 7

- опростено приложение за въвеждане на текст

Също така ще можете да се върнете в главното меню, като натиснете иконата „Начало“в долния ляв ъгъл на този конкретен дисплей. Ако нямате такава икона, просто ще трябва да определите „домашен“регион на екрана си. В този урок ще научите как да определяте областите на докосване на екрана.

Въпреки че това е опростен проект, той все още е доста дълъг. Ще предоставя версии на скиците на Arduino на всеки основен етап, за да можете да ги качите, ако желаете.

Стъпка 4: Код на заглавката, глобални променливи, настройка на екрана

Целият проект е силно документиран. Но подробностите следват.

Стартирайте нов проект на Arduino и го наречете „tft demo“или друго име, което искате.

Първият панел с кодове по -горе ни показва дефинирането на глобални променливи. Също така добавяме библиотеките, които ще трябва да използваме както за функцията за показване на екрана, така и за откриване на докосване на екрана.

Ние също така дефинираме аналоговите щифтове по отношение на техните специфични за екрана цели.

Определяме tft обекта (дисплей) и ts обекта (докосване) като препратки за съответните им функции.

Определяме някои 16 -битови цветови константи, за да улесним изобразяването на цветовете за екрана и за текстови и графични обекти. Ще забележите, че има URL адрес на уебсайт, който има инструмент за избор на цвят и конвертор за преобразуване на видимите цветове в техните 16 битови шестнадесетични стойности. Това е много полезен инструмент.

Във втория кодов панел дефинираме глобалните променливи за нашите специфични за приложението цели.

Низовете cString, letter и letterX и letterY се използват за а) показване на буквите на бутоните за приложението за въвеждане на текст и б) съвпадение на координатите x и y на докосване с координатите x и y на всяка съответна буква на клавиатурата. Повече за това, когато стигнем до този раздел на скицата.

funcX , funcY и func са масиви, които работят, за да определят кой бутон на приложението е натиснат на екрана на главното меню и след това използват тази информация, за да стартират съответното приложение.

lastTouch и tThresh се използват в методите за докосване, за да сме сигурни, че няма да получим множество докосвания от прекалено дълго натискане на екрана. Повече за това по -късно.

Променливата mode ще контролира кой екран да се показва, а променливата tMode ще контролира кои методи за докосване се използват във всеки един момент.

В блока setup () отваряме сериен канал, ако искаме да използваме команди Serial.println () за отстраняване на грешки. Не се нуждаете от този ред, ако не искате да правите отстраняване на грешки в сериен монитор.

Следващите четири реда са само код за настройка на tft обекта.

След това задаваме ориентацията на екрана в портретен режим.

Командата randomSeed () просто стартира генератора на произволни числа за по -късна употреба от приложението Saucy 7.

Накрая наричаме метода на пръскащия екран.

Стъпка 5: Изграждане на Spash екран и разбиране на дисплея срещу картографиране с докосване

Сега ще започнем да изграждаме екраниращия панел.

Но първо, моля, погледнете картината за картиране на екрана и докосване. Забележете, че произходът е на различни места. За показване, началото (0, 0) е в горния ляв ъгъл на екрана (когато бутонът RESET е отгоре) и расте отляво надясно и отгоре надолу.

За откриване на докосване произходът е в долния ляв ъгъл на екрана и расте отляво надясно и отдолу нагоре.

И така, ДИСПЛЕЙНИТЕ И ДОКЛАЧНИ КАРТИ СА ОПРЕДЕЛЕНИ ОТДЕЛНО и имат различни резолюции. Дисплеят има резолюция 240 на 320, а докосването има много по -висока разделителна способност, както скоро ще видите.

Отидете в област на вашата скица под метода loop () {} и ние ще въведем кода на метода splash ().

Започваме, като изпълним команда fillScreen (), за да запълним екрана с БЯЛ цвят, който сме дефинирали в заглавния код.

След това задаваме размера на текста на '5'. Това е относително голям основен размер на текста. Задаваме позицията x и y за текстовия курсор и задаваме цвета на текста. И накрая, командата print ("TFT") изчертава синия текст с размер "5" на определената позиция.

С увеличаването на размера на текста ще видите, че героите стават все по -плътни. Така че надвишаването на 5 вероятно не е полезно. В края на този урок ще ви покажа как да използвате растерни шрифтове, за да получите по -добре изглеждащ текст във вашите приложения. Компромисът е, че използването на набори от растерни шрифтове заема много памет във вашия Arduino, което ще ограничи размерите на скицата ви

Повтаряме подобни команди за другите два текстови елемента на началния екран.

Накрая отлагаме за 2,5 секунди, за да дадем възможност на потребителя да прочете съдържанието на екрана, преди приложението да се премести в екрана на главното меню.

Продължете и качете тази скица на вашия Arduino. Той трябва да показва началния екран.

Стъпка 6: Създаване на инструмент за диагностика на картографиране с докосване

Методът showTouch () е много полезен, за да ви помогне да получите координатите на докосване на различни части на екрана. Ще трябва да направите това, за да определите областите на докосване за вашите бутони.

Продължете и въведете този метод под вашия метод splash (), направен преди това.

Ето как работи.

Инструкцията if определя дали е минало достатъчно време от последното докосване. Той взема текущото системно време millis () и изважда времето за последно докосване. Ако е по -голяма от стойността на tThresh (200 милисекунди), тя приема докосването. В противен случай той ще пренебрегне случайните събития с много докосвания.

След това командата getpoint () получава координатите x, y и z на докосването. Z координатата е мярка за налягането при допир.

Ако налягането е в рамките на максималните и минималните константи, дефинирани в заглавката на скицата, методът първо ще промени YP и XM щифтовете обратно на OUTPUT, поставяйки екрана в режим DISPLAY.

След това ще нарисува бял правоъгълник, за да изтрие всички координати, които може да са били показани по -рано.

След това скицата задава шрифта на размер 2, черен цвят и показва координатите x (p.x) и y (p.y) на екрана. След това можете да отбележите тези места, за да ви помогне да програмирате зоните си на докосване за вашите собствени скици.

Изразът if в долната част на метода проверява дали бутонът „Начало“на екрана е натиснат. операторите '<=' позволяват ширината и височината на бутона Home. Посочените координати са координатите x-center и y-center на бутона Home. Ако е натиснат, режимът е зададен на 0, което в крайна сметка ще означава „Отиди на екрана на главното меню“. Повече за това по -късно.

Накрая актуализираме lastTouch към текущото системно време millis (), за да се подготвим за по -късно докосване.

Моля, преминете към блока loop () и добавете реда showTouch ();

В този момент качете скицата си и я опитайте. Той ще нарисува началния екран и ако започнете да докосвате екрана, координатите TOUCH x и y ще се покажат на екрана.

Преди да продължим, нека да преразгледаме два важни реда код:

pinMode (YP, OUTPUT); // възстановяване на TFT контролните щифтове

pinMode (XM, OUTPUT); // за показване след откриване на докосване

Всеки път, когато искате да покажете нещо на екрана, ТРЯБВА да изпълните тези две команди, за да промените екрана от режим TOUCH в режим DISPLAY. В противен случай вашите команди за показване няма да работят.

Браво досега! Направете почивка!

Стъпка 7: Изградете екрана на главното меню

Сега ще изградим нашия екран с главно меню с два бутона, които можете да натиснете, за да активирате всяко приложение. Методът се нарича menuScreen ().

Започваме с поставянето на екрана в режим DISPLAY.

След това задаваме размера на шрифта, цвета и позицията и отпечатваме текста „Главното меню“.

Сега рисуваме два правоъгълника, които са бутоните.

Всички графични команди имат подобна структура:

graphicShape (x координата, y координата, ширина, височина, COLOR)

- x координата - горе вляво за правоъгълни обекти, център за кръгове

- y координата - горе вляво за правоъгълни обекти, център за кръгове

- width - ширина на обекта в пиксели

- COLOR - цветова константа, която определихме в заглавката

Накрая извикваме два метода за рисуване на иконата Saucy 7 и иконата за въвеждане на текст QWERTY. Това са отделни методи.

Методът draw7icon (0) приема целочислен параметър, който е y-отместването за изтегляне на топката. Правим това, за да можем да използваме същия метод за рисуване на топката на екрана на менюто И на екрана на приложението Saucy 7. Отместването просто ни позволява програмно да регулираме y-координатата на топката нагоре или надолу.

Методът draw7Ball (0) се извиква отвътре draw7Icon (0). Той също така приема параметър, който ни позволява да регулираме вертикалното положение на топката в зависимост от това дали я рисуваме на екрана на менюто или на екрана на приложението.

Командата fillCircle () приема 4 аргумента.

- x координата на центъра на окръжността

- y координата на центъра на окръжността

- радиус на окръжността (в пиксели)

- COLOR - цветова константа, която определихме в заглавката

Накрая методът drawTextIcon () се извиква, за да нарисува иконата за приложението Text Entry.

Можете да опитате да изпълните метода, като коментирате метода splash () в setup () и добавите menuScreen ().

Качете скицата на вашия Arduino и я изпробвайте!

Стъпка 8: Приложението Saucy 7 и методите на главното меню

Методът sevenScreen () ще нарисува екрана за приложението, включително изтегляне на топката и след това показване на инструкциите.

Методът sevenInstr () показва инструкциите, както и изчиства екрана от предишните отговори. Той също така изтегля бутона „Отговор“.

Методът show7Response () се справя с изчистването на предишния метод на отговор от екрана, показва анимирано съобщение „мислене …“и след това показва произволно избраното съобщение за отговор.

read7Touch () е методът, който изчаква събитие с докосване да генерира произволно генерирано съобщение. Кодът за докосване е много подобен на описания по -рано диагностичен метод showTouch (). За простота методът ще приеме докосване навсякъде по екрана като докосване на бутона „Отговор“.

В горната част на метода дефинираме отговор масив от низове, които са съобщенията, които могат да бъдат генерирани от събитие с докосване.

Ако натиснете бутона Начало, той ще прекрати приложението и ще се върне към екрана на главното меню. В противен случай методът ще генерира произволно число между 0 и 7 (изключително) и ще предаде съответното текстово съобщение от масива response на метода show7Response ().

И накрая, методът backToMenu () следи за докосване на бутона Home и връща контрола към екрана на главното меню.

Методът readMenuTouch () следи за събитие с докосване, когато сте на екрана на главното меню. Когато се докосне докосване, той предава координатите x и y на метода getFunc (x, y), който търси в масивите funcX и funcY , за да съответства на координатите x и y на докосването. След това връща номера от масива func за избраното приложение. „1“е Saucy 7, а „2“е приложението за въвеждане на текст. След това той задава режима на стойността на това приложение, така че приложението да бъде изпълнено.

Стъпка 9: Блокът Loop ()

Сега ще започнем да изграждаме block () блоков код, който да обработва показването на подходящия екран и след това да извикваме подходящите методи за докосване въз основа на избраната в момента опция.

Методът 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) търси в масивите letterX и letterY , за да опита да намери съвпадение, което е близо до координатите x и y, предадени от readKbdTouch (). Ако намери съвпадение, връща съответната буква на метода readKbdTouch. Обърнете внимание, че инициализираме променливата theChar на 32, което е ASCII код за интервал, "". Правим това, така че ако потребителят докосне област далеч от клавиатурата, той няма да показва недостъпни знаци.

Методът displayMsg (theChar) взема знака, върнат от curChar (x, y) и го добавя към низ за съобщения. След това той показва съобщението на екрана.

И накрая, ще актуализираме блока loop (), за да приемем избора на приложение за въвеждане на текст.

Качете скицата tftDemo на вашия Arduino и трябва да можете да използвате завършеното приложение.

Честито! създадохте приложение за TFT сензорен екран! Вземете останалата част от почивния ден!

Стъпка 11: Станете хлъзгави! - Използване на Adafruit Bitmap шрифтове във вашата скица

Стандартният набор от шрифтове tft е наред. Но е по -хубаво, ако можем да използваме правилни растерни шрифтове в нашите TFT скици.

Недостатъкът е, че зареждането на шрифтове в паметта на Arduino заема значително място. Всъщност е много лесно да попълните скицата си с толкова много шрифтове, че да не се зарежда в Arduino.

Шрифтовете са налични в папката на библиотеката Adafruit_GFX, която вече сте инсталирали за този проект. Отличен урок за използване на шрифтове е на този сайт.

В областта Header на вашата скица добавете препратката към шрифта, който искате да използвате. За този пример ще използваме шрифта 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 (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // син

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

Играйте с тези команди и проучете как те могат да добавят към вашите TFT проекти.

Да се научиш да използваш TFT екран е предизвикателство и трябва да се гордееш със себе си, че отделяш време да научиш тези първи стъпки.

TFT екраните могат да добавят привлекателен и полезен аспект на графичния потребителски интерфейс към вашите проекти на Arduino.

Благодаря, че работите с този урок.

СЕГА ИЗЛЕЗНЕТЕ И НАПРАВЕТЕ НЕЩО ЧУДЕСНО!