Interfaz de Usuario
Vista general
Al abrir JARU IDE por primera vez, te encontrarás con una interfaz moderna de tema oscuro diseñada para minimizar la fatiga visual durante largas sesiones de programación. La ventana principal se organiza en varias áreas que puedes personalizar según tu forma de trabajar, ya que todos los paneles son acoplables y pueden reorganizarse libremente.
En la parte superior encontrarás la barra de herramientas Ribbon, que agrupa todas las funciones en pestañas temáticas. El área central está ocupada por el editor de código, donde pasarás la mayor parte del tiempo escribiendo tus programas. A la izquierda se sitúa el explorador de proyectos con la estructura de archivos, y en la parte inferior la consola de salida muestra los resultados de compilación y ejecución.
La barra de herramientas Ribbon
JARU IDE utiliza una barra de herramientas estilo Ribbon, similar a la que encontrarás en aplicaciones como Microsoft Office. Esta barra organiza todas las funciones del IDE en tres pestañas principales: Home, Build y Config.
Pestaña Home
La pestaña Home es tu punto de partida y contiene las funciones que usarás con más frecuencia. Está dividida en dos paneles: Project y View.
El panel Project agrupa las operaciones básicas de gestión de proyectos. El botón New abre el asistente de creación de proyectos, que te guiará paso a paso en la configuración inicial. Open te permite cargar un proyecto existente mediante un diálogo de selección de archivos. Save guarda todos los archivos modificados del proyecto actual, incluyendo código, imágenes y sprites. Finalmente, Close cierra el proyecto activo, liberando recursos y preparando el IDE para abrir otro proyecto.
El panel View controla qué ventanas y paneles están visibles en el IDE. Cada botón muestra u oculta un panel específico, lo que te permite personalizar tu espacio de trabajo según la tarea que estés realizando. Explorer muestra el árbol de archivos del proyecto. Code abre el editor de código fuente. Images da acceso al editor de imágenes. Sprites abre el editor de animaciones. Output muestra la consola de salida con mensajes de compilación y ejecución. Errors presenta la lista de errores y advertencias del proyecto. Git abre el panel de control de versiones integrado. I2C Controller da acceso al gestor de drivers para sensores y actuadores I2C.
Pestaña Build
La pestaña Build contiene todo lo relacionado con la compilación, ejecución y depuración de tus programas. Se divide en dos paneles: Compiler y Debug.
El panel Compiler gestiona el proceso de construcción y ejecución. El botón Compile procesa tu código fuente y genera el ejecutable, mostrando cualquier error o advertencia en la consola de salida. Si hay errores de sintaxis o semánticos, aparecerán en rojo con información sobre el archivo y la línea donde se encuentran. El botón Run va un paso más allá: primero compila el proyecto y luego lo ejecuta automáticamente. Este botón incluye un menú desplegable que te permite seleccionar la plataforma de destino (Windows VM o ESP32) antes de ejecutar. El botón Stop detiene la ejecución en curso, ya sea un programa corriendo normalmente o una sesión de depuración activa.
El panel Debug proporciona las herramientas para depurar tu código paso a paso. El botón Debug inicia una sesión de depuración: primero compila el proyecto y luego lo ejecuta en modo debug, deteniéndose en el primer breakpoint que encuentre. Step Over ejecuta la línea actual completa; si la línea contiene una llamada a función, ejecuta la función entera sin entrar en ella. Step Into también ejecuta la línea actual, pero si hay una llamada a función, entra dentro de ella para que puedas depurarla línea por línea. Continue reanuda la ejecución normal del programa hasta que encuentre el siguiente breakpoint o termine. Watch abre la ventana de inspección de variables, donde puedes añadir variables para observar cómo cambian sus valores durante la depuración.
Pestaña Config
La pestaña Config agrupa las opciones de configuración del IDE y las herramientas específicas de cada plataforma. Contiene dos paneles: Platform e IDE.
El panel Platform da acceso a las herramientas de configuración específicas de cada plataforma de destino. El botón Windows abre el panel de configuración de la máquina virtual de Windows, donde puedes ajustar parámetros de ejecución para el desarrollo local. El botón ESP32 abre un completo panel de herramientas para trabajar con microcontroladores ESP32, incluyendo flasheo de firmware, configuración de WiFi, MQTT, display TFT, tarjeta SD, y lectura de información del chip.
El panel IDE contiene la configuración general del entorno. Settings abre el diálogo de opciones donde puedes personalizar el comportamiento del editor, los colores, las fuentes y otras preferencias. About muestra información sobre la versión de JARU IDE y los créditos del proyecto.
El explorador de proyectos
El panel lateral izquierdo muestra la estructura de tu proyecto en forma de árbol jerárquico. Aquí verás todos los archivos organizados por carpetas: código fuente, imágenes, sprites y cualquier otro recurso que forme parte del proyecto.
En la parte superior del explorador hay una barra de herramientas con botones para crear rápidamente nuevos elementos: archivos de código, imágenes, sprites o carpetas. También puedes hacer clic derecho sobre cualquier elemento para acceder a un menú contextual con opciones adicionales como renombrar, eliminar o abrir la ubicación en el explorador de Windows.
Una característica importante es el selector de archivo principal. En proyectos con múltiples archivos de código, aquí indicas cuál es el punto de entrada de tu programa, es decir, el archivo que contiene el código que debe ejecutarse primero.
Para reorganizar la estructura puedes arrastrar y soltar elementos entre carpetas. El explorador también incluye un campo de filtro que te permite buscar archivos rápidamente escribiendo parte de su nombre.
El editor de código
El corazón del IDE es el editor de código, un área de trabajo con pestañas que te permite tener varios archivos abiertos simultáneamente. Cada vez que haces doble clic en un archivo del explorador, se abre en una nueva pestaña (o activa la pestaña existente si ya estaba abierto).
Características del editor
El editor incluye resaltado de sintaxis específico para el lenguaje JARU, coloreando palabras clave, cadenas, números y comentarios de forma diferenciada para facilitar la lectura del código. La numeración de líneas en el margen izquierdo te ayuda a orientarte, y junto a ella verás indicadores que marcan qué líneas has modificado desde la última vez que guardaste.
El autocompletado es una de las características más útiles para programar con fluidez. Mientras escribes, el editor te sugiere palabras clave, nombres de funciones y variables que coinciden con lo que estás tecleando. Puedes aceptar una sugerencia con Enter o Tab, o seguir escribiendo para filtrar las opciones. Si el autocompletado no aparece automáticamente, puedes invocarlo manualmente con Ctrl+Espacio.
En la parte superior del editor encontrarás un navegador de símbolos: un desplegable que lista todas las funciones y clases del archivo actual. Seleccionar un elemento te lleva directamente a su definición, lo que resulta muy útil en archivos largos.
Búsqueda y reemplazo
Pulsando Ctrl+F se despliega el panel de búsqueda en la parte superior del editor. Escribe el texto que buscas y usa los botones de navegación para saltar entre coincidencias. El contador te indica cuántas veces aparece el texto en el archivo.
Puedes refinar la búsqueda activando opciones como coincidencia exacta (distingue mayúsculas/minúsculas) o palabras completas (no encuentra el texto si forma parte de una palabra más larga).
Para reemplazar texto, expande el panel de búsqueda con el botón correspondiente. Aparecerá un segundo campo donde escribir el texto de reemplazo, junto con botones para reemplazar la coincidencia actual o todas las coincidencias de una vez.
El formateador de código
El botón Beautifier aplica un formato consistente a tu código automáticamente. Ajusta la indentación, los espacios alrededor de operadores y la alineación general para que el código sea más legible y siga un estilo uniforme. Es especialmente útil cuando pegas código de otras fuentes o cuando quieres limpiar un archivo que ha pasado por muchas manos.
Trabajando con breakpoints
Para depurar tu código necesitas establecer breakpoints, puntos donde la ejecución se detendrá para que puedas examinar el estado del programa. Simplemente haz clic en el margen izquierdo, junto al número de línea donde quieres pausar. Aparecerá un indicador rojo que señala el breakpoint. Haz clic de nuevo para eliminarlo.
Cuando ejecutes el programa en modo depuración, se detendrá cada vez que llegue a una línea con breakpoint, permitiéndote inspeccionar variables, ejecutar paso a paso y entender exactamente qué está haciendo tu código.
La consola de salida
El panel inferior es tu ventana al mundo exterior del programa. Aquí aparecen todos los mensajes generados durante la compilación y ejecución.
Cuando compilas, verás el progreso del proceso y cualquier error o advertencia que encuentre el compilador. Los errores aparecen en rojo con información sobre el archivo, línea y descripción del problema. Las advertencias se muestran en amarillo. Haciendo doble clic sobre un mensaje de error, el editor te lleva directamente a la línea problemática.
Durante la ejecución, la consola muestra la salida de tu programa: todo lo que imprimas con las funciones de salida estándar aparecerá aquí.
El monitor serie
Cuando trabajas con dispositivos ESP32, la consola incluye un monitor serie integrado. En la barra superior puedes seleccionar el puerto COM donde está conectado tu dispositivo y la velocidad de comunicación (baudrate). El botón de conexión abre el puerto y comienza a mostrar los datos que envía el dispositivo.
Esto es especialmente útil para depurar aplicaciones embebidas, ya que puedes ver mensajes de diagnóstico y la salida de tu programa ejecutándose en el hardware real.
La ventana Watch
Durante una sesión de depuración, la ventana Watch te permite observar el valor de variables en tiempo real. Escribe el nombre de una variable en el campo de entrada y pulsa Enter para añadirla a la lista de observación.
Cada vez que la ejecución se detiene (en un breakpoint o después de un paso), los valores se actualizan automáticamente. Si la variable es un array o una estructura, puedes expandirla para ver su contenido interno.
Los botones de la barra te permiten refrescar los valores manualmente, añadir nuevas variables o eliminar las que ya no necesitas observar. Esta herramienta es fundamental para entender el flujo de tu programa y detectar dónde los valores no son los esperados.
Control de versiones con Git
JARU IDE incluye un cliente Git completo que te permite gestionar el historial de tu código sin salir del entorno de desarrollo. El panel de control de versiones se divide en varias vistas que cubren todas las operaciones habituales.
Vista de estado
La vista principal muestra el estado actual de tu repositorio. En la parte superior ves los archivos sin preparar (unstaged): cambios que has hecho pero que aún no has marcado para incluir en el próximo commit. Debajo aparecen los archivos preparados (staged): los que sí se incluirán.
Puedes mover archivos entre estas listas haciendo clic en ellos o usando los botones para preparar todos los cambios a la vez. Debajo hay un área de texto donde escribir el mensaje que describe tus cambios, y el botón de Commit para confirmarlos.
Vista de ramas
Aquí gestionas las ramas de tu proyecto. Ves una lista de todas las ramas locales y remotas, con indicación de cuál es la rama activa. Puedes crear nuevas ramas, cambiar entre ellas (checkout), fusionar una rama con otra (merge) o eliminar ramas que ya no necesitas.
Vista de historial
Esta vista muestra la historia de commits del proyecto. Cada entrada incluye el hash del commit, el autor, la fecha y el mensaje descriptivo. Al seleccionar un commit, puedes ver qué archivos se modificaron y los detalles completos del cambio.
Operaciones remotas
Si tu repositorio está conectado a un servidor remoto (como GitHub o GitLab), los botones de Push y Pull te permiten sincronizar cambios. Push sube tus commits locales al servidor, mientras que Pull descarga los cambios que otros hayan subido. El botón Fetch actualiza la información sobre el estado remoto sin modificar tu código local.
Herramientas ESP32
El panel de herramientas ESP32 centraliza toda la configuración necesaria para trabajar con estos microcontroladores. Está organizado en secciones para diferentes aspectos del dispositivo.
La sección de flasheo te permite cargar el firmware en el chip, con opciones para seleccionar el modo de flash y la velocidad de transferencia. La sección de WiFi configura las credenciales de red y los parámetros IP. Si tu aplicación usa MQTT para comunicación IoT, encontrarás todos los ajustes de conexión al broker en su sección correspondiente.
También puedes configurar el display TFT (pines, resolución, modelo de controlador), la tarjeta SD y leer información del chip como su dirección MAC o identificador único.
Gestor de drivers I2C
Esta herramienta te ahorra tiempo cuando necesitas comunicarte con sensores y actuadores que usan el bus I2C. El panel muestra un catálogo de drivers organizados por categorías: sensores de temperatura, acelerómetros, displays, etc.
Al seleccionar un driver, ves información detallada sobre el chip que controla, su dirección I2C, la versión del driver y quién lo desarrolló. Una pestaña de métodos lista todas las funciones disponibles, y otra pestaña muestra una vista previa del código.
Antes de insertar el código en tu proyecto, configura los pines SDA y SCL que utilizas y el puerto I2C. El botón de insertar añade automáticamente el código de inicialización y uso del driver en el editor, listo para que lo adaptes a tus necesidades.
Editores visuales
JARU IDE incluye editores especializados para trabajar con recursos gráficos, que se abren directamente en pestañas del área central.
Editor de imágenes
Cuando haces doble clic en una imagen del proyecto, se abre en el editor de imágenes. Aquí puedes hacer zoom para examinar detalles, recortar áreas específicas y convertir la paleta de colores para optimizar el tamaño en dispositivos embebidos.
Las opciones de paleta incluyen mantener los colores originales, reducir a 256 colores o usar una paleta unificada del proyecto. También puedes configurar el tamaño de salida si necesitas escalar la imagen.
Editor de sprites
Los sprites son animaciones compuestas por múltiples frames. El editor de sprites te permite definir las regiones de una imagen que corresponden a cada frame, organizarlas en secuencia y previsualizar la animación resultante.
Los controles de reproducción te permiten ver la animación en movimiento, ajustar la velocidad (FPS) y navegar frame a frame. Puedes configurar la alineación de los sprites y el color de fondo para la previsualización.
Personalización del espacio de trabajo
Una característica fundamental de JARU IDE es su sistema de paneles acoplables. Puedes arrastrar cualquier panel por su barra de título y soltarlo en otra posición: a la izquierda, derecha, arriba o abajo de otro panel, o incluso apilado como pestañas en el mismo espacio.
Esto te permite crear la disposición que mejor se adapte a tu forma de trabajar. Por ejemplo, podrías poner el explorador a la derecha en lugar de la izquierda, o apilar la ventana Watch junto a la consola. También puedes desacoplar paneles como ventanas flotantes independientes, útil si tienes varios monitores.
El IDE recuerda tu configuración, así que cuando lo cierres y vuelvas a abrir, encontrarás todo donde lo dejaste.
Si alguna vez "pierdes" un panel y no lo encuentras, puedes restaurarlo desde el panel View de la pestaña Home en la barra Ribbon.
Atajos de teclado
Para trabajar con mayor fluidez, JARU IDE soporta numerosos atajos de teclado. Los más importantes son:
Gestión de archivos: Ctrl+N crea un nuevo archivo, Ctrl+O abre uno existente, Ctrl+S guarda el actual y Ctrl+W cierra la pestaña activa.
Edición: Ctrl+Z deshace el último cambio, Ctrl+Y lo rehace. Ctrl+C, Ctrl+X y Ctrl+V copian, cortan y pegan respectivamente. Ctrl+F abre la búsqueda y Ctrl+H la búsqueda con reemplazo.
Compilación y ejecución: F7 compila el proyecto, F5 lo ejecuta y Shift+F5 detiene la ejecución.
Depuración: F9 añade o quita un breakpoint en la línea actual. Durante una sesión de depuración, F10 ejecuta paso a paso sin entrar en funciones, F11 entra en la función llamada y F5 continúa la ejecución hasta el siguiente breakpoint.
Edición avanzada: Ctrl+J activa la edición sincronizada de identificadores, permitiéndote renombrar una variable en todas sus apariciones simultáneamente.