Kalkulator Layar Sentuh Arduino: 7 Langkah

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

Halo! Ini adalah proyek untuk membuat kalkulator layar sentuh menggunakan Arduino Uno dan pelindung LCD TFT. Saya datang dengan konsep untuk kelas pemrograman homeschool saya, dan pengalaman dalam membangun proyek ini sangat menarik. Kalkulator ini dapat melakukan empat operasi matematika sederhana (penjumlahan, pengurangan, perkalian, dan pembagian). Ini juga menampilkan hingga dua titik desimal untuk jawaban pembagian yang memilikinya. Mari selami! Persediaan untuk proyek ini tercantum di bawah ini.

Perlengkapan

-Arduino Uno

- 2.4 TFT LCD Shield (di sini saya membelinya:

- Kabel USB A to B (kabel untuk menghubungkan Arduino ke komputer)

- Komputer dengan Arduino IDE terpasang

- Anda juga perlu mengunduh dua pustaka: MCUFRIEND_kbv dan Layar Sentuh. Yang pertama dapat Anda temukan di github (tautan: https://github.com/prenticedavid/MCUFRIEND_kbv) atau Anda dapat menggunakan file zip perpustakaan yang saya sertakan di bawah ini. Yang kedua ada di pengelola Perpustakaan Arduino untuk instalasi.

Langkah 1: Koneksi Perangkat Keras

Koneksi pelindung layar sentuh ke Arduino Uno sederhana dan cepat. Yang harus Anda lakukan adalah menyejajarkan pin terendah pada pelindung dengan pin terendah pada Arduino dan mendorong pelindung ke dalam pin. Pin 5V teratas dan pin yang tidak berlabel di sisi daya tidak boleh memiliki pin dari pelindung di dalamnya, dengan parameter yang sama berlaku untuk pin berlabel SCL dan SDA di sisi lain papan. Sekarang, kita siap untuk membuat kode!

Langkah 2: Kode: Definisi & Pengaturan Global

#termasuk

MCUFRIEND_kbv tft; // tetap terprogram untuk perisai UNO

#termasuk

#tentukan YP A3

#tentukan XM A2

#tentukan YM 9

#menentukan XP 8

Layar Sentuh ts = Layar Sentuh(XP, YP, XM, YM, 300);

#menentukan MINPRESSURE 10

Ini adalah awal dari kode, di mana kami menyertakan perpustakaan (MCUFRIEND_kbv & Layar Sentuh), menentukan pin X dan Y, mengatur parameter layar sentuh, dan menentukan tekanan minimum yang diperlukan Arduino untuk mendaftarkan pers pengguna.

int ID;

int pilihan_pengguna;

float save_number = 0;

mengambang istilah1;

int jumlah_op;

hasil mengambang;

int cursorLocX = 5;

int cursorLocY = 20;

Tepat sebelum penyiapan, kita perlu menyiapkan beberapa variabel global. ID membantu mengaktifkan dan menjalankan layar sentuh. user_selection menyimpan nomor yang sesuai dengan tombol yang dipilih pengguna saat menekan layar sentuh. save_number adalah variabel yang kami cetak ke layar setelah entri pengguna (lebih lanjut tentang ini di loop). Ini adalah float sehingga dapat menampung angka desimal dan juga bilangan bulat. term1 adalah variabel tempat angka pertama persamaan disimpan setelah operan dipilih. op_num menyimpan operan sebagai angka (1 untuk penambahan, 2 untuk pengurangan, 3 untuk perkalian, dan 4 untuk pembagian). result adalah variabel yang dicetak ke layar setelah pengguna menekan tanda sama dengan. Ini juga merupakan pelampung. cursorLocX dan cursorLocY adalah titik pemetaan pada layar sentuh di mana kursor diatur ke beberapa kali (terletak di bilah abu-abu di bagian atas, atau dikenal sebagai bidang hasil).

batalkan pengaturan(){

tft.reset();

ID = tft.readID();

tft.begin(ID);

tft.setRotation(0);

tft.fillScreen(TFT_DARKGREY);

kotak();

angka();

tft.setTextSize(3);

tft.setTextColor(TFT_BLUE, TFT_DARKGREY);

}

Fungsi pengaturan kami pertama-tama berisi inisialisasi untuk pelindung layar sentuh (baris 1-3). Orientasi perisai diatur menggunakan perintah tft.setRotation(), dengan 0 tegak. Seluruh layar berwarna abu-abu gelap dengan perintah tft.fillScreen(), yang akan kita tulis di atasnya (kecuali untuk bidang hasil). Fungsi squares() dan numbers() menggambar kotak kalkulator, mewarnai kotak hitam dan putih dalam pola kotak-kotak, dan menulis angka/operan pada kotak dengan warna biru. Kami akan membahasnya di langkah berikutnya. Perintah tft.setTextSize() menyetel ukuran teks bidang hasil ke 3, yang merupakan font sedang. Perintah tft.setTextColor() mengatur warna teks bidang hasil menjadi biru, yang ditulis di atas bidang abu-abu gelap.

Langkah 3: Kode: Loop

void loop() { nomorPilih();

penundaan(100);

if (pilihan_pengguna == 16){

;

}lain{

if (pilihan_pengguna < 10){

save_number = save_number * 10 + pilihan_pengguna;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(nomor_tersimpan);

}else if (pilihan_pengguna > 10){

beralih (pilihan_pengguna){

kasus 11:

op_num = 1;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("+");

istilah1 = nomor_tersimpan;

save_number = 0;

merusak;

kasus 12:

op_num = 2;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("- ");

istilah1 = nomor_tersimpan;

nomor_simpan = 0;

merusak;

kasus 13:

op_num = 3;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("X");

istilah1 = nomor_tersimpan;

nomor_simpan = 0;

merusak;

kasus 14:

op_num = 4;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("/ ");

istilah1 = nomor_tersimpan;

nomor_simpan = 0;

merusak;

kasus 15:

nomor_simpan = 0;

istilah1 = 0;

op_num = 0;

tft.setCursor(cursorLocX, cursorLocY);

tft.print("");

merusak;

}

tft.setCursor(cursorLocX, cursorLocY);

Ini banyak untuk dikunyah, jadi saya akan menjelaskan apa yang ada di atas. Kita mulai dengan memanggil fungsi numberSelect(), yang memberikan nomor ke setiap kotak di layar sentuh. Saat pengguna menekan salah satu kotak tersebut, fungsi menyetel variabel pilihan_pengguna ke nomor kotak. Pernyataan if pertama hanya dijalankan melalui loop jika pilihan pengguna yang valid telah dibuat. Jika ya, pernyataan if berikutnya menanyakan apakah user_selection memiliki angka kurang dari 10 yang tersimpan di dalamnya (angka 0-9). Jika ya, save_number dikalikan dengan 10 dan nomor di user_selection ditambahkan ke save_number, yang dicetak di bidang hasil pada layar sentuh. Jika tidak, pernyataan if berikutnya menanyakan apakah user_selection memiliki angka yang lebih besar dari 10 yang disimpan ke dalamnya (angka operan: 11 untuk +, 12 untuk -, 13 untuk X, 14 untuk /, dan 15 untuk kotak clear screen). Fungsi sakelar menangani setiap kasus (ditentukan oleh pilihan_pengguna). Variabel op_num diberi nomor yang sesuai dengan operan yang dipilih (1 untuk +, 2 untuk -, 3 untuk X, dan 4 untuk /). Nilai dalam save_number disimpan ke dalam variabel term1 sehingga variabel save_number dapat digunakan untuk paruh kedua persamaan. Simbol operan dicetak di layar bersama dengan menghapus angka apa pun di bidang hasil. Satu-satunya pengecualian adalah kotak layar yang jelas, yang mengatur ulang semua variabel perhitungan dan menghapus bidang hasil apa pun di dalamnya.

}lain{

beralih(op_num){

kasus 1:

hasil = term1 + save_number;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(ganda(hasil));

merusak;

kasus 2:

hasil = term1 - save_number;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(ganda(hasil));

merusak;

kasus 3:

hasil = term1 * save_number;

tft.setCursor(cursorLocX, cursorLocY);

tft.print(ganda(hasil));

merusak;

kasus 4:

hasil = float(term1) / float(saved_number);

tft.setCursor(cursorLocX, cursorLocY);

tft.print(hasil);

merusak;

}

tft.setCursor(cursorLocX, cursorLocY);

save_number = hasil;

istilah1 = 0;

jumlah_op = 0;

penundaan (1000);

}

}

}

Bagian terakhir dari loop berhubungan dengan kejadian pengguna memilih tanda sama dengan (user_selection == 10). Fungsi sakelar lain bekerja melalui empat fungsi matematika (ditentukan oleh op_num). Kasus tambahan (kasus 1) menambahkan term1 dan save_number bersama-sama dan menyimpan nomor ke dalam variabel hasil. Hasilnya dicetak ke bidang hasil sebagai ganda. Kasus pengurangan (kasus 2) mengurangi angka_simpan dari term1 dan menyimpan angka ke dalam variabel hasil. Hasilnya dicetak ke bidang hasil sebagai ganda. Kasus perkalian (kasus 3) mengalikan term1 dengan save_number dan menyimpan nomor ke dalam variabel hasil. Hasilnya dicetak ke bidang hasil sebagai ganda. Kasus pembagian (kasus 4) membagi term1 dengan nomor_simpan bersama-sama dan menyimpan nomor ke dalam variabel hasil. Hasilnya dicetak ke bidang hasil sebagai float (karena jawaban pembagian dapat berupa angka desimal). Setelah kejadian angka, operan, atau hasil dicetak ke layar, kursor direset, nomor_simpan diatur ke hasil sebelumnya, dan term1 & op_num direset.

Beberapa catatan: pengguna tidak dapat memasukkan angka desimal ke dalam kalkulator karena kurangnya kuadrat titik desimal. Selain itu, pengguna hanya dapat melakukan satu persamaan pada satu waktu. Anda tidak dapat menghitung hasil dan kemudian menambah/mengurangi/menggandakan/membagi hasil itu. Dalam fungsi numberSelect(), ada fungsi yang membersihkan layar setelah hasil dicetak jika pengguna menekan kotak lain.

Langkah 4: Kode: Fungsi Kotak

kotak kosong (){

// kotak hitam dan putih bergantian pada setiap baris dan baris pertama dan ketiga memiliki pola yang berlawanan dari baris kedua dan keempat

tft.fillRect(0, 60, 60, 65, TFT_BLACK); // baris pertama kotak dimulai, hitam ke putih tft.fillRect(60, 60, 60, 65, TFT_WHITE);

tft.fillRect(120, 60, 60, 65, TFT_BLACK);

tft.fillRect(180, 60, 60, 65, TFT_WHITE); // baris pertama kotak berakhir

tft.fillRect(0, 125, 60, 65, TFT_WHITE); // baris kedua kotak dimulai, putih ke hitam tft.fillRect(60, 125, 60, 65, TFT_BLACK);

tft.fillRect(120, 125, 60, 65, TFT_WHITE);

tft.fillRect(180, 125, 60, 65, TFT_BLACK); // baris kedua kotak berakhir

tft.fillRect(0, 190, 60, 65, TFT_BLACK); // baris ketiga kotak dimulai, hitam ke putih tft.fillRect(60, 190, 60, 65, TFT_WHITE);

tft.fillRect(120, 190, 60, 65, TFT_BLACK);

tft.fillRect(180, 190, 60, 65, TFT_WHITE); // baris ketiga kotak berakhir

tft.fillRect(0, 255, 60, 65, TFT_WHITE); // baris keempat kotak dimulai, putih ke hitam tft.fillRect(60, 255, 60, 65, TFT_BLACK);

tft.fillRect(120, 255, 60, 65, TFT_WHITE);

tft.fillRect(180, 255, 60, 65, TFT_BLACK); // baris keempat kotak berakhir

}

Fungsi squares() cukup mudah. Perintah tft.fillRect(X1, Y1, X2, Y2, TFT_COLOR) menggambar persegi panjang sesuai dengan parameter yang diteruskan ke sana, yaitu posisi pertama x dan y, posisi kedua x dan y, dan warna isi persegi panjang. Fungsi ini menggambar keempat baris kotak (secara teknis persegi panjang) dan mengisi setiap kotak dengan warna yang diberikan padanya.

Langkah 5: Kode: Fungsi Angka

nomor batal (){

tft.setTextColor(TFT_BLUE); // mengatur warna angka/karakter menjadi biru

tft.setTextSize(5); // menetapkan ukuran angka/karakter menjadi 5

tft.setCursor(18, 75); // set kursor untuk baris pertama angka/karakter

tft.print("7 8 9 /"); // mencetak baris pertama angka/karakter

tft.setCursor(18, 140); // set kursor untuk baris kedua angka/karakter

tft.print("4 5 6X"); // mencetak baris kedua angka/karakter

tft.setCursor(18, 205); // set kursor untuk baris ketiga angka/karakter

tft.print("1 2 3 -"); // mencetak baris ketiga angka/karakter

tft.setCursor(18, 270); // mengatur kursor untuk baris keempat angka/karakter

tft.print("C0 = +"); // mencetak baris keempat angka/karakter

}

Fungsi number() juga mudah. Dua baris pertama mengatur ukuran teks lebih besar dan warnanya menjadi biru. Perintah tft.setCursor() mengatur kursor ke posisi pada setiap baris tempat penulisan angka dimulai. Kemudian perintah tft.print() mencetak angka/karakter di atas kotak.

Langkah 6: Kode: Fungsi NumberSelect

nomor batalPilih(){

TSPoint p = ts.getPoint();

pinMode(XM, OUTPUT);

pinMode(YP, OUTPUT);

if (hal > TEKANAN MINIMAL){

p.x = peta(p.x, 250, 845, 0, 239);

p.y = peta(p.y, 245, 860, 0, 319);

jika (hasil != 0){

hasil = 0;

nomor_simpan = 0;

tft.print("HAPUS NILAI");

penundaan (500);

tft.setCursor(cursorLocX, cursorLocY);

tft.print("");

tft.setCursor(cursorLocX, cursorLocY);

}

Untuk memulai fungsi numberSelect(), kami meminta input pengguna dari layar sentuh dengan perintah ts.getPoint(). Setelah data dikumpulkan, kami memeriksa untuk melihat apakah tekanan minimum telah terlampaui (atau, dengan kata lain, jika pengguna telah menekan di suatu tempat di layar sentuh). Jika ya, koordinat x dan y dipetakan dari koordinat Cartesian ke koordinat khusus layar sentuh. (0, 0) adalah sudut kiri atas layar sentuh, dengan sumbu x melintang dan sumbu y turun. Bagian selanjutnya memeriksa untuk melihat apakah ada nomor yang disimpan dalam hasil. Jika ada, hasil dan nomor_tersimpan direset ke 0. Pesan "CLEAR VALUES" dicetak di atas bidang hasil, dan layar dibersihkan dengan kursor kembali ke posisi awal.

if (p.y 60){ // baris pertama kotak

jika (p.x < 60)

pilihan_pengguna = 7;

lain jika (p.x < 120)

pilihan_pengguna = 8;

lain jika (p.x < 180)

pilihan_pengguna = 9;

lain pilihan_pengguna = 14;

}else if (p.y 125){ // baris kedua kotak

jika (p.x < 60)

pilihan_pengguna = 4;

lain jika (p.x < 120)

pilihan_pengguna = 5;

lain jika (p.x < 180)

pilihan_pengguna = 6;

lain pilihan_pengguna = 13;

}else if (p.y 190){ // baris ketiga kotak

jika (p.x < 60)

pilihan_pengguna = 1;

lain jika (p.x < 120)

pilihan_pengguna = 2;

lain jika (p.x < 180)

pilihan_pengguna = 3;

lain pilihan_pengguna = 12;

}else if (p.y > 255){ // baris keempat kotak

jika (p.x < 60)

pilihan_pengguna = 15;

lain jika (p.x < 120)

pilihan_pengguna = 0;

lain jika (p.x < 180)

pilihan_pengguna = 10;

lain pilihan_pengguna = 11;

}

}lain{

pilihan_pengguna = 16; // user_selection disetel ke 16 (tidak ada variabel)

}

}

Ini adalah bagian yang menentukan tombol mana yang telah dipilih. Dimulai dengan baris atas kotak dan diakhiri dengan baris bawah, Arduino mencari di mana layar benar-benar ditekan. Ini kemudian memberikan angka pada kotak dan menyimpan angka itu ke dalam pilihan_pengguna. Angka 0-9 sesuai dengan kotak angka, angka 11-15 sesuai dengan kotak operan dan kotak kosong, dan angka 10 sesuai dengan kotak tanda sama dengan. Jika tidak ada kotak yang dipilih, maka user_selection diatur ke 16, yang akan membuat loop dimulai dari awal lagi (lihat fungsi loop).

Langkah 7: Nikmati Proyek Anda yang Sudah Selesai

Di sana Anda memilikinya! Anda sekarang memiliki kalkulator layar sentuh yang dapat melakukan penjumlahan, pengurangan, perkalian, dan pembagian. Proyek ini mengubah seluruh cara saya berpikir kalkulator bekerja. Saat saya mengerjakan proyek ini, saya ingat memberi tahu instruktur saya di kelas, "Saya tidak akan pernah melihat kalkulator dengan cara yang sama lagi!" Fungsi yang Anda anggap mudah sebagai pengguna agak sulit ketika Anda berada di belakang komputer mencoba meniru ide Anda. Saya harap Anda menikmati proyek ini, dan saya harap pola pikir Anda tentang cara kerja kalkulator juga telah diubah!

Berikut seluruh kode untuk kenyamanan Anda. Itu diisi dengan komentar jadi jika Anda memiliki masalah, mereka harus menunjukkan kepada Anda apa yang dilakukan setiap baris.