Arduino s dotykovým displejom: 16 krokov

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

Chcete vytvoriť prispôsobenejšie ponuky a lepšie rozhrania medzi ľuďmi a strojmi? Na tieto projekty môžete použiť Arduino a dotykový displej. Znie táto predstava lákavo? Ak áno, pozrite sa na video dnes, kde vám ukážem zostavu s Mega Arduino a dotykovým displejom. Uvidíte, ako na obrazovke vytvoriť požadované vzory, a tiež ako určiť oblasť obrazovky, ktorej sa chcete dotknúť, a aktivovať konkrétny príkaz. Zdôrazňujem, že som sa rozhodol použiť Arduino Mega kvôli množstvu pinov.

Dnes vám teda predstavím dotykový displej, jeho grafické funkcie a spôsob uchopenia dotykového bodu na obrazovke. Vytvorme tiež príklad obsahujúci všetky prvky, ako napríklad polohovanie, písanie, navrhovanie tvarov, farieb a dotykov.

Krok 1: Arduino Mega 2560

Krok 2: TFT LCD štít 2,4"

Tento displej, ktorý používame v našom projekte, má zaujímavú funkciu: má kartu SD. Písanie a čítanie, ktoré sú s tým spojené, sa však ukážu v inom videu, ktoré čoskoro vyrobím. Cieľom dnešnej hodiny je konkrétne sa zaoberať grafickými a dotykovými funkciami tohto displeja.

Charakteristika:

Rozmery obrazovky: 2,4 palca

Slot na kartu microSD

Farebný LCD: 65K

Ovládač: ILI9325

Rozlíšenie: 240 x 320

Dotyková obrazovka: 4-vodičová odporová dotyková obrazovka

Rozhranie: 8 bitových dát, plus 4 riadiace riadky

Prevádzkové napätie: 3,3-5V

Rozmery: 71 x 52 x 7 mm

Krok 3: Knižnice

Pridajte knižnice:

"Adafruit_GFX"

"SWTFT"

"Dotyková obrazovka"

Kliknite na odkazy a stiahnite si knižnice.

Rozbaľte súbor a vložte ho do priečinka s knižnicami v Arduino IDE.

C: / Programové súbory (x86) / Arduino / knižnice

Poznámka

Pred spustením programu musíme riešiť niečo dôležité: kalibráciu TOUCH.

Pomocou jednoduchého programu na získanie dotykových bodov na displeji uložte hodnotu bodov (x, y) na každý koniec (na obrázku nižšie je zvýraznená žltou farbou). Tieto hodnoty sú dôležité pre mapovanie dotyku na grafické body na obrazovke.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ is on Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X+ je na Digital6 // objeto para manipulacao dos eventos de toque on tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); void setup () {Serial.begin (9600); } void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) Serial.print ("X:"); Serial.println (touchPoint.x); Serial.print ("Y:"); Serial.println (touchPoint.y); oneskorenie (1000); }

Krok 4: Funkcie

Teraz sa pozrime na niekoľko grafických funkcií, ktoré nám knižnice môžu ponúknuť.

1. nakreslitePixel

Funkcia drawPixel je zodpovedná za nakreslenie jedného bodu na obrazovku v danom bode.

neplatné drawPixel (int16_t x, int16_t a, uint16_t farba);

2. drawLine

Funkcia drawLine je zodpovedná za nakreslenie čiary z dvoch bodov.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t farba);

3. drawFastVLine

Za kreslenie zvislej čiary z bodu a výšky je zodpovedná funkcia drawFastVLine.

neplatné drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t farba);

4. drawFastHLine

Za kreslenie vodorovnej čiary z bodu a šírky je zodpovedná funkcia drawFastHLine.

void drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t farba);

5. drawRect

Funkcia drawRect je zodpovedná za nakreslenie obdĺžnika na obrazovku, pričom prechádza bodom pôvodu, jeho výškou a šírkou.

void drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t farba);

6. fillRect

Funkcia fillRect je rovnaká ako drawRect, ale obdĺžnik bude vyplnený danou farbou.

neplatné fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t farba);

7. drawRoundRect

Funkcia drawRoundRect je rovnaká ako drawRect, ale obdĺžnik bude mať zaoblené hrany.

neplatné drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t polomer, uint16_t farba);

8. fillRoundRect

Funkcia fillRoundRect je rovnaká ako drawRoundRect, ale obdĺžnik bude vyplnený danou farbou.

neplatné fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t polomer, uint16_t farba);

9. drawTriangle

Funkcia drawTriangle je zodpovedná za nakreslenie trojuholníka na obrazovku, pričom prechádza bodom troch vrcholov.

neplatné drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t farba);

10. fillTriangle

Funkcia fillTriangle je rovnaká ako drawTriangle, ale trojuholník bude vyplnený danou farbou.

neplatné fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t farba);

11. drawCircle

Funkcia drawCircle je zodpovedná za nakreslenie kruhu zo zdrojového bodu a polomeru.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t farba);

12. fillCircle

Funkcia fillCircle je rovnaká ako drawCircle, ale kruh bude vyplnený danou farbou.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t farba);

13. fillScreen

Funkcia fillScreen je zodpovedná za vyplnenie obrazovky jednou farbou.

void fillScreen (farba uint16_t);

14. setCursor

Za umiestnenie kurzora pri zápise do daného bodu je zodpovedná funkcia setCursor.

neplatné setCursor (int16_t x, int16_t y);

15. setTextColor

Funkcia setTextColor je zodpovedná za priradenie farby textu, ktorý sa má napísať. Máme dva spôsoby použitia:

neplatné setTextColor (uint16_t c); // nastaví iba farbu písma, vyhnite sa setTextColor (uint16_t c, uint16_t bg); // nastavenie farby písma a pozadia

16. setTextSize

Funkcia setTextSize je zodpovedná za priradenie veľkosti textu, ktorý bude zapísaný.

neplatné setTextSize (uint8_t s);

17. setTextWrap

Funkcia setTextWrap je zodpovedná za prerušenie riadku, ak dosiahne limit obrazovky.

void setTextWrap (boolovský w);

18. setRotácia

Za otáčanie obrazovky (na šírku, na výšku) je zodpovedná funkcia setRotation.

void setRotation (uint8_t r); // 0 (štandardné), 1, 2, 3

Krok 5: Príklad

Vytvoríme program, v ktorom použijeme väčšinu zdrojov, ktoré nám displej poskytuje.

Napíšeme niekoľko strún v rôznych veľkostiach, vytvoríme tri geometrické obrazce a zachytíme na nich dotykovú udalosť. Zakaždým, keď sa dotkneme jednej z figúrok, dostaneme spätnú väzbu na názov figúrky hneď pod nimi.

Krok 6: Knižnice

Najprv definujme knižnice, ktoré budeme používať.

#include // responzel pela parte gráfica

#include // responzel por pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#include "math.h" // vypočítaná potencia

Krok 7: Definuje

Definujeme niektoré makrá pre piny a tiež dôležité hodnoty, ktoré použijeme.

// Dotýkajte sa koordinovaných portov #definujte YP A1 // Y+ #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X+ // valores encontrados através da calibração do touch // faça um código simples para imprimir os valores (x, y) a cada toque // então encontre os valores nas extremidades max/min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #define TS_MAXY 900 // textové správy #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 // posicionamento dos textos de feedback #define FEEDBACK_de 10 #define MAXPRESSURE 1000

Pokračujeme definíciou niektorých makier.

// Príslušné jadrá zodpovedajú rôznym hodnotám #definovať ČIERNY 0x0000 #define ČERVENÝ 0xF800 #define ZELENÝ 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação do circle const int circle_x = 240; const int circle_y = 125; // všetky činnosti súvisiace s dotykovým ovládaním TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Krok 8: Nastavenie

V nastavení inicializujeme náš objekt grafického ovládania a vykonáme prvé konfigurácie.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializácia objektu ovládania lib libra tft.begin (); oneskorenie (500); // rotaciona a tela para landscape tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (BLACK); // počiatočné a počiatočné nastavenia počiatočných nastavení (); }

Krok 9: Slučka

V slučke zachytíme bod, v ktorom sa dotkneme obrazovky, a uvidíme, či k dotyku došlo na jednej z postáv.

void loop () {TSPoint touchPoint = ts.getPoint (); // pega o touch (x, y, z = pressao) pinMode (XM, OUTPUT); pinMode (YP, OUTPUT); // mapeia o ponto de touch para o (x, y) graphico // o fato de termos rotacionado a tela para landscape implica no X receber o mapeamento de Y TSPoint p; p.x = mapa (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = mapa (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifikácia sa neuspokojí s dostatočnou mierou if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica se tocou no retangulo if (pointInRect (p)) {writeShape ("Rect"); } // verifica se tocou no triangulo else if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Triangle"); } // verifica sa tocou no Circle else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Krok 10: Skontrolujte, či sa dotkneme kruhu

V tomto kroku sa zaoberáme inicializáciou obrazovky a definujeme farby textov, ktoré sa majú zobrazovať.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("PRÍSTUP"); tft.setTextColor (ŽLTÝ); tft.setTextSize (TEXT_SIZE_M); tft.println ("BLOG MEU"); tft.setTextColor (ZELENÁ); tft.setTextSize (TEXT_SIZE_L); tft.println ("FERNANDOK. COM"); createRect (); createTriangle (); createCircle (); tft.setCursor (FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor (CYAN); tft.setTextSize (TEXT_SIZE_L); tft.println ("TVAR:"); }

Krok 11: Funkcie vytvárania geometrických tvarov

Vytvoríme obdĺžnik, trojuholník a kruh s pôvodom, ktorý určíme.

// cria um retangulo com origem (x, y) = (10, 100) // width = 80 e height = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BIELY); } // cria um triangulo com vertices: // A = (110, 150); B = (150, 100); C = (190, 150) neplatný createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, ŽLTÝ); tft.drawTriangle (110, 150, 150, 100, 190, 150, BIELY); } // cria um Circle com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GREEN); tft.drawCircle (240, 125, 30, BIELY); }

Krok 12: Skontrolujte, či sa dotýkame obdĺžnika

Táto funkcia kontroluje, či je bod vo vnútri obdĺžnika.

// Funkcie overovania počtu zubov, ktoré sa dajú prevrátiť do bodu retRingu (TSPoint p) {// max/min X do retangulo if (px> = 10 && px <= 90) {// max/min Y do retangulo if (py = 100) {return true; }} return false; }

Krok 13: Skontrolujte, či sa dotkneme kruhu

Je to rovnaké ako s kruhom.

// distancia entre pontos D = raiz ((xb-xa)^2 + (yb-ya)^2) // vefifica se o ponto está dentro do circuitlo // se a distancia do ponto pra origem do circle for menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if (distance <= circle_radius) {return true; } return false; }

Krok 14: Skontrolujte, či sa dotkneme trojuholníka

Rovnaká kontrola bodu sa vyskytuje aj v trojuholníku.

// Funkcie overovania sa vykonávajú v rámci trojuholníka ABC // Dentálna dentálna retrospektívna SKUTOČNÁ retorná hodnota FALSE bool pointInsideTriangle (TSPoint a, TSPoint b, TSPoint c, TSPoint p) {float ABC = triangleArea (a, b, c); float ACP = triangleArea (a, c, p); float ABP = triangleArea (a, b, p); float CPB = plocha trojuholníka (c, p, b); if (ABC == ACP+ABP+CPB) {return true; } return false; } // Função que calcula a area de um triangulo com base nos pontos x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs ((((bx - ax)*(cy - ay) - (cx - sekera) * (podľa - ay))/2); }

Krok 15: Funkcia na vytlačenie názvu dotknutého objektu

Tu napíšeme na obrazovku názov použitého geometrického útvaru.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (String shape) {tft.fillRect (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, BLACK); tft.setCursor (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize (TEXT_SIZE_G); tft.setTextColor (BIELY); tft.println (tvar); }

Krok 16: Súbory

Stiahnite si súbory:

INO

PDF