Arduino cu ecran tactil: 16 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:45

Doriți să creați meniuri mai personalizate și interfețe mai bune om / mașină? Pentru astfel de proiecte, puteți utiliza un Arduino și un ecran tactil. Sună această idee atrăgătoare? Dacă da, consultați videoclipul astăzi, unde vă voi arăta un ansamblu cu un Mega Arduino și un ecran tactil. Veți vedea cum să faceți desenele pe care le doriți pe ecran și, de asemenea, cum să determinați regiunea ecranului pentru a atinge și activa o anumită comandă. Subliniez că am ales să folosesc Arduino Mega datorită cantității sale de pini.

Așadar, astăzi vă voi prezenta ecranul tactil, funcțiile sale grafice și modul de a apuca punctul tactil de pe ecran. Să creăm, de asemenea, un exemplu care conține toate elementele, cum ar fi poziționarea, scrierea, proiectarea de forme, culori și atingere.

Pasul 1: Arduino Mega 2560

Pasul 2: ecran TFT LCD 2.4"

Acest afișaj pe care îl folosim în proiectul nostru are o caracteristică interesantă: are un card SD. Cu toate acestea, scrierea și citirea implicate în acest lucru vor fi prezentate într-un alt videoclip, pe care îl voi produce în curând. Obiectivul lecției de astăzi este de a aborda în mod specific caracteristicile grafice și ale ecranului tactil ale acestui afișaj.

Caracteristici:

Dimensiunea ecranului: 2,4 inci

Slot pentru card MicroSD

LCD color: 65K

Driver: ILI9325

Rezoluție: 240 x 320

Ecran tactil: ecran tactil rezistiv cu 4 fire

Interfață: date pe 8 biți, plus 4 linii de control

Tensiune de funcționare: 3.3-5V

Dimensiuni: 71 x 52 x 7mm

Pasul 3: Biblioteci

Adăugați bibliotecile:

„Adafruit_GFX”

„SWTFT”

"Touch screen"

Faceți clic pe linkuri și descărcați bibliotecile.

Dezarhivați fișierul și lipiți-l în folderul de biblioteci al IDE Arduino.

C: / Program Files (x86) / Arduino / biblioteci

Notă

Înainte de a începe programul nostru, trebuie să abordăm ceva important: calibrarea TOUCH.

Folosind un program simplu pentru a obține punctele de atingere pe afișaj, stocați valoarea punctelor (x, y) la fiecare capăt (evidențiate în galben în figura de mai jos). Aceste valori sunt importante pentru maparea contactului cu punctele grafice de pe ecran.

#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 + este pe Digital6 // obiect pentru manipularea a două evenimente de toque na 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); întârziere (1000); }

Pasul 4: Funcții

Acum să aruncăm o privire la câteva funcții grafice pe care ni le pot oferi bibliotecile.

1. drawPixel

Funcția drawPixel este responsabilă pentru pictarea unui singur punct pe ecran în punctul dat.

nul drawPixel (int16_t x, int16_t și, uint16_t culoare);

2. drawLine

Funcția drawLine este responsabilă pentru trasarea unei linii din două puncte.

nul drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. drawFastVLine

Funcția drawFastVLine este responsabilă pentru trasarea unei linii verticale dintr-un punct și o înălțime.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t color);

4. drawFastHLine

Funcția drawFastHLine este responsabilă pentru trasarea unei linii orizontale dintr-un punct și o lățime.

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

5. drawRect

Funcția drawRect este responsabilă pentru desenarea unui dreptunghi pe ecran, trecând un punct de origine, înălțimea și lățimea acestuia.

nul drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

6. fillRect

Funcția fillRect este aceeași cu drawRect, dar dreptunghiul va fi umplut cu culoarea dată.

void fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t color);

7. drawRoundRect

Funcția drawRoundRect este aceeași cu drawRect, dar dreptunghiul va avea margini rotunjite.

nul drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t rază, uint16_t culoare);

8. fillRoundRect

Funcția fillRoundRect este aceeași cu drawRoundRect, dar dreptunghiul va fi umplut cu culoarea dată.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t rază, uint16_t culoare);

9. drawTriangle

Funcția drawTriangle este responsabilă pentru desenarea unui triunghi pe ecran, trecând punctul celor 3 vârfuri.

draw nul Triunghi (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t culoare);

10. fillTriangle

Funcția fillTriangle este aceeași cu drawTriangle, dar triunghiul va fi umplut cu culoarea dată.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t culoare);

11. drawCircle

Funcția drawCircle este responsabilă pentru desenarea unui cerc dintr-un punct sursă și o rază.

nul drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t culoare);

12. umple Cercul

Funcția fillCircle este aceeași cu drawCircle, dar cercul va fi umplut cu culoarea dată.

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

13. fillScreen

Funcția fillScreen este responsabilă pentru umplerea ecranului cu o singură culoare.

void fillScreen (uint16_t color);

14. setCursor

Funcția setCursor este responsabilă pentru poziționarea cursorului pentru scrierea într-un punct dat.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Funcția setTextColor este responsabilă cu atribuirea unei culori textului de scris. Avem două moduri de ao folosi:

void setTextColor (uint16_t c); // setează doar culoarea scrieriivoid setTextColor (uint16_t c, uint16_t bg); // setați culoarea scrisului și culoarea de fundal

16. setTextSize

Funcția setTextSize este responsabilă cu atribuirea unei dimensiuni textului care va fi scris.

void setTextSize (uint8_t s);

17. setTextWrap

Funcția setTextWrap este responsabilă pentru ruperea liniei dacă atinge limita ecranului.

void setTextWrap (w boolean);

18. setRotation

Funcția setRotation este responsabilă pentru rotirea ecranului (peisaj, portret).

void setRotation (uint8_t r); // 0 (standard), 1, 2, 3

Pasul 5: Exemplu

Vom crea un program în care vom folosi majoritatea resurselor pe care ni le oferă afișajul.

Să scriem câteva șiruri în diferite dimensiuni, să creăm trei figuri geometrice și să preluăm evenimentul tactil pe ele, de fiecare dată când atingem una dintre figuri, vom avea feedback-ul numelui figurii chiar sub ele.

Pasul 6: Biblioteci

Mai întâi să definim bibliotecile pe care le vom folosi.

#include // responsável pela parte grafică

#include // responsável por pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#include "math.h" // calcular potențial

Pasul 7: definește

Vom defini câteva macrocomenzi pentru pini, precum și valorile importante pe care le vom folosi.

// Portas de leitura das coordenadas do touch # define YP A1 // Y + #define XM A2 // X- #define YM 7 // Y- #define XP 6 // X + // valores foundados através da calibração do touch // faça um code simples for imprimir os values (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 // tamanho dos textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 // posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCH_X 120 #define pentru a defini FEEDB_ 10 #define MAXPRESSURE 1000

Continuăm cu definiția unor macrocomenzi.

// Associa o nome das cores aos valores corespondente # define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação do circulo const int circle_radius = 30; const int cerc_x = 240; const int circle_y = 125; // obiect pentru manipularea a două evenimente de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // obiect pentru manipulacao da parte grafica SWTFT tft;

Pasul 8: Configurare

În configurare, vom inițializa obiectul nostru de control grafic și vom face primele configurații.

void setup () {Serial.begin (9600); // reseta o obiect da lib grafica tft.reset (); // initializa obiect controlor da lib grafica tft.begin (); întârziere (500); // rotaciona a tela para landscape tft.setRotation (1); // pinta a tela toată de aproape tft.fillScreen (BLACK); // chama a função para iniciar nossas configurações initialSettings (); }

Pasul 9: Buclă

În buclă, vom ridica punctul în care atingem ecranul și vom vedea dacă atingerea a avut loc într-una din figuri.

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) grafico // o fato de termos rotacionado a tela para landscape implica no X receber o mapeamento de Y TSPoint p; p.x = hartă (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = hartă (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a pressão no toque foi suficiente if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica se tocou no retangulo if (pointInRect (p)) {writeShape ("Rect"); } // verificați dacă nu există alt triunghi dacă (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Triangle"); } // verificarea se face fără altceva dacă (pointInCircle (p)) {writeShape ("Circle"); }}}

Pasul 10: Verificați dacă atingem cercul

În acest pas ne ocupăm de inițializarea ecranului și definim culorile textelor care vor fi afișate.

/ * Desenha na tela os elements * / void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (GALBEN); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (VERDE); 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 ("SHAPE:"); }

Pasul 11: Funcțiile de creare a formelor geometrice

Creăm un dreptunghi, un triunghi și un cerc cu originile pe care le determinăm.

// 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, ALB); } // cria um triangulo com os vertices: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, YELLOW); tft.drawTriangle (110, 150, 150, 100, 190, 150, WHITE); } // cria um circulo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GREEN); tft.drawCircle (240, 125, 30, ALB); }

Pasul 12: Verificați dacă atingem dreptunghiul

Această funcție verifică dacă punctul se află în interiorul dreptunghiului.

// Funcția care verifică dacă este ponto este în interiorul retângulobool pointInRect (TSPoint p) {// max / min X do retangulo if (px> = 10 && px <= 90) {// max / min Y do retangulo if (py = 100) {return true; }} returnează fals; }

Pasul 13: Verificați dacă atingem cercul

Este la fel ca la cerc.

// distancia entre pontos D = raiz ((xb-xa) ^ 2 + (yb-ya) ^ 2) // vefifica se o ponto está dentro do circulo // se a distancia do ponto pra origem do circulo 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 (distanță <= circle_radius) {return true; } returnează fals; }

Pasul 14: Verificați dacă atingem triunghiul

Aceeași verificare a punctului apare și în triunghi.

// Funcția care verifică dacă este ponto în interiorul triunghiului ABC // Se estiver dentro retorna TRUE senão retorna FALSE bool pointInsideTriangle (TSPoint a, TSPoint b, TSPoint c, TSPoint p) {float ABC = triangleArea (a, b, c); float ACP = triangleArea (a, c, p); plutitor ABP = triangleArea (a, b, p); float CPB = triangleArea (c, p, b); if (ABC == ACP + ABP + CPB) {return true; } returnează fals; } // Funcția care calculează o zonă de um triunghi cu bază de ponturi x, y float triangleArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax) * (cy - ay) - (cx - ax) * (by - ay)) / 2); }

Pasul 15: Funcția de a imprima numele obiectului atins

Aici scriem pe ecran numele figurii geometrice folosite.

// escreve na tela o nome da figura geométrica that 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 (ALB); tft.println (formă); }

Pasul 16: Fișiere

Descărcați fișierele:

EU NU

PDF