Interfaz de usuario interactiva simple para enseñar y evaluar: 11 pasos

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:44

Este proyecto fue desarrollado como parte de una clase universitaria, el objetivo era hacer un sistema interactivo para enseñar y evaluar un determinado tema. Para ello usamos un Processing en una PC para la interfaz y un Arduino NANO para el botón arcade y los LED, por lo que es bastante simple, para enseñar, ofrece una interfaz donde se muestra un modelo y el usuario puede hacer clic en cada uno de los componentes. para obtener una descripción de texto. Sin embargo, para evaluar al usuario, ofrece un problema similar a un rompecabezas, donde el usuario tiene que arrastrar y soltar cada parte para construir el modelo correspondiente, y presionar un botón para confirmar su respuesta, luego los LED en el botón le dirán al usuario si la respuesta es correcta o no.

El problema más común con el que nos encontramos al realizar este proyecto fue la comunicación entre Processing y un Arduino, ya que la latencia de la conexión podía variar entre las computadoras, lo que dificultaba la portabilidad del dispositivo. Además, debe definir el puerto en el que se conecta el Arduino cada vez, porque cada dispositivo USB conectado cuenta, por lo que debe verificar en qué COM es.

Paso 1: Programación de la interfaz en procesamiento (configuración)

Configuramos las variables que se van a utilizar, la posición de todas las partes como arreglos de coordenadas xey, así como arreglos para las imágenes de cada una de las partes para los menús Enseñar (imgA) y Evaluar (img), una matriz para verificar si las respuestas son correctas y matrices para los bovers y lockeds, que determinarán si el mouse está por encima de las piezas y si está tratando de recogerlas. Luego proceda a inicializarlos y abra el puerto desde el cual la interfaz se va a comunicar con el Arduino.

Paso 2: Programación de la interfaz en procesamiento (menú principal)

Primero, el menú principal mostrará dos botones, y cuando se presione uno de ellos, el programa cargará el menú "Enseñar" o el menú "Evaluar".

Entonces, cuando se presiona el mouse, y está encima de uno de los botones, envía las posiciones de todas las partes que necesita el nuevo menú y carga el otro menú.

Paso 3: Programación de la interfaz en procesamiento (menú "Enseñar")

Aquí, si el ratón está sobre una de las partes, activará el botón correspondiente, el cual, si se presiona el ratón, activará el texto correspondiente y lo mostrará en pantalla.

Paso 4: Programación de la interfaz en procesamiento (menú "Evaluar")

Aquí es lo mismo, activaría los bovers, que al presionar el mouse activarían los bloqueados pero esta vez en lugar de mostrar textos arrastraría la parte seleccionada. (Esto se basó en "Arrastrar, soltar y desplazar el mouse con el mouse" de Processing.js)

Paso 5: cuando se presiona el mouse

Como se dijo anteriormente, cuando se presiona el mouse y un bover es "verdadero", se activará el bloqueo correspondiente.

Paso 6: cuando se arrastra el mouse

Si se arrastra el mouse, el menú real es el menú de evaluación y uno de los bloqueados es "verdadero", arrastraría la parte correspondiente junto con el mouse.

Paso 7: cuando se suelta el mouse

Entonces, si se suelta el mouse y aún está en el menú "Evaluar", colocaría la parte que se estaba arrastrando en el lugar donde necesita construir el modelo si está lo suficientemente cerca y verificaría si su respuesta es correcta. Luego, restablecería todos los bloqueos y textos a "falso".

Paso 8: Comunicación con Arduino

Entonces, si presiona el botón en el Arduino, verifica si colocó todas las partes correctas en su lugar y le dice si es correcto o incorrecto, luego envía un "1" si es correcto o un "2" si está incorrecto al Arduino.

Paso 9: Configuración del Arduino (esquema)

Este era el esquema utilizado para el arduino, pero con un botón Arcade, por lo que el cable verde que va al botón iría al conector inferior del botón (COM) y el cable rojo iría al del medio (NO). Se usó una resistencia de 220 Ω para los LED y 1 kΩ para el botón.

Paso 10: Programando el Arduino

Ahora configura el botón como INPUT en el pin digital 2 y los LED como OUTPUT en 4, 6 y 8. Luego configura el Port y lo lee, si obtiene un "1" (respuesta correcta) se iluminaría el 3 LED uno por uno, si obtiene un "2" (respuesta incorrecta) se encenderá solo uno de ellos. Además, si se presiona el botón, enviará una "e" a la interfaz.

Paso 11: Eso es todo, ¡diviértete

Estos son los códigos utilizados para este proyecto: