Arduino სენსორული ეკრანით: 16 ნაბიჯი

2024 ავტორი: John Day | [email protected]. ბოლოს შეცვლილი: 2024-01-30 10:19

გსურთ შექმნათ უფრო პერსონალიზებული მენიუები და უკეთესი ადამიანის/მანქანების ინტერფეისები? ასეთი პროექტებისთვის შეგიძლიათ გამოიყენოთ Arduino და Touch Screen Display. ეს იდეა მიმზიდველად ჟღერს? თუ ასეა, ნახეთ ვიდეო დღეს, სადაც მე გაჩვენებთ ასამბლეას მეგა არდუინოთი და სენსორული ეკრანით. თქვენ ნახავთ თუ როგორ უნდა გააკეთოთ თქვენთვის სასურველი დიზაინი ეკრანზე და ასევე როგორ განვსაზღვროთ ეკრანის რეგიონი კონკრეტული ბრძანების შეხებისა და გააქტიურების მიზნით. ხაზს ვუსვამ, რომ მე შევარჩიე არდუინო მეგას გამოყენება ქინძისთავების რაოდენობის გამო.

ასე რომ, დღეს მე გაგაცნობთ სენსორული ეკრანის ჩვენებას, მის გრაფიკულ ფუნქციებს და როგორ დავიჭიროთ ეკრანზე შეხების წერტილი. მოდით ასევე შევქმნათ მაგალითი, რომელიც შეიცავს ყველა ელემენტს, როგორიცაა პოზიციონირება, წერა, ფორმების, ფერების და შეხების დიზაინი.

ნაბიჯი 1: Arduino Mega 2560

ნაბიჯი 2: TFT LCD ფარი 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: / პროგრამის ფაილები (x86) / Arduino / ბიბლიოთეკები

შენიშვნა

სანამ ჩვენს პროგრამას დავიწყებთ, ჩვენ უნდა მივმართოთ რაღაც მნიშვნელოვანს: TOUCH კალიბრაცია.

მარტივი პროგრამის გამოყენებით, ეკრანზე შეხების წერტილების მისაღებად, შეინახეთ წერტილების მნიშვნელობა (x, y) თითოეულ ბოლოში (მონიშნულია ყვითელში, ქვემოთ მოცემულ ფიგურაში). ეს მნიშვნელობები მნიშვნელოვანია ეკრანის გრაფიკულ წერტილებზე შეხების გამოსახვისთვის.

#ჩართვა // Portas de leitura das coordenadas do touchvoid #განსაზღვრეთ YP A1 // Y+ არის ანალოგურ 1 #განსაზღვრეთ XM A2 // X- არის ანალოგურ 2 #განსაზღვრეთ YM 7 // Y- არის ციფრული 7 #განსაზღვრეთ XP 6 // X+ არის ციფრულ 6 -ზე // ობიექტის მანიპულირების მიზნით, რათა მოხდეს თქვენი 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 ფუნქცია პასუხისმგებელია მოცემულ წერტილში ეკრანზე ერთი წერტილის დახატვაზე.

void drawPixel (int16_t x, int16_t და, uint16_t ფერი);

2. დახაზეთ ხაზი

DrawLine ფუნქცია პასუხისმგებელია ხაზის დახატვაზე ორი წერტილიდან.

void drawLine (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t ფერი);

3. drawFastVLine

DrawFastVLine ფუნქცია პასუხისმგებელია წერტილიდან და სიმაღლიდან ვერტიკალური ხაზის დახატვაზე.

void drawFastVLine (int16_t x, int16_t y, int16_t h, uint16_t ფერი);

4. drawFastHLine

DrawFastHLine ფუნქცია პასუხისმგებელია წერტილიდან და სიგანეზე ჰორიზონტალური ხაზის დახაზვაზე.

void drawFastHLine (int16_t x, int16_t y, int16_t w, uint16_t ფერი);

5. drawRect

DrawRect ფუნქცია პასუხისმგებელია ეკრანზე ოთხკუთხედის დახატვაზე, გავლით წარმოშობის წერტილზე, მის სიმაღლეზე და სიგანეზე.

void drawRect (int16_t x, int16_t y, int16_t w, int16_t სთ, uint16_t ფერი);

6. შევსება

FillRect ფუნქცია იგივეა drawRect, მაგრამ მართკუთხედი ივსება მოცემული ფერით.

void fillRect (int16_t x, int16_t y, int16_t w, int16_t სთ, uint16_t ფერი);

7. drawRoundRect

DrawRoundRect ფუნქცია იგივეა, რაც drawRect, მაგრამ მართკუთხედს ექნება მომრგვალებული კიდეები.

void 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 ფუნქცია პასუხისმგებელია ეკრანზე სამკუთხედის დახატვაზე, რომელიც გადადის 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 ფუნქცია პასუხისმგებელია წყაროს წერტილიდან და რადიუსიდან წრის დახატვაზე.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t ფერი);

12. შეავსეთ წრე

FillCircle ფუნქცია იგივეა, რაც drawCircle, მაგრამ წრე შეივსება მოცემული ფერით.

void fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t ფერი);

13. შეავსეთ ეკრანი

FillScreen ფუნქცია პასუხისმგებელია ეკრანის ერთი ფერით შევსებაზე.

void fillScreen (uint16_t ფერი);

14. set კურსორი

SetCursor ფუნქცია პასუხისმგებელია კურსორის პოზიციონირებაზე მოცემულ წერტილში დასაწერად.

void setCursor (int16_t x, int16_t y);

15. setTextColor

SetTextColor ფუნქცია პასუხისმგებელია ტექსტისთვის ფერის მინიჭებაზე. ჩვენ გვაქვს მისი გამოყენების ორი გზა:

void setTextColor (uint16_t გ); // ადგენს მხოლოდ წერის ფერს მოხსნის setTextColor (uint16_t c, uint16_t bg); // დააყენეთ წერის ფერი და ფონის ფერი

16. setTextSize

SetTextSize ფუნქცია პასუხისმგებელია ტექსტის ზომის მინიჭებაზე, რომელიც დაიწერება.

void setTextSize (uint8_t s);

17. setTextWrap

SetTextWrap ფუნქცია პასუხისმგებელია ხაზის გაწყვეტაზე, თუ ის ეკრანის ზღვარს მიაღწევს.

void setTextWrap (ლოგიკური w);

18. setRotation

SetRotation ფუნქცია პასუხისმგებელია ეკრანის ბრუნვაზე (ლანდშაფტი, პორტრეტი).

void setRotation (uint8_t r); // 0 (სტანდარტული), 1, 2, 3

ნაბიჯი 5: მაგალითი

ჩვენ შევქმნით პროგრამას, რომელშიც ჩვენ გამოვიყენებთ იმ რესურსების უმეტესობას, რასაც ჩვენება გვაძლევს.

მოდით დავწეროთ რამდენიმე სტრიქონი სხვადასხვა ზომის, შევქმნათ სამი გეომეტრიული ფიგურა და შევარჩიოთ შეხების მოვლენა მათზე, ყოველ ჯერზე, როდესაც რომელიმე ფიგურას შევეხებით, ჩვენ გვექნება ფიგურის სახელის უკუკავშირი მათ ქვემოთ.

ნაბიჯი 6: ბიბლიოთეკები

ჯერ განვსაზღვროთ ბიბლიოთეკები, რომლებსაც ჩვენ გამოვიყენებთ.

#მოიცავს // რეაგირებას გვეხმარება

#მოიცავს // რეაგირება pegar os toques na tela

#ჩართვა // კომუნიკაცია com ჩვენება

#ჩართვა // კომუნიკაცია com ჩვენება

#ჩართეთ "მათემატიკა.ჰ" // კალკულაციური პოტენცია

ნაბიჯი 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) 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 განსაზღვრავს TEXT_SIZE_L 3 განსაზღვრავს TEXT_SIZE_M 2 განსაზღვრავს TEXT_SIZE_S 1 // posicionamento dos textos de კავშირი განსაზღვრავს FEEDBACK_LABEL_X 10 განსაზღვრავს FEEDBACK_LABEL_Y 200 # განსაზღვრავს FEEDBACK_TOUCH_X 120 # განსაზღვრავს FEEDBACK_TOUCH_Y 200 // ფასეულობები para detectar pressão ამის toque განსაზღვრავს 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 0xFFFoFo const int წრე_ 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 (BLACK); // 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); // გადაამოწმეთ პრესა, რომ არ გქონდეთ საკმარისი ინფორმაცია (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), გვ)) {writeShape ("სამკუთხედი"); } // verifica se tocou no circulo else if (pointInCircle (p)) {writeShape ("წრე"); }}}

ნაბიჯი 10: შეამოწმეთ შევეხებით თუ არა წრეს

ამ ეტაპზე ჩვენ განვიხილავთ ეკრანის ინიციალიზაციას და განვსაზღვრავთ გამოსაშვები ტექსტების ფერებს.

/ *Desenha na tela os elementos */ void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (ყვითელი); 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 ("ფორმა:"); }

ნაბიჯი 11: გეომეტრიული ფორმების შექმნის ფუნქციები

ჩვენ ვქმნით მართკუთხედს, სამკუთხედს და წრეს იმ საწყისებით, რომელსაც ჩვენ ვადგენთ.

// cria um retangulo com origem (x, y) = (10, 100) // სიგანე = 80 e სიმაღლე = 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, GREEN); 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 do retangulo if (py = 100) {დაბრუნება ჭეშმარიტი; }} დაბრუნება false; }

ნაბიჯი 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 (მანძილი <= წრე_რედიუსი) {დაბრუნდება ჭეშმარიტი; } დაბრუნება false; }

ნაბიჯი 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); float ABP = სამკუთხედი არე (a, b, p); float CPB = triangleArea (c, p, b); if (ABC == ACP+ABP+CPB) {დაბრუნდება true; } დაბრუნება 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 - ცული) * (by - ay))/2); }

ნაბიჯი 15: შეხებული ობიექტის სახელის დაბეჭდვის ფუნქცია

აქ ჩვენ ვწერთ ეკრანზე გეომეტრიული ფიგურის სახელს, რომელიც გამოიყენება.

// escreve na tela o nome da figura geométrica que foi tocadavoid writeShape (სიმებიანი ფორმა) {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 (თეთრი); tft.println (ფორმა); }

ნაბიჯი 16: ფაილები

ჩამოტვირთეთ ფაილები:

ინო

PDF