ImRAD - Builder GUI untuk pustaka ImGui

 (github.com/tpecholt)
2 poin oleh GN⁺ 2024-08-17 | 1 komentar | Bagikan ke WhatsApp
  • ImRAD adalah builder GUI untuk ImGui yang menghasilkan kode C++ yang bisa langsung digunakan dalam aplikasi, lalu mem-parse kembali kode tersebut agar UI yang dihasilkan tetap dapat diedit
  • Mendukung data binding, event, dan penambahan kode UI manual; kode yang dihasilkan dipisahkan dengan penanda komentar sehingga pengguna tetap bisa memakai desainer meski menyisipkan kode sendiri
  • Berjalan di Windows, Linux, dan MacOS; kode yang dihasilkan berjalan di Windows, Linux, MacOS, dan Android
  • Layout menggunakan SameLine, Spacing, NextColumn, serta box layout alih-alih posisi absolut, dan mempertahankan relasi parent-child serta urutan antar-widget
  • Source ImRAD berlisensi GPL, tetapi kode yang dihasilkan oleh tool serta imrad.h yang digunakan kode tersebut dikecualikan dari GPL, sehingga dapat disertakan dalam proyek open source maupun komersial

Peran ImRAD dan cara pembuatan kode

  • ImRAD adalah builder GUI untuk pustaka ImGui
  • Menghasilkan dan mem-parse kode C++ yang dapat langsung digunakan dalam aplikasi
  • Berbeda dari tool lain, ImRAD mendukung alur untuk terus mengedit UI yang sudah dihasilkan

    • Data binding

      • Event
      • Penambahan kode UI manual
      • Kode yang dihasilkan disimpan sebagai file .h dan .cpp, dan dapat diperiksa cepat lewat pratinjau kode

Platform yang didukung dan jenis jendela

  • ImRAD sendiri berjalan di Windows, Linux, MacOS
  • Kode yang dihasilkan berjalan di Windows, Linux, MacOS, Android
  • Mendukung berbagai rancangan jendela
    • Jendela floating, popup, popup modal
    • MainWindow termasuk integrasi GLFW
      • ImRAD menghasilkan pemanggilan GLFW untuk menyinkronkan jendela ImGui dengan title bar jendela OS, flag resize, auto-size, dan lainnya
    • Activity
      • Jendela tanpa dekorasi yang mengisi seluruh area viewport
      • Hanya satu activity yang dapat ditampilkan pada satu waktu
      • Terutama digunakan untuk aplikasi Android
  • Template juga disertakan
    • main.cpp umum berbasis GLFW
    • MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt untuk Android

Fitur widget dan layout

  • Mendukung berbagai widget ImGui
    • Widget dasar seperti Text, Checkbox, Combo, Button, Slider, ColorEdit
    • Widget container seperti Child, Table, CollapsingHeader, TreeNode, TabBar
    • Widget seperti Splitter, DockSpace
    • Pengeditan MenuBar dan menu konteks
    • CustomWidget yang dapat memanggil kode widget eksternal
  • Layout dihasilkan menggunakan SameLine, Spacing, NextColumn alih-alih posisi absolut
    • Membuat widget mengikuti item spacing dan frame padding secara konsisten
    • Relasi parent-child dan urutan child yang penting untuk widget container seperti Table menjadi jelas
    • Penempatan alternatif yang mempertahankan jarak relatif dari sudut parent yang dipilih juga tersedia, dan dapat digunakan untuk widget overlay
  • Mendukung box layout
    • Mekanisme layout yang diimplementasikan di atas fitur ImGui
    • Widget yang dapat diubah ukurannya bisa direntangkan secara horizontal atau vertikal
    • Spacer dapat disisipkan untuk membuat alignment
    • Table Layout Helper yang menggunakan Table tak terlihat untuk membuat layout horizontal juga dapat digunakan

Binding, event, dan kode pengguna

  • Karena ImGui adalah pustaka GUI immediate mode, state widget seperti teks input atau item combobox harus diatur di dalam kode yang dihasilkan pada saat digambar; ImRAD menangani ini dengan property binding
  • Variabel class dapat dikelola melalui class wizard sederhana atau dialog binding
  • Dengan property binding, UI yang dihasilkan dapat berperilaku dinamis sambil tetap bisa didesain
  • Mendukung pembuatan event handler dan kode pendukung
    • Misalnya, dialog modal secara otomatis menghasilkan fungsi anggota OpenPopup yang memiliki callback lambda yang dipanggil saat ditutup
    • Event handler memisahkan kode pemrosesan event pengguna dari bagian yang dihasilkan agar desainer tetap dapat berfungsi
  • Kode yang dihasilkan dipisahkan dengan penanda komentar
    • Pengguna dapat menyisipkan kode tambahan di sekitar kode yang dihasilkan
    • Dapat digunakan untuk pemanggilan popup yang bergantung pada draw atau perhitungan sebagian variabel
    • CustomWidget juga dapat digunakan untuk mendelegasikan ke callback pengguna

Konfigurasi, style, dan variasi runtime

  • Window configuration adalah variasi UI yang dapat diaktifkan saat runtime
    • Berguna untuk platform berbeda atau rotasi layar
  • Style adalah konfigurasi yang menggabungkan warna, variabel style, dan font
    • Selain style bawaan ImGui, pengguna dapat mendefinisikan style baru
    • Style dapat disimpan sebagai file INI di bawah folder style
  • Dialog unit dapat diatur sebagai piksel independen perangkat
    • Berguna untuk Android dan aplikasi yang sadar DPI
  • ImRAD melacak perubahan pada file yang terbuka
    • Saat mendesain di ImRAD, pengguna juga dapat mengedit file yang sama di IDE pilihannya
    • Perubahan style INI juga langsung ditampilkan

Dependensi dan opsi kode yang dihasilkan

  • Kode yang dihasilkan dapat langsung digunakan dalam proyek dan secara default hanya bergantung pada pustaka ImGui serta header pendamping imrad.h
  • Saat ini imrad.h mencakup interface dan implementasi sekaligus
    • Untuk membuat implementasi di main.cpp, definisikan IMRAD_H_IMPLEMENTATION sebelum include
  • Kode yang dihasilkan menggunakan rutin formatting ImRad::Format
    • Pada C++20, secara default didelegasikan ke std::format
    • Jika IMRAD_WITH_FMT didefinisikan, pustaka fmt dapat digunakan
    • Jika keduanya tidak ada, digunakan rutin formatting sederhana yang melewati flag formatting
  • Sebagian fitur memerlukan dependensi tambahan dan aktivasi eksplisit
    • Widget MainWindow atau Image memerlukan pustaka tambahan seperti GLFW, STB
    • Definisi IMRAD_WITH_LOAD_TEXTURE diperlukan
  • imrad.h dapat menggunakan pustaka zlib untuk memuat aset dari file zip
    • Diaktifkan dengan IMRAD_WITH_MINIZIP
  • Dapat menghasilkan kode yang menyertakan string terjemahan
    • Jika imrad.h dikompilasi dengan IMRAD_WITH_GETTEXT, terjemahan dapat dilakukan dengan gettext/libintl
    • libintl-lite yang tanpa dependensi juga dapat digunakan

Lisensi dan distribusi

  • Kode sumber ImRAD berlisensi GPL
  • Kode yang dihasilkan oleh tool dikecualikan dari GPL
    • Dapat disertakan dalam proyek open source atau komersial
    • Lisensi kode yang dihasilkan ditentukan oleh pengguna
  • imrad.h yang digunakan oleh kode yang dihasilkan juga dikecualikan dari GPL
  • Versi terbaru dibangun dengan CMake setelah meng-clone repositori
    • Submodule di direktori 3rdparty juga harus diambil
  • Versi yang agak lama dapat diunduh dari Releases
  • Tutorial dan dokumentasi terperinci tersedia di wiki

Bacaan terkait

1 komentar

 
GN⁺ 2024-08-17
Komentar Hacker News

  • Salah satu hal paling mengejutkan dari proyek ini adalah ia punya parser buatan sendiri untuk membaca subset C++ yang bisa ia hasilkan
    Semuanya diimplementasikan sebagai satu header tunggal, dan terlihat mengesankan sekaligus gila
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • Saya penasaran apa persisnya maksudnya
      Karena tidak terlalu akrab dengan pemrograman, saya hanya paham bahwa ada sesuatu di proyek ini yang bisa membaca data
      Akan menyenangkan kalau ada yang bisa menjelaskan mengapa alat yang bisa membaca C++ itu hebat

  • Benar-benar keren. Mungkin karena nostalgia Visual Basic, tapi bagi saya ini seperti hiasan di atas kue imgui

    • Sampai sekarang pun belum ada pengalaman RAD yang lebih cepat daripada Visual Basic 6

  • Akan keren kalau ini hadir sebagai aplikasi wasm HTML5, supaya kita bisa cepat membuat GUI di browser lalu menyalin-tempel hasilnya ke editor
    Tertulis “menghasilkan dan mem-parsing kode C++, dan kode ini bisa langsung digunakan di aplikasi”, jadi saya penasaran apakah parsing di sini untuk membaca kembali kode yang dibuatnya sendiri

    • Parser-nya ada di sini: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      Sepertinya memang untuk membaca kode yang dibuatnya sendiri. Parser buatan sendiri ini hanya menangani subset, bukan seluruh bahasa
      Misalnya, pengenalan container STL di-hardcode, dan kemungkinan hanya menangani hal-hal yang bisa muncul dari kode yang dihasilkan
      Pada tahap ini ia tidak membuat abstract syntax tree (AST). Strukturnya tampak melakukan tokenisasi dan analisis leksikal, lalu pemanggil harus memahami bagaimana melanjutkan “state machine” parsing-nya
      Pembuatan AST dan pembuatan kode tampaknya dilakukan di file yang panjangnya lebih dari 9000 baris ini: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • Apa sudah lupa cara memasang dan menjalankan aplikasi native? :)
      Tertulis “ImRAD berjalan di Windows, Linux, MacOS”
    • Aplikasi wasm HTML5 rasanya agak kurang sejalan dengan arah library imgui yang ingin berjalan secara native di banyak platform dan meminimalkan dependensi

  • Bagus sekali. Selama beberapa tahun terakhir saya membuat aplikasi ImGui C++, dan kalau ini sudah ada, sepertinya banyak waktu bisa dihemat

    • Saya baru mulai memakai imGui, dan ingin tahu bagaimana ini bisa menghemat waktu

  • Kalau pembuat dear-imgui sudah menyatakan namanya “dear”, bukankah seharusnya ditulis “for the Dear library”?
    IMGUI berarti immediate mode GUI, dan ocornut pernah bilang ia terinspirasi dari IMGUI lain bernama “simgui”
    “Sekitar 15 bulan kemudian namanya diganti menjadi ‘dear imgui’. Karena ‘imgui’ sudah menguasai seluruh akronimnya. Maaf karena sampai sekarang masih menimbulkan kebingungan.”
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui adalah nama lengkap resminya, tetapi menyebutnya ImGui saja juga masih sangat umum
      Nama namespace-nya juga ImGui, dan jelas bukan hanya “Dear”

  • Sepertinya tidak seharusnya ada terlalu banyak sudo di sana. Selain itu, kelihatannya benar-benar keren

  • Saya penasaran apakah kode C++ yang dihasilkan juga bisa digunakan dari tempat seperti Python saat memakai binding pyimgui

  • Saya penasaran kenapa GUI builder untuk ImGui tidak diimplementasikan dengan ImGui itu sendiri

    • Saya tidak tahu kenapa Anda mengira tidak begitu. Dari kode dan screenshot-nya, UI-nya memakai Dear ImGui

  • Keren. Saya sedang membuat proyek dengan ImGui dan terus berpikir akan menyenangkan kalau ada hal seperti ini. Saya berencana mencobanya

  • Steam adalah sistem lintas platform yang populer; apakah bisa dipakai juga untuk aplikasi non-game? Bahkan untuk aplikasi enterprise?

    • Aplikasi biasanya membutuhkan rendering teks dan dukungan layout yang bagus
      Misalnya multi-baris, font, dan dalam beberapa kasus fitur seperti RTL, tetapi bagian-bagian seperti ini kurang di ImGUI
    • Saya kurang tahu kenapa Steam dibahas, tetapi Steam memang menjual software juga