Öğretme ve Değerlendirme için Basit Etkileşimli Kullanıcı Arayüzü.: 11 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:21

Bu proje bir üniversite sınıfının parçası olarak geliştirildi, amaç belirli bir konuyu öğretmek ve değerlendirmek için etkileşimli bir sistem yapmaktı. Bunun için arayüz için bir PC'de İşleme ve arcade düğmesi ve LED'ler için bir Arduino NANO kullandık, bu yüzden oldukça basit. Öğretmek için, bir modelin görüntülendiği ve kullanıcının bileşenlerin her birine tıklayabildiği bir arayüz sunar. bunun bir metin açıklamasını almak için. Bununla birlikte, kullanıcıyı değerlendirmek için, kullanıcının ilgili modeli oluşturmak için her bir parçayı sürükleyip bırakması ve cevabını onaylamak için bir düğmeye basması gereken bulmaca benzeri bir sorun sunar, ardından düğmedeki LED'ler kullanıcıya söyleyecektir. cevabın doğru olup olmadığı.

Bu projeyi yaparken karşılaştığımız en yaygın sorun, Bağlantının gecikme süresi bilgisayarlar arasında değişebileceğinden ve cihazın taşınabilirliğini engelleyebileceğinden İşleme ile Arduino arasındaki iletişimdi. Ayrıca, her seferinde Arduino'nun bağlanacağı portu tanımlamanız, bağlı her USB cihazının sayılması için hangi COM olduğunu kontrol etmeniz gerekir.

Adım 1: Arayüzü İşlemede Programlama (Kurulum)

Öğret (imgA) ve Değerlendir (img) menüleri için kullanılacak değişkenleri, x ve y koordinatlarının dizileri olarak tüm parçaların konumunu ve ayrıca her bir parçanın görüntüleri için dizileri ayarladık., cevapların doğru olup olmadığını kontrol etmek için bir dizi ve farenin parçaların üzerinde olup olmadığını ve onları almaya çalışıp çalışmadığını belirleyecek olan bovers ve kilitler için diziler. Ardından bunları başlatmaya devam edin ve arayüzün Arduino ile iletişim kuracağı bağlantı noktasını açın.

Adım 2: Arayüzü İşlemede Programlama (Ana Menü)

İlk olarak ana menüde iki buton görüntülenecek ve bunlardan birine basıldığında program ya "Öğret" menüsünü ya da "Değerlendir" menüsünü yükleyecektir.

Böylece fareye basıldığında ve düğmelerden birinin üzerindeyken, yeni menünün ihtiyaç duyduğu tüm parçaların konumlarını gönderir ve diğer menüyü yükler.

Adım 3: Arayüzün İşleme Üzerinde Programlanması ("Öğretme" Menüsü)

Burada, fare parçalardan birinin üzerine geliyorsa, fareye basılırsa ilgili metni etkinleştirecek ve ekranda görüntüleyecek olan ilgili üst üste gelmeyi etkinleştirecektir.

Adım 4: Arayüzü İşlemede Programlama ("Değerlendir" Menüsü)

Burada da aynısı, fareye basıldığında kilitleri etkinleştiren ancak bu sefer metinleri göstermek yerine seçilen kısmı sürükleyen bover'ları etkinleştirir. (Bu işlem, process.js'deki "Sürükle, Bırak ve Fareyle Üzerine Gel"e dayanmaktadır)

Adım 5: Fareye Basıldığında

Daha önce belirtildiği gibi, fareye basıldığında ve bir atlama "doğru" olduğunda, ilgili kilidi etkinleştirir.

Adım 6: Fare Sürüklendiğinde

Fare sürüklenirse, asıl menü değerlendirme menüsüdür ve kilitlerden biri "doğru" ise, ilgili kısmı farenin yanına sürükleyecektir.

Adım 7: Fare Serbest Bırakıldığında

Bu nedenle, fare serbest bırakılır ve hala "Değerlendir" menüsündeyse, sürüklenen parçayı, modeli oluşturmanız gereken yere, yeterince yakınsa koyar ve cevabınızın doğru olup olmadığını kontrol eder. Ardından tüm kilitleri ve metinleri "yanlış" olarak sıfırlar.

Adım 8: Arduino ile İletişim Kurmak

Şimdi Arduino'daki düğmeye basarsanız, tüm doğru parçaları yerlerine yerleştirip yerleştirmediğinizi kontrol eder ve doğru mu yanlış mı olduğunu söyler, ardından doğruysa "1", yanlışsa "2" gönderir. Arduino.

Adım 9: Arduino'yu Ayarlama (Şema)

Bu, arduino için kullanılan Şemaydı, ancak bir Arcade Düğmesi ile, bu nedenle düğmeye giden yeşil kablo, düğmedeki (COM) alt konektöre gidecek ve kırmızı kablo ortadaki (HAYIR) gidecekti. LED'ler için 220Ω direnç, düğme için 1kΩ direnç kullanıldı.

Adım 10: Arduino'yu Programlama

Şimdi dijital pin 2'deki butonu GİRİŞ ve 4, 6 ve 8'deki LED'leri OUTPUT olarak konfigüre ediyor. LED'ler tek tek, "2" (yanlış cevap) gelirse sadece bir tanesi yanacaktır. Ayrıca butona basılırsa arayüze bir "e" gönderecektir.

Adım 11: Hepsi Bu, İyi Eğlenceler

İşte bu proje için kullanılan kodlar: