MT07¶
Diseño y desarrollo de una interfaz digital interactiva¶
Este ejercicio tiene como propósito desarrollar una interfaz digital que permita la interacción entre el usuario y un sistema basado en microcontroladores (Arduino y ESP32). La interfaz incluirá la lectura de datos de sensores y la manipulación de dispositivos electrónicos, con el objetivo de visualizar información en tiempo real y realizar acciones sobre componentes de hardware. Se explorarán conceptos de entrada y salida de datos (input/output), así como la comunicación entre microcontroladores y una interfaz gráfica.
1. Interfaz gráfica con Joystick y Arduino UNO¶
Se utiliza un joystick como entrada para mover un círculo en una pantalla gráfica de 400x400 píxeles. El círculo cambia de color en degrade (rojo, violeta, amarillo) a medida que se desplaza en las direcciones cardinales, manteniendo un movimiento suave. La comunicación se establece entre el Arduino y una interfaz gráfica desarrollada en Processing.
Esquema de conexión:
| Componente | Pin Arduino | Pin del Componente |
|---|---|---|
| Joystick Eje X | A0 | Eje X |
| Joystick Eje Y | A1 | Eje Y |
| Joystick Botón | 2 | Botón |
| VCC | 5V | VCC Joystick |
| GND | GND | GND Joystick |
Desarrollo: La comunicación entre el joystick y la pantalla gráfica se realiza enviando los valores de los ejes X e Y del joystick al Arduino, que los transmite a Processing para controlar el movimiento del círculo en la pantalla.
⬇︎ Descargar Código Arduino ⬇︎ Descargar Código Processing
2. Control de LED desde una página web (ESP32)¶
En este punto, se busca controlar el encendido y apagado de un LED a través de una interfaz web servida por la ESP32. El usuario podrá interactuar con un botón en la página web para cambiar el estado del LED.
Esquema de conexión:
| Componente | Pin ESP32 | Pin del Componente |
|---|---|---|
| LED | D2 | Ánodo (+) |
| GND | GND | Cátodo (-) |
Desarrollo: Se configura la ESP32 para actuar como servidor web, presentando una página con un botón que envía comandos a la ESP32 para controlar el estado del LED.
3. Sensor de distancia + LED (ESP32)¶
El objetivo es mostrar los datos obtenidos por un sensor de distancia (HC-SR04) en una página web. Adicionalmente, se puede activar o desactivar un LED dependiendo de la distancia medida.
Utilicé como base este Código wokwi. Me costó bastante lograr que funcionara correctamente, pero finalmente logré acercarme al objetivo de mostrar la distancia en pantalla.
Esquema de conexión:
| Componente | Pin ESP32 | Pin del Componente |
|---|---|---|
| HC-SR04 Trigger | D22 | Trigger |
| HC-SR04 Echo | D23 | Echo |
| LED | D2 | Ánodo (+) |
| GND | GND | Cátodo (-) |
| VCC | 5V | VCC Sensor |
Desarrollo: La ESP32 lee los datos del sensor de distancia y los presenta en una interfaz web. Se puede encender o apagar el LED cuando la distancia detectada supera o cae por debajo de un umbral establecido.
4. Sensor de nivel de agua + LED (ESP32)¶
Este último ejercicio consiste en visualizar el nivel de agua en un contenedor y reflejar dicha información en una página web. El sistema también incluye un LED que puede encenderse o apagarse en función del nivel de agua medido.
Esquema de conexión:
| Componente | Pin ESP32 | Pin del Componente |
|---|---|---|
| Sensor de nivel | D34 | Señal Sensor |
| LED | D2 | Ánodo (+) |
| GND | GND | Cátodo (-) |
| VCC | 5V | VCC Sensor |
Desarrollo: La ESP32 recibe los datos del sensor de nivel de agua y los muestra en una página web. Se puede configurar un límite para el nivel de agua, que al superarse encenderá o apagará el LED.
4.1 Sensor de nivel de agua y visualización¶
Se utiliza un sensor de nivel de agua conectado a un ESP32 para medir y visualizar el nivel de agua en tiempo real. A través de una interfaz gráfica en Processing, se muestra un rectángulo que cambia de color, desde celeste claro a violeta oscuro, a medida que aumenta el nivel de agua.
⬇︎ Descargar Código Processing
Video¶
En este video se muestran las cuatro experiencias:
Conclusiones¶
Al principio, me costó comprender la diferencia que se planteaba en el módulo entre “interfaz” e “interficie”. No fue hasta que encontré un artículo que explicaba estas distinciones que empecé a entenderlas mejor. Según el texto “Interficies de las Comunidades Virtuales”, la interfaz tiene una estructura tradicional, más estática y relacionada con mecanismos de control de dispositivos de entrada y salida de datos. En cambio, el término “interficie” se presenta como algo más dinámico, fluido y contemporáneo, producto de una necesidad lingüística de traducir la palabra del inglés al catalán, y se refiere a un juego de relaciones entre sistemas de intercambio que están en constante transformación.
Los ejercicios realizados en este proyecto, aunque básicos, contribuyeron significativamente a mi curva de aprendizaje. Ya tenía la experiencia anterior trabajando con Arduino, pero estos desafíos me ayudaron a profundizar en la comprensión de las conexiones y los lenguajes utilizados. Fue fantástico poder visualizar en tiempo real cómo crear una interfaz gráfica que me permitiera no solo controlar un dispositivo físico, sino también generar animaciones simples basadas en interacciones reales con los dispositivos. Esta experiencia ayudó a mi entendimiento de cómo los conceptos de “interfaz” e “interficie” se materializan en la práctica.
Londoño, F. C. (2000). Interficies de las Comunidades Virtuales (Tesis doctoral, Universitat Politècnica de Catalunya).