Arduino với màn hình cảm ứng: 16 bước

2024 Tác giả: John Day | [email protected]. Sửa đổi lần cuối: 2024-01-30 13:34

Bạn có muốn tạo nhiều menu được cá nhân hóa hơn và giao diện người / máy tốt hơn không? Đối với các dự án như vậy, bạn có thể sử dụng Arduino và Màn hình cảm ứng. Ý tưởng này có vẻ hấp dẫn? Nếu vậy, hãy xem video ngày hôm nay, nơi tôi sẽ chỉ cho bạn cách lắp ráp với Mega Arduino và Màn hình cảm ứng. Bạn sẽ thấy cách thực hiện các thiết kế bạn muốn trên màn hình, và cả cách xác định vùng màn hình để chạm và kích hoạt một lệnh cụ thể. Tôi nhấn mạnh rằng tôi đã chọn sử dụng Arduino Mega do số lượng chân cắm của nó.

Vì vậy, hôm nay, tôi sẽ giới thiệu với các bạn về màn hình Touch Screen, các chức năng đồ họa của nó và cách lấy điểm chạm trên màn hình. Cũng hãy tạo một ví dụ chứa tất cả các yếu tố, chẳng hạn như vị trí, chữ viết, thiết kế hình dạng, màu sắc và cảm ứng.

Bước 1: Arduino Mega 2560

Bước 2: Tấm chắn TFT LCD 2,4"

Màn hình mà chúng tôi sử dụng trong dự án này có một tính năng thú vị: nó có thẻ SD. Tuy nhiên, cách viết và cách đọc liên quan đến vấn đề này sẽ được trình bày trong một video khác, mà tôi sẽ sớm sản xuất. Mục tiêu của bài học hôm nay là giải quyết cụ thể các tính năng đồ họa và màn hình cảm ứng của màn hình này.

Đặc trưng:

Kích thước màn hình: 2,4 inch

Khe cắm thẻ nhớ MicroSD

LCD màu: 65K

Trình điều khiển: ILI9325

Độ phân giải: 240 x 320

Màn hình cảm ứng: Màn hình cảm ứng điện trở 4 dây

Giao diện: dữ liệu 8 bit, cộng với 4 dòng điều khiển

Điện áp hoạt động: 3,3-5V

Kích thước: 71 x 52 x 7mm

Bước 3: Thư viện

Thêm các thư viện:

"Adafruit_GFX"

"SWTFT"

"Màn hình cảm ứng"

Nhấp vào các liên kết và tải xuống các thư viện.

Giải nén tệp và dán vào thư mục thư viện của Arduino IDE.

C: / Tệp chương trình (x86) / Arduino / thư viện

Ghi chú

Trước khi bắt đầu chương trình của mình, chúng ta cần giải quyết một điều quan trọng: hiệu chuẩn TOUCH.

Sử dụng một chương trình đơn giản để lấy các điểm tiếp xúc trên màn hình, lưu trữ giá trị của các điểm (x, y) ở mỗi đầu (được đánh dấu bằng màu vàng trong hình bên dưới). Các giá trị này rất quan trọng để ánh xạ cảm ứng tới các điểm đồ họa trên màn hình.

#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 + đang ở trên Digital6 // objeto para sportsulacao dos eventos 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); chậm trễ (1000); }

Bước 4: Chức năng

Bây giờ chúng ta hãy xem xét một số chức năng đồ họa mà các thư viện có thể cung cấp cho chúng ta.

1. drawPixel

Hàm drawPixel có nhiệm vụ tô một điểm trên màn hình tại điểm đã cho.

void drawPixel (int16_t x, int16_t và, uint16_t color);

2. drawLine

Hàm drawLine có nhiệm vụ vẽ một đoạn thẳng từ hai điểm.

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

3. drawFastVLine

Hàm drawFastVLine có nhiệm vụ vẽ một đường thẳng đứng từ một điểm và độ cao.

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

4. drawFastHLine

Hàm drawFastHLine có nhiệm vụ vẽ một đường ngang từ một điểm và chiều rộng.

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

5. drawRect

Hàm drawRect có nhiệm vụ vẽ một hình chữ nhật trên màn hình, đi qua điểm gốc, chiều cao và chiều rộng của nó.

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

6. fillRect

Hàm fillRect giống như drawRect, nhưng hình chữ nhật sẽ được tô bằng màu đã cho.

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

7. drawRoundRect

Hàm drawRoundRect cũng giống như drawRect, nhưng hình chữ nhật sẽ có các cạnh tròn.

void drawRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);

8. fillRoundRect

Hàm fillRoundRect giống như drawRoundRect, nhưng hình chữ nhật sẽ được tô bằng màu đã cho.

void fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, int16_t radius, uint16_t color);

9. drawTriangle

Hàm drawTriangle có nhiệm vụ vẽ một tam giác trên màn hình, đi qua điểm nằm trong 3 đỉnh.

void drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t color);

10. fillTriangle

Hàm fillTriangle giống như drawTriangle, nhưng hình tam giác sẽ được tô bằng màu đã cho.

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

11. drawCircle

Hàm drawCircle có nhiệm vụ vẽ một đường tròn từ điểm nguồn và bán kính.

void drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. fillCircle

Hàm fillCircle cũng giống như drawCircle, nhưng hình tròn sẽ được tô bằng màu đã cho.

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

13. fillScreen

Hàm fillScreen có nhiệm vụ lấp đầy màn hình bằng một màu duy nhất.

void fillScreen (uint16_t color);

14. setCursor

Hàm setCursor chịu trách nhiệm định vị con trỏ để ghi vào một điểm nhất định.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Hàm setTextColor có nhiệm vụ gán màu cho văn bản sẽ được viết. Chúng tôi có hai cách để sử dụng nó:

void setTextColor (uint16_t c); // đặt màu ghi onlyvoid setTextColor (uint16_t c, uint16_t bg); // đặt màu viết và màu nền

16. setTextSize

Hàm setTextSize chịu trách nhiệm gán kích thước cho văn bản sẽ được viết.

void setTextSize (uint8_t s);

17. setTextWrap

Hàm setTextWrap chịu trách nhiệm ngắt dòng nếu nó đạt đến giới hạn của màn hình.

void setTextWrap (boolean w);

18. setRotation

Chức năng setRotation có nhiệm vụ xoay màn hình (ngang, dọc).

void setRotation (uint8_t r); // 0 (tiêu chuẩn), 1, 2, 3

Bước 5: Ví dụ

Chúng tôi sẽ tạo một chương trình trong đó chúng tôi sẽ sử dụng hầu hết các tài nguyên mà màn hình cung cấp cho chúng tôi.

Hãy viết một số chuỗi với các kích thước khác nhau, tạo ba hình hình học và chọn sự kiện chạm vào chúng, mỗi khi chúng ta chạm vào một trong các hình, chúng ta sẽ có phản hồi về tên hình ngay bên dưới chúng.

Bước 6: Thư viện

Đầu tiên, hãy xác định các thư viện mà chúng ta sẽ sử dụng.

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

#include // responseável bởi pegar os toques na tela

#include // comunicação com o display

#include // comunicação com o display

#include "math.h" // calcular potencia

Bước 7: Xác định

Chúng tôi sẽ xác định một số macro cho các chân và cả các giá trị quan trọng mà chúng tôi sẽ sử dụng.

// 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 calração do touch // surfacea um código simples para printmir 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 feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_SIZE_S 1 // posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_Độ_hình_phục_của 10 #define MAXPRESSURE 1000

Chúng tôi tiếp tục với định nghĩa của một số macro.

// Associa o nome das core aos valores Reporteres # define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF // dados de criação do roundo const int circle_radius; const int circle_x = 240; const int circle_y = 125; // objeto para sportsulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); // objeto para sportsulacao da parte grafica SWTFT tft;

Bước 8: Thiết lập

Trong phần thiết lập, chúng tôi sẽ khởi tạo đối tượng điều khiển đồ họa của mình và thực hiện các cấu hình đầu tiên.

void setup () {Serial.begin (9600); // reseta o objeto da lib grafica tft.reset (); // inicializa objeto controlador da lib grafica tft.begin (); chậm trễ (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 (); }

Bước 9: Vòng lặp

Trong vòng lặp, chúng tôi sẽ chọn điểm mà chúng tôi chạm vào màn hình và xem liệu lần chạm có xảy ra ở một trong các hình hay không.

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 Collectber o mapeamento de Y TSPoint p; p.x = map (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = map (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifyfica se a pressão no toque foi suficiencye if (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifyfica 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"); } // verifyfica se tocou no roundo else if (pointInCircle (p)) {writeShape ("Circle"); }}}

Bước 10: Kiểm tra xem chúng ta có chạm vào vòng kết nối không

Trong bước này, chúng ta xử lý việc khởi tạo màn hình và xác định màu sắc của văn bản sẽ được hiển thị.

/ * Desenha na tela os elementos * / void initialSettings () {tft.setTextColor (WHITE); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (VÀNG); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (XANH LÁ); 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:"); }

Bước 11: Chức năng tạo hình dạng hình học

Chúng tôi tạo ra một hình chữ nhật, một hình tam giác và một hình tròn với các điểm gốc mà chúng tôi xác định.

// 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, WHITE); } // đỉnh cria um triangulo com os: // A = (110, 150); B = (150, 100); C = (190, 150) void createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, VÀNG); tft.drawTriangle (110, 150, 150, 100, 190, 150, TRẮNG); } // cria um circleo com origem no ponto (x, y) = (240, 125) e raio = 30 void createCircle () {tft.fillCircle (240, 125, 30, GREEN); tft.drawCircle (240, 125, 30, TRẮNG); }

Bước 12: Kiểm tra xem chúng ta có chạm vào hình chữ nhật không

Hàm này kiểm tra xem điểm có nằm bên trong hình chữ nhật hay không.

// 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; }} trả về false; }

Bước 13: Kiểm tra xem chúng ta có chạm vào vòng kết nối không

Điều này cũng giống như với hình tròn.

// distancia entre pontos D = raiz ((xb-xa) ^ 2 + (yb-ya) ^ 2) // vefifica se o ponto está dentro do cycleo // se a distancia do ponto pra origem do cycleo 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 (khoảng cách <= circle_radius) {return true; } trả về sai; }

Bước 14: Kiểm tra xem chúng ta có chạm vào hình tam giác không

Việc kiểm tra tương tự của điểm cũng xảy ra trong tam giác.

// 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 =angleArea (a, b, c); float ACP = tam giácArea (a, c, p); float ABP = tam giácArea (a, b, p); float CPB = tam giácArea (c, p, b); if (ABC == ACP + ABP + CPB) {return true; } trả về sai; } // Função que tính a area de um triangulo com base nos pontos x, y float tam giácArea (TSPoint a, TSPoint b, TSPoint c) {return fabs (((bx - ax) * (cy - ay) - (cx - ax) * (do - ay)) / 2); }

Bước 15: Chức năng in tên của đối tượng được chạm vào

Ở đây chúng tôi viết trên màn hình tên của hình hình học được sử dụng.

// 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 (TRẮNG); tft.println (hình dạng); }

Bước 16: Tập tin

Tải xuống các tệp:

NS

PDF