Arduino սենսորային էկրանով ՝ 16 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:50

Likeանկանու՞մ եք ստեղծել ավելի անհատականացված ընտրացանկեր և ավելի լավ մարդկային/մեքենայական միջերեսներ: Նման նախագծերի համար կարող եք օգտագործել Arduino և Touch Screen Display: Արդյո՞ք այս գաղափարը գրավիչ է թվում: Եթե այո, ապա այսօր դիտեք տեսանյութը, որտեղ ես ձեզ ցույց կտամ Mega Arduino- ի և Touch Screen Display- ի հավաքածու: Դուք կտեսնեք, թե ինչպես կատարել էկրանի վրա ձեր ուզած դիզայնը, ինչպես նաև ինչպես որոշել էկրանի շրջանը ՝ որոշակի հրամանին դիպչելու և ակտիվացնելու համար: Ես շեշտում եմ, որ ես ընտրել եմ Arduino Mega- ն օգտագործել կապի քանակի պատճառով:

Այսպիսով, այսօր ես ձեզ կներկայացնեմ Touch Screen էկրանը, դրա գրաֆիկական գործառույթները և ինչպես բռնել էկրանի հպման կետը: Եկեք նաև ստեղծենք մի օրինակ, որը պարունակում է բոլոր տարրերը, ինչպիսիք են դիրքավորումը, գրելը, ձևերի, գույների և հպման ձևավորումը:

Քայլ 1: Arduino Mega 2560

Քայլ 2: TFT LCD Shield 2.4"

Այս ցուցադրումը, որը մենք օգտագործում ենք մեր նախագծում, ունի հետաքրքիր առանձնահատկություն. Այն ունի SD քարտ: Այնուամենայնիվ, դրանում ներգրավված գրելը և կարդալը կցուցադրվեն մեկ այլ տեսանյութում, որը շուտով պատրաստելու եմ: Այսօրվա դասի նպատակն է հատուկ անդրադառնալ այս ցուցադրման գրաֆիկական և սենսորային էկրանի առանձնահատկություններին:

Բնութագրերը

Էկրանի չափս ՝ 2.4 դյույմ

MicroSD քարտի բնիկ

Գունավոր LCD: 65K

Վարորդ ՝ ILI9325

Բանաձեւը ՝ 240 x 320

Սենսորային էկրան ՝ 4-մետաղալար դիմադրողական սենսորային էկրան

Ինտերֆեյս `8 բիթանոց տվյալներ, գումարած 4 կառավարման տող

Գործող լարումը `3.3-5V

Չափերը ՝ 71 x 52 x 7 մմ

Քայլ 3: Գրադարաններ

Ավելացնել գրադարաններ.

"Adafruit_GFX"

«SWTFT»

«Սենսորային էկրան»

Կտտացրեք հղումներին և ներբեռնեք գրադարանները:

Բացեք ֆայլը և տեղադրեք այն Arduino IDE- ի գրադարանների պանակում:

C: / Fiրագրի ֆայլեր (x86) / Arduino / գրադարաններ

Նշում

Նախքան մեր ծրագիրը սկսելը, մենք պետք է անդրադառնանք մի կարևոր բանի ՝ TOUCH- ի ճշգրտմանը:

Էկրանին հպման կետեր ստանալու համար օգտագործելով պարզ ծրագիր ՝ յուրաքանչյուր ծայրում պահեք կետերի արժեքը (x, y) (ստորև նկարում նշված է դեղին գույնով): Այս արժեքները կարևոր են էկրանի գրաֆիկական կետերին հպումը քարտեզագրելու համար:

#ներառել // Portas de leitura das coordenadas do touchvoid #սահմանել YP A1 // Y+- ը Analog1 #define XM A2 // X- ի վրա Analog2 #define YM 7 // Y- ը Digital7 #define XP 6 // X+- ի վրա է գտնվում է Digital6 // օբյեկտի համար, որի միջոցով կարելի է ձեռք բերել 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); ուշացում (1000); }

Քայլ 4: Գործառույթներ

Այժմ եկեք նայենք մի քանի գրաֆիկական գործառույթների, որոնք գրադարանները կարող են առաջարկել մեզ:

1. drawPixel

DrawPixel գործառույթը պատասխանատու է տվյալ կետում էկրանի վրա մեկ կետ նկարելու համար:

դատարկ drawPixel (int16_t x, int16_t և, uint16_t գույն);

2. drawLine

DrawLine գործառույթը պատասխանատու է երկու կետերից գիծ քաշելու համար:

անվավեր drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t գույն);

3. drawFastVLine

DrawFastVLine գործառույթը պատասխանատու է կետից և բարձրությունից ուղղահայաց գիծ գծելու համար:

դատարկ drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t գույն);

4. drawFastHLine

DrawFastHLine գործառույթը պատասխանատու է կետից և լայնությունից հորիզոնական գիծ գծելու համար:

դատարկ drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t գույն);

5. drawRect

The drawRect գործառույթը պատասխանատու է էկրանի վրա ուղղանկյուն գծելու, ծագման կետի, դրա բարձրության և լայնության անցման համար:

դատարկ drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t գույն);

6. fillRect

FillRect գործառույթը նույնն է, ինչ drawRect- ը, բայց ուղղանկյունը կլցվի տվյալ գույնով:

void fillRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t գույն);

7. drawRoundRect

DrawRoundRect գործառույթը նույնն է, ինչ drawRect- ը, բայց ուղղանկյունը կլորացված եզրեր կունենա:

դատարկ drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t շառավիղ, uint16_t գույն);

8. fillRoundRect

FillRoundRect գործառույթը նույնն է, ինչ drawRoundRect, բայց ուղղանկյունը կլցվի տվյալ գույնով:

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t շառավիղ, uint16_t գույն);

9. drawTriangle

DrawTriangle գործառույթը պատասխանատու է էկրանի վրա եռանկյուն նկարելու համար ՝ անցնելով 3 գագաթների կետը:

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t գույն);

10. fillTriangle

FillTriangle գործառույթը նույնն է, ինչ drawTriangle- ը, սակայն եռանկյունը կլցվի տվյալ գույնով:

void fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t գույն);

11. drawCircle

DrawCircle գործառույթը պատասխանատու է աղբյուրի կետից և շառավղից շրջան նկարելու համար:

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t գույն);

12. fillCircle

FillCircle գործառույթը նույնն է, ինչ drawCircle- ը, բայց շրջանակը կլցվի տվյալ գույնով:

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t գույն);

13. fillScreen

FillScreen գործառույթը պատասխանատու է էկրանը մեկ գույնով լցնելու համար:

void fillScreen (uint16_t գույն);

14. setCursor

SetCursor գործառույթը պատասխանատու է տվյալ կետին գրելու համար կուրսորը տեղադրելու համար:

անվավեր setCursor (int16_t x, int16_t y);

15. setTextColor

SetTextColor գործառույթը պատասխանատու է գրելու տեքստին գույն հատկացնելու համար: Մենք ունենք դրա օգտագործման երկու եղանակ.

անվավեր setTextColor (uint16_t գ); // սահմանում է գրելու միայն գույնը խուսափող setTextColor (uint16_t c, uint16_t bg); // սահմանել գրելու գույնը և ֆոնի գույնը

16. setTextSize

SetTextSize գործառույթը պատասխանատու է տեքստին չափ հատկացնելու համար, որը գրվելու է:

անվավեր setTextSize (uint8_t վ);

17. setTextWrap

SetTextWrap գործառույթը պատասխանատու է գծի խախտման համար, եթե այն հասնում է էկրանի սահմանին:

անվավեր setTextWrap (բուլյան w);

18. setRotation

SetRotation գործառույթը պատասխանատու է էկրանը պտտելու համար (բնապատկեր, դիմանկար):

անվավեր setRotation (uint8_t r); // 0 (ստանդարտ), 1, 2, 3

Քայլ 5: Օրինակ

Մենք կստեղծենք ծրագիր, որում մենք կօգտագործենք այն ռեսուրսների մեծ մասը, որոնք մեզ տրամադրում է ցուցադրումը:

Եկեք տարբեր չափերի տողեր գրենք, ստեղծենք երեք երկրաչափական պատկերներ և դրանց վրա վերցնենք հպման իրադարձությունը: Ամեն անգամ, երբ դիպչում ենք պատկերներից մեկին, դրանց ներքևում կունենանք գործչի անվան հետադարձ կապ:

Քայլ 6: Գրադարաններ

Նախ սահմանենք այն գրադարանները, որոնք մենք կօգտագործենք:

#ներառել // responsável pela parte gráfica

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

#ներառել // comunicação com o ցուցադրում

#ներառել // comunicação com o ցուցադրում

#ներառել «math.h» // հաշվարկային պոտենցիա

Քայլ 7: Սահմանում է

Մենք կսահմանենք որոշ մակրոներ կապերի համար, ինչպես նաև այն կարևոր արժեքները, որոնք մենք կօգտագործենք:

// 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) #սահմանել TS_MINX 130 #սահմանել TS_MINY 80 #սահմանել TS_MAXX 900 #սահմանել TS_MAXY 900 // tamanho DOS textos #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 // posicionamento դոս textos դե հետադարձ #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCH_X 120 #define FEEDBACK_TOUCH_Y 200 // արժեքները para detectar մի pressão անել toque #define MINPRESSURE 10 #սահմանեք MAXPRESSURE 1000

Մենք շարունակում ենք որոշ մակրոների սահմանումը:

// Associa o nome das cores aos valoresrespondentes #define BLACK 0x0000 #սահմանել RED 0xF800 #սահմանել GREEN 0x07E0 #սահմանել CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFo // dados de criaç = const int circle_x = 240; const int circle_y = 125; // օբյեկտիվ մանիպուլյացիայի համար անհրաժեշտ իրադարձություններ դարձրեք ձեր TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para manipulacao da parte grafica SWTFT tft;

Քայլ 8: Կարգավորում

Տեղադրման ընթացքում մենք նախաստորագրելու ենք մեր գրաֆիկական կառավարման օբյեկտը և կատարելու ենք առաջին կազմաձևերը:

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

Քայլ 9: Օղակ

Օղակի մեջ մենք կվերցնենք այն կետը, որով դիպչում ենք էկրանին և կտեսնենք, թե արդյոք հպումը տեղի է ունեցել նկարներից մեկում:

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 = քարտեզ (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = քարտեզ (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 («Եռանկյունի»); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Քայլ 10: Ստուգեք, արդյոք դիպչում ենք շրջանակին

Այս քայլում մենք զբաղվում ենք էկրանի նախաստորագրմամբ և սահմանում ցուցադրվող տեքստերի գույները:

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("Մուտք"); tft.setTextColor (ԴԵELLԻՆ); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (Կանաչ); 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. Երկրաչափական ձևերի ստեղծման գործառույթները

Մենք ստեղծում ենք ուղղանկյուն, եռանկյուն և շրջան ՝ մեր որոշած ակունքներով:

// 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, ՍՊԻՏԱԿ); } // 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, Կանաչ); tft.drawCircle (240, 125, 30, WHITE); }

Քայլ 12: Ստուգեք, արդյոք դիպչում ենք ուղղանկյունին

Այս գործառույթը ստուգում է, թե արդյոք կետը գտնվում է ուղղանկյան ներսում:

// 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 անել retangulo if (py = 100) {վերադարձ ճշմարիտ; }} վերադարձնել կեղծ; }

Քայլ 13: Ստուգեք, արդյոք դիպչում ենք շրջանակին

Սա նույնն է, ինչ շրջանագծի դեպքում:

// 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 (հեռավորությունը <= circle_radius) {վերադարձնել ճշմարիտ; } վերադարձնել կեղծ; }

Քայլ 14: Ստուգեք, արդյոք դիպչում ենք եռանկյունուն

Կետի նույն ստուգումը կատարվում է նաև եռանկյունու ներսում:

// 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); float ACP = triangleArea (a, c, p); բոց ABP = triangleArea (a, b, p); float CPB = triangleArea (c, p, b); եթե (ABC == ACP+ABP+CPB) {վերադարձնել ճշմարիտ; } վերադարձնել կեղծ; } // 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 - կաց) * (ըստ - այ))/2); }

Քայլ 15: Հպված օբյեկտի անունը տպելու գործառույթ

Այստեղ մենք էկրանին գրում ենք այն երկրաչափական գործչի անունը, որն օգտագործվում է:

// 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, ՍԵՎ); tft.setCursor (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize (TEXT_SIZE_G); tft.setTextColor (Սպիտակ); tft.println (ձև); }

Քայլ 16: Ֆայլեր

Ներբեռնեք ֆայլերը.

ԻՆՈ

PDF