ImRAD - Constructor de GUI para la biblioteca ImGui

 (github.com/tpecholt)
2 puntos por GN⁺ 2024-08-17 | 1 comentarios | Compartir por WhatsApp
  • ImRAD es un constructor de GUI para ImGui que genera código C++ utilizable directamente en la aplicación y luego lo vuelve a analizar para poder seguir modificando la UI generada
  • Soporta enlace de datos, eventos y la adición manual de código de UI, y el código generado se separa con marcadores de comentarios para que el usuario pueda insertar código sin dejar de usar el diseñador
  • Se ejecuta en Windows, Linux y MacOS, y el código generado funciona en Windows, Linux, MacOS y Android
  • El layout usa box layout y SameLine, Spacing, NextColumn en lugar de posiciones absolutas, y mantiene las relaciones padre-hijo y el orden entre widgets
  • El código fuente de ImRAD está bajo GPL, pero el código generado por la herramienta y imrad.h, que usa el código generado, están excluidos de GPL, por lo que pueden incluirse en proyectos open source o comerciales

El rol de ImRAD y cómo genera código

  • ImRAD es un constructor de GUI para la biblioteca ImGui
  • Genera y analiza código C++ que puede usarse directamente en la aplicación
  • A diferencia de otras herramientas, soporta un flujo donde la UI generada puede seguir modificándose

    • Enlace de datos

      • Eventos
      • Adición manual de código de UI
      • El código generado se guarda en archivos .h y .cpp, y puede revisarse rápidamente con la vista previa de código

Plataformas compatibles y tipos de ventana

  • ImRAD en sí se ejecuta en Windows, Linux y MacOS
  • El código generado se ejecuta en Windows, Linux, MacOS y Android
  • Soporta el diseño de varios tipos de ventana
    • Ventanas flotantes, popups y popups modales
    • MainWindow, incluida la integración con GLFW
      • ImRAD genera llamadas de GLFW para sincronizar la barra de título, las banderas de redimensionamiento, el autoajuste y otros elementos entre la ventana de ImGui y la ventana del sistema operativo
    • Activity
      • Ventana sin decoraciones que llena toda el área del viewport
      • Solo puede mostrarse una activity a la vez
      • Se usa principalmente en apps de Android
  • También incluye plantillas
    • main.cpp general basado en GLFW
    • MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt para Android

Widgets y funciones de layout

  • Soporta una amplia variedad de widgets de ImGui
    • Widgets básicos como Text, Checkbox, Combo, Button, Slider, ColorEdit
    • Widgets contenedores como Child, Table, CollapsingHeader, TreeNode, TabBar
    • Widgets como Splitter, DockSpace
    • Edición de MenuBar y menús contextuales
    • CustomWidget para llamar código de widgets externos
  • El layout se genera usando SameLine, Spacing, NextColumn en lugar de posiciones absolutas
    • Esto hace que los widgets respeten de forma consistente el item spacing y el frame padding
    • Las relaciones padre-hijo y el orden de los hijos, importantes en widgets contenedores como Table, quedan claros
    • También permite una ubicación alternativa que mantiene la distancia relativa desde la esquina del padre seleccionada, útil para widgets superpuestos
  • Soporta box layout
    • Es un mecanismo de layout implementado sobre las funciones de ImGui
    • Permite estirar widgets redimensionables en horizontal o vertical
    • Se pueden insertar spacers para crear alineación
    • También puede usarse Table Layout Helper, que genera layouts horizontales usando Table invisibles

Enlaces, eventos y código del usuario

  • Como ImGui es una biblioteca GUI de modo inmediato, el estado de widgets como textos de entrada o elementos de combobox debe configurarse dentro del código generado al momento de dibujar, y ImRAD lo maneja mediante enlace de propiedades
  • Las variables de clase pueden gestionarse con un sencillo class wizard o con el cuadro de diálogo de enlaces
  • El uso de enlace de propiedades permite que la UI generada siga siendo diseñable mientras se comporta de forma dinámica
  • Soporta la generación de manejadores de eventos y código auxiliar
    • Por ejemplo, un diálogo modal genera automáticamente una función miembro OpenPopup con un callback lambda que se llama al cerrarse
    • Los manejadores de eventos separan el código de manejo de eventos del usuario de la parte generada para que el diseñador siga funcionando
  • El código generado se separa con marcadores de comentarios
    • El usuario puede agregar código adicional alrededor del código generado
    • Esto puede usarse para llamadas a popups que dependen del draw o para ciertos cálculos de variables
    • También puede delegarse mediante CustomWidget a callbacks del usuario

Configuración, estilo y variantes en tiempo de ejecución

  • Window configuration es una variante de UI que puede activarse en tiempo de ejecución
    • Resulta útil para distintas plataformas o rotación de pantalla, entre otros casos
  • Los estilos son configuraciones que agrupan colores, variables de estilo y fuentes
    • Además del estilo predeterminado de ImGui, el usuario puede definir estilos nuevos
    • Los estilos pueden guardarse como archivos INI bajo la carpeta style
  • Las dialog units pueden configurarse como píxeles independientes del dispositivo
    • Esto es útil para Android y para apps con reconocimiento de DPI
  • ImRAD rastrea los cambios en los archivos abiertos
    • Mientras se diseña en ImRAD, el usuario también puede editar los mismos archivos en el IDE que prefiera
    • Los cambios de estilo INI también se reflejan de inmediato

Dependencias y opciones del código generado

  • El código generado puede usarse directamente en un proyecto y, por defecto, solo depende de la biblioteca ImGui y del header complementario imrad.h
  • Actualmente imrad.h incluye tanto la interfaz como la implementación
    • Para generar la implementación en main.cpp, hay que definir IMRAD_H_IMPLEMENTATION antes del include
  • El código generado usa la rutina de formateo ImRad::Format
    • En C++20 delega por defecto a std::format
    • Si se define IMRAD_WITH_FMT, puede usarse la biblioteca fmt
    • Si no hay ninguno de los dos, usa una rutina de formateo simple que omite las banderas de formato
  • Algunas funciones requieren dependencias adicionales y activación explícita
    • El widget MainWindow o Image necesita bibliotecas extra como GLFW y STB
    • Se requiere definir IMRAD_WITH_LOAD_TEXTURE
  • imrad.h puede usar la biblioteca zlib para cargar assets desde archivos zip
    • Esto se activa con IMRAD_WITH_MINIZIP
  • Puede generar código con cadenas traducibles
    • Si imrad.h se compila con IMRAD_WITH_GETTEXT, puede traducirse con gettext/libintl
    • También puede usarse libintl-lite, que no tiene dependencias

Licencia y distribución

  • El código fuente de ImRAD está bajo licencia GPL
  • El código generado por la herramienta queda excluido de GPL
    • Puede incluirse en proyectos open source o comerciales
    • La licencia del código generado la decide el usuario
  • imrad.h, que usa el código generado, también está excluido de GPL
  • La versión más reciente se compila con CMake después de clonar el repositorio
    • También hay que traer los submódulos del directorio 3rdparty
  • Las versiones algo más antiguas pueden descargarse desde Releases
  • El tutorial y la documentación detallada pueden consultarse en la wiki

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-08-17
Opiniones de Hacker News

  • Una de las partes más sorprendentes de este proyecto es que tiene un parser hecho a mano para leer el subconjunto de C++ que puede generar.
    Todo está implementado en un solo header, y se ve impresionante y a la vez una locura.
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • Me da curiosidad saber qué significa exactamente esto.
      No estoy muy familiarizado con la programación, así que solo entendí que este proyecto tiene algo capaz de leer datos.
      Me gustaría que alguien explicara por qué es tan notable una herramienta capaz de leer C++.

  • Realmente genial. Puede que sea por la nostalgia de Visual Basic, pero para mí este proyecto es como la cereza del pastel de imgui.

    • Hasta ahora no ha habido una experiencia RAD más rápida que Visual Basic 6.

  • Sería genial que estuviera como app HTML5 en wasm, para poder crear una GUI rápidamente en el navegador y copiar y pegar el resultado en el editor.
    Dice que “genera y parsea código C++, y ese código puede usarse directamente en la aplicación”; me pregunto si lo de parsear es para volver a leer el código que él mismo genera.

    • El parser está aquí: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      Parece que sí es para leer el código que genera. El parser hecho a mano no maneja todo el lenguaje, solo un subconjunto.
      Por ejemplo, tiene hardcodeado el reconocimiento de contenedores de STL, y probablemente solo maneja lo que puede aparecer en el código generado.
      En esta etapa no crea un árbol de sintaxis abstracta (AST). Parece que hace tokenización y análisis léxico, y que quien lo llama tiene que entender cómo avanzar la “máquina de estados” de parsing.
      La creación del AST y la generación de código parecen hacerse en este archivo de más de 9000 líneas: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • ¿Se te olvidó cómo instalar y ejecutar una aplicación nativa? :)
      Dice que “ImRAD se ejecuta en Windows, Linux y MacOS”.
    • Una app HTML5 en wasm no parece encajar mucho con la orientación de la biblioteca imgui, que busca funcionar de forma nativa en varias plataformas y minimizar dependencias.

  • Excelente. En los últimos años estuve creando apps en C++ con ImGui, y creo que esto me habría ahorrado mucho tiempo.

    • Estoy empezando recién con imGui y me gustaría saber cómo esto ahorra tiempo.

  • Si el creador de dear-imgui dijo que el nombre es “dear”, ¿no debería decir “for the Dear library”?
    IMGUI significa GUI de modo inmediato, y ocornut dijo que se inspiró en otro IMGUI llamado “simgui”.
    “Unos 15 meses después lo renombré a ‘dear imgui’, porque ‘imgui’ estaba acaparando toda la sigla. Sigo lamentando la confusión que esto ha causado hasta hoy”.
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui es el nombre completo oficial, pero llamarlo simplemente ImGui sigue siendo muy común.
      El namespace también se llama ImGui, y definitivamente no es solo “Dear”.

  • Creo que no debería tener demasiado sudo metido ahí. Fuera de eso, se ve realmente genial.

  • Me pregunto si el código C++ generado también se puede usar desde algo como Python cuando se usan los bindings de pyimgui.

  • Me pregunto por qué un constructor de GUI para ImGui no está implementado con ImGui mismo.

    • No sé por qué piensas que no lo está. Por el código y las capturas, usa Dear ImGui para la UI.

  • Genial. Estoy haciendo un proyecto con ImGui y siempre pensaba que sería bueno tener algo así. Voy a probarlo.

  • Steam es un sistema multiplataforma popular; ¿podría usarse también para aplicaciones que no sean juegos? ¿Incluso para aplicaciones empresariales?

    • Las aplicaciones normalmente necesitan buen renderizado de texto y soporte de layout.
      Cosas como varias líneas, tipografías y, según el caso, RTL; a ImGUI le falta en esas áreas.
    • No sé muy bien por qué mencionas Steam, pero en Steam también se vende software.