Semana 6. Implementación de Indicadores LED de Estado en el IDE

Tras implementar la sonda de tecleo, esta semana me he centrado en mejorar la visualización de la actividad del alumno dentro del entorno de desarrollo integrado (IDE). El objetivo ha sido incorporar indicadores LED que permitan identificar visualmente cuándo el estudiante está escribiendo código y cuándo el programa se encuentra en ejecución.

Para ello, se han integrado dos indicadores en la cabecera del entorno: TYP, asociado a la actividad de escritura, y EJEC, asociado al estado de ejecución del programa. El primero refleja la información proporcionada por la sonda de tecleo, mientras que el segundo utiliza el estado del CommsManager para determinar si el programa está ejecutándose.

El funcionamiento visual se basa en un sistema de colores: el LED de tecleo se ilumina en verde cuando se detecta actividad de escritura, mientras que el LED de ejecución se muestra en rojo cuando el programa está en marcha. Cuando los estados correspondientes están inactivos, los indicadores permanecen en gris.

Archivos involucrados

• Frontend: ExerciseContainer.tsx, ExerciseHeader.tsx y HeaderMenu.styles.ts.

Funcionamiento e integración de los indicadores

La implementación se ha organizado en tres partes para mantener separadas la detección de eventos, la gestión del estado y la presentación visual.

1. Detección de escritura: El componente ExerciseContainer.tsx recibe los cambios del editor mediante el evento onCodeChange. Cuando el alumno escribe, actualiza el estado isTypingVisual, que permanece activo hasta que transcurren cinco segundos sin detectar nuevas pulsaciones.
2. Comunicación del estado: ExerciseContainer.tsx transmite este estado al componente ExerciseHeader.tsx mediante la propiedad isTyping. De esta forma, la cabecera puede conocer la actividad de escritura sin tener que gestionar directamente los eventos del editor.
3. Detección de ejecución: En ExerciseHeader.tsx, el subcomponente ExecutionControl escucha los cambios de estado del CommsManager. A partir del estado recibido, calcula la variable isExecuting, que permite determinar cuándo debe activarse el indicador de ejecución.
4. Representación visual: Ambos indicadores se muestran junto a sus etiquetas correspondientes. El color, el brillo y la transición visual cambian en función de los estados recibidos, proporcionando información inmediata sobre la actividad del entorno.

Refactorización de los estilos

Además de incorporar los indicadores, se ha realizado una refactorización para separar los estilos de la estructura del componente. Inicialmente, el contenedor de los LED, las etiquetas y los círculos estaban definidos mediante elementos div con estilos inline dentro de ExerciseHeader.tsx.

Para mejorar la organización y facilitar el mantenimiento del código, se han trasladado estos estilos al fichero HeaderMenu.styles.ts, utilizando styled-components.

Se han definido tres componentes estilizados:

• StyledStatusContainer: organiza los indicadores en un contenedor común y establece la separación, el espaciado y el fondo.
• StyledStatusItem: agrupa cada indicador con su etiqueta y define la alineación y la tipografía.
• StyledStatusLed: representa el círculo luminoso y controla su color, su sombra y la transición entre estados mediante las propiedades active y activeColor.

Esta separación permite mantener la lógica de detección de actividad en los componentes React y centralizar la presentación visual en el fichero de estilos. De esta manera, se evita duplicar código CSS y se facilita la reutilización de los componentes.

Resultado y conclusiones

Con estos cambios, el IDE dispone de una representación visual del estado de escritura y ejecución del programa. Los indicadores permiten identificar rápidamente si el alumno está interactuando con el editor o si el código se encuentra en funcionamiento.

La refactorización también mejora la estructura del frontend, manteniendo la gestión de los estados en ExerciseContainer.tsx y ExerciseHeader.tsx, mientras que HeaderMenu.styles.ts concentra los estilos de los indicadores.

Como resultado, se obtiene una implementación más modular y mantenible, preparada para futuras mejoras en la monitorización visual de la actividad del alumno dentro del entorno de desarrollo.