Interfață de utilizator interactivă simplă pentru predare și evaluare .: 11 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:46

Acest proiect a fost dezvoltat ca parte a unei clase universitare, scopul a fost de a crea un sistem interactiv pentru a preda și evalua un anumit subiect. Pentru aceasta am folosit o procesare pe un PC pentru interfață și un Arduino NANO pentru butonul arcade și LED-uri, deci este destul de simplu. pentru a obține o descriere text a acestuia. Cu toate acestea, pentru a evalua utilizatorul, acesta oferă o problemă asemănătoare unui puzzle, în care utilizatorul trebuie să tragă și să fixeze fiecare parte pentru a construi modelul corespunzător și să apese un buton pentru a-și confirma răspunsul, apoi LED-urile de pe buton îi vor spune utilizatorului dacă răspunsul este corect sau nu.

Cea mai comună problemă pe care am întâmpinat-o la realizarea acestui proiect a fost comunicarea dintre procesare și un Arduino, deoarece latența conexiunii ar putea varia între computere, împiedicând portabilitatea dispozitivului. De asemenea, trebuie să definiți portul pe care se conectează Arduino de fiecare dată, pentru că fiecare dispozitiv USB conectat contează, deci trebuie să verificați ce COM este.

Pasul 1: Programarea interfeței la procesare (configurare)

Am setat variabilele care urmează să fie utilizate, poziția tuturor părților ca tablouri de coordonate x și y, precum și tablouri pentru imaginile fiecărei părți pentru meniurile Teach (imgA) și Evaluare (img), o matrice pentru a verifica dacă răspunsurile sunt corecte și tablouri pentru bovers și blocate, care vor determina dacă mouse-ul este deasupra pieselor și dacă încearcă să le ridice. Apoi continuați să le inițializați și deschideți portul din care interfața va comunica cu Arduino.

Pasul 2: Programarea interfeței la procesare (Meniul principal)

În primul rând, meniul principal va afișa două butoane și, atunci când unul dintre ele este apăsat, programul va încărca fie meniul „Predă”, fie meniul „Evaluează”.

Deci, atunci când mouse-ul este apăsat și se află deasupra unuia dintre butoane, acesta trimite pozițiile tuturor părților de care are nevoie noul meniu și încarcă celălalt meniu.

Pasul 3: Programarea interfeței la procesare (meniul „Predare”)

Aici, dacă mouse-ul se deplasează pe una dintre părți, va activa bover-ul corespunzător, care, dacă este apăsat mouse-ul, va activa textul corespunzător și îl va afișa pe ecran.

Pasul 4: Programarea interfeței la procesare (meniul „Evaluare”)

Aici este același lucru, ar activa bover-urile, care, atunci când este apăsat mouse-ul, ar activa blocatele, dar de această dată, în loc să afișeze texte, ar trage partea selectată. (Aceasta s-a bazat pe „Trageți, plasați și plasați cu mouse-ul peste mouse.” Din processing.js)

Pasul 5: Când este apăsat mouse-ul

După cum sa menționat mai devreme, atunci când mouse-ul este apăsat și un bover este „adevărat”, acesta va activa blocajul corespunzător.

Pasul 6: Când mouse-ul este glisat

Dacă mouse-ul este glisat, meniul actual este meniul de evaluare și unul dintre blocate este „adevărat”, acesta ar trage partea corespunzătoare alături de mouse.

Pasul 7: Când este lansat mouse-ul

Deci, dacă mouse-ul este eliberat și se află încă în meniul „Evaluare”, ar pune partea care a fost târâtă la locul unde trebuie să construiți modelul dacă este suficient de aproape și ar verifica dacă răspunsul dvs. este corect. Apoi, ar reseta toate mesajele blocate și textele la „fals”.

Pasul 8: Comunicarea cu Arduino

Deci, acum, dacă apăsați butonul de pe Arduino, acesta verifică dacă ați pus toate piesele potrivite și vă spune dacă este corect sau greșit, apoi trimite un "1" dacă este corect sau un "2" dacă este greșit la Arduino.

Pasul 9: Configurarea Arduino (Scheme)

Aceasta a fost Schema utilizată pentru arduino, dar cu un buton Arcade, astfel încât firul verde care se îndreaptă spre buton se va duce la conectorul inferior al butonului (COM), iar firul roșu ar merge la cel din mijloc (NU). Pentru LED-uri a fost utilizat un rezistor de 220Ω, un buton de 1kΩ.

Pasul 10: Programarea Arduino

Acum, configurează butonul ca INPUT pe pinul digital 2 și LED-urile ca OUTPUT pe 4, 6 și 8. Apoi configurează portul și îl citește, dacă primește un "1" (răspuns corect), acesta ar aprinde 3 LED-uri unul câte unul, dacă primește un „2” (răspuns greșit), ar aprinde doar unul dintre ele. De asemenea, dacă butonul este apăsat, acesta va trimite un „e” la interfață.

Pasul 11: Asta e tot, distrează-te

Iată codurile utilizate pentru acest proiect: