ImRAD - ImGuiライブラリ向けGUIビルダー

 (github.com/tpecholt)
2 ポイント 投稿者 GN⁺ 2024-08-17 | 1件のコメント | WhatsAppで共有
  • ImRADはImGui向けのGUIビルダーで、アプリケーションでそのまま使えるC++コードを生成し、再パースして生成済みUIを継続的に修正できる
  • データバインディング、イベント、手動でのUIコード追加をサポートし、生成コードはコメントマーカーで区切られるため、ユーザーがコードを挿入してもデザイナーの利用を継続できる
  • Windows、Linux、MacOSで動作し、生成されたコードはWindows、Linux、MacOS、Androidで動作する
  • レイアウトは絶対配置ではなくSameLine、Spacing、NextColumnとボックスレイアウトを用い、ウィジェット間の親子関係と順序を維持する
  • ImRADのソースはGPLだが、ツールが生成したコードと生成コードが利用するimrad.hはGPLの対象外であり、オープンソース・商用プロジェクトに組み込める

ImRADの役割とコード生成方式

  • ImRADはImGuiライブラリ向けのGUIビルダー
  • アプリケーションで直接利用できるC++コードを生成・解析する
  • 他のツールと異なり、生成されたUIを継続して修正するワークフローをサポートする

    • データバインディング

      • イベント
      • 手動でのUIコード追加
      • 生成されたコードは.hおよび.cppファイルとして保存され、コードプレビューですばやく確認できる

対応プラットフォームとウィンドウ種類

  • ImRAD自体はWindows、Linux、MacOSで動作する
  • 生成されたコードはWindows、Linux、MacOS、Androidで動作する
  • さまざまなウィンドウ設計をサポートする
    • フローティングウィンドウ、ポップアップ、モーダルポップアップ
    • GLFW統合を含むMainWindow
      • ImRADがGLFW呼び出しを生成し、ImGuiウィンドウとOSウィンドウのタイトルバー、リサイズフラグ、自動サイズなどを同期する
    • Activity
      • ビューポート全体を埋める装飾なしのウィンドウ
      • 一度に1つのactivityのみ表示可能
      • 主にAndroidアプリで利用される
  • テンプレートも含まれる
    • GLFWベースの一般的なmain.cpp
    • Android向けのMainActivity.java、AndroidManifest.xml、main.cpp、CMakeLists.txt

ウィジェットとレイアウト機能

  • 幅広いImGuiウィジェットをサポートする
    • Text、Checkbox、Combo、Button、Slider、ColorEditなどの基本ウィジェット
    • Child、Table、CollapsingHeader、TreeNode、TabBarなどのコンテナウィジェット
    • Splitter、DockSpaceなどのウィジェット
    • MenuBarとコンテキストメニューの編集
    • 外部ウィジェットコードを呼び出せるCustomWidget
  • レイアウトは絶対配置ではなくSameLine、Spacing、NextColumnを使って生成される
    • ウィジェットがitem spacingとframe paddingに一貫して従うようにする
    • Tableのようなコンテナウィジェットで重要な親子関係と子要素の順序が明確になる
    • 選択した親コーナーからの相対距離を維持する代替配置指定も可能で、オーバーレイウィジェットに利用できる
  • ボックスレイアウトをサポートする
    • ImGui機能の上に実装されたレイアウト機構
    • リサイズ可能なウィジェットを横方向または縦方向に伸ばせる
    • spacerを挿入して整列を作れる
    • 不可視のTableを使って横レイアウトを生成するTable Layout Helperも利用できる

バインディング、イベント、ユーザーコード

  • ImGuiは即時モードGUIライブラリであるため、入力テキストやコンボボックス項目のようなウィジェット状態は描画時点で生成コード内に設定する必要があり、ImRADはこれをプロパティバインディングで処理する
  • クラス変数はシンプルなclass wizardまたはバインディングダイアログで管理できる
  • プロパティバインディングを使うことで、生成UIを動的に動作させつつ継続してデザインできる
  • イベントハンドラーと補助コードの生成をサポートする
    • たとえばモーダルダイアログでは、閉じる際に呼び出されるラムダコールバックを持つOpenPopupメンバー関数を自動生成する
    • イベントハンドラーはユーザーのイベント処理コードと生成部分を分離し、デザイナーを継続利用できるようにする
  • 生成コードはコメントマーカーで区切られる
    • ユーザーは生成コードの周囲に追加コードを挿入できる
    • drawに依存するポップアップ呼び出しや一部の変数計算に利用できる
    • CustomWidgetを使ってユーザーコールバックへ委譲することもできる

設定、スタイル、ランタイム変種

  • Window configurationはランタイムで有効化できるUIバリエーション
    • 異なるプラットフォームや画面回転などに有用
  • スタイルは色、スタイル変数、フォントをまとめた設定
    • ImGuiのデフォルトスタイル以外に、ユーザーが新しいスタイルを定義できる
    • スタイルはstyleフォルダー配下のINIファイルとして保存可能
  • dialog unitはデバイス非依存ピクセルに設定できる
    • AndroidやDPI対応アプリに有用
  • ImRADは開いているファイルの変更を追跡する
    • ImRADでデザインしながら、ユーザーは選択したIDEでも同じファイルを編集できる
    • INIスタイルの変更も即座に反映される

生成コードの依存関係とオプション

  • 生成コードはプロジェクトでそのまま使用でき、基本的にはImGuiライブラリと付属ヘッダー**imrad.h**のみに依存する
  • 現在のimrad.hはインターフェースと実装の両方を含む
    • main.cppで実装を生成するには、includeの前にIMRAD_H_IMPLEMENTATIONを定義する
  • 生成コードはImRad::Formatフォーマットルーチンを使用する
    • C++20ではデフォルトでstd::formatに委譲する
    • IMRAD_WITH_FMTを定義するとfmtライブラリを使用できる
    • どちらもない場合は、フォーマットフラグを飛ばす単純なフォーマットルーチンを使う
  • 一部機能には追加の依存関係と明示的な有効化が必要
    • MainWindowまたはImageウィジェットには、GLFW、STBなどの追加ライブラリが必要
    • IMRAD_WITH_LOAD_TEXTUREの定義が必要
  • imrad.hはzlibライブラリを使用してzipファイルからアセットを読み込める
    • IMRAD_WITH_MINIZIPで有効化する
  • 翻訳文字列を含むコードを生成できる
    • IMRAD_WITH_GETTEXTでimrad.hをコンパイルするとgettext/libintlで翻訳可能になる
    • 依存関係のないlibintl-liteも利用できる

ライセンスと配布

  • ImRADのソースコードはGPLライセンス
  • ツールが生成したコードはGPLの対象外
    • オープンソースまたは商用プロジェクトに含められる
    • 生成コードのライセンスはユーザーが決定する
  • 生成コードが利用するimrad.hもGPLの対象外
  • 最新版はリポジトリをcloneした後、CMakeでビルドする
    • 3rdpartyディレクトリのサブモジュールも取得する必要がある
  • やや古いバージョンはReleasesからダウンロードできる
  • チュートリアルと詳細なドキュメントはwikiで確認できる

関連記事

1件のコメント

 
GN⁺ 2024-08-17
Hacker News のコメント

  • このプロジェクトで最も驚く点の一つは、自分が生成できる C++ のサブセットを読むための手製パーサを持っていること
    すべて単一ヘッダーで実装されていて、印象的でもあり、狂気の沙汰のようにも見える
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • それが正確にどういう意味なのか気になる
      プログラミングには詳しくないので、このプロジェクトにデータを読める何かがある、という程度にしか理解できていない
      C++ を読めるツールがなぜすごいのか説明してくれるとうれしい

  • 本当にすばらしい。Visual Basic への郷愁のせいかもしれないが、自分にとっては imgui ケーキの上の飾りのようなプロジェクトだ

    • 今に至るまで、Visual Basic 6 より速い RAD 体験はない

  • ブラウザで GUI を素早く作り、結果をエディタにコピー＆ペーストできるように、wasm HTML5 アプリとして入ると良さそう
    「C++ コードを生成してパースし、このコードはアプリケーションでそのまま使用できる」とあるが、ここでのパースは自分が生成したコードを再び読むためなのか気になる

    • パーサはここにある: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      自分が生成したコードを読むためのものに見える。手製パーサは言語全体ではなくサブセットだけを扱う
      たとえば STL コンテナの認識をハードコードしており、おそらく生成コードに出てき得るものだけを処理しているようだ
      この段階では抽象構文木（AST） は作らない。トークン化と字句解析を行い、パースの「状態機械」をどう進めるかは呼び出し側が理解する必要がある構造に見える
      AST の生成とコード生成は、9000 行を超えるこのファイルで行っているようだ: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • ネイティブアプリケーションをインストールして実行する方法を忘れてしまったのか？ :)
      「ImRAD は Windows、Linux、MacOS で動作する」と書かれている
    • wasm HTML5 アプリは、複数プラットフォームでネイティブに動作し、依存関係を最小限にしようとする imgui ライブラリの方向性とは少し合わなさそう

  • すばらしい。ここ数年 ImGui C++ アプリを作っていたが、これがあれば多くの時間を節約できただろう

    • ちょうど imGui を始めたところなので、これがどう時間を節約してくれるのか知りたい

  • dear-imgui の作者が名前は「dear」だと明かしたのなら、「for the Dear library」と言うべきではないのか？
    IMGUI は即時モード GUI を意味し、ocornut は「simgui」という別の IMGUI から着想を得たと言っていた
    「約15か月後に『dear imgui』へ改名した。『imgui』が略語全体を独占していたためだ。今でも混乱を招いていることは申し訳ない」
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui が正式なフルネームだが、単に ImGui と呼ぶのも今なお非常に一般的
      名前空間名も ImGui であり、単に「Dear」だけでは決してない

  • そこに sudo があまり入りすぎないほうがよさそう。それ以外は本当に良さそうに見える

  • 生成された C++ コードを、pyimgui バインディングを使うときに Python などでも使えるのか気になる

  • ImGui 用の GUI ビルダーがなぜ ImGui 自体で実装されていないのか気になる

    • なぜそうではないと思うのか分からない。コードとスクリーンショットを見ると、UI に Dear ImGui を使っている

  • すばらしい。ImGui でプロジェクトを作っていて、ずっとこういうものがあればいいと思っていた。試してみるつもり

  • Steam は人気のあるクロスプラットフォームシステムだが、ゲームではないアプリケーションにも使えるのだろうか？ エンタープライズアプリケーションにさえ可能だろうか？

    • アプリケーションには通常、優れたテキストレンダリングとレイアウト支援が必要
      複数行、フォント、場合によっては RTL のような機能だが、ImGUI にはこうした部分が不足している
    • なぜ Steam を持ち出したのかはよく分からないが、Steam でもソフトウェアは販売している