Introduction: Simple Interactive User Interface for Teaching and Evaluating.

This project was developed as part of an university class, the goal was to make a interactive system to teach and evaluate a certain topic. For it we used a Processing on a PC for the interface and an Arduino NANO for the arcade button and LEDs, so it's pretty simple.To teach, it offers an interface where a model is displayed and the user can click in each of the components to get a text description of it. However, to evaluate the user, it offers a puzzle-like problem, where the user has to drag and drop each part to build the corresponding model, and press a button to confirm their answer, then the LEDs on the button will tell the user if the answer is right or not.

The most common problem we ran into making this project was the communication between Processing and an Arduino as the latency of the connection could vary between computers, hindering the portability of the device. Also, you have to define the port on which the Arduino is connect every time, cause every USB device connected counts so you have to check on which COM it is.

Step 1: Programming the Interface on Processing (Setup).

We set up the variables that are going to be used, the position of all the parts as arrays of x and y cordinates, as well as arrays for the images of each of the parts for the Teach (imgA) and Evaluate (img) menus, an array to check if the answers are correct and arrays for the bovers and lockeds, which are gonna determine if the mouse is above the pieces and if it's trying to pick them up. Then proceed to initialize them and open the port from which the interface is going to communicate with the Arduino.

Step 2: Programming the Interface on Processing (Main Menu).

First, the main menu it's going to display two buttons, and when one of them gets pressed, the program is gonna load either the "Teach" menu or the "Evaluate" menu.

So when the mouse is pressed, and is above one of the buttons, it sends the positions of all the parts that the new menu needs and loads the other menu.

Step 3: Programming the Interface on Processing ("Teach" Menu).

Here, if the mouse is hovering one of the parts, it will activate the corresponding bover, which, if the mouse is pressed would activate the corresponding text and will display it on screen.

Step 4: Programming the Interface on Processing ("Evaluate" Menu).

Here is the same, it would activate the bovers, which, when the mouse is pressed would activate the lockeds but this time instead of displaying texts, it would drag the selected part. (This was based on the "Drag, Drop, and Hover with mouse." from processing.js )

Step 5: When the Mouse Is Pressed.

As stated earlier, when the mouse is pressed and a bover is "true", it would activate the corresponding locked.

Step 6: When the Mouse Is Dragged.

If the mouse is dragged, the actual menu is the evaluate menu and one of the lockeds is "true" it would drag the corresponding part alongside the mouse.

Step 7: When Mouse Is Released.

So if the mouse is released and still on the "Evaluate" menu, it would put the part that was being dragged on the spot where you need to build the model if it's close enough and would check if your answer is correct. Then it would reset all lockeds and texts to "false".

Step 8: Communicating With the Arduino.

So now if you press the button on the Arduino, it checks if you put all the right parts in place and tells you if it's right or wrong, then sends a "1" if it's right or a "2" if it's wrong to the Arduino.

Step 9: Setting Up the Arduino (Scheme)

This was the Scheme used for the arduino, but with an Arcade Button, so the green wire going to the button would go to the bottom connector on the button (COM) and the red wire would go to the middle one (NO). A 220Ω resistor was used for the LEDs, a 1kΩ for the button.

Step 10: Programming the Arduino

Now, it configures the button as INPUT on the digital pin 2 and the LEDs as OUTPUT on 4, 6 and 8. Then configures the Port and reads it, if it gets a "1" (correct answer) it would light up the 3 LEDs one by one, if it gets a "2" (wrong answer) it would light up just one of them. Also, if the button is pressed, it would send an "e" to the interface.

Step 11: That's All, Have Fun!

Here are the codes used for this project: