Einfache interaktive Benutzeroberfläche zum Lehren und Auswerten. - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:21

Dieses Projekt wurde im Rahmen einer Universitätsveranstaltung entwickelt, das Ziel war es, ein interaktives System zu erstellen, um ein bestimmtes Thema zu lehren und zu bewerten. Dafür haben wir ein Processing auf einem PC für die Schnittstelle und ein Arduino NANO für die Arcade-Taste und LEDs verwendet, also ist es ziemlich einfach. Zum Anlernen bietet es eine Schnittstelle, in der ein Modell angezeigt wird und der Benutzer in jede der Komponenten klicken kann um eine Textbeschreibung zu erhalten. Um den Benutzer zu bewerten, bietet es jedoch ein Puzzle-ähnliches Problem, bei dem der Benutzer jedes Teil per Drag & Drop ziehen muss, um das entsprechende Modell zu erstellen, und eine Taste drücken muss, um ihre Antwort zu bestätigen ob die Antwort richtig ist oder nicht.

Das häufigste Problem, auf das wir bei diesem Projekt stießen, war die Kommunikation zwischen Processing und einem Arduino, da die Latenz der Verbindung zwischen Computern variieren kann, was die Portabilität des Geräts behindert. Außerdem müssen Sie jedes Mal den Port definieren, an dem das Arduino angeschlossen ist, da jedes angeschlossene USB-Gerät zählt, also müssen Sie überprüfen, an welchem COM es sich befindet.

Schritt 1: Programmieren der Schnittstelle bei der Verarbeitung (Setup)

Wir richten die zu verwendenden Variablen, die Position aller Teile als Arrays von x- und y-Koordinaten sowie Arrays für die Bilder jedes der Teile für die Menüs Teach (imgA) und Evaluate (img) ein, ein Array, um zu überprüfen, ob die Antworten richtig sind, und Arrays für die Bovers und Lockeds, die bestimmen, ob sich die Maus über den Teilen befindet und ob sie versucht, sie aufzunehmen. Fahren Sie dann mit der Initialisierung fort und öffnen Sie den Port, von dem aus die Schnittstelle mit dem Arduino kommunizieren wird.

Schritt 2: Programmieren der Schnittstelle bei der Verarbeitung (Hauptmenü)

Zuerst zeigt das Hauptmenü zwei Tasten an, und wenn einer von ihnen gedrückt wird, lädt das Programm entweder das Menü "Teach" oder das Menü "Evaluate".

Wenn also die Maus gedrückt wird und sich über einer der Tasten befindet, sendet sie die Positionen aller Teile, die das neue Menü benötigt, und lädt das andere Menü.

Schritt 3: Programmieren der Schnittstelle bei der Verarbeitung (Menü „Teach“)

Wenn die Maus hier über einem der Teile schwebt, aktiviert sie den entsprechenden Überzug, der, wenn die Maus gedrückt wird, den entsprechenden Text aktiviert und auf dem Bildschirm anzeigt.

Schritt 4: Programmieren der Schnittstelle bei der Verarbeitung (Menü „Auswerten“)

Hier ist das gleiche, es würde die Bover aktivieren, die beim Drücken der Maus die Sperren aktivieren würden, aber diesmal anstelle von Texten den ausgewählten Teil ziehen würde. (Dies basierte auf dem "Drag, Drop und Hover with Mouse." von processing.js)

Schritt 5: Wenn die Maus gedrückt wird

Wie bereits erwähnt, wenn die Maus gedrückt wird und ein Bover "wahr" ist, würde dies die entsprechende Sperre aktivieren.

Schritt 6: Wenn die Maus gezogen wird

Wenn die Maus gezogen wird, ist das eigentliche Menü das Bewertungsmenü und eine der Sperren ist "wahr", es würde den entsprechenden Teil entlang der Maus ziehen.

Schritt 7: Wenn die Maus freigegeben wird

Wenn also die Maus losgelassen wird und sich immer noch im Menü "Auswerten" befindet, wird das gezogene Teil an die Stelle gelegt, an der Sie das Modell erstellen müssen, wenn es nahe genug ist, und überprüft, ob Ihre Antwort richtig ist. Dann würde es alle Sperren und Texte auf "false" zurücksetzen.

Schritt 8: Kommunikation mit dem Arduino

Wenn Sie also jetzt die Taste auf dem Arduino drücken, überprüft es, ob Sie alle richtigen Teile eingesetzt haben und sagt Ihnen, ob es richtig oder falsch ist, und sendet dann eine "1", wenn es richtig ist, oder eine "2", wenn es falsch ist Arduinos.

Schritt 9: Einrichten des Arduino (Schema)

Dies war das Schema, das für das Arduino verwendet wurde, jedoch mit einem Arcade-Knopf, sodass der grüne Draht zum Knopf zum unteren Anschluss des Knopfs (COM) und der rote Draht zum mittleren (NO) gehen würde. Für die LEDs wurde ein 220Ω Widerstand verwendet, für den Taster ein 1kΩ.

Schritt 10: Programmierung des Arduino

Jetzt konfiguriert es den Taster als INPUT auf dem digitalen Pin 2 und die LEDs als OUTPUT auf 4, 6 und 8. Dann konfiguriert er den Port und liest ihn, wenn er eine "1" (richtige Antwort) erhält, würde er die 3 aufleuchten LEDs nacheinander, wenn eine "2" (falsche Antwort) angezeigt wird, würde nur eine davon aufleuchten. Auch wenn die Schaltfläche gedrückt wird, würde sie ein "e" an die Schnittstelle senden.

Schritt 11: Das ist alles, viel Spaß

Hier sind die Codes, die für dieses Projekt verwendet wurden: