Arduino puutetundliku ekraaniga: 16 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:49

Kas soovite luua isikupärasemaid menüüsid ja paremaid inimese/masina liideseid? Selliste projektide jaoks saate kasutada Arduino ja puuteekraani. Kas see mõte kõlab ahvatlevalt? Kui jah, siis vaadake täna videot, kus näitan teile Mega Arduino ja puuteekraaniga koostu. Näete, kuidas soovitud kujundusi ekraanil teha, ja ka seda, kuidas määrata ekraani piirkond konkreetse käsu puudutamiseks ja aktiveerimiseks. Rõhutan, et valisin Arduino Mega kasutamise tihvtide hulga tõttu.

Nii et täna tutvustan teile puuteekraani ekraani, selle graafilisi funktsioone ja seda, kuidas ekraanil puudutuspunkti haarata. Loome ka näite, mis sisaldab kõiki elemente, nagu positsioneerimine, kirjutamine, kujundite, värvide ja puudutuse kujundamine.

Samm: Arduino Mega 2560

2. samm: 2,4 -tolline TFT LCD -ekraan

Sellel ekraanil, mida me oma projektis kasutame, on huvitav omadus: sellel on SD -kaart. Sellega seotud kirjutamist ja lugemist näidatakse aga teises videos, mille ma peagi toodan. Tänase õppetunni eesmärk on käsitleda selle ekraani graafilisi ja puutetundlikke funktsioone.

Omadused:

Ekraani mõõtmed: 2,4 tolli

MicroSD kaardi pesa

Värviline LCD: 65K

Draiver: ILI9325

Eraldusvõime: 240 x 320

Puuteekraan: 4-juhtmeline takistuslik puutetundlik ekraan

Liides: 8 -bitised andmed, pluss 4 juhtjoont

Tööpinge: 3,3-5V

Mõõdud: 71 x 52 x 7 mm

3. samm: raamatukogud

Lisage raamatukogud:

"Adafruit_GFX"

"SWTFT"

"Puuteekraan"

Klõpsake linkidel ja laadige alla raamatukogud.

Pakkige fail lahti ja kleepige see Arduino IDE raamatukogude kausta.

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

Märge

Enne programmiga alustamist peame tegelema mõne olulise asjaga: TOUCH -kalibreerimisega.

Kasutades lihtsat programmi ekraanile puutepunktide saamiseks, salvestage punktide väärtus (x, y) mõlemasse otsa (alloleval joonisel kollasega esile tõstetud). Need väärtused on olulised puudutuse kaardistamisel ekraani graafiliste punktidega.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ on sisse lülitatud Analog1 #define XM A2 // X- on sisse lülitatud Analog2 #define YM 7 // Y- on Digital7 #define XP 6 // X+ is on Digital6 // on võimalik manipuleerida sündmuste tegemiseks 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); viivitus (1000); }

4. samm: funktsioonid

Nüüd vaatame mõningaid graafilisi funktsioone, mida raamatukogud meile pakkuda saavad.

1. drawPixel

Funktsioon drawPixel vastutab ekraanil ühe punkti maalimise eest antud punktis.

void drawPixel (int16_t x, int16_t ja, uint16_t värv);

2. drawLine

Funktsioon drawLine vastutab kahest punktist joone joonistamise eest.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t värv);

3. drawFastVLine

Funktsioon drawFastVLine vastutab vertikaalse joone joonistamise eest punktist ja kõrgusest.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t värv);

4. drawFastHLine

Funktsioon drawFastHLine vastutab horisontaaljoone joonistamise eest punktist ja laiusest.

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

5. drawRect

Funktsioon drawRect vastutab ekraanile ristküliku joonistamise, lähtepunkti, selle kõrguse ja laiuse läbimise eest.

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

6. fillRect

Funktsioon fillRect on sama mis drawRect, kuid ristkülik täidetakse antud värviga.

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

7. drawRoundRect

Funktsioon drawRoundRect on sama mis drawRect, kuid ristkülikul on ümarad servad.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t raadius, uint16_t värv);

8. fillRoundRect

Funktsioon fillRoundRect on sama mis drawRoundRect, kuid ristkülik täidetakse antud värviga.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t raadius, uint16_t värv);

9. joonistaKolmnurk

Funktsioon drawTriangle vastutab kolmnurga joonistamise eest ekraanile, läbides kolme tipu punkti.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t värv);

10. fillTriangle

Funktsioon fillTriangle on sama mis drawTriangle, kuid kolmnurk täidetakse antud värviga.

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t värv);

11. drawCircle

Funktsioon drawCircle vastutab ringi joonistamise eest lähtepunktist ja raadiusest.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t värv);

12. fillCircle

Funktsioon fillCircle on sama mis drawCircle, kuid ring täidetakse antud värviga.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t värv);

13. fillScreen

Funktsioon fillScreen vastutab ekraani täitmise eest ühe värviga.

void fillScreen (uint16_t värv);

14. setCursor

Funktsioon setCursor vastutab kursori paigutamise eest teatud punkti kirjutamiseks.

tühine setCursor (int16_t x, int16_t y);

15. setTextColor

Funktsioon setTextColor vastutab kirjutatavale tekstile värvi määramise eest. Meil on kaks võimalust seda kasutada:

tühine setTextColor (uint16_t c); // määrab ainult kirjutamise värvi tühja setTextColor (uint16_t c, uint16_t bg); // määrake kirjutamise värv ja taustavärv

16. setTextSize

Funktsioon setTextSize vastutab kirjutatavale tekstile suuruse määramise eest.

tühine setTextSize (uint8_t s);

17. setTextWrap

Funktsioon setTextWrap vastutab joone katkestamise eest, kui see jõuab ekraani piirini.

void setTextWrap (boolean w);

18. setRotation

Funktsioon setRotation vastutab ekraani pööramise eest (maastik, portree).

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

Samm 5: Näide

Loome programmi, milles kasutame enamikku ressurssidest, mida ekraan pakub.

Kirjutame mõned erineva suurusega stringid, loome kolm geomeetrilist kujundit ja võtame nende peal vastu puudutussündmuse, iga kord, kui puudutame ühte kujundit, saame selle all oleva kujundi nime kohta tagasisidet.

6. samm: raamatukogud

Kõigepealt määratleme teegid, mida me kasutame.

#include // responseável pela parte gráfica

#include // vastused tasemel pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#segu "matemaatika.h" // arvutuslik potentsia

Samm 7: määratleb

Määratleme nööpnõelte jaoks mõned makrod ja ka olulised väärtused, mida kasutame.

// 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 // posicionamento dos textos de tagasiside #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #defineback FEEDBACK_TOUCHOE 10 #määratlege MAXPRESSURE 1000

Jätkame mõnede makrode määratlemisega.

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define KOLLANE 0xFFE0 #define WHITE 0xFFFF // dados de crulo confioraring const int ring_x = 240; const int ring_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. samm: seadistamine

Seadistamisel lähtestame oma graafilise juhtimisobjekti ja teeme esimesed konfiguratsioonid.

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

9. samm: silmus

Tsüklis valime ekraani puudutamise koha ja vaatame, kas puudutus toimus ühel joonisel.

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 = kaart (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = kaart (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 ("Kolmnurk"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Ring"); }}}

Samm: kontrollige, kas me puudutame ringi

Selles etapis tegeleme ekraani initsialiseerimisega ja määratleme kuvatavate tekstide värvid.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (VALGE); tft.setTextSize (TEXT_SIZE_S); tft.println ("JUURDEPÄÄS"); tft.setTextColor (KOLLANE); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); 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. samm: geomeetriliste kujundite loomise funktsioonid

Loome ristküliku, kolmnurga ja ringi, mille päritolu me määrame.

// cria um retangulo com origem (x, y) = (10, 100) // laius = 80 e kõrgus = 50 void createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, VALGE); } // cria um triangulo com os tipud: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, KOLLANE); tft.drawTriangle (110, 150, 150, 100, 190, 150, VALGE); } // 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, VALGE); }

Samm: kontrollige, kas puudutame ristkülikut

See funktsioon kontrollib, kas punkt asub ristküliku sees.

// 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; }} return false; }

Samm: kontrollige, kas me puudutame ringi

See on sama nagu ringiga.

// distancia entre täpne 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 (kaugus <= ring_raadius) {return true; } return false; }

Samm: kontrollige, kas me puudutame kolmnurka

Punkti sama kontroll toimub ka kolmnurga sees.

// Função que verifica se o ponto p esta dentro do triangulo ABC // See 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 = kolmnurgapiirkond (a, c, p); ujuk ABP = kolmnurgapiirkond (a, b, p); ujuk CPB = triangleArea (c, p, b); if (ABC == ACP+ABP+CPB) {return true; } return false; } // Função que calcula a area de um triangulo com base nos täpne x, y float kolmnurkArea (TSPoint a, TSPoint b, TSPoint c) {return fabs ((((bx - ax)*(cy - ay) - (cx - kirves) * (poolt - ay))/2); }

Samm: puudutatud objekti nime printimise funktsioon

Siin kirjutame ekraanile kasutatava geomeetrilise kujundi nime.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (String kuju) {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 (VALGE); tft.println (kuju); }

16. samm: failid

Laadige failid alla:

INO

PDF