BluBerriSix - Tutorial Skrin Sentuh TFT / Arduino: 12 Langkah (dengan Gambar)

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

2019 adalah ulang tahun ke-20 RIM Blackberry 850! Penemuan Kanada kecil ini mengubah cara dunia berkomunikasi. Sudah lama berlalu, tetapi warisannya berterusan!

Dalam arahan ini, anda akan belajar bagaimana menggunakan pelindung paparan TFT 2.4 MCUfriend.com untuk Uno / Mega. Anda akan belajar bagaimana memaparkan objek grafik dan teks serta cara menerima sentuhan dan bertindak pada peristiwa sentuhan. Ini skrin sangat mirip dengan Adafruit dan perisai / skrin TFT yang lain. Oleh itu, jika anda berada di sini, ikuti rancangan ini.

Kami akan membina versi aplikasi sketsa bluBerriSIX 2 yang dipermudahkan.

Mari kita mulakan!

Langkah 1: BluBerriSIX - Gambaran Keseluruhan

Aplikasi bluBerriSIX adalah projek TFT enam fungsi.

Ia termasuk:

Lampu suluh

Aplikasi Saucy '7' (seperti Ball '8' Magic)

Sebuah kalkulator

Aplikasi Pengukuran Jarak menggunakan sensor jarak ultrasonik SR-04

Aplikasi Suhu dan Kelembapan yang juga melakukan log data masa nyata sehingga 1.5km dengan transceiver HC-12

Aplikasi SMS menggunakan HC-12.

Projek ini mengambil 1100 baris kod. Kami akan membina versi yang jauh lebih mudah yang masih menunjukkan konsep paparan dan penginderaan sentuhan TFT.

Langkah 2: Apa yang Diperlukan?

- An Arduino Uno atau Mega 2560

- Perisai TFT MCUfriend 2.4"

Perpustakaan berikut:

- Perpustakaan Adafruit_GFX

- Perpustakaan Skrin Sentuh Adafruit

- Perpustakaan MCUFRIEND_kbv

Perpustakaan ini boleh dipasang dengan Pengurus Perpustakaan di dalam Arduino IDE.

Untuk memuatkan perpustakaan, pergi ke Sketsa -> Sertakan Perpustakaan -> pilihan Urus Perpustakaan….

Di medan 'tapis carian anda …', masukkan beberapa watak pertama nama perpustakaan dan kemudian pilih dan pasang pustaka yang sesuai. Setelah selesai, balik sahaja dari skrin ini.

Semasa memasang perisai TFT pada Uno / Mega, HATI-HATI untuk memastikan anda meletakkan pin dengan betul. Saya tidak sejajar perisai pertama saya dan menggorengnya. Saya menghabiskan dua minggu kekecewaan yang semakin meningkat untuk mencari perpustakaan yang betul sebelum menyedari bahawa skrin sudah mati. BERHATI-HATI

Langkah 3: Projek Kami

Kami akan membina versi lakaran bluBerriSIX yang lebih mudah.

Ia akan ada, - skrin percikan

- skrin menu utama dengan dua butang

- aplikasi Saucy 7

- aplikasi kemasukan teks yang dipermudahkan

Anda juga dapat kembali ke menu utama dengan menekan ikon 'Home' di kiri bawah paparan ini. Sekiranya anda tidak mempunyai ikon seperti itu, anda hanya perlu menentukan kawasan 'rumah' di skrin anda. Anda akan belajar bagaimana menentukan kawasan sentuhan skrin dalam tutorial ini.

Walaupun ini adalah projek yang dipermudahkan, ia masih agak panjang. Saya akan memberikan versi lakaran Arduino di setiap peringkat utama supaya anda dapat memuat naiknya jika anda mahu.

Langkah 4: Kod Header, Pembolehubah Global, Penyediaan Skrin

Keseluruhan projek ini sangat didokumentasikan. Tetapi perinciannya mengikuti.

Mulakan projek Arduino baru dan panggilnya 'tft demo' atau nama lain yang anda mahukan.

Panel kod pertama di atas menunjukkan kita menentukan pemboleh ubah global. Kami juga menambah perpustakaan yang perlu kami gunakan untuk fungsi paparan skrin dan pengesanan sentuhan pada skrin.

Kami juga menentukan Pin Analog dengan merujuk kepada tujuan khusus skrin mereka.

Kami mendefinisikan objek tft (paparan) dan objek ts (sentuhan) sebagai rujukan untuk fungsi masing-masing.

Kami menentukan kira-kira pemalar warna 16 bit untuk memudahkan membuat warna untuk skrin dan objek teks dan grafik. Anda akan melihat ada URL ke laman web yang mempunyai Color Picker dan converter untuk menukar warna yang kelihatan kepada nilai heksadesimal 16 bit mereka. Ini alat yang sangat membantu.

Di panel kod kedua, kami menentukan pemboleh ubah global untuk tujuan khusus aplikasi kami.

Rentetan dan susunan cString, huruf dan hurufX dan hurufY digunakan untuk a) memaparkan huruf pada butang untuk aplikasi kemasukan teks dan b) memadankan koordinat x dan y sentuhan dengan koordinat x dan y setiap huruf masing-masing di papan kekunci. Lebih banyak mengenai perkara ini apabila kita sampai ke bahagian lakaran tersebut.

funcX , funcY dan func adalah tatasusunan yang berfungsi untuk menentukan butang aplikasi yang ditekan pada skrin menu utama dan kemudian menggunakan maklumat tersebut untuk melancarkan aplikasi masing-masing.

LastTouch dan tThresh digunakan dalam kaedah sentuhan untuk memastikan kita tidak mendapat banyak sentuhan daripada menekan skrin terlalu lama. Lebih lanjut mengenai itu kemudian.

Pemboleh ubah mod akan mengawal skrin mana yang dipaparkan dan pemboleh ubah tMode akan mengawal kaedah sentuhan yang digunakan pada waktu tertentu.

Dalam blok setup (), kita membuka saluran Serial sekiranya kita ingin menggunakan perintah Serial.println () untuk debug. Anda tidak memerlukan talian ini sekiranya anda tidak mahu melakukan debugging Serial Monitor.

Empat baris seterusnya hanyalah kod persediaan untuk objek tft.

Seterusnya kami menetapkan orientasi layar ke mod Potret.

Perintah randomSeed () hanya memulakan penjana nombor rawak untuk digunakan kemudian oleh aplikasi Saucy 7.

Akhirnya kami memanggil kaedah splash screen.

Langkah 5: Membangun Spash Screen dan Memahami Display Versus Touch Mapping

Kita sekarang akan mula membina spash screen.

Tetapi pertama, sila lihat gambar untuk pemetaan skrin dan sentuhan. Perhatikan bahawa asal-usul berada di lokasi yang berbeza. Untuk paparan, asal (0, 0) berada di kiri atas skrin (apabila butang RESET berada di atas) dan tumbuh dari kiri ke kanan dan dari atas ke bawah.

Untuk pengesanan sentuhan, asal berada di sudut kiri bawah skrin dan tumbuh dari kiri ke kanan dan bawah ke atas.

Oleh itu, TAMPILAN DAN PETA SENTUH DITETAPKAN SEPARUHNYA dan mempunyai resolusi yang berbeza. Layar mempunyai resolusi 240 x 320 dan sentuhan mempunyai resolusi yang jauh lebih tinggi seperti yang akan anda lihat.

Pergi ke kawasan lakaran anda di bawah kaedah loop () {} dan kami akan memasukkan kod kaedah splash ().

Kita mulakan dengan melakukan perintah fillScreen () untuk mengisi skrin dengan warna PUTIH yang kita tentukan dalam kod tajuk.

Kemudian kami menetapkan ukuran teks ke '5'. Ini adalah ukuran teks asas yang agak besar. Kami menetapkan kedudukan x dan y untuk kursor teks dan kami menetapkan warna teks. Akhirnya arahan cetak ("TFT") sebenarnya menarik teks bersaiz '5' berwarna biru pada kedudukan yang ditentukan.

Semasa anda meningkatkan saiz teks, anda akan melihat bahawa watak-watak semakin banyak. Oleh itu, melangkaui 5 mungkin tidak bermanfaat. Pada akhir tutorial ini, saya akan menunjukkan kepada anda cara menggunakan fon bitmap untuk mendapatkan teks yang lebih baik dalam aplikasi anda. Hasilnya ialah menggunakan set fon bitmap memerlukan banyak memori di Arduino anda yang akan membatasi ukuran lakaran anda

Kami mengulangi arahan serupa untuk dua item teks yang lain di skrin percikan.

Akhirnya kami menunda selama 2.5 saat untuk memberi pengguna peluang untuk membaca kandungan skrin sebelum aplikasi bergerak ke skrin menu utama.

Teruskan dan muat naik lakaran ini ke Arduino anda. Ia harus memaparkan skrin percikan.

Langkah 6: Membuat Alat Diagnostik Pemetaan Sentuh

Kaedah showTouch () sangat berguna untuk membantu anda mendapatkan koordinat sentuhan dari pelbagai bahagian skrin. Anda perlu melakukan ini untuk menentukan kawasan sentuhan untuk butang anda.

Teruskan dan masukkan kaedah ini di bawah kaedah percikan () yang anda lakukan sebelumnya.

Inilah cara ia berfungsi.

Pernyataan if menentukan apakah masa yang mencukupi telah berlalu sejak sentuhan terakhir. Ia memerlukan masa sistem milis semasa () dan mengurangkan masa TouchTouch terakhir. Sekiranya lebih besar daripada nilai tThresh (200 milisaat), ia akan menerima sentuhan. Jika tidak, ia akan mengabaikan peristiwa berbilang sentuhan yang tidak disengajakan.

Seterusnya, arahan getpoint () mendapat koordinat x, y dan z sentuhan. Koordinat z adalah ukuran tekanan sentuhan.

Sekiranya tekanan berada dalam pemalar maksimum dan min yang kita tentukan dalam tajuk sketsa, kaedahnya akan terlebih dahulu menukar pin YP dan XM kembali ke OUTPUT, meletakkan layar dalam mod TAMPILAN.

Seterusnya ia akan melukis sebuah segi empat tepat putih untuk menghapus sebarang koordinat yang mungkin pernah dipaparkan sebelumnya.

Sketsa kemudian menetapkan fon ke saiz 2, warna hitam dan memaparkan koordinat x (p.x) dan y (p.y) di skrin. Anda kemudian boleh membuat catatan lokasi-lokasi ini untuk membantu anda memprogram zon sentuhan anda untuk lakaran anda sendiri.

Pernyataan if di bahagian bawah kaedah memeriksa untuk melihat apakah butang 'Home' di layar ditekan. pengendali '<=' membenarkan lebar dan tinggi butang Laman Utama. Koordinat yang ditentukan adalah koordinat pusat-x dan pusat-y pada butang Laman Utama. Sekiranya ditekan, mod ditetapkan ke 0 yang akhirnya bermaksud 'Pergi ke Skrin Menu Utama'. Lebih lanjut mengenai itu kemudian.

Akhirnya kami mengemas kini lastTouch ke milis masa sistem semasa () untuk bersiap sedia untuk acara sentuhan kemudian.

Sekarang sila buka blok loop () dan tambahkan line showTouch ();

Pada ketika ini, muat naik lakaran anda dan cuba. Ia akan menarik skrin percikan dan jika anda mula menyentuh skrin, koordinat TOUCH x dan y akan dipaparkan di skrin.

Sebelum meneruskan, mari kita kunjungi dua baris kod penting:

pinMode (YP, OUTPUT); // pulihkan pin kawalan TFT

pinMode (XM, OUTPUT); // untuk paparan setelah mengesan sentuhan

Bila-bila masa anda ingin memaparkan sesuatu di layar, anda HARUS melaksanakan dua perintah ini untuk mengubah layar dari mod TOUCH ke mode DISPLAY. Jika tidak, arahan paparan anda tidak akan berfungsi.

Syabas setakat ini! Ambil rehat!

Langkah 7: Bina Skrin Menu Utama

Kami sekarang akan membina skrin Menu Utama kami dengan dua butang yang boleh anda tekan untuk mengaktifkan setiap aplikasi. Kaedah ini dipanggil menuScreen ().

Kita mulakan dengan meletakkan skrin dalam mod DISPLAY.

Kemudian kami menetapkan saiz, warna dan kedudukan fon dan mencetak teks 'Menu Utama'.

Kami sekarang melukis dua segi empat tepat iaitu butang.

Semua arahan grafik mempunyai struktur yang serupa:

graphicShape (koordinat x, koordinat y, lebar, tinggi, WARNA)

- koordinat x - kiri atas untuk objek segi empat tepat, tengah bulatan

- koordinat y - kiri atas untuk objek segi empat tepat, tengah bulatan

- lebar - lebar objek dalam piksel

- WARNA - pemalar warna yang kita tentukan dalam tajuk

Akhirnya kami memanggil dua kaedah untuk melukis ikon Saucy 7 dan ikon QWERTY Text Entry. Itu adalah kaedah yang berasingan.

Kaedah draw7icon (0) mengambil parameter integer yang merupakan y-offset untuk menggambar bola. Kami melakukan ini supaya kami dapat menggunakan kaedah yang sama untuk menarik bola di layar menu DAN di skrin aplikasi Saucy 7. Offset hanya membolehkan kita mengatur koordinat y bola ke atas atau ke bawah.

Kaedah draw7Ball (0) dipanggil dari dalam draw7Icon (0). Ini juga memerlukan parameter yang memungkinkan kita menyesuaikan posisi vertikal bola bergantung pada apakah kita menggambarnya di layar menu atau di layar aplikasi.

Perintah fillCircle () mengambil 4 argumen.

- x koordinat pusat bulatan

- koordinat y pusat bulatan

- jejari bulatan (dalam piksel)

- WARNA - pemalar warna yang kita tentukan dalam tajuk

Akhirnya kaedah drawTextIcon () dipanggil untuk melukis ikon untuk aplikasi Entri Teks.

Anda boleh mencuba menjalankan kaedah dengan memberi komen kaedah splash () dalam setup () dan menambahkan menuScreen ().

Muat naik lakaran ke Arduino anda dan cubalah!

Langkah 8: Aplikasi Saucy 7 dan Kaedah Menu Utama

Kaedah sevenScreen () akan menarik layar untuk aplikasi, termasuk menggambar bola dan kemudian memaparkan arahannya.

Kaedah sevenInstr () memaparkan arahan serta membersihkan skrin dari respons sebelumnya. Ia juga menarik butang 'Response'.

Kaedah show7Response () menangani membersihkan kaedah respons sebelumnya dari layar, memaparkan mesej 'berfikir …' animasi dan kemudian memaparkan mesej respons yang dipilih secara rawak.

read7Touch () adalah kaedah yang menunggu peristiwa sentuhan untuk menghasilkan mesej yang dihasilkan secara rawak. Kod sentuhan sangat serupa dengan kaedah diagnostik showTouch () yang dijelaskan sebelumnya. Untuk kesederhanaan, kaedah ini akan menerima sentuhan di mana sahaja di skrin sebagai sentuhan butang 'Respond'.

Di bahagian atas kaedah, kami menentukan susunan rentetan rentetan yang merupakan mesej yang dapat dihasilkan dari peristiwa sentuhan.

Sekiranya butang Utama ditekan, ia akan menghentikan aplikasi dan kembali ke skrin menu utama. Jika tidak, kaedah ini akan menghasilkan nombor rawak antara 0 dan 7 (eksklusif) dan menyampaikan mesej teks yang sesuai dari array respons ke kaedah show7Response ().

Akhirnya, kaedah backToMenu () memerhatikan sentuhan butang Utama dan mengembalikan kawalan ke skrin menu utama.

Kaedah readMenuTouch () menyaksikan peristiwa sentuhan semasa anda berada di skrin menu utama. Apabila sentuhan dikesan, ia meneruskan koordinat x dan y ke kaedah getFunc (x, y) yang kelihatan dalam array funcX dan funcY agar sesuai dengan koordinat x dan y sentuhan. Ia kemudian mengembalikan nombor dari array func untuk aplikasi yang dipilih. '1' adalah Saucy 7 dan '2' adalah aplikasi memasukkan teks. Ia kemudian menetapkan mod ke nilai aplikasi itu sehingga aplikasi akan dijalankan.

Langkah 9: Blok Gelung ()

Kami sekarang akan mula membina kod blok loop () untuk menangani memaparkan skrin yang sesuai dan kemudian memanggil kaedah sentuhan yang sesuai berdasarkan pilihan yang sedang dipilih.

Kaedah gelung () terdiri daripada dua struktur () struktur.

Struktur suis atas mengendalikan paparan skrin yang sesuai bergantung pada pilihan mana yang dipilih. Ia juga menetapkan nilai tMode untuk kaedah sentuhan yang sesuai untuk menjalankan pilihan yang dipilih sekarang. Akhirnya ia menetapkan nilai mod ke 9 supaya skrin paparan tidak digambar semula tanpa henti.

Struktur suis bawah mengawal kaedah sentuhan yang dijalankan berdasarkan pilihan aplikasi yang dipilih pengguna seperti yang ditunjukkan oleh nilai tMode.

Muatkan lakaran ke Arduino anda dan anda seharusnya dapat memilih dan menggunakan aplikasi Saucy 7.

Anda telah melakukan banyak kerja! Ambil rehat:-)

Langkah 10: Aplikasi Entri Teks - Kami berada di Home Stretch

Kami sekarang akan menggabungkan kaedah aplikasi kemasukan teks.

makeKbd () menarik papan kekunci di skrin.

Ia melukis enam segi empat bulat yang diisi dan kemudian melampirkan huruf yang sesuai pada setiap 'kunci' dengan mendapatkan huruf dari rentetan cString yang dicetaknya di atas skrin di atas kunci. Perhatikan bahawa parameter terakhir kedua dalam perintah fillRoundedRect () adalah jejari setiap sudut dalam piksel. Semakin tinggi nilai ini, semakin banyak sudut.

Kaedah readKbdTouch () berfungsi serupa dengan kaedah pengesanan sentuhan yang lain.

Sekiranya sentuhan dikesan yang BUKAN pada butang Laman Utama, ia meneruskan koordinat x dan y ke kaedah curChar (x, y) yang mengembalikan watak yang sesuai dengan lokasi x dan y di skrin. Mesej yang telah 'diketik' kemudian ditampilkan di layar menggunakan metode 'displayMsg (theChar).

Kaedah curChar (x, y) mencari susunan hurufX dan hurufY untuk mencuba mencari padanan yang hampir dengan koordinat x dan y yang dilalui dari readKbdTouch (). Sekiranya ia menemui padanan, ia akan mengembalikan surat yang sesuai dengan kaedah readKbdTouch. Perhatikan bahawa kita menginisialisasi pembolehubah Char ke 32 yang merupakan kod ASCII untuk watak ruang, . Kami melakukan ini supaya jika pengguna menyentuh kawasan yang jauh dari papan kekunci, ia tidak akan menampilkan watak yang tidak tersedia.

Kaedah displayMsg (theChar) mengambil watak yang dikembalikan dari curChar (x, y) dan menambahkannya ke rentetan msg. Kemudian memaparkan mesej di skrin.

Akhirnya, kami akan mengemas kini blok gelung () untuk menerima pilihan aplikasi kemasukan teks.

Muat naik lakaran tftDemo ke Arduino anda dan anda seharusnya dapat menggunakan aplikasi yang telah siap.

Tahniah! anda telah membina aplikasi skrin sentuh TFT! Ambil cuti selebihnya!

Langkah 11: Gettin 'Slick! - Menggunakan Adafruit Bitmap Font dalam Sketsa Anda

Set fon tft standard tidak mengapa. Tetapi lebih baik jika kita dapat menggunakan fon bitmap yang tepat dalam lakaran TFT kita.

Kelemahannya ialah memuatkan set fon ke dalam memori Arduino memerlukan banyak ruang. Sebenarnya, sangat mudah untuk mengisi lakaran anda dengan begitu banyak fon sehingga tidak akan dimuatkan ke dalam Arduino.

Fon terdapat di dalam folder perpustakaan Adafruit_GFX yang telah anda pasangkan untuk projek ini. Tutorial yang sangat baik untuk menggunakan fon terdapat di laman web ini.

Di kawasan Header lakaran anda, tambahkan rujukan fon untuk font yang ingin anda gunakan. Kami akan menggunakan fon FreeSerifBoldItalic18p7b untuk contoh ini.

#sertakan

Dalam kaedah percikan anda (), komen tft.setTextSize (); arahan.

Tambahkan arahan berikut,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Sekarang sebarang arahan cetak () akan menggunakan fon yang ditentukan sekarang. Untuk menukar ke fon yang lain, anda akan menggunakan perintah tft.setFont () yang lain dengan fon seterusnya yang ingin anda gunakan.

Untuk menetapkan kembali fon ke fon tft standard, cukup gunakan tft.setFont (); arahan tanpa parameter.

Muat naik lakaran ke Arduino anda dan anda akan melihat skrin percikan kini menggunakan fon bitmap untuk membuat teks di layar. Anda akan melihat bahawa ukuran lakaran jauh lebih besar sekarang setelah anda memasukkan fon.

Langkah 12: Pemikiran Akhir

Terdapat banyak arahan objek grafik lain yang tersedia untuk anda. Ia merangkumi:

tft.drawRect (x, y, lebar, tinggi, WARNA);

tft.drawLine (x1, y1, x2, y2, WARNA);

Contoh berikut menggunakan kaedah tft.color565 untuk membolehkan anda menentukan warna berdasarkan nilai merah, hijau dan biru. Ini adalah kaedah alternatif untuk menggunakan nilai warna HEX yang ditentukan secara tetap yang kami gunakan dalam lakaran kami.

tft.drawRoundRect (x, y, lebar, tinggi, jejari, tft.color565 (255, 0, 0)); // ini akan menjadi merah

tft.drawCircle (x, y, radius, tft.color565 (0, 255, 0)); // ini akan menjadi hijau

tft.drawTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (0, 0, 255)); // biru

tft.fillTriangle (vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565 (255, 0, 0);

Mainkan perintah ini dan terokai bagaimana ia dapat ditambahkan ke projek TFT anda.

Belajar menggunakan skrin TFT memang mencabar dan anda harus bangga dengan meluangkan masa untuk mempelajari langkah-langkah pertama ini.

Skrin TFT dapat menambahkan aspek antara muka pengguna grafik yang menarik dan berguna untuk projek Arduino anda.

Terima kasih kerana berjaya mengikuti tutorial ini.

SEKARANG PERGI KELUAR DAN JADIKAN SESUATU YANG SANGAT MENYUKAI!