ImRAD - Générateur d’interfaces GUI pour la bibliothèque ImGui

 (github.com/tpecholt)
2 points par GN⁺ 2024-08-17 | 1 commentaires | Partager sur WhatsApp
  • ImRAD est un générateur d’interfaces GUI pour ImGui qui génère du code C++ directement exploitable dans une application, puis le réanalyse afin de permettre la modification continue de l’UI générée
  • Il prend en charge le data binding, les événements et l’ajout manuel de code UI ; le code généré est délimité par des marqueurs de commentaire, ce qui permet de continuer à utiliser le designer même après avoir inséré du code utilisateur
  • Il fonctionne sur Windows, Linux et MacOS, et le code généré fonctionne sur Windows, Linux, MacOS et Android
  • La mise en page utilise SameLine, Spacing, NextColumn et des box layouts au lieu du positionnement absolu, tout en conservant les relations parent-enfant et l’ordre entre les widgets
  • Le code source d’ImRAD est sous GPL, mais le code généré par l’outil ainsi que imrad.h, utilisé par ce code généré, sont exclus de la GPL et peuvent être intégrés dans des projets open source ou commerciaux

Rôle d’ImRAD et méthode de génération de code

  • ImRAD est un générateur d’interfaces GUI pour la bibliothèque ImGui
  • Il génère et réanalyse du code C++ directement utilisable dans une application
  • Contrairement à d’autres outils, il prend en charge un flux de travail où l’UI générée peut continuer à être modifiée

    • Data binding

      • Événements
      • Ajout manuel de code UI
      • Le code généré est enregistré dans des fichiers .h et .cpp, et peut être vérifié rapidement via l’aperçu du code

Plateformes prises en charge et types de fenêtres

  • ImRAD lui-même fonctionne sur Windows, Linux et MacOS
  • Le code généré fonctionne sur Windows, Linux, MacOS et Android
  • Il prend en charge la conception de différents types de fenêtres
    • Fenêtres flottantes, popups, popups modales
    • MainWindow, avec intégration GLFW
      • ImRAD génère les appels GLFW pour synchroniser la barre de titre, les flags de redimensionnement et l’auto-dimensionnement entre la fenêtre ImGui et la fenêtre du système d’exploitation
    • Activity
      • Fenêtre sans décoration qui remplit toute la zone du viewport
      • Une seule activity peut être affichée à la fois
      • Principalement utilisée pour les applications Android
  • Des templates sont également fournis
    • main.cpp standard basé sur GLFW
    • Pour Android : MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt

Widgets et fonctionnalités de layout

  • Il prend en charge un large éventail de widgets ImGui
    • Widgets de base comme Text, Checkbox, Combo, Button, Slider, ColorEdit
    • Widgets conteneurs comme Child, Table, CollapsingHeader, TreeNode, TabBar
    • Widgets comme Splitter, DockSpace
    • Édition de MenuBar et de menus contextuels
    • CustomWidget permettant d’appeler du code de widget externe
  • La mise en page générée utilise SameLine, Spacing, NextColumn au lieu du positionnement absolu
    • Cela permet aux widgets de respecter de manière cohérente l’item spacing et le frame padding
    • Les relations parent-enfant et l’ordre des enfants, importants pour les widgets conteneurs comme Table, restent explicites
    • Un positionnement alternatif est aussi possible en conservant une distance relative depuis le coin parent sélectionné, utile pour les widgets d’overlay
  • Les box layouts sont pris en charge
    • Il s’agit d’un mécanisme de layout implémenté au-dessus des fonctionnalités d’ImGui
    • Les widgets redimensionnables peuvent s’étendre horizontalement ou verticalement
    • Il est possible d’insérer des spacers pour créer des alignements
    • On peut aussi utiliser le Table Layout Helper, qui génère un layout horizontal à l’aide d’une Table invisible

Bindings, événements et code utilisateur

  • Comme ImGui est une bibliothèque GUI en mode immédiat, l’état des widgets, comme le texte saisi ou les éléments d’une combo box, doit être défini dans le code généré au moment du rendu ; ImRAD gère cela via le property binding
  • Les variables de classe peuvent être gérées via un simple class wizard ou une boîte de dialogue de binding
  • Le property binding permet à l’UI générée de rester dynamique tout en continuant à être modifiable dans le designer
  • Il prend en charge la génération de gestionnaires d’événements et de code d’accompagnement
    • Par exemple, une boîte de dialogue modale génère automatiquement une fonction membre OpenPopup avec un callback lambda appelé à la fermeture
    • Les gestionnaires d’événements séparent le code utilisateur de traitement des événements de la partie générée, afin que le designer continue de fonctionner
  • Le code généré est délimité par des marqueurs de commentaire
    • L’utilisateur peut ajouter du code supplémentaire autour du code généré
    • Cela peut servir pour des appels de popup dépendants du draw ou pour le calcul de certaines variables
    • Il est également possible de déléguer via CustomWidget à un callback utilisateur

Configuration, style et variantes d’exécution

  • La configuration de fenêtre est une variante d’UI activable à l’exécution
    • C’est utile pour différentes plateformes ou orientations d’écran
  • Les styles sont des ensembles regroupant couleurs, variables de style et polices
    • En plus du style par défaut d’ImGui, l’utilisateur peut définir de nouveaux styles
    • Les styles peuvent être enregistrés sous forme de fichiers INI dans le dossier style
  • Les dialog units peuvent être définies en pixels indépendants de l’appareil
    • C’est utile pour Android et pour les applications compatibles DPI
  • ImRAD suit les modifications des fichiers ouverts
    • L’utilisateur peut concevoir dans ImRAD tout en modifiant les mêmes fichiers dans l’IDE de son choix
    • Les changements de style INI sont également reflétés immédiatement

Dépendances et options du code généré

  • Le code généré peut être utilisé directement dans un projet et dépend, par défaut, uniquement de la bibliothèque ImGui et de l’en-tête compagnon imrad.h
  • Actuellement, imrad.h inclut à la fois l’interface et l’implémentation
    • Pour générer l’implémentation dans main.cpp, il faut définir IMRAD_H_IMPLEMENTATION avant l’include
  • Le code généré utilise la routine de formatage ImRad::Format
    • En C++20, elle délègue par défaut à std::format
    • Si IMRAD_WITH_FMT est défini, la bibliothèque fmt peut être utilisée
    • En l’absence des deux, une routine de formatage simple qui ignore les flags de formatage est utilisée
  • Certaines fonctionnalités nécessitent des dépendances supplémentaires et une activation explicite
    • Le widget MainWindow ou Image nécessite des bibliothèques additionnelles comme GLFW ou STB
    • La définition de IMRAD_WITH_LOAD_TEXTURE est requise
  • imrad.h peut utiliser la bibliothèque zlib pour charger des assets depuis des fichiers zip
    • Cela s’active avec IMRAD_WITH_MINIZIP
  • Il peut générer du code incluant des chaînes traduisibles
    • Si imrad.h est compilé avec IMRAD_WITH_GETTEXT, la traduction via gettext/libintl devient possible
    • Il est aussi possible d’utiliser libintl-lite, sans dépendances

Licence et distribution

  • Le code source d’ImRAD est sous licence GPL
  • Le code généré par l’outil est exclu de la GPL
    • Il peut être intégré dans des projets open source ou commerciaux
    • La licence du code généré est déterminée par l’utilisateur
  • imrad.h, utilisé par le code généré, est également exclu de la GPL
  • La version la plus récente se compile avec CMake après avoir cloné le dépôt
    • Il faut également récupérer les sous-modules du répertoire 3rdparty
  • Des versions un peu plus anciennes peuvent être téléchargées depuis Releases
  • Le tutoriel et la documentation détaillée sont disponibles sur le wiki

À lire aussi

1 commentaires

 
GN⁺ 2024-08-17
Avis sur Hacker News

  • L’un des aspects les plus surprenants de ce projet, c’est qu’il possède un parseur fait maison pour lire le sous-ensemble de C++ qu’il peut générer.
    Tout est implémenté dans un unique header, et c’est à la fois impressionnant et un peu délirant.
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • Je me demande ce que cela signifie exactement.
      Je ne suis pas très familier avec la programmation, donc je comprends seulement qu’il y a dans ce projet quelque chose capable de lire des données.
      J’aimerais qu’on m’explique pourquoi un outil capable de lire du C++ est quelque chose d’impressionnant.

  • Vraiment génial. C’est peut-être la nostalgie de Visual Basic, mais pour moi ce projet est la cerise sur le gâteau imgui.

    • À ce jour, rien n’a offert une expérience RAD plus rapide que Visual Basic 6.

  • Ce serait super d’en faire une application wasm HTML5, pour pouvoir créer rapidement une GUI dans le navigateur puis copier-coller le résultat dans un éditeur.
    Il est indiqué que « cela génère et parse du code C++, et que ce code peut être utilisé directement dans l’application » ; je me demande si le parsing sert ici à relire le code qu’il a lui-même généré.

    • Le parseur est ici : https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      Il semble bien destiné à lire le code qu’il génère lui-même. Le parseur fait maison ne traite pas tout le langage, seulement un sous-ensemble.
      Par exemple, la reconnaissance des conteneurs STL est codée en dur, et il semble probablement ne gérer que ce qui peut apparaître dans le code généré.
      À ce stade, il ne construit pas d’arbre syntaxique abstrait (AST). Il fait de la tokenisation et de l’analyse lexicale, et la structure semble exiger que l’appelant comprenne comment faire avancer la « machine à états » de parsing.
      La construction de l’AST et la génération de code semblent se faire dans ce fichier de plus de 9 000 lignes : https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • Tu as oublié comment installer et lancer une application native ? :)
      Il est indiqué qu’« ImRAD fonctionne sous Windows, Linux et MacOS ».
    • Une application wasm HTML5 ne semble pas vraiment correspondre à l’orientation de la bibliothèque imgui, qui vise à fonctionner nativement sur plusieurs plateformes avec un minimum de dépendances.

  • Excellent. Ces dernières années, je développais des applications ImGui en C++, et si cela avait existé, je pense que j’aurais gagné beaucoup de temps.

    • Je débute tout juste avec imGui, et j’aimerais savoir en quoi cela fait gagner du temps.

  • Si le créateur de dear-imgui a indiqué que le nom était « dear », ne faudrait-il pas dire « for the Dear library » ?
    IMGUI signifie immediate mode GUI, et ocornut a dit s’être inspiré d’un autre IMGUI appelé « simgui ».
    « Environ 15 mois plus tard, je l’ai renommé “dear imgui”, car “imgui” monopolisait tout l’acronyme. Je suis désolé pour la confusion que cela continue de provoquer. »
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui est le nom complet officiel, mais l’appeler simplement ImGui reste très courant.
      Le nom du namespace est aussi ImGui, et ce n’est certainement pas simplement « Dear ».

  • Il ne faudrait probablement pas y mettre trop de sudo. À part ça, ça a vraiment l’air génial.

  • Je me demande si le code C++ généré peut aussi être utilisé depuis quelque chose comme Python quand on utilise les bindings pyimgui.

  • Je me demande pourquoi un GUI builder pour ImGui n’est pas implémenté avec ImGui lui-même.

    • Je ne vois pas pourquoi tu penses que ce n’est pas le cas. D’après le code et les captures d’écran, l’UI utilise Dear ImGui.

  • Super. Je travaille sur un projet avec ImGui et je me disais sans arrêt que ce genre d’outil serait utile. Je vais l’essayer.

  • Steam est un système multiplateforme populaire ; pourrait-on l’utiliser aussi pour des applications qui ne sont pas des jeux ? Voire pour des applications d’entreprise ?

    • Les applications ont généralement besoin d’un bon rendu de texte et d’une bonne prise en charge de la mise en page.
      Cela inclut le multiligne, les polices et, dans certains cas, des fonctionnalités comme le RTL, et ImGUI est insuffisant sur ces aspects.
    • Je ne sais pas bien pourquoi Steam a été mentionné, mais Steam vend aussi des logiciels.