Arduino พร้อมหน้าจอสัมผัส: 16 ขั้นตอน

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:07

คุณต้องการสร้างเมนูที่เป็นส่วนตัวมากขึ้นและส่วนต่อประสานระหว่างมนุษย์/เครื่องจักรที่ดีขึ้นหรือไม่? สำหรับโครงการดังกล่าว คุณสามารถใช้ Arduino และ Touch Screen Display ความคิดนี้ฟังดูน่าดึงดูดไหม? ถ้าใช่ ลองดูวิดีโอวันนี้ ซึ่งผมจะแสดงให้คุณเห็นการประกอบ Mega Arduino และหน้าจอสัมผัส คุณจะเห็นวิธีสร้างการออกแบบที่คุณต้องการบนหน้าจอ และวิธีการกำหนดขอบเขตหน้าจอเพื่อสัมผัสและเปิดใช้งานคำสั่งเฉพาะ ฉันเน้นว่าฉันเลือกใช้ Arduino Mega เนื่องจากจำนวนพิน

วันนี้ผมจะมาแนะนำให้คุณรู้จักกับหน้าจอสัมผัส ฟังก์ชันกราฟิก และวิธีจับจุดสัมผัสบนหน้าจอ เรามาสร้างตัวอย่างที่มีองค์ประกอบทั้งหมด เช่น การวางตำแหน่ง การเขียน การออกแบบรูปทรง สี และการสัมผัส

ขั้นตอนที่ 1: Arduino Mega 2560

ขั้นตอนที่ 2: TFT LCD Shield 2.4"

จอแสดงผลที่เราใช้ในโครงการนี้มีคุณสมบัติที่น่าสนใจ: มีการ์ด SD อย่างไรก็ตาม การเขียนและการอ่านที่เกี่ยวข้องในเรื่องนี้จะแสดงในวิดีโออื่น ซึ่งฉันจะผลิตเร็วๆ นี้ วัตถุประสงค์ของบทเรียนในวันนี้คือเพื่อกล่าวถึงคุณสมบัติกราฟิกและหน้าจอสัมผัสของจอแสดงผลนี้โดยเฉพาะ

ลักษณะเฉพาะ:

ขนาดหน้าจอ: 2.4 นิ้ว

ช่องเสียบการ์ด MicroSD

จอแอลซีดีสี: 65K

ไดรเวอร์: ILI9325

ความละเอียด: 240 x 320

หน้าจอสัมผัส: หน้าจอสัมผัสตัวต้านทาน 4 สาย

อินเทอร์เฟซ: ข้อมูล 8 บิต บวก 4 สายควบคุม

แรงดันไฟฟ้าที่ใช้งาน: 3.3-5V

ขนาด: 71 x 52 x 7mm

ขั้นตอนที่ 3: ห้องสมุด

เพิ่มห้องสมุด:

"อดาฟรุต_GFX"

"SWTFT"

"หน้าจอสัมผัส"

คลิกที่ลิงค์และดาวน์โหลดห้องสมุด

เปิดเครื่องรูดไฟล์และวางลงในโฟลเดอร์ไลบรารีของ Arduino IDE

C: / ไฟล์โปรแกรม (x86) / Arduino / ไลบรารี

บันทึก

ก่อนที่เราจะเริ่มต้นโปรแกรม เราต้องจัดการกับสิ่งที่สำคัญ: การปรับเทียบ TOUCH

ใช้โปรแกรมง่ายๆ เพื่อรับจุดสัมผัสบนจอแสดงผล จัดเก็บค่าของจุด (x, y) ที่ปลายแต่ละด้าน (เน้นด้วยสีเหลืองในรูปด้านล่าง) ค่าเหล่านี้มีความสำคัญสำหรับการจับคู่การสัมผัสกับจุดกราฟิกบนหน้าจอ

#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+ อยู่บน Digital6 //objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen(XP, YP, XM, YM); การตั้งค่าเป็นโมฆะ () { 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

ฟังก์ชัน drawRect มีหน้าที่ในการวาดรูปสี่เหลี่ยมผืนผ้าบนหน้าจอ ผ่านจุดกำเนิด ความสูงและความกว้าง

เป็นโมฆะ drawRect (int16_t x, int16_t y, int16_t w, int16_t h, uint16_t สี);

6. เติมRect

ฟังก์ชัน fillRect เหมือนกับ drawRect แต่สี่เหลี่ยมจะเต็มไปด้วยสีที่กำหนด

เป็นโมฆะ 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. เติมRoundRect

ฟังก์ชัน fillRoundRect เหมือนกับ drawRoundRect แต่สี่เหลี่ยมจะเต็มไปด้วยสีที่กำหนด

เป็นโมฆะ fillRoundRect (int16_t x0, int16_t y0, int16_t w, int16_t h, รัศมี int16_t, สี uint16_t);

9. วาดสามเหลี่ยม

ฟังก์ชัน drawTriangle ทำหน้าที่วาดรูปสามเหลี่ยมบนหน้าจอ โดยผ่านจุดยอด 3 จุด

โมฆะ drawTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t สี);

10. เติมสามเหลี่ยม

ฟังก์ชัน fillTriangle เหมือนกับ drawTriangle แต่สามเหลี่ยมจะถูกเติมด้วยสีที่กำหนด

โมฆะ fillTriangle (int16_t x0, int16_t y0, int16_t x1, int16_t y1, int16_t x2, int16_t y2, uint16_t สี);

11. drawCircle

ฟังก์ชัน drawCircle มีหน้าที่ในการวาดวงกลมจากจุดต้นทางและรัศมี

เป็นโมฆะ drawCircle (int16_t x0, int16_t y0, int16_t r, uint16_t สี);

12. เติมวงกลม

ฟังก์ชัน fillCircle เหมือนกับ drawCircle แต่วงกลมจะถูกเติมด้วยสีที่กำหนด

เป็นโมฆะ fillCircle (int16_t x0, int16_t y0, int16_t r, uint16_t สี);

13. เติมหน้าจอ

ฟังก์ชั่น fillScreen ทำหน้าที่เติมหน้าจอด้วยสีเดียว

เป็นโมฆะ fillScreen (สี uint16_t);

14. ตั้งค่าเคอร์เซอร์

ฟังก์ชัน setCursor ทำหน้าที่กำหนดตำแหน่งเคอร์เซอร์เพื่อเขียนไปยังจุดที่กำหนด

เป็นโมฆะ setCursor (int16_t x, int16_t y);

15. setTextColor

ฟังก์ชัน setTextColor มีหน้าที่กำหนดสีให้กับข้อความที่จะเขียน เรามีสองวิธีในการใช้งาน:

เป็นโมฆะ setTextColor (uint16_t c); // กำหนดสีของการเขียน onlyvoid setTextColor (uint16_t c, uint16_t bg); // กำหนดสีเขียนและสีพื้นหลัง

16. setTextSize

ฟังก์ชัน setTextSize มีหน้าที่กำหนดขนาดให้กับข้อความที่จะเขียน

เป็นโมฆะ setTextSize (uint8_t s);

17. setTextWrap

ฟังก์ชัน setTextWrap มีหน้าที่ทำลายบรรทัดหากถึงขีดจำกัดของหน้าจอ

เป็นโมฆะ setTextWrap (บูลีน w);

18. setRotation

ฟังก์ชั่น setRotation ทำหน้าที่หมุนหน้าจอ (แนวนอน, แนวตั้ง)

เป็นโมฆะ setRotation (uint8_t r); // 0 (มาตรฐาน), 1, 2, 3

ขั้นตอนที่ 5: ตัวอย่าง

เราจะสร้างโปรแกรมที่เราจะใช้ทรัพยากรส่วนใหญ่ที่หน้าจอมอบให้เรา

มาเขียนสตริงในขนาดต่างๆ กัน สร้างรูปทรงเรขาคณิตสามรูป และรับเหตุการณ์การสัมผัสบนนั้น ทุกครั้งที่เราสัมผัสหนึ่งในตัวเลข เราจะได้รับผลตอบรับของชื่อรูปด้านล่างพวกเขา

ขั้นตอนที่ 6: ห้องสมุด

ขั้นแรก มากำหนดไลบรารีที่เราจะใช้กันก่อน

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

#include //ตอบกลับ por pegar os toques na tela

#include //comunicação com o display

#include //comunicação com o display

#include "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 สูงสุด/นาที (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #define TS_MAXY แก้ไขข้อความ #define TEXT_SIZE_L 3 #define TEXT_SIZE_M 2 #define TEXT_SIZE_S 1 //posicionameto dos textos de feedback #define FEEDBACK_LABEL_X 10 #define FEEDBACK_LABEL_Y 200 #define FEEDBACK_TOUCH_B 200_ กำหนด FEEDBACK_TOUCH_B 200_ กำหนด FEEDBACK_TOUCH_B 200_ กำหนด 10 #define MAXPRESSURE 1000

เราดำเนินการต่อด้วยคำจำกัดความของมาโครบางตัว

//Associa o nome das cores aos valores ผู้ติดต่อ#define BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 #define WHITE 0xFFFF //dados de criação in 30 circulo const; const int circle_x = 240; const int circle_y = 125; //objeto para manipulacao dos eventos de toque na tela TouchScreen ts = หน้าจอสัมผัส (XP, YP, XM, YM); //objeto สำหรับ manipulacao da parte grafica SWTFT tft;

ขั้นตอนที่ 8: ตั้งค่า

ในการตั้งค่า เราจะเริ่มต้นวัตถุควบคุมกราฟิกและทำการกำหนดค่าแรก

การตั้งค่าเป็นโมฆะ () { Serial.begin (9600); //รีเซ็ต o objeto da lib grafica tft.reset(); //inicializa objeto controlador ดา lib grafica tft.begin(); ล่าช้า (500); //rotaciona และ 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: วนซ้ำ

ในลูป เราจะเลือกจุดที่เราสัมผัสหน้าจอ และดูว่าสัมผัสนั้นเกิดขึ้นในรูปใดรูปหนึ่งหรือไม่

วงเป็นโมฆะ () { TSPoint touchPoint = ts.getPoint ();//pega o touch (x, y, z=pressao) pinMode (XM, OUTPUT); โหมดพิน (YP, OUTPUT); // mapeia o ponto de touch para o (x, y) grafico // o fato de termos rotacionado a tela para landscape impplica no X receber o mapeamento de Y TSPoint p; p.x = แผนที่ (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); py = แผนที่ (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // ยืนยันโดยไม่ต้องกด foi เพียงพอ if (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) { // ยืนยันถึง tocou ไม่มี retangulo if (pointInRect (p)) { writeShape ("Rect"); } //ยืนยัน se tocou ไม่มีรูปสามเหลี่ยมอื่น if(pointInsideTriangle(TSPoint(110, 150, 0), TSPoint(150, 100, 0), TSPoint(190, 150, 0), p)) {writeShape("Triangle"); } //ยืนยัน se tocou ไม่มี circulo อื่น if(pointInCircle(p)) {writeShape("Circle"); } } }

ขั้นตอนที่ 10: ตรวจสอบว่าเราแตะวงกลมหรือไม่

ในขั้นตอนนี้ เราจะจัดการกับการเริ่มต้นหน้าจอและกำหนดสีของข้อความที่จะแสดง

/*Desenha na tela os องค์ประกอบ */ เป็นโมฆะการตั้งค่าเริ่มต้น () { tft.setTextColor (WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("ACESSE"); tft.setTextColor (สีเหลือง); tft.setTextSize(TEXT_SIZE_M); tft.println("บล็อก MEU"); 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) // width = 80 e height = 50 โมฆะ createRect () { tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, สีขาว); } //cria um triangulo com os จุดยอด: //A = (110, 150); B = (150, 100); C = (190, 150) เป็นโมฆะ createTriangle () { tft.fillTriangle (110, 150, 150, 100, 190, 150, สีเหลือง); tft.drawTriangle(110, 150, 150, 100, 190, 150, สีขาว); } //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, สีขาว); }

ขั้นตอนที่ 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) { คืนค่าจริง; } } คืนค่าเท็จ }

ขั้นตอนที่ 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 สำหรับ Menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) { ระยะทางลอย = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); if(distance <= 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 = พื้นที่สามเหลี่ยม (a, c, p); float ABP = พื้นที่สามเหลี่ยม (a, b, p); float CPB = พื้นที่สามเหลี่ยม (c, p, b); if(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 - axe)*(cy - ay) - (cx -) ขวาน) * (โดย - 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