ImRAD - ImGui kütüphanesi için GUI oluşturucu

 (github.com/tpecholt)
2 puan yazan GN⁺ 2024-08-17 | 1 yorum | WhatsApp'ta paylaş
  • ImRAD, ImGui için bir GUI oluşturucudur; uygulamalarda doğrudan kullanılabilecek C++ kodu üretir ve bunu yeniden ayrıştırarak oluşturulan UI’ın düzenlenmeye devam etmesini sağlar
  • Veri bağlama, olaylar ve manuel UI kodu eklemeyi destekler; üretilen kod yorum işaretçileriyle ayrıldığı için kullanıcı kod eklese bile tasarımcı kullanılmaya devam edebilir
  • Windows, Linux ve MacOS üzerinde çalışır; üretilen kod Windows, Linux, MacOS ve Android’de çalışır
  • Yerleşim, mutlak konum yerine SameLine, Spacing, NextColumn ve kutu yerleşimi kullanır; widget’lar arasındaki ebeveyn-çocuk ilişkisini ve sırayı korur
  • ImRAD kaynak kodu GPL’dir; ancak aracın ürettiği kod ve üretilen kodun kullandığı imrad.h GPL kapsamı dışında tutulur, bu yüzden açık kaynak ve ticari projelere dahil edilebilir

ImRAD’in rolü ve kod üretim biçimi

  • ImRAD, ImGui kütüphanesi için bir GUI oluşturucudur
  • Uygulamada doğrudan kullanılabilecek C++ kodu üretir ve ayrıştırır
  • Diğer araçlardan farklı olarak, üretilen UI’ın düzenlenmeye devam edebildiği bir akışı destekler

    • Veri bağlama

      • Olaylar
      • Manuel UI kodu ekleme
      • Üretilen kod .h ve .cpp dosyaları olarak kaydedilir ve kod önizlemesiyle hızlıca incelenebilir

Desteklenen platformlar ve pencere türleri

  • ImRAD’in kendisi Windows, Linux, MacOS üzerinde çalışır
  • Üretilen kod Windows, Linux, MacOS, Android üzerinde çalışır
  • Çeşitli pencere tasarımlarını destekler
    • Yüzen pencere, açılır pencere, modal açılır pencere
    • GLFW entegrasyonu içeren MainWindow
      • ImRAD, ImGui penceresi ile işletim sistemi penceresinin başlık çubuğu, yeniden boyutlandırma bayrakları, otomatik boyutlandırma vb. özelliklerini senkronize etmek için GLFW çağrıları üretir
    • Activity
      • Tüm viewport alanını dolduran, dekorasyonsuz pencere
      • Aynı anda yalnızca bir activity gösterilebilir
      • Genellikle Android uygulamalarında kullanılır
  • Şablonlar da içerir
    • GLFW tabanlı genel main.cpp
    • Android için MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt

Widget’lar ve yerleşim özellikleri

  • Geniş bir ImGui widget yelpazesini destekler
    • Text, Checkbox, Combo, Button, Slider, ColorEdit gibi temel widget’lar
    • Child, Table, CollapsingHeader, TreeNode, TabBar gibi container widget’ları
    • Splitter, DockSpace gibi widget’lar
    • MenuBar ve bağlam menüsü düzenleme
    • Harici widget kodu çağırabilen CustomWidget
  • Yerleşim, mutlak konum yerine SameLine, Spacing, NextColumn kullanılarak üretilir
    • Widget’ların item spacing ve frame padding değerlerine tutarlı biçimde uymasını sağlar
    • Table gibi container widget’ları için önemli olan ebeveyn-çocuk ilişkisi ve çocuk sırası açıktır
    • Seçilen ebeveyn köşesinden göreli mesafeyi koruyan alternatif konumlandırma da mümkündür; bu, overlay widget’lar için kullanılabilir
  • Kutu yerleşimini destekler
    • ImGui özellikleri üzerine uygulanmış bir yerleşim mekanizması
    • Yeniden boyutlandırılabilir widget’lar yatay veya dikey yönde genişletilebilir
    • Hizalama oluşturmak için spacer eklenebilir
    • Yatay yerleşim üretmek için görünmez bir Table kullanan Table Layout Helper da kullanılabilir

Bağlama, olaylar ve kullanıcı kodu

  • ImGui, immediate mode bir GUI kütüphanesi olduğundan giriş metni veya combobox öğeleri gibi widget durumları çizim anında üretilen kod içinde ayarlanmalıdır; ImRAD bunu özellik bağlama ile ele alır
  • Sınıf değişkenleri basit bir class wizard veya bağlama iletişim kutusundan yönetilebilir
  • Özellik bağlama kullanıldığında, üretilen UI dinamik çalışırken tasarlanmaya da devam edebilir
  • Olay işleyicileri ve destek kodu üretimini destekler
    • Örneğin modal iletişim kutusu, kapatıldığında çağrılan lambda callback’e sahip bir OpenPopup üye fonksiyonunu otomatik üretir
    • Olay işleyicileri, kullanıcı olay işleme kodunu üretilen bölümden ayırarak tasarımcının çalışmaya devam etmesini sağlar
  • Üretilen kod yorum işaretçileriyle ayrılır
    • Kullanıcı, üretilen kodun çevresine ek kod yerleştirebilir
    • Draw’a bağlı popup çağrıları veya bazı değişken hesaplamaları için kullanılabilir
    • Kullanıcı callback’ine devretmek için CustomWidget da kullanılabilir

Ayarlar, stiller ve çalışma zamanı varyasyonları

  • Window configuration, çalışma zamanında etkinleştirilebilen UI varyasyonlarıdır
    • Farklı platformlar veya ekran döndürme gibi durumlarda kullanışlıdır
  • Stil; renkleri, stil değişkenlerini ve fontları bir araya getiren bir ayardır
    • ImGui varsayılan stili dışında kullanıcı yeni stiller tanımlayabilir
    • Stiller style klasörü altında INI dosyaları olarak kaydedilebilir
  • Dialog unit, cihazdan bağımsız piksel olarak ayarlanabilir
    • Android ve DPI-aware uygulamalar için kullanışlıdır
  • ImRAD, açık dosyalardaki değişiklikleri izler
    • ImRAD’de tasarım yaparken aynı dosya kullanıcının seçtiği IDE’de de düzenlenebilir
    • INI stil değişiklikleri de anında gösterilir

Üretilen kodun bağımlılıkları ve seçenekler

  • Üretilen kod projede doğrudan kullanılabilir; varsayılan olarak yalnızca ImGui kütüphanesine ve eşlik eden imrad.h başlığına bağımlıdır
  • Şu anda imrad.h hem arayüzü hem de uygulamayı içerir
    • main.cpp içinde uygulamayı oluşturmak için include öncesinde IMRAD_H_IMPLEMENTATION tanımlanır
  • Üretilen kod ImRad::Format biçimlendirme rutinini kullanır
    • C++20’de varsayılan olarak std::format’e devreder
    • IMRAD_WITH_FMT tanımlanırsa fmt kütüphanesi kullanılabilir
    • İkisi de yoksa biçimlendirme bayraklarını atlayan basit bir biçimlendirme rutini kullanılır
  • Bazı özellikler ek bağımlılıklar ve açıkça etkinleştirme gerektirir
    • MainWindow veya Image widget’ı, GLFW ve STB gibi ek kütüphaneler gerektirir
    • IMRAD_WITH_LOAD_TEXTURE tanımı gerekir
  • imrad.h, zip dosyalarından asset yüklemek için zlib kütüphanesini kullanabilir
    • IMRAD_WITH_MINIZIP ile etkinleştirilir
  • Çeviri dizgeleri içeren kod üretebilir
    • IMRAD_WITH_GETTEXT ile imrad.h derlenirse gettext/libintl üzerinden çeviri yapılabilir
    • Bağımlılığı olmayan libintl-lite da kullanılabilir

Lisans ve dağıtım

  • ImRAD kaynak kodu GPL lisanslıdır
  • Aracın ürettiği kod GPL kapsamı dışındadır
    • Açık kaynak veya ticari projelere dahil edilebilir
    • Üretilen kodun lisansına kullanıcı karar verir
  • Üretilen kodun kullandığı imrad.h de GPL kapsamı dışındadır
  • En güncel sürüm, depo clone edildikten sonra CMake ile derlenir
    • 3rdparty dizinindeki submodule’lerin de alınması gerekir
  • Biraz eski sürümler Releases üzerinden indirilebilir
  • Eğitimler ve ayrıntılı belgeler wiki üzerinden görülebilir

İlgili okumalar

1 yorum

 
GN⁺ 2024-08-17
Hacker News yorumları

  • Bu projedeki en şaşırtıcı yanlardan biri, üretebildiği C++ alt kümesini okumak için elle yazılmış bir ayrıştırıcıya sahip olması.
    Hepsi tek bir header olarak uygulanmış; etkileyici ama aynı zamanda çılgınca görünüyor.
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • Bunun tam olarak ne anlama geldiğini merak ediyorum.
      Programlamaya pek aşina değilim; bu projede verileri okuyabilen bir şey olduğu kadarını anladım.
      C++ okuyabilen bir aracın neden önemli olduğunu açıklayabilirseniz iyi olur.

  • Gerçekten harika. Belki Visual Basic nostaljisinden dolayıdır ama benim için imgui pastasının üzerindeki krema gibi bir proje.

    • Bugüne kadar Visual Basic 6’dan daha hızlı bir RAD deneyimi olmadı.

  • Tarayıcıda hızlıca GUI oluşturup sonucu editöre kopyalayıp yapıştırabilmek için bir wasm HTML5 uygulaması olarak sunulsa harika olurdu.
    “C++ kodu üretir ve ayrıştırır; bu kod uygulamada doğrudan kullanılabilir” deniyor; buradaki ayrıştırmanın, kendi ürettiği kodu yeniden okumak için olup olmadığını merak ediyorum.

    • Ayrıştırıcı burada: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      Kendi ürettiği kodu okumak için gibi görünüyor. Elle yazılmış ayrıştırıcı dilin tamamını değil, yalnızca bir alt kümeyi işliyor.
      Örneğin STL container’ları tanımayı hardcode etmiş; muhtemelen yalnızca üretilen kodda ortaya çıkabilecek şeyleri işliyor.
      Bu aşamada soyut sözdizimi ağacı (AST) oluşturmuyor. Tokenlaştırma ve sözcüksel analiz yapıyor; ayrıştırma “durum makinesinin” nasıl ilerleyeceğini çağıranın anlaması gereken bir yapı gibi görünüyor.
      AST oluşturma ve kod üretimi, 9000 satırdan uzun şu dosyada yapılıyor gibi: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • Yerel uygulama kurup çalıştırmayı unuttuk mu? :)
      “ImRAD Windows, Linux ve MacOS’ta çalışır” deniyor.
    • wasm HTML5 uygulaması, imgui kütüphanesinin birden çok platformda native çalışıp bağımlılıkları en aza indirme yönüyle pek örtüşmüyor gibi.

  • Harika. Son birkaç yıldır ImGui C++ uygulamaları geliştiriyordum; bu olsaydı çok zaman kazandırırdı.

    • Ben daha yeni imGui’ye başlıyorum; bunun nasıl zaman kazandırdığını öğrenmek isterim.

  • dear-imgui’nin yaratıcısı adının “dear” olduğunu belirttiyse “for the Dear library” demek gerekmez mi?
    IMGUI, immediate mode GUI anlamına geliyor; ocornut da “simgui” adlı başka bir IMGUI’den ilham aldığını söylemişti.
    “Yaklaşık 15 ay sonra adını ‘dear imgui’ olarak değiştirdim. Çünkü ‘imgui’ kısaltmanın tamamını tekeline almıştı. Bugüne kadar kafa karışıklığına yol açtığım için üzgünüm.”
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui resmi tam adıdır, ama yalnızca ImGui demek hâlâ çok yaygın.
      Namespace adı da ImGui; asla sadece “Dear” değil.

  • İçine çok fazla sudo girmemeli gibi geliyor. Bunun dışında gerçekten harika görünüyor.

  • Üretilen C++ kodunun, pyimgui binding’leri kullanılırken Python gibi yerlerde de kullanılıp kullanılamayacağını merak ediyorum.

  • ImGui için bir GUI builder’ın neden ImGui’nin kendisiyle uygulanmadığını merak ediyorum.

    • Neden öyle olmadığını düşündüğünü bilmiyorum. Kod ve ekran görüntülerine bakılırsa UI için Dear ImGui kullanıyor.

  • Güzel. ImGui ile bir proje geliştiriyorum ve sürekli böyle bir şey olsa iyi olur diye düşünüyordum. Deneyeceğim.

  • Steam popüler bir cross-platform sistem; oyun dışı uygulamalar için de kullanılabilir mi? Hatta kurumsal uygulamalar için bile mümkün mü?

    • Uygulamalar genellikle iyi metin render etme ve layout desteğine ihtiyaç duyar.
      Çok satırlı metin, yazı tipleri ve duruma göre RTL gibi özellikler; ImGUI’de bu taraflar eksik.
    • Steam’i neden gündeme getirdiğini tam anlamadım ama Steam’de yazılım da satılıyor.