Arduino Dengan Tampilan Layar Sentuh: 16 Langkah

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:57

Apakah Anda ingin membuat menu yang lebih personal dan antarmuka manusia/mesin yang lebih baik? Untuk proyek semacam itu, Anda dapat menggunakan Arduino dan Tampilan Layar Sentuh. Apakah ide ini terdengar menarik? Jika demikian, lihat video hari ini, di mana saya akan menunjukkan kepada Anda perakitan dengan Arduino Mega dan Tampilan Layar Sentuh. Anda akan melihat cara membuat desain yang Anda inginkan di layar, dan juga cara menentukan wilayah layar untuk menyentuh dan mengaktifkan perintah tertentu. Saya tekankan bahwa saya memilih untuk menggunakan Arduino Mega karena jumlah pinnya.

Jadi hari ini, saya akan memperkenalkan Anda ke tampilan Layar Sentuh, fungsi grafisnya, dan cara meraih titik sentuh di layar. Mari kita juga membuat contoh yang berisi semua elemen, seperti penentuan posisi, penulisan, desain bentuk, warna, dan sentuhan.

Langkah 1: Arduino Mega 2560

Langkah 2: TFT LCD Shield 2.4"

Tampilan yang kami gunakan dalam proyek kami ini memiliki fitur menarik: ia memiliki kartu SD. Namun, penulisan dan pembacaan yang terlibat di dalamnya akan ditampilkan dalam video lain, yang akan segera saya produksi. Tujuan pelajaran hari ini adalah untuk secara khusus membahas fitur grafis dan layar sentuh dari tampilan ini.

Karakteristik:

Dimensi Layar: 2.4 inci

Slot kartu MicroSD

LCD warna: 65K

Pengemudi: ILI9325

Resolusi: 240 x 320

Layar sentuh: layar sentuh resistif 4-kawat

Antarmuka: data 8 bit, ditambah 4 jalur kontrol

Tegangan operasi: 3.3-5V

Dimensi: 71x52x7mm

Langkah 3: Perpustakaan

Tambahkan perpustakaan:

"Adafruit_GFX"

"SWTFT"

"Layar sentuh"

Klik tautan dan unduh perpustakaan.

Buka zip file dan tempel ke folder perpustakaan Arduino IDE.

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

Catatan

Sebelum kita memulai program kita, kita perlu membahas sesuatu yang penting: kalibrasi SENTUH.

Menggunakan program sederhana untuk mendapatkan titik sentuh pada layar, simpan nilai titik (x, y) di setiap ujungnya (disorot dengan warna kuning pada gambar di bawah). Nilai-nilai ini penting untuk memetakan sentuhan ke titik grafik di layar.

#include //Portas de leitura das coordenadas do touchvoid #define YP A1 // Y+ aktif Analog1 #define XM A2 // X- aktif Analog2 #define YM 7 // Y- aktif Digital7 #define XP 6 // X+ ada di Digital6 //objeto para manipulacao dos eventos de toque na tela Layar Sentuh ts = Layar Sentuh(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); penundaan (1000); }

Langkah 4: Fungsi

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

1. drawPixel

Fungsi drawPixel bertanggung jawab untuk mengecat satu titik di layar pada titik tertentu.

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

2. garis tarik

Fungsi drawLine bertanggung jawab untuk menggambar garis dari dua titik.

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

3. drawFastVLine

Fungsi drawFastVLine bertanggung jawab untuk menggambar garis vertikal dari suatu titik dan ketinggian.

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

4. drawFastHLine

Fungsi drawFastHLine bertanggung jawab untuk menggambar garis horizontal dari titik dan lebar.

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

5. menggambarRect

Fungsi drawRect bertanggung jawab untuk menggambar persegi panjang di layar, melewati titik asal, tinggi dan lebarnya.

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

6. isiRect

Fungsi fillRect sama dengan drawRect, tetapi persegi panjang akan diisi dengan warna yang diberikan.

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

7. drawRoundRect

Fungsi drawRoundRect sama dengan drawRect, tetapi persegi panjang akan memiliki tepi yang membulat.

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

8. isiRoundRect

Fungsi fillRoundRect sama dengan drawRoundRect, tetapi persegi panjang akan diisi dengan warna yang diberikan.

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

9. menggambar Segitiga

Fungsi drawTriangle bertanggung jawab untuk menggambar segitiga di layar, melewati titik 3 simpul.

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

10. isiSegitiga

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

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

11. menggambar Lingkaran

Fungsi drawCircle bertanggung jawab untuk menggambar lingkaran dari titik sumber dan radius.

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

12. isiLingkaran

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

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

13. layar isi

Fungsi fillScreen bertanggung jawab untuk mengisi layar dengan satu warna.

void fillScreen (warna uint16_t);

14. set Kursor

Fungsi setCursor bertanggung jawab untuk memposisikan kursor untuk menulis ke titik tertentu.

void setCursor (int16_t x, int16_t y);

15. setTextColor

Fungsi setTextColor bertanggung jawab untuk menetapkan warna pada teks yang akan ditulis. Kami memiliki dua cara untuk menggunakannya:

void setTextColor (uint16_t c); // mengatur warna tulisan sajavoid setTextColor (uint16_t c, uint16_t bg); // mengatur warna tulisan dan warna background

16. setTextSize

Fungsi setTextSize bertanggung jawab untuk menetapkan ukuran pada teks yang akan ditulis.

void setTextSize (uint8_t s);

17. setTextWrap

Fungsi setTextWrap bertanggung jawab untuk memutus garis jika mencapai batas layar.

void setTextWrap (boolean w);

18. setRotasi

Fungsi setRotation bertanggung jawab untuk memutar layar (lanskap, potret).

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

Langkah 5: Contoh

Kami akan membuat program di mana kami akan menggunakan sebagian besar sumber daya yang disediakan layar untuk kami.

Mari kita menulis beberapa string dalam ukuran yang berbeda, membuat tiga angka geometris, dan mengambil acara sentuh pada mereka, setiap kali kita menyentuh salah satu angka, kita akan memiliki umpan balik dari nama gambar tepat di bawahnya.

Langkah 6: Perpustakaan

Pertama mari kita definisikan library yang akan kita gunakan.

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

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

#include //comunicação com o display

#include //comunicação com o display

#sertakan "math.h" //potensi kalkulus

Langkah 7: Mendefinisikan

Kami akan mendefinisikan 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 extremidades max/min (x, y) #define TS_MINX 130 #define TS_MINY 80 #define TS_MAXX 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 FEED_#defineCH_TOUCH 10 #menentukan MAXPRESSURE 1000

Kami melanjutkan dengan definisi beberapa makro.

//Associa o nome das cores aos valores koresponden#menentukan HITAM 0x0000 #menentukan MERAH 0xF800 #menentukan HIJAU 0x07E0 #menentukan CYAN 0x07FF #menentukan KUNING 0xFFE0 #menentukan PUTIH 0xFFFF //dados de lingkaran_jari-jari = 30 lingkaran lingkaran; const int lingkaran_x = 240; const int lingkaran_y = 125; //objeto untuk memanipulasi dos eventos de toque na tela Layar Sentuh ts = Layar Sentuh(XP, YP, XM, YM); //objeto untuk manipulasi da parte grafica SWTFT tft;

Langkah 8: Pengaturan

Dalam pengaturan, kami akan menginisialisasi objek kontrol grafis kami dan membuat konfigurasi pertama.

void setup() { Serial.begin(9600); //reset atau objeto da lib grafica tft.reset(); //inicializa objeto controlador da lib grafica tft.begin(); penundaan (500); //rotaciona a tela para landscape tft.setRotation(1); //pinta sebuah tela toda de preto tft.fillScreen(HITAM); //chama a função para iniciar nossas mengonfigurasi pengaturan awal(); }

Langkah 9: Putaran

Dalam loop, kami akan mengambil titik di mana kami menyentuh layar, dan melihat apakah sentuhan itu terjadi di salah satu gambar.

void loop() { TSPoint touchPoint = ts.getPoint();//pega o sentuh (x, y, z=tekan) 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 implikasi no X receber 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); //memverifikasi tekano tidak ada toque foi cukup jika (touchPoint.z > MINPRESSURE && touchPoint.z < MAXPRESSURE) { //verifikasi untuk memastikan tidak ada retangulo if(pointInRect(p)) { writeShape("Rect"); } //verifikasi agar tidak ada segitiga lain if(pointInsideTriangle(TSPoint(110, 150, 0), TSPoint(150, 100, 0), TSPoint(190, 150, 0), p)) { writeShape("Segitiga"); } //verifikasi agar tidak ada lingkaran lain if(pointInCircle(p)) { writeShape("Circle"); } } }

Langkah 10: Periksa Apakah Kita Menyentuh Lingkaran

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

/*Desenha na tela os elemen */ void initialSettings() { tft.setTextColor(WHITE); tft.setTextSize(TEXT_SIZE_S); tft.println("AKSES"); tft.setTextColor(KUNING); tft.setTextSize(TEXT_SIZE_M); tft.println("BLOG MEU"); tft.setTextColor(HIJAU); tft.setTextSize(TEXT_SIZE_L); tft.println("FERNANDOK. COM"); buatRect(); buatSegitiga(); buat Lingkaran(); tft.setCursor(FEEDBACK_LABEL_X, FEEDBACK_LABEL_Y); tft.setTextColor(CYAN); tft.setTextSize(TEXT_SIZE_L); tft.println("BENTUK: "); }

Langkah 11: Fungsi Membuat Bentuk Geometris

Kami membuat persegi panjang, segitiga, dan lingkaran dengan asal-usul yang kami tentukan.

//cria um retangulo com origem (x, y) = (10, 100)//lebar = 80 e tinggi = 50 void createRect() { tft.fillRect(10, 100, 80, 50, RED); tft.drawRect(10, 100, 80, 50, PUTIH); } //cria um triangulo com os simpul: //A = (110, 150); B = (150, 100); C = (190, 150) void 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 Apakah Kita Menyentuh Persegi Panjang

Fungsi ini memeriksa apakah titik berada di dalam persegi panjang.

//Função que verifica se o ponto está dentro do retângulobool pointInRect(TSPoint p) { //max/min X lakukan retangulo if(px >= 10 && px <= 90) { //max/min Y lakukan retangulo if(py = 100) { kembali benar; } } mengembalikan salah; }

Langkah 13: Periksa Apakah Kita Menyentuh Lingkaran

Ini sama dengan lingkaran.

//distancia entre pontos D = raiz((xb-xa)^2 + (yb-ya)^2)//vefifica se o ponto está dentro do circulo //se a jarak 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(jarak <= lingkaran_radius) { kembali benar; } kembali salah; }

Langkah 14: Periksa Apakah Kita Menyentuh Segitiga

Pemeriksaan yang sama pada titik juga terjadi di 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 = b,Area c(a); float ACP = segitigaLuas(a, c, p); float ABP = segitigaLuas(a, b, p); float CPB = segitigaLuas(c, p, b); if(ABC == ACP+ABP+CPB){ mengembalikan nilai true; } kembali salah; } // 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: Berfungsi untuk Mencetak Nama Objek yang Disentuh

Di sini kita menulis di layar nama sosok geometris yang digunakan.

//escreve na tela o nome da figura geométrica que foi tocadavoid writeShape(Bentuk string) { 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(PUTIH); tft.println(bentuk); }

Langkah 16: File

Unduh file:

SAYA TIDAK

PDF