ImRAD – GUI-Builder für die ImGui-Bibliothek

 (github.com/tpecholt)
2 Punkte von GN⁺ 2024-08-17 | 1 Kommentare | Auf WhatsApp teilen
  • ImRAD ist ein GUI-Builder für ImGui, der C++-Code erzeugt, der direkt in Anwendungen verwendet werden kann, und diesen wieder parst, sodass die erzeugte UI weiter bearbeitet werden kann
  • Unterstützt Datenbindung, Events und das Hinzufügen von manuellem UI-Code; der erzeugte Code ist durch Kommentar-Marker getrennt, sodass Nutzer eigenen Code einfügen und den Designer weiterhin verwenden können
  • Läuft unter Windows, Linux und MacOS; der erzeugte Code funktioniert unter Windows, Linux, MacOS und Android
  • Für Layouts werden statt absoluter Positionierung SameLine, Spacing, NextColumn sowie Box-Layouts verwendet; Eltern-Kind-Beziehungen und Reihenfolge zwischen Widgets bleiben erhalten
  • Der ImRAD-Quellcode steht unter GPL, aber der vom Tool erzeugte Code sowie das vom erzeugten Code verwendete imrad.h sind von der GPL ausgenommen und können in Open-Source- und kommerzielle Projekte eingebunden werden

Rolle von ImRAD und Art der Codegenerierung

  • ImRAD ist ein GUI-Builder für die ImGui-Bibliothek
  • Er erzeugt und parst C++-Code, der direkt in Anwendungen verwendet werden kann
  • Anders als andere Tools unterstützt er einen Workflow, in dem die erzeugte UI weiter bearbeitet werden kann

    • Datenbindung

      • Events
      • Hinzufügen von manuellem UI-Code
      • Der erzeugte Code wird als .h- und .cpp-Dateien gespeichert und lässt sich über eine Code-Vorschau schnell prüfen

Unterstützte Plattformen und Fenstertypen

  • ImRAD selbst läuft unter Windows, Linux und MacOS
  • Der erzeugte Code läuft unter Windows, Linux, MacOS und Android
  • Verschiedene Fensterdesigns werden unterstützt
    • Floating Windows, Popups, modale Popups
    • MainWindow inklusive GLFW-Integration
      • ImRAD erzeugt GLFW-Aufrufe, um ImGui-Fenster mit der Titelleiste des OS-Fensters, Resize-Flags, Auto-Size usw. zu synchronisieren
    • Activity
      • Ein dekorationsloses Fenster, das den gesamten Viewport-Bereich ausfüllt
      • Es kann jeweils nur eine Activity angezeigt werden
      • Wird hauptsächlich für Android-Apps genutzt
  • Templates sind ebenfalls enthalten
    • Allgemeines main.cpp auf GLFW-Basis
    • MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt für Android

Widgets und Layout-Funktionen

  • Unterstützt eine breite Palette von ImGui-Widgets
    • Basis-Widgets wie Text, Checkbox, Combo, Button, Slider, ColorEdit
    • Container-Widgets wie Child, Table, CollapsingHeader, TreeNode, TabBar
    • Widgets wie Splitter, DockSpace
    • Bearbeitung von MenuBar und Kontextmenüs
    • CustomWidget zum Aufrufen von externem Widget-Code
  • Layouts werden statt mit absoluter Positionierung mithilfe von SameLine, Spacing und NextColumn erzeugt
    • Sorgt dafür, dass Widgets konsistent item spacing und frame padding folgen
    • Eltern-Kind-Beziehungen und die Reihenfolge der Kinder, die bei Container-Widgets wie Table wichtig sind, sind eindeutig
    • Alternativ ist auch eine Positionierung möglich, die relative Abstände zu einer gewählten Ecke des Eltern-Elements beibehält; dies kann für Overlay-Widgets genutzt werden
  • Unterstützt Box-Layouts
    • Ein auf ImGui-Funktionen aufbauender Layout-Mechanismus
    • Größenveränderbare Widgets können horizontal oder vertikal gestreckt werden
    • Spacer können eingefügt werden, um Ausrichtungen zu erzeugen
    • Außerdem kann der Table Layout Helper genutzt werden, der mit einer unsichtbaren Table horizontale Layouts erzeugt

Bindings, Events und Nutzercode

  • Da ImGui eine Immediate-Mode-GUI-Bibliothek ist, müssen Widget-Zustände wie Eingabetexte oder ComboBox-Einträge zum Zeitpunkt des Zeichnens im erzeugten Code gesetzt werden; ImRAD erledigt dies über Property Binding
  • Klassenvariablen können über einen einfachen Class Wizard oder über den Binding-Dialog verwaltet werden
  • Mit Property Binding kann die erzeugte UI dynamisch funktionieren und dennoch weiterhin designbar bleiben
  • Die Erzeugung von Event-Handlern und unterstützendem Code wird unterstützt
    • Beispielsweise erzeugt ein modaler Dialog automatisch eine OpenPopup-Memberfunktion mit einem Lambda-Callback, der beim Schließen aufgerufen wird
    • Event-Handler trennen den nutzerseitigen Event-Verarbeitungscode von den generierten Teilen, sodass der Designer weiter funktionieren kann
  • Der erzeugte Code ist durch Kommentar-Marker getrennt
    • Nutzer können zusätzlichen Code um den erzeugten Code herum einfügen
    • Dies kann für Popup-Aufrufe, die vom draw abhängen, oder für bestimmte Variablenberechnungen genutzt werden
    • Mit CustomWidget kann auch an einen Nutzer-Callback delegiert werden

Konfiguration, Styles und Laufzeitvarianten

  • Window configuration ist eine UI-Variante, die zur Laufzeit aktiviert werden kann
    • Nützlich für unterschiedliche Plattformen oder Bildschirmrotationen
  • Styles sind Einstellungen, die Farben, Style-Variablen und Fonts bündeln
    • Neben den ImGui-Standardstyles können Nutzer eigene Styles definieren
    • Styles können als INI-Dateien unter dem Ordner style gespeichert werden
  • dialog unit kann als geräteunabhängige Pixel festgelegt werden
    • Nützlich für Android und DPI-aware Apps
  • ImRAD verfolgt Änderungen an geöffneten Dateien
    • Während des Designs in ImRAD können dieselben Dateien auch in einer vom Nutzer gewählten IDE bearbeitet werden
    • Änderungen an INI-Styles werden ebenfalls sofort angezeigt

Abhängigkeiten und Optionen des erzeugten Codes

  • Der erzeugte Code kann direkt im Projekt verwendet werden und hängt standardmäßig nur von der ImGui-Bibliothek und dem begleitenden Header imrad.h ab
  • Derzeit enthält imrad.h sowohl Interface als auch Implementierung
    • Um die Implementierung in main.cpp zu erzeugen, wird vor dem Include IMRAD_H_IMPLEMENTATION definiert
  • Der erzeugte Code verwendet die Formatierungsroutine ImRad::Format
    • Unter C++20 delegiert sie standardmäßig an std::format
    • Wenn IMRAD_WITH_FMT definiert ist, kann die Bibliothek fmt verwendet werden
    • Wenn beides nicht vorhanden ist, wird eine einfache Formatierungsroutine verwendet, die Formatierungs-Flags überspringt
  • Einige Funktionen benötigen zusätzliche Abhängigkeiten und explizite Aktivierung
    • MainWindow oder das Widget Image benötigen zusätzliche Bibliotheken wie GLFW und STB
    • Die Definition von IMRAD_WITH_LOAD_TEXTURE ist erforderlich
  • imrad.h kann mithilfe der zlib-Bibliothek Assets aus ZIP-Dateien laden
    • Aktivierung über IMRAD_WITH_MINIZIP
  • Code mit Übersetzungsstrings kann erzeugt werden
    • Wenn imrad.h mit IMRAD_WITH_GETTEXT kompiliert wird, ist Übersetzung über gettext/libintl möglich
    • Auch das abhängigkeitsfreie libintl-lite kann verwendet werden

Lizenz und Distribution

  • Der ImRAD-Quellcode steht unter der GPL-Lizenz
  • Der vom Tool erzeugte Code ist von der GPL ausgenommen
    • Er kann in Open-Source- oder kommerzielle Projekte eingebunden werden
    • Die Lizenz des erzeugten Codes legt der Nutzer fest
  • Auch das vom erzeugten Code verwendete imrad.h ist von der GPL ausgenommen
  • Die neueste Version wird nach dem Klonen des Repositorys mit CMake gebaut
    • Auch die Submodule im Verzeichnis 3rdparty müssen geholt werden
  • Eine etwas ältere Version kann unter Releases heruntergeladen werden
  • Tutorials und ausführliche Dokumentation sind im Wiki verfügbar

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2024-08-17
Meinungen auf Hacker News

  • Einer der erstaunlichsten Teile dieses Projekts ist, dass es einen handgeschriebenen Parser hat, um die C++-Teilmenge zu lesen, die es selbst erzeugen kann.
    Das Ganze ist als einzelner Header implementiert; beeindruckend und zugleich ziemlich verrückt.
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • Ich frage mich, was genau damit gemeint ist.
      Ich bin mit Programmierung nicht sehr vertraut und verstehe nur, dass dieses Projekt irgendetwas hat, das Daten lesen kann.
      Es wäre hilfreich, wenn jemand erklären könnte, warum ein Tool, das C++ lesen kann, so bemerkenswert ist.

  • Wirklich cool. Vielleicht liegt es an der Visual-Basic-Nostalgie, aber für mich ist dieses Projekt das Sahnehäubchen auf dem imgui-Kuchen.

    • Bis heute gibt es keine schnellere RAD-Erfahrung als Visual Basic 6.

  • Es wäre cool, wenn es als wasm-HTML5-App verfügbar wäre, damit man im Browser schnell eine GUI bauen und das Ergebnis in den Editor kopieren kann.
    Dort steht: „Erzeugt und parst C++-Code, der direkt in der Anwendung verwendet werden kann“; ich frage mich, ob das Parsen hier dazu dient, den selbst erzeugten Code wieder einzulesen.

    • Der Parser ist hier: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      Es sieht so aus, als sei er tatsächlich dafür gedacht, selbst erzeugten Code zu lesen. Der handgeschriebene Parser verarbeitet nicht die ganze Sprache, sondern nur eine Teilmenge.
      Zum Beispiel ist die Erkennung von STL-Containern hartcodiert, und vermutlich verarbeitet er nur Dinge, die im generierten Code vorkommen können.
      In diesem Schritt wird kein abstrakter Syntaxbaum (AST) erstellt. Es wirkt so, als mache er Tokenisierung und lexikalische Analyse, und der Aufrufer muss verstehen, wie die Parsing-„State Machine“ weitergeführt wird.
      AST-Erzeugung und Codegenerierung scheinen in dieser Datei mit über 9000 Zeilen zu passieren: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • Hast du vergessen, wie man native Anwendungen installiert und ausführt? :)
      Dort steht: „ImRAD läuft unter Windows, Linux und MacOS“.
    • Eine wasm-HTML5-App scheint nicht so recht zur Ausrichtung der imgui-Bibliothek zu passen, nativ auf mehreren Plattformen zu laufen und Abhängigkeiten zu minimieren.

  • Großartig. Ich habe in den letzten Jahren ImGui-C++-Apps gebaut; wenn es das schon gegeben hätte, hätte ich wohl viel Zeit gespart.

    • Ich fange gerade erst mit imGui an und würde gern wissen, wie einem das Zeit spart.

  • Wenn der Schöpfer von dear-imgui klargestellt hat, dass der Name „dear“ lautet, müsste es dann nicht „for the Dear library“ heißen?
    IMGUI steht für Immediate-Mode-GUI, und ocornut sagte, er sei von einem anderen IMGUI namens „simgui“ inspiriert worden.
    „Etwa 15 Monate später habe ich es in ‘dear imgui’ umbenannt, weil ‘imgui’ das gesamte Akronym vereinnahmte. Es tut mir leid, dass das bis heute Verwirrung stiftet.“
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui ist der offizielle vollständige Name, aber es einfach ImGui zu nennen, ist weiterhin sehr verbreitet.
      Auch der Namespace heißt ImGui, und nur „Dear“ allein ist es definitiv nicht.

  • Ich denke, da sollte nicht zu viel sudo drin sein. Ansonsten sieht es wirklich cool aus.

  • Ich frage mich, ob der generierte C++-Code auch in etwas wie Python verwendet werden kann, wenn man die pyimgui-Bindings nutzt.

  • Ich frage mich, warum ein GUI-Builder für ImGui nicht mit ImGui selbst implementiert wurde.

    • Ich weiß nicht, warum du glaubst, dass das nicht der Fall ist. Wenn man sich Code und Screenshots ansieht, verwendet die UI Dear ImGui.

  • Cool. Ich baue gerade ein Projekt mit ImGui und habe mir ständig gewünscht, dass es so etwas gäbe. Ich werde es ausprobieren.

  • Steam ist ein beliebtes plattformübergreifendes System; könnte man es auch für Nicht-Spiel-Anwendungen nutzen? Sogar für Enterprise-Anwendungen?

    • Anwendungen brauchen normalerweise gutes Text-Rendering und Layout-Unterstützung.
      Also Dinge wie mehrere Zeilen, Schriftarten und je nach Fall RTL; in diesen Bereichen ist ImGUI schwach.
    • Ich bin mir nicht sicher, warum du Steam ins Spiel bringst, aber auf Steam wird durchaus auch Software verkauft.