BluBerriSix - TFT TouchScreen / Arduino výučba: 12 krokov (s obrázkami)

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

2019 je 20. výročie RIM Blackberry 850! Tento malý kanadský vynález zmenil spôsob, akým svet komunikuje. Je to už dávno preč, ale jeho odkaz pokračuje!

V tomto návode sa naučíte, ako používať 2,4 TFT displejový štít MCUfriend.com pre Uno/Mega. Naučíte sa zobrazovať grafické objekty a text a prijímať dotyky a konať pri dotykových udalostiach. Toto obrazovka je veľmi podobná Adafruit a iným TFT štítom/obrazovkám. Ak ste teda tu, zostaňte na show.

Vytvoríme zjednodušenú verziu 2 aplikácie pre môj náčrt bluBerriSIX.

Začnime!

Krok 1: BluBerriSIX - prehľad

Aplikácia bluBerriSIX je šesťfunkčný projekt TFT.

Obsahuje:

Baterka

Saucy '7' app (like a Magic '8' Ball)

Kalkulačka

Aplikácia na meranie vzdialenosti pomocou ultrazvukového senzora vzdialenosti SR-04

Aplikácia na meranie teploty a vlhkosti, ktorá tiež zaznamenáva údaje v reálnom čase až do vzdialenosti 1,5 km pomocou transceiveru HC-12

Aplikácia na odosielanie textových správ pomocou HC-12.

Tento projekt zabral 1100 riadkov kódu. Postavíme podstatne jednoduchšiu verziu, ktorá stále ukazuje koncepty TFT zobrazovania a dotykov.

Krok 2: Čo je potrebné?

- Arduino Uno alebo Mega 2560

- 2,4 palcový TFT štít MCUfriend

Nasledujúce knižnice:

- Knižnica Adafruit_GFX

- Knižnica dotykového displeja Adafruit

- knižnica MCUFRIEND_kbv

Tieto knižnice je možné nainštalovať pomocou Správcu knižníc do Arduino IDE.

Ak chcete načítať knižnicu, prejdite na možnosť ponuky Skica -> Zahrnúť knižnicu -> Spravovať knižnice ….

Do poľa „filtrovať vyhľadávanie …“zadajte prvých pár znakov názvu knižnice a potom vyberte a nainštalujte príslušnú knižnicu. Keď budete hotoví, vráťte sa von z tejto obrazovky.

Pri montáži štítu TFT na Uno/Mega buďte VEĽMI OPATRNÝ, aby ste sa uistili, že kolíky zarovnávate správne. Nesprávne som zarovnal svoj prvý štít a vyprážal ho. Strávil som dva týždne narastajúcej frustrácie pokusom nájsť správne knižnice, než som si uvedomil, že obrazovka je mŕtva. BUĎ OPATRNÝ

Krok 3: Náš projekt

Postavíme jednoduchšiu verziu skice bluBerriSIX.

Bude mať, - úvodná obrazovka

- obrazovka hlavnej ponuky s dvoma tlačidlami

- aplikácia Saucy 7

- zjednodušená aplikácia na zadávanie textu

Do hlavnej ponuky sa budete môcť vrátiť aj stlačením ikony „Domov“v dolnej ľavej časti tohto konkrétneho displeja. Ak takú ikonu nemáte, budete musieť definovať „domovskú“oblasť obrazovky. V tomto návode sa naučíte, ako určiť oblasti dotyku obrazovky.

Aj keď ide o zjednodušený projekt, je stále dosť dlhý. V každej hlavnej fáze poskytnem verzie náčrtov Arduina, aby ste ich mohli podľa potreby nahrať.

Krok 4: Kód hlavičky, globálne premenné, nastavenie obrazovky

Celý projekt je veľmi zdokumentovaný. Podrobnosti však nasledujú.

Začnite s novým projektom Arduino a nazvite ho „tft demo“alebo iným názvom.

Prvý panel kódu vyššie nám ukazuje definovanie globálnych premenných. Pridávame tiež knižnice, ktoré budeme musieť použiť na funkciu zobrazenia obrazovky a detekciu dotyku obrazovky.

Analógové piny definujeme aj s odkazom na ich účely špecifické pre obrazovku.

Objekt tft (zobrazenie) a objekt ts (dotyk) definujeme ako referencie pre ich príslušné funkcie.

Definujeme asi 16 bitových farebných konštánt, aby bolo ľahké vykresliť farby na obrazovke a pre textové a grafické objekty. Všimnete si, že existuje adresa URL webových stránok, ktoré majú nástroj na výber farieb a prevodník na konverziu viditeľných farieb na ich 16 -bitové hexadecimálne hodnoty. Je to veľmi užitočný nástroj.

Na druhom paneli kódu definujeme globálne premenné pre naše účely špecifické pre aplikáciu.

Reťazce a polia cString, letter and letterX and letterY a polia slúžia na a) zobrazenie písmen na tlačidlách aplikácie na zadávanie textu ab) zodpovedanie súradníc x a y dotyku so súradnicami x a y každého príslušného písmena na klávesnica. Viac o tom, keď sa dostaneme k tejto časti náčrtu.

funcX , funcY a func sú polia, ktoré pracujú na určení, ktoré tlačidlo aplikácie bolo stlačené na obrazovke hlavnej ponuky, a potom pomocou týchto informácií spustia príslušnú aplikáciu.

LastTouch a tThresh sa používajú v dotykových metódach, aby sme sa uistili, že nedostaneme viacnásobné dotyky pri dlhom stlačení obrazovky. Viac o tom neskôr.

Premenná režimu bude ovládať, ktorá obrazovka sa zobrazí, a premenná tMode bude ovládať, ktoré dotykové metódy sa v danom čase používajú.

V bloku setup () otvoríme sériový kanál, ak chceme na ladenie použiť príkazy Serial.println (). Tento riadok nepotrebujete, ak nechcete vykonávať ladenie sériového monitora.

Nasledujúce štyri riadky sú iba inštalačným kódom pre objekt tft.

Ďalej nastavíme orientáciu obrazovky na režim Portrét.

Príkaz randomSeed () práve spustí generátor náhodných čísel na neskoršie použitie v aplikácii Saucy 7.

Nakoniec nazývame metóda úvodnej obrazovky.

Krok 5: Zostavenie úvodnej obrazovky a porozumenie zobrazenia oproti dotykovému mapovaniu

Teraz začneme stavať úvodnú obrazovku.

Najprv sa však pozrite na obrázok na mapovanie obrazovky a dotyku. Všimnite si, že pôvod je na rôznych miestach. Pri zobrazení je pôvod (0, 0) v ľavej hornej časti obrazovky (keď je tlačidlo RESET hore) a rastie zľava doprava a zhora nadol.

Pri detekcii dotykov je pôvod v dolnom ľavom rohu obrazovky a rastie zľava doprava a zdola nahor.

MAPY ZOBRAZENIA A DOTYKU SÚ teda VYMEDZENÉ ODDELENE a majú rôzne rozlíšenia. Displej má rozlíšenie 240 x 320 a dotyk má oveľa vyššie rozlíšenie, ako čoskoro uvidíte.

Prejdite do oblasti svojho náčrtu pod metódou loop () {} a zadáme kód metódy splash ().

Začneme tým, že príkaz fillScreen () vyplníme obrazovku BIELOU farbou, ktorú sme definovali v kóde hlavičky.

Potom nastavíme veľkosť textu na „5“. Ide o relatívne veľkú základnú veľkosť textu. Pre textový kurzor nastavíme pozíciu x a y a nastavíme farbu textu. Nakoniec príkaz print ("TFT") skutočne nakreslí modrý text veľkosti '5' na zadanú pozíciu.

Keď zväčšujete veľkosť textu, uvidíte, že postavy sú čím ďalej tým hrubšie. Takže prekročenie 5 -ky asi nepomôže. Na konci tohto tutoriálu vám ukážem, ako používať bitmapové písma na získanie krajšieho vzhľadu textu vo vašich aplikáciách. Kompromisom je, že používanie bitmapových sad písem zaberá vo vašom Arduine veľa pamäte, čo obmedzí vaše veľkosti skíc

Na úvodnej obrazovke opakujeme podobné príkazy pre ďalšie dve textové položky.

Nakoniec odložíme o 2,5 sekundy, aby sme mali možnosť prečítať si obsah obrazovky predtým, ako sa aplikácia presunie na obrazovku hlavnej ponuky.

Neváhajte a nahrajte tento náčrt do svojho Arduina. Mala by zobrazovať úvodnú obrazovku.

Krok 6: Vytvorenie diagnostického nástroja dotykového mapovania

Metóda showTouch () je veľmi užitočná, aby vám pomohla získať súradnice dotyku rôznych častí obrazovky. Budete to musieť urobiť pre definovanie dotykových oblastí pre vaše tlačidlá.

Pokračujte a zadajte túto metódu pod svoju predchádzajúcu metódu splash ().

Funguje to takto.

Príkaz if určuje, či od posledného dotyku uplynul dostatočne dlhý čas. Trvá to aktuálny systémový čas v milisekundách () a odpočíta sa čas posledného dotyku. Ak je väčšia ako hodnota tThresh (200 milisekúnd), dotyk sa prijme. V opačnom prípade nebude ignorovať náhodné viacdotykové udalosti.

Ďalej príkaz getpoint () získa súradnice x, y a z dotyku. Súradnica z je mierou dotykového tlaku.

Ak je tlak v medziach maximálnych a minimálnych konštánt, ktoré sme definovali v záhlaví náčrtu, metóda najskôr zmení piny YP a XM späť na VÝSTUP, čím sa obrazovka prepne do režimu ZOBRAZENIE.

Potom nakreslí biely obdĺžnik, aby vymazal všetky súradnice, ktoré mohli byť predtým zobrazené.

Náčrt potom nastaví písmo na veľkosť 2, čiernu farbu a na obrazovke zobrazí súradnice x (p.x) a y (p.y). Tieto miesta si potom môžete poznačiť, aby vám pomohli naprogramovať dotykové zóny pre vlastné skice.

Príkaz if v spodnej časti metódy skontroluje, či bolo stlačené tlačidlo „Domov“na obrazovke. operátori '<=' umožňujú šírku a výšku tlačidla Domov. Zadané súradnice sú stredy x a stred y súradníc tlačidla Domov. Ak je stlačené, režim je nastavený na 0, čo bude v konečnom dôsledku znamenať „prejsť na obrazovku hlavnej ponuky“. Viac o tom neskôr.

Nakoniec aktualizujeme lastTouch na aktuálny systémový čas v milisekundách (), aby sme sa pripravili na neskoršiu dotykovú udalosť.

Teraz prejdite na blok loop () a pridajte riadok showTouch ();

V tomto okamihu nahrajte svoj náčrt a vyskúšajte ho. Nakreslí úvodnú obrazovku a ak sa dotknete obrazovky, na obrazovke sa zobrazia súradnice DOTYKU x a y.

Predtým, ako sa pohneme ďalej, sa vráťme k dvom dôležitým riadkom kódu:

pinMode (YP, OUTPUT); // obnovte riadiace kolíky TFT

pinMode (XM, OUTPUT); // na zobrazenie po detekcii dotyku

Kedykoľvek chcete na obrazovke niečo zobraziť, MUSÍTE vykonať tieto dva príkazy na zmenu obrazovky z režimu TOUCH na režim DISPLAY. V opačnom prípade nebudú vaše príkazy na zobrazenie fungovať.

Zatiaľ dobre! Daj si pauzu!

Krok 7: Vytvorte obrazovku hlavnej ponuky

Teraz vytvoríme obrazovku hlavnej ponuky s dvoma tlačidlami, ktoré môžete stlačením aktivovať. Metóda sa nazýva menuScreen ().

Začneme prepnutím obrazovky do režimu ZOBRAZENIE.

Potom nastavíme veľkosť, farbu a polohu písma a vytlačíme text „Hlavnej ponuky“.

Teraz nakreslíme dva obdĺžniky, ktoré sú tlačidlami.

Všetky grafické príkazy majú podobnú štruktúru:

graphicShape (súradnica x, súradnica y, šírka, výška, FARBA)

- súradnica x - vľavo hore pre obdĺžnikové objekty, stred pre kruhy

- súradnica y - vľavo hore pre obdĺžnikové objekty, stred pre kruhy

- šírka - šírka objektu v pixeloch

- COLOR - farebná konštanta, ktorú sme definovali v hlavičke

Nakoniec zavoláme dva spôsoby nakreslenia ikony Saucy 7 a ikony Zadávanie textu QWERTY. To sú samostatné metódy.

Metóda draw7icon (0) preberá celočíselný parameter, ktorý je y-offsetom pre ťahanie lopty. Robíme to preto, aby sme mohli rovnakú metódu použiť na kreslenie loptičky na obrazovke ponuky A NA obrazovke aplikácie Saucy 7. Ofset nám len umožňuje programovo upraviť súradnicu y lopty hore alebo dole.

Metóda draw7Ball (0) sa volá zvnútra draw7Icon (0). Tiež potrebuje parameter, ktorý nám umožní nastaviť zvislú polohu lopty v závislosti od toho, či ju nakreslíme na obrazovku ponuky alebo na obrazovku aplikácie.

Príkaz fillCircle () má 4 argumenty.

- x súradnica stredu kruhu

- y súradnica stredu kruhu

- polomer kruhu (v pixeloch)

- COLOR - farebná konštanta, ktorú sme definovali v hlavičke

Nakoniec sa zavolá metóda drawTextIcon () na nakreslenie ikony pre aplikáciu Zadávanie textu.

Túto metódu môžete skúsiť spustiť komentovaním metódy splash () v programe setup () a pridaním menuScreen ().

Nahrajte náčrt do svojho Arduina a vyskúšajte ho!

Krok 8: Metóda Saucy 7 a metódy hlavnej ponuky

Metóda sevenScreen () nakreslí obrazovku aplikácie vrátane nakreslenia loptičky a následného zobrazenia pokynov.

Metóda SevenInstr () zobrazuje pokyny a tiež vymazáva obrazovku z predchádzajúcich odpovedí. Tiež nakreslí tlačidlo „Odpovedať“.

Metóda show7Response () zvláda vymazanie predchádzajúcej metódy reakcie z obrazovky, zobrazenie animovanej správy „myslenie …“a potom zobrazenie náhodne zvolenej správy s odpoveďou.

read7Touch () je metóda, ktorá čaká na dotykovú udalosť, aby vytvorila náhodne generovanú správu. Dotykový kód je veľmi podobný diagnostickej metóde showTouch () popísanej vyššie. Pre jednoduchosť bude metóda akceptovať dotyk kdekoľvek na obrazovke ako dotyk tlačidla „Odpovedať“.

V hornej časti metódy definujeme pole odpovedí , ktoré sú správami, ktoré je možné generovať z dotykovej udalosti.

Ak stlačíte tlačidlo Domov, aplikácia sa ukončí a vráti sa na obrazovku hlavnej ponuky. V opačnom prípade metóda vygeneruje náhodné číslo od 0 do 7 (exkluzívne) a odošle zodpovedajúcu textovú správu z poľa response do metódy show7Response ().

Nakoniec metóda backToMenu () sleduje dotyk tlačidla Domov a vráti ovládanie na obrazovku hlavnej ponuky.

Metóda readMenuTouch () sleduje dotykovú udalosť, keď ste na obrazovke hlavnej ponuky. Keď je dotyk detekovaný, odovzdá súradnice x a y metóde getFunc (x, y), ktorá hľadá v poliach funcX a funcY , aby zodpovedala súradniciam x a y dotyku. Potom vráti číslo z poľa func pre aplikáciu, ktorá bola vybratá. „1“je Saucy 7 a „2“je aplikácia na zadávanie textu. Potom nastaví režim na hodnotu danej aplikácie, aby sa aplikácia spustila.

Krok 9: Blok slučky ()

Teraz začneme vytvárať blokový kód loop (), ktorý zvládne zobrazenie príslušnej obrazovky a potom zavolá príslušné dotykové metódy na základe aktuálne vybratej možnosti.

Metóda loop () pozostáva z dvoch štruktúr switch ().

Štruktúra horného prepínača zvláda zobrazenie príslušnej obrazovky v závislosti od toho, ktorá možnosť je vybratá. Tiež nastavuje hodnotu tMode pre príslušnú dotykovú metódu, ktorá sa má spustiť pre aktuálne zvolenú možnosť. Nakoniec nastaví hodnotu režimu na 9, aby sa obrazovka displeja nekonečne neprekresľovala.

Štruktúra spodného prepínača určuje, ktoré dotykové metódy sa vykonávajú na základe možnosti aplikácie zvolenej používateľom, ako je vyjadrené hodnotou tMode.

Vložte náčrt do svojho Arduina a mali by ste byť schopní vybrať a používať aplikáciu Saucy 7.

Odviedli ste kus práce! Daj si pauzu:-)

Krok 10: Aplikácia na zadávanie textu - sme v domácom prostredí

Teraz začleníme metódy aplikácie na zadávanie textu.

makeKbd () nakreslí klávesnicu na obrazovku.

Nakreslí šesť vyplnených zaoblených obdĺžnikov a potom prekryje príslušné písmeno na každom „kľúči“tak, že získa písmeno z reťazca cString, ktorý vytlačí na obrazovku nad kľúč. Všimnite si, že druhý posledný parameter v príkaze fillRoundedRect () je polomer každého rohu v pixeloch. Čím je táto hodnota vyššia, tým sú rohy zaoblenejšie.

Metóda readKbdTouch () funguje podobne ako ostatné metódy detekcie dotyku.

Ak sa zistí dotyk, ktorý NIE je na tlačidle Domov, odovzdá súradnice x a y metóde curChar (x, y), ktorá vráti znak zodpovedajúci tomuto umiestneniu x a y na obrazovke. Správa, ktorá bola zadaná, sa potom zobrazí na obrazovke pomocou metódy „displayMsg (theChar).

Metóda curChar (x, y) prehľadáva pole letterX a letterY a pokúša sa nájsť zhodu, ktorá je blízka súradniciam x a y odovzdaným z readKbdTouch (). Ak nájde zhodu, vráti zodpovedajúce písmeno metóde readKbdTouch. Všimnite si, že inicializujeme premennú theChar na 32, čo je kód ASCII pre medzerník, “. Robíme to tak, že ak sa používateľ dotkne oblasti vzdialenej od klávesnice, nezobrazí dostupné znaky.

Metóda displayMsg (theChar) prevezme znak vrátený z curChar (x, y) a pripojí ho k reťazcu msg. Potom zobrazí správu na obrazovke.

Nakoniec aktualizujeme blok loop (), aby akceptoval výber aplikácie na zadávanie textu.

Nahrajte skicu tftDemo do svojho Arduina a mali by ste byť schopní použiť dokončenú aplikáciu.

Gratulujem vytvorili ste aplikáciu TFT s dotykovým displejom! Vezmite si zvyšok dňa voľno!

Krok 11: Buďte úhľadní! - Použitie bitmapových písem Adafruit vo vašej skici

Štandardná sada písem tft je v poriadku. Je však krajšie, ak v našich náčrtkoch TFT môžeme použiť správne bitmapové písma.

Temnejšou stránkou veci je, že načítanie súborov písem do pamäte Arduino zaberá značné miesto. V skutočnosti je veľmi jednoduché naplniť svoju skicu toľkými písmami, že sa do Arduina nenačíta.

Písma sú k dispozícii v priečinku knižnice Adafruit_GFX, ktorý ste už nainštalovali pre tento projekt. Na tomto webe je výborný návod na používanie písem.

V oblasti hlavičky náčrtu pridajte referenciu na písmo, ktoré chcete použiť. V tomto prípade použijeme písmo FreeSerifBoldItalic18p7b.

#zahrnúť

Vo svojej metóde splash () okomentujte súbor tft.setTextSize (); príkaz.

Pridajte nasledujúci príkaz,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Teraz všetky príkazy print () použijú aktuálne zadané písmo. Na zmenu iného písma by ste použili iný príkaz tft.setFont () s ďalším písmom, ktoré chcete použiť.

Ak chcete nastaviť písmo späť na štandardné písmo tft, použite príkaz tft.setFont (); príkaz bez parametra.

Nahrajte skicu do svojho Arduina a mali by ste vidieť, že úvodná obrazovka teraz používa na vykreslenie textu na obrazovke bitmapové písmo. Keď ste zahrnuli písmo, všimnete si, že veľkosť náčrtu je výrazne väčšia.

Krok 12: Záverečné myšlienky

K dispozícii je vám mnoho ďalších príkazov grafických objektov. Patria sem:

tft.drawRect (x, y, šírka, výška, FARBA);

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

Nasledujúce príklady používajú metódu tft.color565, ktorá vám umožňuje určiť farbu na základe hodnôt červenej, zelenej a modrej. Toto je alternatívny spôsob použitia konštantne definovaných hodnôt farby HEX, ktoré sme použili v našom náčrte.

tft.drawRoundRect (x, y, šírka, výška, polomer, tft.color565 (255, 0, 0)); // toto by bolo červené

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // toto by bolo zelené

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

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

Hrajte si s týmito príkazmi a zistite, ako sa dajú pridať k vašim projektom TFT.

Naučiť sa používať obrazovku TFT je náročné a mali by ste byť na seba hrdí, že ste si našli čas na prvé kroky.

Obrazovky TFT môžu vašim projektom Arduino pridať atraktívny a užitočný aspekt grafického používateľského rozhrania.

Ďakujeme, že ste si prešli týmto návodom.

HNEĎ VYJDE A VYROBTE NIEČO ÚŽASNÉ!