Antara Muka Pengguna Interaktif Mudah untuk Pengajaran dan Penilaian .: 11 Langkah

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

Projek ini dikembangkan sebagai sebahagian daripada kelas universiti, tujuannya adalah untuk membuat sistem interaktif untuk mengajar dan menilai topik tertentu. Untuk itu kami menggunakan Pemprosesan pada PC untuk antara muka dan Arduino NANO untuk butang arked dan LED, jadi cukup mudah. Untuk mengajar, ia menawarkan antara muka di mana model dipaparkan dan pengguna dapat mengklik setiap komponen untuk mendapatkan keterangan teks mengenainya. Namun, untuk menilai pengguna, ia menawarkan masalah seperti teka-teki, di mana pengguna harus menyeret dan melepaskan setiap bahagian untuk membina model yang sesuai, dan tekan butang untuk mengesahkan jawapan mereka, maka LED pada butang akan memberitahu pengguna jika jawapannya betul atau tidak.

Masalah yang paling biasa kami hadapi dalam membuat projek ini adalah komunikasi antara Pemrosesan dan Arduino kerana latensi sambungan dapat bervariasi antara komputer, sehingga hal ini mengganggu portabilitas peranti. Juga, anda harus menentukan port di mana Arduino disambungkan setiap kali, kerana setiap peranti USB disambungkan adalah penting sehingga anda harus memeriksa COM mana itu.

Langkah 1: Memprogram Interface pada Pemprosesan (Penyediaan)

Kami menetapkan pemboleh ubah yang akan digunakan, kedudukan semua bahagian sebagai susunan kordinat x dan y, serta susunan untuk gambar setiap bahagian untuk menu Ajar (imgA) dan Nilai (img), susunan untuk memeriksa apakah jawapannya betul dan susunan untuk penyusun dan pengunci, yang akan menentukan sama ada tetikus berada di atas kepingan dan jika ia cuba mengambilnya. Kemudian teruskan untuk memulakannya dan buka port dari mana antara muka akan berkomunikasi dengan Arduino.

Langkah 2: Memprogram Interface pada Pemprosesan (Menu Utama)

Pertama, menu utama akan menampilkan dua butang, dan ketika salah satu daripadanya ditekan, program akan memuat menu "Ajar" atau menu "Evaluate".

Oleh itu, apabila tetikus ditekan, dan berada di atas salah satu butang, ia menghantar kedudukan semua bahagian yang diperlukan oleh menu baru dan memuatkan menu lain.

Langkah 3: Memprogram Antaramuka pada Pemprosesan (Menu "Ajar")

Di sini, jika tetikus melayang salah satu bahagian, ia akan mengaktifkan bover yang sesuai, yang, jika tetikus ditekan akan mengaktifkan teks yang sesuai dan akan memaparkannya di layar.

Langkah 4: Memprogram Interface pada Pemprosesan (Menu "Evaluate")

Ini sama, ia akan mengaktifkan bovers, yang apabila tetikus ditekan akan mengaktifkan kunci tetapi kali ini, bukannya memaparkan teks, ia akan menyeret bahagian yang dipilih. (Ini berdasarkan "Seret, Jatuhkan, dan Arahkan dengan tetikus." Dari processing.js)

Langkah 5: Semasa Tetikus Ditekan

Seperti yang dinyatakan sebelumnya, ketika tetikus ditekan dan bover "benar", ia akan mengaktifkan kunci yang sesuai.

Langkah 6: Semasa Tetikus Diseret

Sekiranya tetikus diseret, menu sebenarnya adalah menu penilaian dan salah satu kunci adalah "benar", ia akan menyeret bahagian yang sesuai di samping tetikus.

Langkah 7: Semasa Tetikus Dilepaskan

Oleh itu, jika tetikus dilepaskan dan masih berada di menu "Evaluate", ia akan meletakkan bahagian yang diseret di tempat di mana anda perlu membuat model jika cukup dekat dan akan memeriksa apakah jawapan anda betul. Kemudian ia akan menetapkan semula semua kunci dan teks menjadi "false".

Langkah 8: Berkomunikasi dengan Arduino

Oleh itu, jika anda menekan butang di Arduino, ia akan memeriksa sama ada anda meletakkan semua bahagian yang betul dan memberitahu anda sama ada betul atau salah, kemudian menghantar "1" jika betul atau "2" jika salah ke Arduino.

Langkah 9: Menyiapkan Arduino (Skema)

Ini adalah Skema yang digunakan untuk arduino, tetapi dengan Tombol Arcade, jadi wayar hijau yang menuju ke butang akan menuju ke penyambung bawah pada butang (COM) dan wayar merah akan menuju ke tengah (TIDAK). Perintang 220Ω digunakan untuk LED, 1kΩ untuk butang.

Langkah 10: Memprogram Arduino

Sekarang, ia mengkonfigurasi butang sebagai INPUT pada pin digital 2 dan LED sebagai OUTPUT pada 4, 6 dan 8. Kemudian mengkonfigurasi Port dan membacanya, jika mendapat "1" (jawapan yang betul) ia akan menyala 3 LED satu persatu, jika mendapat "2" (jawapan salah) ia akan menyala hanya salah satu daripadanya. Juga, jika butang ditekan, ia akan mengirim "e" ke antara muka.

Langkah 11: Itu sahaja, Bersenang-senang

Berikut adalah kod yang digunakan untuk projek ini: