BluBerriSix - TFT TouchScreen / Arduino výuka: 12 kroků (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:22

2019 je 20. výročí RIM Blackberry 850! Tento malý kanadský vynález změnil způsob, jakým svět komunikuje. Je to dávno pryč, ale jeho dědictví pokračuje!

V tomto návodu se naučíte, jak používat 2,4 TFT displejový štít MCUfriend.com pro Uno/Mega. Naučíte se zobrazovat grafické objekty a text a přijímat dotyky a jednat podle dotykových událostí. obrazovka je velmi podobná Adafruit a dalším TFT štítům/obrazovkám. Takže pokud jste tady, držte se pro show.

Vytvoříme zjednodušenou verzi aplikace 2 pro moji skicu bluBerriSIX.

Začněme!

Krok 1: BluBerriSIX - přehled

Aplikace bluBerriSIX je projekt TFT se šesti funkcemi.

To zahrnuje:

Svítilna

Saucy '7' app (jako Magic '8' Ball)

Kalkulačka

Aplikace pro měření vzdálenosti pomocí ultrazvukového snímače vzdálenosti SR-04

Aplikace teploty a vlhkosti, která také umožňuje záznam dat v reálném čase až 1,5 km pomocí transceiveru HC-12

Textová aplikace využívající HC-12.

Tento projekt trval 1100 řádků kódu. Postavíme podstatně jednodušší verzi, která stále ukazuje koncepty TFT displeje a dotykového snímání.

Krok 2: Co je potřeba?

- Arduino Uno nebo Mega 2560

- 2,4 TFT štít MCUfriend

Následující knihovny:

- Knihovna Adafruit_GFX

- Knihovna dotykové obrazovky Adafruit

- Knihovna MCUFRIEND_kbv

Tyto knihovny lze nainstalovat pomocí Správce knihoven uvnitř Arduino IDE.

Chcete -li načíst knihovnu, přejděte do nabídky nabídky Skica -> Zahrnout knihovnu -> Spravovat knihovny….

Do pole „filtrovat vyhledávání…“zadejte prvních několik znaků jména knihovny a poté vyberte a nainstalujte příslušnou knihovnu. Až budete hotovi, vraťte se zpět z této obrazovky.

Při montáži štítu TFT na Uno/Mega BUĎTE VELMI OPATRNÍ, abyste se ujistili, že kolíky seřadíte správně. Nesprávně jsem zarovnal svůj první štít a smažil ho. Strávil jsem dva týdny rostoucí frustrace snahou najít správné knihovny, než jsem si uvědomil, že obrazovka je mrtvá. BUĎ OPATRNÝ

Krok 3: Náš projekt

Vytvoříme jednodušší verzi skici bluBerriSIX.

Bude mít, - úvodní obrazovka

- obrazovka hlavní nabídky se dvěma tlačítky

- aplikace Saucy 7

- aplikace pro zjednodušené zadávání textu

Do hlavní nabídky se také budete moci vrátit stisknutím ikony 'Domů' v levém dolním rohu tohoto konkrétního displeje. Pokud takovou ikonu nemáte, budete muset definovat „domovskou“oblast obrazovky. V tomto kurzu se dozvíte, jak určit oblasti dotyku obrazovky.

Přestože se jedná o zjednodušený projekt, je stále poměrně dlouhý. V každé hlavní fázi poskytnu verze skic Arduina, abyste je mohli nahrát, pokud si budete přát.

Krok 4: Kód záhlaví, globální proměnné, nastavení obrazovky

Celý projekt je velmi zdokumentovaný. Podrobnosti ale následují.

Spusťte nový projekt Arduino a nazvěte jej 'tft demo' nebo jakékoli jiné jméno, které byste chtěli.

První panel kódu výše nám ukazuje definování globálních proměnných. Také přidáváme knihovny, které budeme muset použít jak pro funkci zobrazení obrazovky, tak pro detekci dotyku obrazovky.

Rovněž definujeme analogové piny s odkazem na jejich účely specifické pro obrazovku.

Objekt tft (zobrazení) a objekt ts (dotek) definujeme jako reference pro jejich příslušné funkce.

Definujeme přibližně 16bitové barevné konstanty, aby bylo snadné vykreslit barvy pro obrazovku a pro textové a grafické objekty. Všimnete si, že existuje adresa URL webové stránky, která má nástroj pro výběr barev a převaděč pro převod viditelných barev na 16bitové šestnáctkové hodnoty. Je to velmi užitečný nástroj.

Na druhém panelu kódu definujeme globální proměnné pro naše účely specifické pro aplikaci.

Řetězce a pole cString, letter a letterX a letterY slouží k a) zobrazení písmen na tlačítkách aplikace pro zadávání textu ab) přiřazení souřadnic x a y dotyku k souřadnicím x a y každého příslušného písmene na klávesnice. Více o tom, když se dostaneme k té části náčrtu.

funcX , funcY a func jsou pole, která fungují k určení, které tlačítko aplikace bylo stisknuto na obrazovce hlavní nabídky, a poté pomocí těchto informací spustí příslušnou aplikaci.

lastTouch a tThresh se používají v dotykových metodách, abychom se ujistili, že nedostaneme vícenásobné stisknutí obrazovky příliš dlouho. Více o tom později.

Proměnná režimu bude řídit, která obrazovka se zobrazí, a proměnná tMode bude řídit, které dotykové metody se v daném okamžiku používají.

V bloku setup () otevíráme sériový kanál, pokud chceme pro ladění použít příkazy Serial.println (). Tento řádek nepotřebujete, pokud si nepřejete provádět ladění Serial Monitor.

Další čtyři řádky jsou pouze instalačním kódem pro objekt tft.

Dále nastavíme orientaci obrazovky na režim Portrét.

Příkaz randomSeed () právě spustí generátor náhodných čísel pro pozdější použití aplikací Saucy 7.

Nakonec voláme metodu úvodní obrazovky.

Krok 5: Sestavení úvodní obrazovky a porozumění zobrazení versus dotykové mapování

Nyní začneme stavět úvodní obrazovku.

Nejprve se však podívejte na obrázek pro mapování obrazovky a dotyku. Všimněte si, že původ je na různých místech. U zobrazení je počátek (0, 0) v levé horní části obrazovky (když je tlačítko RESET nahoře) a roste zleva doprava a shora dolů.

U detekce dotyku je počátek v dolním levém rohu obrazovky a roste zleva doprava a zdola nahoru.

MAPY ZOBRAZENÍ A DOTYKU JSOU DEFINOVÁNY SAMOSTATNĚ a mají různá rozlišení. Displej má rozlišení 240 x 320 a dotek má mnohem vyšší rozlišení, jak brzy uvidíte.

Přejděte do oblasti náčrtu pod metodou loop () {} a zadáme kód metody splash ().

Začneme provedením příkazu fillScreen () k vyplnění obrazovky BÍLOU barvou, kterou jsme definovali v kódu záhlaví.

Poté nastavíme velikost textu na '5'. Jedná se o relativně velkou základní velikost textu. Pro textový kurzor nastavíme pozici x a y a nastavíme barvu textu. Nakonec příkaz print ("TFT") ve skutečnosti nakreslí modrý text velikosti '5' na zadanou pozici.

Jak budete zvětšovat velikost textu, uvidíte, že postavy jsou čím dál hustší. Takže překročení 5 pravděpodobně nepomůže. Na konci tohoto tutoriálu vám ukážu, jak pomocí bitmapových písem získat ve svých aplikacích hezčí text. Kompromisem je, že používání sad bitmapových písem zabere ve vašem Arduinu spoustu paměti, což omezí vaše velikosti skici

Podobné příkazy opakujeme pro další dvě textové položky na úvodní obrazovce.

Nakonec odložíme o 2,5 sekundy, abychom měli možnost přečíst si obsah obrazovky, než se aplikace přesune na obrazovku hlavní nabídky.

Neváhejte a nahrajte tuto skicu do svého Arduina. Mělo by se zobrazit úvodní obrazovka.

Krok 6: Vytvoření diagnostického nástroje dotykového mapování

Metoda showTouch () je velmi užitečná k získání souřadnic dotyku různých částí obrazovky. Budete to muset udělat pro definování dotykových oblastí pro vaše tlačítka.

Pokračujte a zadejte tuto metodu pod svou předchozí metodu splash ().

Zde je návod, jak to funguje.

Příkaz if určuje, zda od posledního dotyku uplynul dostatečný čas. Trvá to aktuální systémový čas v milisekundách () a odečte se čas lastTouch. Pokud je větší než hodnota tThresh (200 milisekund), dotek přijme. V opačném případě nebude ignorovat náhodné události s více dotyky.

Dále příkaz getpoint () získá souřadnice x, y a z dotyku. Souřadnice z je míra dotykového tlaku.

Pokud je tlak v mezích maximálních a minimálních konstant, které jsme definovali v záhlaví skici, metoda nejprve změní piny YP a XM zpět na VÝSTUP, čímž se obrazovka přepne do režimu ZOBRAZENÍ.

Dále nakreslí bílý obdélník, aby vymazal všechny souřadnice, které mohly být zobrazeny dříve.

Skica poté nastaví písmo na velikost 2, černou barvu a na obrazovce zobrazí souřadnice x (p.x) a y (p.y). Potom si můžete poznamenat tato umístění, abyste si mohli naprogramovat dotykové zóny pro své vlastní skici.

Příkaz if v dolní části metody zkontroluje, zda nebylo stisknuto tlačítko 'Domů' na obrazovce. operátory '<=' umožňují šířku a výšku tlačítka Domů. Zadané souřadnice jsou souřadnice středu x a y tlačítka Domů. Pokud je stisknuto, režim je nastaven na 0, což nakonec bude znamenat 'Přejít na obrazovku hlavní nabídky'. Více o tom později.

Nakonec aktualizujeme lastTouch na aktuální systémový čas v milisekundách (), abychom se připravili na pozdější dotykovou událost.

Nyní prosím přejděte do bloku loop () a přidejte řádek showTouch ();

V tuto chvíli nahrajte svůj náčrt a zkuste to. Nakreslí úvodní obrazovku a pokud se začnete dotýkat obrazovky, na obrazovce se zobrazí souřadnice DOTYK x a y.

Než se pohneme dále, podívejme se na dva důležité řádky kódu:

pinMode (YP, OUTPUT); // obnovte ovládací kolíky TFT

pinMode (XM, OUTPUT); // pro zobrazení po detekci dotyku

Kdykoli chcete na obrazovce něco zobrazit, MUSÍTE provést tyto dva příkazy, abyste změnili obrazovku z režimu TOUCH na režim DISPLAY. V opačném případě nebudou vaše příkazy pro zobrazení fungovat.

Zatím dobře! Dát si pauzu!

Krok 7: Vytvořte obrazovku hlavní nabídky

Nyní vytvoříme naši obrazovku hlavní nabídky se dvěma tlačítky, která můžete stisknutím aktivovat každou aplikaci. Metoda se nazývá menuScreen ().

Začneme přepnutím obrazovky do režimu ZOBRAZENÍ.

Poté nastavíme velikost písma, barvu a umístění a vytiskneme text 'Hlavní nabídka'.

Nyní nakreslíme dva obdélníky, které jsou tlačítky.

Všechny grafické příkazy mají podobnou strukturu:

graphicShape (souřadnice x, souřadnice y, šířka, výška, COLOR)

- souřadnice x - vlevo nahoře pro obdélníkové objekty, střed pro kruhy

- souřadnice y - vlevo nahoře pro obdélníkové objekty, střed pro kruhy

- šířka - šířka objektu v pixelech

- COLOR - barevná konstanta, kterou jsme definovali v záhlaví

Nakonec voláme dvě metody k nakreslení ikony Saucy 7 a ikony QWERTY Text Entry. To jsou oddělené metody.

Metoda draw7icon (0) přebírá celočíselný parametr, který je offsetem y pro kreslení koule. Děláme to, abychom mohli použít stejnou metodu pro kreslení míče na obrazovce nabídky A na obrazovce aplikace Saucy 7. Offset nám jen umožňuje programově upravit souřadnice y koule nahoru nebo dolů.

Metoda draw7Ball (0) se volá z draw7Icon (0). Rovněž to vyžaduje parametr, který nám umožňuje upravit svislou polohu míče podle toho, zda jej nakreslíme na obrazovce nabídky nebo na obrazovce aplikace.

Příkaz fillCircle () má 4 argumenty.

- x souřadnice středu kruhu

- y souřadnice středu kruhu

- poloměr kruhu (v pixelech)

- COLOR - barevná konstanta, kterou jsme definovali v záhlaví

Nakonec je volána metoda drawTextIcon () k nakreslení ikony pro aplikaci Text Entry.

Metodu můžete zkusit spustit tak, že v instalačním programu () přidáte komentář k metodě splash () a přidáte menuScreen ().

Nahrajte skicu do svého Arduina a vyzkoušejte ji!

Krok 8: Aplikace Saucy 7 a metody hlavní nabídky

Metoda sevenScreen () nakreslí obrazovku aplikace, včetně nakreslení míče a následného zobrazení pokynů.

Metoda sevenInstr () zobrazuje pokyny a také vymazává obrazovku z předchozích odpovědí. Nakreslí také tlačítko 'Odpověď'.

Metoda show7Response () zpracovává vymazání předchozí metody odezvy z obrazovky, zobrazení animované zprávy „myšlení …“a poté zobrazení náhodně zvolené odpovědi.

read7Touch () je metoda, která čeká na událost dotyku k vytvoření náhodně generované zprávy. Dotykový kód je velmi podobný dříve popsané diagnostické metodě showTouch (). Pro jednoduchost bude metoda akceptovat dotyk kdekoli na obrazovce jako dotek tlačítka „Odpovědět“.

V horní části metody definujeme pole odpovědí , což jsou zprávy, které lze generovat z dotykové události.

Pokud stisknete tlačítko Domů, aplikace se ukončí a vrátí se na obrazovku hlavní nabídky. Jinak metoda vygeneruje náhodné číslo mezi 0 a 7 (exkluzivní) a předá odpovídající textovou zprávu z pole response metodě show7Response ().

Nakonec metoda backToMenu () sleduje dotek tlačítka Domů a vrací ovládání na obrazovku hlavní nabídky.

Metoda readMenuTouch () sleduje dotykovou událost, když jste na obrazovce hlavní nabídky. Když je detekován dotek, předá souřadnice xay metodě getFunc (x, y), která vypadá v polích funcX a funcY , aby odpovídala souřadnicím x a y dotyku. Poté vrátí číslo z pole func pro vybranou aplikaci. „1“je Saucy 7 a „2“je aplikace pro zadávání textu. Poté nastaví režim na hodnotu dané aplikace, aby byla aplikace spuštěna.

Krok 9: Blok Loop ()

Nyní začneme vytvářet blokový kód smyčky (), který zvládne zobrazení příslušné obrazovky a poté volání příslušných dotykových metod na základě aktuálně vybrané možnosti.

Metoda loop () se skládá ze dvou struktur switch ().

Struktura horního přepínače zpracovává zobrazení příslušné obrazovky podle toho, která možnost je vybrána. Rovněž nastavuje hodnotu tMode pro příslušnou dotykovou metodu, která se má spustit pro aktuálně vybranou možnost. Nakonec nastaví hodnotu režimu na 9, aby obrazovka displeje nekonečně překreslovala.

Struktura spodního přepínače určuje, které dotykové metody se provádějí na základě možnosti aplikace vybrané uživatelem, reprezentované hodnotou tMode.

Vložte skicu do svého Arduina a měli byste být schopni vybrat a používat aplikaci Saucy 7.

Udělali jste spoustu práce! Dát si pauzu:-)

Krok 10: Aplikace pro zadávání textu - jsme v Home Stretch

Nyní začleníme metody aplikace pro zadávání textu.

makeKbd () nakreslí klávesnici na obrazovku.

Nakreslí šest vyplněných zaoblených obdélníků a poté překryje příslušné písmeno na každém „klíči“získáním písmene z řetězce cString, který vytiskne na obrazovku přes klíč. Všimněte si, že druhý poslední parametr v příkazu fillRoundedRect () je poloměr každého rohu v pixelech. Čím vyšší je tato hodnota, tím jsou rohy zaoblenější.

Metoda readKbdTouch () funguje podobně jako ostatní metody detekce dotyku.

Pokud je detekován dotek, který NENÍ na tlačítku Domů, předá souřadnice xay metodě curChar (x, y), která vrátí znak, který odpovídá umístění xay na obrazovce. Zpráva, která byla „zadána“, se poté zobrazí na obrazovce pomocí metody „displayMsg (theChar).

Metoda curChar (x, y) prohledává pole letterX a letterY a zkouší najít shodu, která je blízká souřadnicím x a y předaným z readKbdTouch (). Pokud najde shodu, vrátí odpovídající písmeno metodě readKbdTouch. Všimněte si, že inicializujeme proměnnou theChar na 32, což je kód ASCII pro znak mezery, ''. Děláme to tak, že pokud se uživatel dotkne oblasti mimo klávesnici, nezobrazí nedostupné znaky.

Metoda displayMsg (theChar) vezme znak vrácený z curChar (x, y) a připojí jej k řetězci msg. Poté zobrazí zprávu na obrazovce.

Nakonec aktualizujeme blok loop (), abychom přijali výběr aplikace pro zadávání textu.

Nahrajte skicu tftDemo do svého Arduina a dokončenou aplikaci byste měli používat.

Gratulujeme! vytvořili jste aplikaci dotykové obrazovky TFT! Udělejte si zbytek dne volno!

Krok 11: Gettin 'Slick! - Používání bitmapových písem Adafruit ve vaší skice

Standardní sada písem tft je v pořádku. Je ale hezčí, když můžeme v našich náčrtech TFT použít správná bitmapová písma.

Temnější stránkou je, že načítání sad písem do paměti Arduina zabírá značné místo. Ve skutečnosti je velmi snadné vyplnit skicu tolika fonty, že se do Arduina nenačte.

Písma jsou k dispozici ve složce knihovny Adafruit_GFX, kterou jste již nainstalovali pro tento projekt. Na tomto webu je skvělý návod k používání písem.

Do oblasti Záhlaví skici přidejte odkaz na písmo, které chcete použít. Pro tento příklad použijeme písmo FreeSerifBoldItalic18p7b.

#zahrnout

Ve své metodě splash () okomentujte tft.setTextSize (); příkaz.

Přidejte následující příkaz,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Nyní budou všechny příkazy print () používat aktuálně zadané písmo. Chcete -li změnit jiné písmo, použijte další příkaz tft.setFont () s dalším písmem, které chcete použít.

Chcete -li nastavit písmo zpět na standardní písmo tft, použijte tft.setFont (); příkaz bez parametru.

Nahrajte skicu do svého Arduina a měli byste vidět, že úvodní obrazovka nyní pro vykreslování textu na obrazovce používá bitmapové písmo. Když jste zahrnuli písmo, všimnete si, že velikost náčrtu je výrazně větší.

Krok 12: Závěrečné myšlenky

K dispozici je vám mnoho dalších příkazů grafických objektů. Obsahují:

tft.drawRect (x, y, šířka, výška, BARVA);

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

Následující příklady používají metodu tft.color565 k určení barvy podle červené, zelené a modré hodnoty. Toto je alternativní způsob použití konstantně definovaných hodnot barev HEX, které jsme použili v naší skice.

tft.drawRoundRect (x, y, šířka, výška, poloměr, tft.color565 (255, 0, 0)); // tohle by bylo červené

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // tohle by bylo 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 příkazy a prozkoumejte, jak se mohou přidat k vašim projektům TFT.

Naučit se používat TFT obrazovku je náročné a měli byste být na sebe hrdí, že jste si udělali čas na naučení se těchto prvních kroků.

Obrazovky TFT mohou vašim projektům Arduino přidat atraktivní a užitečný aspekt grafického uživatelského rozhraní.

Děkujeme, že jste pracovali prostřednictvím tohoto tutoriálu.

NYNÍ VYJDĚTE A UDĚLEJTE NĚCO ÚŽASNÉHO!