Antarmuka Pengguna Interaktif Sederhana untuk Mengajar dan Mengevaluasi.: 11 Langkah

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

Proyek ini dikembangkan sebagai bagian dari kelas universitas, tujuannya adalah untuk membuat sistem interaktif untuk mengajar dan mengevaluasi topik tertentu. Untuk itu kami menggunakan Pemrosesan pada PC untuk antarmuka dan Arduino NANO untuk tombol arcade dan LED, jadi cukup sederhana. Untuk mengajar, ia menawarkan antarmuka tempat model ditampilkan dan pengguna dapat mengklik di setiap komponen untuk mendapatkan deskripsi teks tentangnya. Namun, untuk mengevaluasi pengguna, ia menawarkan masalah seperti teka-teki, di mana pengguna harus menarik dan melepas setiap bagian untuk membangun model yang sesuai, dan menekan tombol untuk mengonfirmasi jawaban mereka, kemudian LED pada tombol akan memberi tahu pengguna apakah jawabannya benar atau tidak.

Masalah paling umum yang kami hadapi dalam membuat proyek ini adalah komunikasi antara Processing dan Arduino karena latensi koneksi dapat bervariasi antar komputer, menghambat portabilitas perangkat. Juga, Anda harus menentukan port di mana Arduino terhubung setiap kali, karena setiap perangkat USB yang terhubung diperhitungkan sehingga Anda harus memeriksa COM mana.

Langkah 1: Pemrograman Antarmuka pada Pemrosesan (Pengaturan)

Kami mengatur variabel yang akan digunakan, posisi semua bagian sebagai array koordinat x dan y, serta array untuk gambar masing-masing bagian untuk menu Teach (imgA) dan Evaluate (img), sebuah array untuk memeriksa apakah jawabannya benar dan array untuk bos dan kunci, yang akan menentukan apakah mouse berada di atas potongan dan apakah mouse mencoba mengambilnya. Kemudian lanjutkan untuk menginisialisasi dan membuka port dari mana antarmuka akan berkomunikasi dengan Arduino.

Langkah 2: Pemrograman Antarmuka pada Pemrosesan (Menu Utama)

Pertama, menu utama akan menampilkan dua tombol, dan ketika salah satunya ditekan, program akan memuat menu "Teach" atau menu "Evaluate".

Jadi ketika mouse ditekan, dan berada di atas salah satu tombol, ia mengirimkan posisi semua bagian yang dibutuhkan menu baru dan memuat menu lainnya.

Langkah 3: Memprogram Antarmuka pada Pemrosesan (Menu "Ajarkan")

Di sini, jika mouse mengarahkan salah satu bagian, itu akan mengaktifkan kursor yang sesuai, yang jika mouse ditekan akan mengaktifkan teks yang sesuai dan akan menampilkannya di layar.

Langkah 4: Memprogram Antarmuka pada Pemrosesan (Menu "Evaluasi")

Ini sama, itu akan mengaktifkan bos, yang, ketika mouse ditekan akan mengaktifkan penguncian tetapi kali ini alih-alih menampilkan teks, itu akan menyeret bagian yang dipilih. (Ini didasarkan pada "Seret, Jatuhkan, dan Arahkan dengan mouse." dari processing.js)

Langkah 5: Saat Mouse Ditekan

Seperti yang dinyatakan sebelumnya, ketika mouse ditekan dan kursor "benar", itu akan mengaktifkan penguncian yang sesuai.

Langkah 6: Saat Mouse Diseret

Jika mouse diseret, menu sebenarnya adalah menu evaluasi dan salah satu kunci adalah "benar" itu akan menyeret bagian yang sesuai di samping mouse.

Langkah 7: Saat Mouse Dilepas

Jadi jika mouse dilepaskan dan masih pada menu "Evaluate", itu akan menempatkan bagian yang diseret di tempat di mana Anda perlu membangun model jika cukup dekat dan akan memeriksa apakah jawaban Anda benar. Kemudian itu akan mengatur ulang semua kunci dan teks ke "salah".

Langkah 8: Berkomunikasi Dengan Arduino

Jadi sekarang jika Anda menekan tombol pada Arduino, ia memeriksa apakah Anda meletakkan semua bagian yang benar di tempatnya dan memberi tahu Anda apakah itu benar atau salah, kemudian mengirimkan "1" jika itu benar atau "2" jika itu salah ke Arduino.

Langkah 9: Menyiapkan Arduino (Skema)

Ini adalah Skema yang digunakan untuk arduino, tetapi dengan Tombol Arcade, jadi kabel hijau yang menuju ke tombol akan menuju ke konektor bawah pada tombol (COM) dan kabel merah akan menuju ke yang tengah (TIDAK). Sebuah resistor 220Ω digunakan untuk LED, 1kΩ untuk tombol.

Langkah 10: Pemrograman Arduino

Sekarang, ia mengkonfigurasi tombol sebagai INPUT pada pin digital 2 dan LED sebagai OUTPUT pada 4, 6 dan 8. Kemudian mengkonfigurasi Port dan membacanya, jika mendapat "1" (jawaban benar) itu akan menyala 3 LED satu per satu, jika mendapat "2" (jawaban salah) akan menyala salah satunya. Juga, jika tombol ditekan, itu akan mengirim "e" ke antarmuka.

Langkah 11: Itu Saja, Bersenang-senanglah

Berikut adalah kode yang digunakan untuk proyek ini: