Arduino ar skārienekrāna displeju: 16 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:57

Vai vēlaties izveidot personalizētākas izvēlnes un labākas cilvēka/mašīnas saskarnes? Šādiem projektiem varat izmantot Arduino un skārienekrāna displeju. Vai šī ideja izklausās vilinoša? Ja tā, pārbaudiet video šodien, kur es parādīšu montāžu ar Mega Arduino un skārienekrāna displeju. Jūs redzēsit, kā ekrānā izveidot vēlamos dizainus, kā arī to, kā noteikt ekrāna reģionu, lai pieskartos un aktivizētu noteiktu komandu. Es uzsveru, ka izvēlējos izmantot Arduino Mega, pateicoties tā tapām.

Tāpēc šodien es jūs iepazīstināšu ar skārienekrāna displeju, tā grafiskajām funkcijām un to, kā satvert ekrāna skārienpunktu. Izveidosim arī piemēru, kas satur visus elementus, piemēram, pozicionēšanu, rakstīšanu, formu, krāsu un pieskārienu noformēšanu.

1. darbība: Arduino Mega 2560

2. darbība: 2,4 collu TFT LCD ekrāns

Šim mūsu projektā izmantotajam displejam ir interesanta iezīme: tam ir SD karte. Tomēr ar to saistītā rakstīšana un lasīšana tiks parādīta citā videoklipā, kuru es drīzumā producēšu. Šodienas nodarbības mērķis ir īpaši pievērsties šī displeja grafiskajām un skārienekrāna funkcijām.

Raksturojums:

Ekrāna izmērs: 2,4 collas

MicroSD kartes slots

Krāsu LCD: 65K

Vadītājs: ILI9325

Izšķirtspēja: 240 x 320

Skārienekrāns: 4 vadu pretestības skārienekrāns

Saskarne: 8 bitu dati, plus 4 vadības līnijas

Darba spriegums: 3.3-5V

Izmēri: 71 x 52 x 7 mm

3. darbība: bibliotēkas

Pievienojiet bibliotēkas:

"Adafruit_GFX"

"SWTFT"

"Skārienekrāns"

Noklikšķiniet uz saitēm un lejupielādējiet bibliotēkas.

Izsaiņojiet failu un ielīmējiet to Arduino IDE bibliotēku mapē.

C: / Program Files (x86) / Arduino / bibliotēkas

Piezīme

Pirms mēs sākam savu programmu, mums ir jārisina kaut kas svarīgs: TOUCH kalibrēšana.

Izmantojot vienkāršu programmu, lai parādītu skārienjūtīgos punktus displejā, katrā galā saglabājiet punktu vērtību (x, y) (attēlā zemāk iezīmēts dzeltenā krāsā). Šīs vērtības ir svarīgas, lai pieskartos pieskārienam ekrāna grafiskajiem punktiem.

#include // Porta de leitura das coordenadas do touchvoid #define YP A1 // Y+ ir ieslēgts Analog1 #define XM A2 // X- is on Analog2 #define YM 7 // Y- is on Digital7 #define XP 6 // X+ is on Digital6 // objeto para manipulacao dos eventos de toque na Touchla Screen 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); kavēšanās (1000); }

4. solis: funkcijas

Tagad apskatīsim dažas grafiskās funkcijas, ko bibliotēkas var mums piedāvāt.

1. drawPixel

Funkcija drawPixel ir atbildīga par viena punkta uzkrāsošanu uz ekrāna dotajā vietā.

void drawPixel (int16_t x, int16_t un, uint16_t krāsa);

2. drawLine

Funkcija drawLine ir atbildīga par līnijas novilkšanu no diviem punktiem.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t krāsa);

3. drawFastVLine

Funkcija drawFastVLine ir atbildīga par vertikālas līnijas zīmēšanu no punkta un augstuma.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t krāsa);

4. drawFastHLine

Funkcija drawFastHLine ir atbildīga par horizontālas līnijas zīmēšanu no punkta un platuma.

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

5. drawRect

Funkcija drawRect ir atbildīga par taisnstūra zīmēšanu uz ekrāna, izejot no sākuma punkta, tā augstuma un platuma.

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

6. fillRect

Funkcija fillRect ir tāda pati kā drawRect, bet taisnstūris tiks aizpildīts ar norādīto krāsu.

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

7. drawRoundRect

Funkcija drawRoundRect ir tāda pati kā drawRect, bet taisnstūrim būs noapaļotas malas.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t rādiuss, uint16_t krāsa);

8. fillRoundRect

Funkcija fillRoundRect ir tāda pati kā drawRoundRect, bet taisnstūris tiks aizpildīts ar norādīto krāsu.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t rādiuss, uint16_t krāsa);

9. izdarītTrīsstūris

Funkcija drawTriangle ir atbildīga par trīsstūra zīmēšanu uz ekrāna, nokārtojot 3 virsotņu punktu.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t krāsa);

10. fillTriangle

Funkcija fillTriangle ir tāda pati kā drawTriangle, bet trīsstūris tiks aizpildīts ar norādīto krāsu.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t krāsa);

11. drawCircle

Funkcija drawCircle ir atbildīga par apļa zīmēšanu no avota punkta un rādiusa.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t krāsa);

12. fillCircle

Funkcija fillCircle ir tāda pati kā drawCircle, bet aplis tiks aizpildīts ar norādīto krāsu.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t krāsa);

13. fillScreen

Funkcija fillScreen ir atbildīga par ekrāna piepildīšanu ar vienu krāsu.

void fillScreen (krāsa uint16_t);

14. setCursor

Funkcija setCursor ir atbildīga par kursora novietošanu rakstīšanai uz noteiktu punktu.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Funkcija setTextColor ir atbildīga par krāsu piešķiršanu rakstāmajam tekstam. Mums ir divi veidi, kā to izmantot:

void setTextColor (uint16_t c); // nosaka tikai rakstīšanas krāsu nederīga setTextColor (uint16_t c, uint16_t bg); // iestatiet rakstīšanas krāsu un fona krāsu

16. setTextSize

Funkcija setTextSize ir atbildīga par lieluma piešķiršanu rakstāmajam tekstam.

void setTextSize (uint8_t s);

17. setTextWrap

Funkcija setTextWrap ir atbildīga par līnijas pārtraukšanu, ja tā sasniedz ekrāna robežu.

void setTextWrap (Būla w);

18. setRotation

Funkcija setRotation ir atbildīga par ekrāna pagriešanu (ainava, portrets).

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

5. darbība. Piemērs

Mēs izveidosim programmu, kurā izmantosim lielāko daļu displeja nodrošināto resursu.

Uzrakstīsim dažas virknes dažādos izmēros, izveidosim trīs ģeometriskas figūras un uzņemsim taustes notikumu, katru reizi, kad pieskarsimies kādai no figūrām, mums būs atsauksmes par figūras nosaukumu tieši zem tām.

6. darbība: bibliotēkas

Vispirms definēsim bibliotēkas, kuras mēs izmantosim.

#iekļaut // atbildēt pela parte gráfica

#include // atbilde uz pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#ietver "math.h" // aprēķina potenci

7. solis: definē

Mēs definēsim dažus piespraudes makro, kā arī svarīgās vērtības, kuras mēs izmantosim.

// Portas de leitura das coordenadas do touch #define 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 // tamanho dos textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 // pozicionēšana dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCHURE_DAY 10 #definējiet MAXPRESSURE 1000

Mēs turpinām definēt dažus makro.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #define SARKANS 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criaçia Circoo const int aplis_x = 240; const int aplis_y = 125; // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

8. darbība: iestatīšana

Iestatīšanas laikā mēs inicializēsim mūsu grafiskās vadības objektu un veiksim pirmās konfigurācijas.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); kavēšanās (500); // rotaciona a tela para landscape tft.setRotation (1); // pinta a tela toda de preto tft.fillScreen (BLACK); // chama a função para iniciar nossas configurações initialSettings (); }

9. solis: cilpa

Ciklā mēs uzņemsim punktu, kurā pieskaramies ekrānam, un redzēsim, vai pieskāriens noticis kādā no attēliem.

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 ainava implica no X receber o mapeamento de Y TSPoint p; p.x = karte (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = karte (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 se tocou no triangulo else if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Triangle"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Aplis"); }}}

10. solis: pārbaudiet, vai mēs pieskaramies aplim

Šajā solī mēs risinām ekrāna inicializāciju un definējam parādāmo tekstu krāsas.

/ *Desenha un tela os elementos */ void initialSettings () {tft.setTextColor (BALTS); tft.setTextSize (TEXT_SIZE_S); tft.println ("Piekļuve"); tft.setTextColor (DZELTENS); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOGS"); tft.setTextColor (GREEN); 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:"); }

11. darbība. Ģeometrisko formu izveidošanas funkcijas

Mēs izveidojam taisnstūri, trīsstūri un apli ar mūsu noteikto izcelsmi.

// cria um retangulo com origem (x, y) = (10, 100) // platums = 80 e augstums = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, BALTS); } // cria um triangulo com os virsotnes: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, DZELTENS); tft.drawTriangle (110, 150, 150, 100, 190, 150, BALTS); } // 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, BALTS); }

12. solis: pārbaudiet, vai mēs pieskaramies taisnstūrim

Šī funkcija pārbauda, vai punkts atrodas taisnstūra iekšpusē.

// Função que verifica se o ponto está dentro do 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; }} atgriezt nepatiesu; }

13. darbība. Pārbaudiet, vai mēs pieskaramies aplim

Tas ir tas pats, kas ar apli.

// 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 menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {float distance = sqrt (pow (px - circle_x, 2) + pow (py - aplis_y, 2)); ja (attālums <= apļa rādiuss) {return true; } return false; }

14. darbība. Pārbaudiet, vai mēs pieskaramies trīsstūrim

Tāda pati punkta pārbaude notiek arī trīsstūrī.

// Função que verifica se o ponto p esta dentro do triangulo 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); pludiņš ĀKK = triangleArea (a, c, p); pludiņš ABP = triangleArea (a, b, p); pludiņš CPB = triangleArea (c, p, b); ja (ABC == ĀKK+ABP+CPB) {atgriešanās patiess; } 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 - cirvis) * (ar - ay))/2); }

15. darbība: funkcija, lai izdrukātu pieskartā objekta nosaukumu

Šeit ekrānā rakstām izmantotās ģeometriskās figūras nosaukumu.

// 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 (BALTS); tft.println (forma); }

16. darbība: faili

Lejupielādējiet failus:

ES NĒ

PDF