MT07¶
Introducción¶
El Módulo Técnico 07: Interfaces y aplicaciones trata el uso de interfaces digitales en conjunto con otras herramientas, para su uso en diversos tipos de proyectos.
¿Qué se entiende por interfaz? Según la Organización Internacional de Estandarización (ISO por sus siglas en inglés) y su lineamiento ISO 9241-210:201 una interfaz de usuario refiere a todos los componentes de un sistema interactivo (ya sea software o hardware) que provee de información y control al usuario para lograr tareas específicas con ese sistema interactivo.
En ese contexto, distintas plataformas como Processing, en conjunto con otras como Arduino IDE, permiten desarrollar distintas interfaces para generar y prototipar interacciones de diverso tipo, ya sea para accionar elementos, capturar información, entre otros.
En ese marco, para el presente módulo se plantea la siguiente actividad, enfocada al desarrollo de una interfaz para controlar dos LEDs y su encendido/apagado.
Actividad¶
Como actividad se plantea el desarrollo de una interfaz a través de Processing que permita encender según se deseé una dos LEDs que podrían funcionar a modo de indicador, para lo que es necesario que pueda actuar sobre una placa ESP32. Para eso, en primer lugar, se prcocede a descargar Processing y, una vez abierto, instalar la librería GUI library (Control IP5).
Búsqueda de GUI Library Control IP5
Instalación de GUI Library Control IP5
Una vez agregada dicha librería, se procede a crear un nuevo sketch de Processing, en donde se desarrolla la interfaz que permita controlar el ESP32. A medida que el código era armado, —tomando distintas referencias citadas más adelante, así como con la utilización de Chat GPT— era también testeado, con el objetivo de comprender que afectaba cada elemento, así como tomar decisiones en base a eso e iterar en su desarrollo.
Algunos aspectos que se tomaron en cuenta en el desarrollo de la interfaz fueron:
-
La diagramación buscada de los elementos y el uso de color distintivos y acorde con el LED que accionaría en los botones
-
El uso de una tipografía en particular para el texto presente, optando por Inter, buscando mantener una coherencia con la tipografía utilizada para el presente repositorio
-
Cada botón debe permitir tanto activar, como desactivar su LED correspondiente, sin la necesidad de incorporar otro botón específico para esa función
Por otra parte, en base a lo diagramado en Processing, se desarrolla un sketch en Arduino IDE que contiene la información, variables y acciones que, a través de la interfaz de Processing, permitirá accionar el ESP32 para encender o apagar las LEDs. Cabe señalar que en un principio, dado el material de referencia, se planteaba seguir la lógica de que hubiera un botón para uno para prender un LED y otro para apagarlo; se entendió luego que era más conveniente que un mismo botón permitiera realizar esa acción. Para eso, fue necesario incorporar funciones booleanas, así como otras variables.
bool rojoState = false; // Para trackear el estado del indicador "rojo" (LED or output)
bool verdeState = false; // Para trackear el estado del indicador "verde" (LED or output)
Para realizar lo mencionado anteriormente en Processing y Arduino IDE, se toma como referencia a la entrada de Interface and Application Programming del repositorio de Tenzin Dorji, a su video de ESP32 with Proccesing, al artículo Control Arduino Using GUI (Arduino + Processing) de Hardik Rathod y su correspondiente video.
Errores e inconvenientes presentados¶
Sintaxis¶
A lo largo del desarrollo de la Actividad 01 se presentaron una serie de dificultades y errores que dificultaron su cumplimiento. Igualmente pudieron ser resueltas y así permitir que se cumpla el objetivo planteado.
En primer lugar, en ciertos momentos, producto de la acción de agregar, pegar y escribir tramos de código diferentes en un mismo sketch, era frecuente que en Processing se presentaron errores de sintaxis, imposibilitando así el funcionamiento del código. Producto de esa forma de trabajo, los errores de debían por lo general a que sobraba o faltaba un corchete «}» al final de una serie de funciones. En este caso era particularmente útil el uso de Chat GPT para detectar dónde era que faltaba uno de ellos, en aquellos casos que había varios elementos anidados, así como también leer los mensajes que brindaba la consola.
Error de sintaxis
Solución de Chat GPT
Problemas de conexión y detección del ESP32, en particular en COM3¶
En distintos momentos, en particular al querer cargar el programa desarrollado en Arduino IDE en el ESP32, en varias ocasiones se presentaron errores como «ESP32 dev module on com3 not connected», a pesar de que estuviera conectada la placa al ordenador utilizado. Por lo que se pudo explorar al afrontar estos inconvenientes, se desarrollaron las siguientes acciones:
-
En base a un [posteo en el foro de Arduino IDE] (https://forum.arduino.cc/t/esp32-showing-not-connected-from-arduino-ide/1213697/2), para lograr cargar el programa desarrollado es necesario mantener presionado el botón Boot y luego presionar En. Esta solución funcionó en algunas ocasiones.
-
Al presentarse el inconveniente «Error opening serial port COM3: Port not found» en Processing se optó por modificar la baud rate, de 9600 a 115200. Como no se logró solucionar el problema, se procedió a eliminar la línea «port = new Serial(this, “COM3”, 115200);». Dado que tampoco se resolvió el error, se volvió a modificar el valor a 9600 y reincorporar la línea eliminada.
-
Finalmente, optó por utilizar otro cable USB para conectar el ESP32 e instalar los drivers CP210x USB to UART Bridge VCP Drivers. Estas acciones permitieron resolver el problema. Se desconoce si fue una de estas dos acciones o ambas las que lo permitieron.
Processing no detectaba la fuente escogida¶
Si bien se siguieron distintas referencias, aparecía un mensaje indicando que la fuente no era detectada y por lo tanto era reemplazada por una por defecto. La solución fue incorporar la extensión de la fuente, que anteriormente faltaba.
Falta de formato de la fuente
La interfaz no accionaba los LEDs, a pesar de no presentar error¶
Al accionar los botones de la interfaz los LEDs no se encendían. La solución estaba en cambiar en la función donde se definían los botones, tanto rojo como verde, el void toggle, por simplemente void.
Código inicial:
// Function to toggle the rojo button
void toggleRojo() {
rojoState = !rojoState; // Toggle the state
Código revisado
// Function to toggle the rojo button
// Toggle the "rojo" button
void rojo() {
rojoState = !rojoState; // Toggle the state
Ejemplos de conversación con Chat GPT para el desarrollo de la actividad¶
A lo largo del desarrollo del ejercicio, se utilizó Chat GPT para resolver dudas o problemás técnicos, así como hacer preguntas relativas a errores. A continuación se presentan ejemplos:
alt text
Códigos¶
Código para Processing:
import controlP5.*; // importa la librería anteriormente descargada (Control IP5)
import processing.serial.*;
Serial port;
ControlP5 cp5; //crea un objeto Controlp5
PFont font;
// Flags para trackear el estado de los botones
boolean rojoState = false;
boolean verdeState = false;
int buttonWidth = 240; // Define el ancho del botón
int buttonHeight = 70; // Define la altura del botón
void setup(){ //el mismo que el programa arduino
size (800, 800); //define el tamaño de la ventana (ancho, alto)
printArray(Serial.list()); //prints todos los serial ports disponibles
port = new Serial(this, "COM3", 9600);
// se agregan botones
cp5 = new ControlP5(this);
font = createFont("Inter_18pt-Regular.ttf", 20); // se define una fuente a utilizar, agregada en la carpeta data
// Crear botón "rojo"
cp5.addButton("rojo") // "rojo" es el nombre del botón
.setPosition((width / 2) - (buttonWidth / 2), 330) // Centro en el eje x
.setSize(buttonWidth, buttonHeight)
.setFont(font)
.setColorBackground(color(255, 158, 158))
.getCaptionLabel() // Accede al texto del botón (label)
.setColor(color(0, 0, 0)); // Se setea el color del texto (R, G, B)
;
// Crear botón "verde"
cp5.addButton("verde") //"verde" es el nombre del botón
.setPosition((width / 2) - (buttonWidth / 2), 420) // Centro en el eje x
.setSize(buttonWidth, buttonHeight)
.setFont(font)
.setColorBackground(color(180, 244, 183))
.getCaptionLabel() // Accede al texto del botón (label)
.setColor(color(0, 0, 0)); // Se setea el color del texto (R, G, B)
;
}
void draw(){ // el mismo que el loop en arduino
background (0, 0, 0); // define el color según modelo de color RGB (r, g, b)
// título de la interfaz
PFont font;
// La fuente está ubicada en la carpeta "data" para poder ser agregada
font = createFont("Inter_18pt-Bold.ttf", 48); // la fuente está en la carpeta ¨Data¨ creada en la carpeta del sketch
fill(255, 255, 247); // define el color según modelo de color RGB (r, g, b)
textFont(font);
text("Control de indicador", 80, 120); //("texto", coordinada y coordinante)
}
// Función para activar el botón rojo
void rojo() {
rojoState = !rojoState; // Selecciona el estado
if (rojoState) {
port.write('r'); // Turn on
println("Rojo ON");
} else {
port.write('R'); // Turn off
println("Rojo OFF");
}
}
// Función para activar el botón verde
void verde() {
verdeState = !verdeState; // Selecciona el estado
if (verdeState) {
port.write('v'); // Turn on
println("Verde ON");
} else {
port.write('V'); // Turn off
println("Verde OFF");
}
}
Código para Arduino IDE:
char receivedChar; // Variable para almacenar la data recibida
bool rojoState = false; // Para trackear el estado del indicador "rojo" (LED or output)
bool verdeState = false; // Para trackear el estado del indicador "verde" (LED or output)
int verdePin = 18; // Pin donde está el output de LED verde
int rojoPin = 19; // Pin donde está el output de LED rojo
void setup() {
Serial.begin(9600); //start serial communication @9600 bps
pinMode(verdePin, OUTPUT); //setea el pin como output , verde led
pinMode(rojoPin, OUTPUT); //setea el pin como output , rojo led
}
void loop() {
// Checkea si la data está disponible en el serial buffer
if (Serial.available() > 0) {
receivedChar = Serial.read(); // Lee la data que recibe
// Handle "rojo" (red) button signals
if (receivedChar == 'r') {
rojoState = true; // Turn on el indicador "rojo"
digitalWrite(rojoPin, HIGH);
Serial.println("Rojo ON");
}
else if (receivedChar == 'R') {
rojoState = false; // Turn off el indicador "rojo"
digitalWrite(rojoPin, LOW);
Serial.println("Rojo OFF");
}
// Handle "verde" (green) button signals
if (receivedChar == 'v') {
verdeState = true; // Turn on el indicador "verde"
digitalWrite(verdePin, HIGH);
Serial.println("Verde ON");
}
else if (receivedChar == 'V') {
verdeState = false; // Turn off el indicador "verde"
digitalWrite(verdePin, LOW);
Serial.println("Verde OFF");
}
}
}
Resultado¶
Como resultado de los códigos desarrollados y el circuito armado para el ESP32 en concordancia, se pudo desarrollar una interfaz a través de Processing, que permite encender o apagar dos LEDs.
Vista del circuito armado
Descargar MT07_A01 Para Arduino IDE
Descargar MT07_A01 Para Processing
Conclusiones y reflexiones¶
Habiendo desarrollado la Actividad 01 que me propuse para el MT07 me parece pertinente plasmar las siguientes observaciones:
En primer lugar, pude continuar experimentando en el uso de Arduino IDE y el armado de circuitos —a un nivel básico, claro está— para el prototipado de hardware e interacciones. Como he hecho referencia en módulos relacionados (MT04: Introducción a electrónica y programación y MT06: Networking) esta temática me resutlta de gran interés a nivel personal, a pesar (y en parte también gracias a) lo desafiante que me resulta. También es verdad que a esta altura me resulta difícil proyectar cuáles posibilidades o soluciones (ni hablar de la forma) estas tecnologías me podrían ofrecer.
Un elemento que me resultó bastante útil, tanto al momento de seguir material de referencia o revisar el programa armado y entender a qué se corresponde cada elemento, es el hecho de realizar anotaciones en el código a modo de material de ayuda.
En relación al uso de Chat GPT como herramienta para ayudarme al momento de generar y revisar el código o resolver dudas debo afirmar que me fue de gran utilidad, y me permitió visualizar su potencial como ayuda, a pesar de mi reticencia a utilizarlo. En relación a este punto, me parece necesario tener en cuenta el consumo energético y consecuente impacto ambiental que su uso genera, el cual si bien puede no tener grandes repercusiones a nivel individual, creo que es pertinente problematizarlo a nivel de uso masivo. No creo que prescindir siempre de Chat GPT u otras plataformas de inteligencia artificial generativa sea la solución (o posible), pero al menos ser consciente de para qué y cómo lo uso, así como de otras herramientas.
Finalmente, creo que me sería útil pensar cómo incorporar el uso de electrónica, programación e interfaces para mi Proyecto Integrador, más allá de que no sea un eje principal, al menos como herramienta.