Arduino Dengan Paparan Skrin Sentuh: 16 Langkah

2024 Pengarang: John Day | [email protected]. Diubah suai terakhir: 2024-01-30 11:11

Adakah anda ingin membuat menu yang lebih diperibadikan dan antara muka manusia / mesin yang lebih baik? Untuk projek seperti itu, anda boleh menggunakan Arduino dan Paparan Skrin Sentuh. Adakah idea ini menarik? Sekiranya ada, lihat video hari ini, di mana saya akan menunjukkan kepada anda sebuah perhimpunan dengan Mega Arduino dan Paparan Skrin Sentuh. Anda akan melihat bagaimana membuat reka bentuk yang anda inginkan di layar, dan juga bagaimana menentukan kawasan skrin untuk menyentuh dan mengaktifkan perintah tertentu. Saya menekankan bahawa saya memilih untuk menggunakan Arduino Mega kerana jumlah pinnya.

Jadi hari ini, saya akan memperkenalkan anda kepada paparan Layar Sentuh, fungsi grafiknya, dan cara mengambil titik sentuh di skrin. Mari juga buat contoh yang mengandungi semua elemen, seperti kedudukan, penulisan, merancang bentuk, warna, dan sentuhan.

Langkah 1: Arduino Mega 2560

Langkah 2: Perisai TFT LCD 2.4"

Paparan ini yang kami gunakan dalam projek kami mempunyai ciri menarik: ia mempunyai kad SD. Walau bagaimanapun, penulisan dan pembacaan yang terlibat dalam ini akan ditunjukkan dalam video lain, yang akan saya hasilkan tidak lama lagi. Objektif pelajaran hari ini adalah untuk menangani secara khusus ciri grafik dan skrin sentuh paparan ini.

Ciri-ciri:

Dimensi Skrin: 2.4 inci

Slot kad MicroSD

LCD Warna: 65K

Pemandu: ILI9325

Resolusi: 240 x 320

Skrin sentuh: Skrin sentuh tahan 4 wayar

Antaramuka: 8 bit data, ditambah 4 garisan kawalan

Voltan operasi: 3.3-5V

Dimensi: 71 x 52 x 7mm

Langkah 3: Perpustakaan

Tambahkan perpustakaan:

"Adafruit_GFX"

"SWTFT"

"Skrin sentuh"

Klik pada pautan dan muat turun perpustakaan.

Buka zip fail dan tampalkannya ke folder perpustakaan Arduino IDE.

C: / Fail Program (x86) / Arduino / perpustakaan

Catatan

Sebelum memulakan program, kita perlu menangani sesuatu yang penting: penentukuran TOUCH.

Dengan menggunakan program mudah untuk mendapatkan titik sentuh pada paparan, simpan nilai titik (x, y) di setiap hujungnya (diserlahkan dengan warna kuning pada gambar di bawah). Nilai-nilai ini penting untuk memetakan sentuhan ke titik grafik di skrin.

#include // Portas de leitura das coordenadas do touchvoid #define YP A1 // Y + ada di Analog1 #define XM A2 // X- ada di Analog2 #tentukan YM 7 // Y- ada di Digital7 #define XP 6 // X + terdapat di Digital6 // objeto para manipulacao dos eventos de toque na tela TouchScreen ts = TouchScreen (XP, YP, XM, YM); batal persediaan () {Serial.begin (9600); } gelung void () {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); kelewatan (1000); }

Langkah 4: Fungsi

Sekarang mari kita lihat beberapa fungsi grafik yang dapat ditawarkan oleh perpustakaan kepada kita.

1. drawPixel

Fungsi drawPixel bertanggungjawab untuk melukis satu titik di skrin pada titik yang diberikan.

batal drawPixel (int16_t x, int16_t dan, warna uint16_t);

2. drawLine

Fungsi drawLine bertanggungjawab untuk menarik garis dari dua titik.

undian tidak sah (int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t color);

3. drawFastVLine

Fungsi drawFastVLine bertanggungjawab untuk melukis garis menegak dari titik dan ketinggian.

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

4. drawFastHLine

Fungsi drawFastHLine bertanggungjawab untuk melukis garis mendatar dari titik dan lebar.

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

5. drawRect

Fungsi drawRect bertanggung jawab untuk melukis sebuah segi empat tepat pada layar, melewati titik asal, tinggi dan lebarnya.

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

6. isiRect

Fungsi fillRect sama dengan drawRect, tetapi segi empat tepat akan diisi dengan warna yang diberikan.

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

7. drawRoundRect

Fungsi drawRoundRect sama dengan drawRect, tetapi segi empat tepat akan mempunyai tepi bulat.

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

8. isiRoundRect

Fungsi fillRoundRect sama dengan drawRoundRect, tetapi segi empat tepat akan diisi dengan warna yang diberikan.

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

9. drawTriangle

Fungsi drawTriangle bertanggungjawab untuk melukis segitiga di skrin, melewati titik 3 bucu.

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

10. isi Segitiga

Fungsi fillTriangle sama dengan drawTriangle, tetapi segitiga akan diisi dengan warna yang diberikan.

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

11. lukis Lingkaran

Fungsi drawCircle bertanggungjawab untuk melukis bulatan dari titik sumber dan jejari.

undian tidak sahCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

12. isiCircle

Fungsi fillCircle sama dengan drawCircle, tetapi bulatan akan diisi dengan warna yang diberikan.

kosongkanCircle (int16_t x0, int16_t y0, int16_t r, uint16_t color);

13. isi Skrin

Fungsi fillScreen bertanggungjawab untuk mengisi skrin dengan satu warna.

kekosongan fillScreen (warna uint16_t);

14. setCursor

Fungsi setCursor bertanggungjawab untuk meletakkan kursor untuk menulis ke titik tertentu.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Fungsi setTextColor bertanggungjawab untuk memberikan warna pada teks yang akan ditulis. Kami mempunyai dua cara untuk menggunakannya:

batal setTextColor (uint16_t c); // menetapkan warna penulisan sahaja, jangan setTextColor (uint16_t c, uint16_t bg); // tetapkan warna tulisan dan warna latar

16. setTextSize

Fungsi setTextSize bertanggungjawab untuk memberikan ukuran pada teks yang akan ditulis.

batal setTextSize (uint8_t s);

17. setTextWrap

Fungsi setTextWrap bertanggungjawab untuk memecahkan garis jika mencapai batas skrin.

batal setTextWrap (boolean w);

18. setRotasi

Fungsi setRotation bertanggungjawab untuk memutar layar (landskap, potret).

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

Langkah 5: Contoh

Kami akan membuat program di mana kami akan menggunakan sebahagian besar sumber yang disediakan oleh paparan.

Mari tulis beberapa rentetan dalam ukuran yang berbeza, buat tiga angka geometri, dan ambil peristiwa sentuhan padanya, setiap kali kita menyentuh salah satu angka, kita akan mendapat maklum balas nama tokoh tepat di bawahnya.

Langkah 6: Perpustakaan

Pertama mari kita tentukan perpustakaan yang akan kita gunakan.

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

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

#sertakan // paparan comunicação

#sertakan // paparan comunicação

#termasuk "math.h" // potensia calkular

Langkah 7: Mentakrifkan

Kami akan menentukan beberapa makro untuk pin, dan juga nilai penting yang akan kami gunakan.

// 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 extremeidades max / min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 900 #tentukan TS_MAXY 900 // tamanho dos textos #definisikan TEXT_SIZE_L 3 #tentukan TEXT_SIZE_M 2 #tentukan TEXT_SIZE_S 1 // posicionamento dos textos de feedback #define FEEDBACK_LABEL_X 10 #definisikan FEEDBACK_LABEL_Y 200 #definisikan_Terapi_KEBALIKAN_dengarkan_Terapi_KEBAIKAN_dengarkan_Terapi_Terapi_KEBALIKAN_Terapi_KEBAIKAN_Terapi_Perhatian 10 #tentukan MAXPRESSURE 1000

Kami meneruskan definisi beberapa makro.

// Associa o nome das cores aos valores koresponden # tentukan BLACK 0x0000 #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define YELLOW 0xFFE0 # tentukan PUTIH 0xFFFF00 #define WHITE 0xFFFF // dados de Circiauso const int circle_x = 240; const int circle_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;

Langkah 8: Persediaan

Dalam persediaan, kami akan memulakan objek kawalan grafik kami dan membuat konfigurasi pertama.

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

Langkah 9: Gelung

Di gelung, kita akan mengambil titik di mana kita menyentuh skrin, dan melihat apakah sentuhan itu berlaku di salah satu gambar.

gelung kosong () {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 receiver o mapeamento de Y TSPoint p; p.x = peta (touchPoint.y, TS_MINY, TS_MAXY, 0, 320); p.y = peta (touchPoint.x, TS_MINX, TS_MAXX, 240, 0); // verifica se a pressão no toque juga mencukupi jika (touchPoint.z> MINPRESSURE && touchPoint.z <MAXPRESSURE) {// verifica se tocou no retangulo if (pointInRect (p)) {writeShape ("Rect"); } // verifica se tocou no triangulo other if (pointInsideTriangle (TSPoint (110, 150, 0), TSPoint (150, 100, 0), TSPoint (190, 150, 0), p)) {writeShape ("Segitiga"); } // verifica se tocou no circulo other if (pointInCircle (p)) {writeShape ("Lingkaran"); }}}

Langkah 10: Periksa Jika Kita Menyentuh Lingkaran

Dalam langkah ini kita berurusan dengan inisialisasi layar dan menentukan warna teks yang akan ditampilkan.

/ * Desenha na tela os elementos * / batal initialSettings () {tft.setTextColor (PUTIH); tft.setTextSize (TEXT_SIZE_S); tft.println ("ACESSE"); tft.setTextColor (KUNING); tft.setTextSize (TEXT_SIZE_M); tft.println ("MEU BLOG"); tft.setTextColor (HIJAU); tft.setTextSize (TEXT_SIZE_L); tft.println ("FERNANDOK. COM"); createRect (); createTriangle (); buatCircle (); tft.setCursor (FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor (CYAN); tft.setTextSize (TEXT_SIZE_L); tft.println ("BENTUK:"); }

Langkah 11: Fungsi Membuat Bentuk Geometri

Kami membuat segi empat tepat, segitiga, dan bulatan dengan asal-usul yang kami tentukan.

// cria um retangulo com origem (x, y) = (10, 100) // lebar = 80 e tinggi = 50 kekosongan createRect () {tft.fillRect (10, 100, 80, 50, RED); tft.drawRect (10, 100, 80, 50, PUTIH); } // cria um triangulo com os vertices: // A = (110, 150); B = (150, 100); C = (190, 150) batal createTriangle () {tft.fillTriangle (110, 150, 150, 100, 190, 150, KUNING); tft.drawTriangle (110, 150, 150, 100, 190, 150, PUTIH); } // 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, PUTIH); }

Langkah 12: Periksa Jika Kami Menyentuh Segi Empat

Fungsi ini memeriksa apakah titik berada di dalam segi empat tepat.

// 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 lakukan retangulo jika (py = 100) {kembali benar; }} kembali palsu; }

Langkah 13: Periksa Jika Kita Menyentuh Lingkaran

Ini sama dengan bulatan.

// distancia entre pontos D = raiz ((xb-xa) ^ 2 + (yb-ya) ^ 2) // vefifica se o ponto está dentro do circulo // se distancia do ponto pra origem do circulo untuk menor ou igual ao raio, ele está dentro bool pointInCircle (TSPoint p) {jarak apungan = sqrt (pow (px - circle_x, 2) + pow (py - circle_y, 2)); jika (jarak <= circle_radius) {kembali benar; } kembali palsu; }

Langkah 14: Periksa Sekiranya Kami Menyentuh Segi Tiga

Pemeriksaan titik yang sama juga berlaku dalam segitiga.

// 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 = segitigaArea (a, b, c); terapung ACP = segitigaArea (a, c, p); terapung ABP = segitigaArea (a, b, p); apungan CPB = segitigaArea (c, p, b); jika (ABC == ACP + ABP + CPB) {kembali benar; } kembali palsu; } // 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 -) kapak) * (oleh - ay)) / 2); }

Langkah 15: Fungsi untuk Mencetak Nama Objek yang Disentuh

Di sini kita menulis di skrin nama angka geometri yang digunakan.

// escreve na tela o nome da figura geométrica que juga tocadavoid writeShape (String shape) {tft.fillRect (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y, 170, 30, HITAM); tft.setCursor (FEEDBACK_TOUCH_X, FEEDBACK_TOUCH_Y); tft.setTextSize (TEXT_SIZE_G); tft.setTextColor (PUTIH); tft.println (bentuk); }

Langkah 16: Fail

Muat turun fail:

INO

PDF