ImRAD - ImGui लाइब्रेरी के लिए GUI बिल्डर

 (github.com/tpecholt)
2 पॉइंट द्वारा GN⁺ 2024-08-17 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • ImRAD ImGui के लिए एक GUI बिल्डर है, जो ऐप्लिकेशन में सीधे इस्तेमाल किया जा सकने वाला C++ code जनरेट करता है और उसे फिर से parse करके जनरेट की गई UI में लगातार बदलाव करने देता है
  • यह data binding, events और manual UI code जोड़ने को support करता है; generated code को comment markers से अलग किया जाता है, ताकि user अपना code जोड़ने के बाद भी designer का इस्तेमाल जारी रख सके
  • यह Windows, Linux, MacOS पर चलता है, और generated code Windows, Linux, MacOS, Android पर काम करता है
  • Layout absolute positioning के बजाय SameLine, Spacing, NextColumn और box layout का इस्तेमाल करता है, और widgets के बीच parent-child संबंध और क्रम को बनाए रखता है
  • ImRAD source GPL है, लेकिन tool द्वारा generated code और generated code द्वारा इस्तेमाल किया जाने वाला imrad.h GPL से बाहर हैं, इसलिए इन्हें open source और commercial projects में शामिल किया जा सकता है

ImRAD की भूमिका और code generation का तरीका

  • ImRAD ImGui library के लिए GUI builder है
  • यह ऐप्लिकेशन में सीधे इस्तेमाल हो सकने वाला C++ code generate और parse करता है
  • अन्य tools के विपरीत, यह generated UI को लगातार edit करने वाले workflow को support करता है

    • Data binding

      • Events
      • Manual UI code जोड़ना
      • Generated code .h और .cpp files के रूप में save होता है, और code preview से जल्दी देखा जा सकता है

Supported platforms और window types

  • ImRAD खुद Windows, Linux, MacOS पर चलता है
  • Generated code Windows, Linux, MacOS, Android पर चलता है
  • यह कई तरह के window design को support करता है
    • Floating windows, popups, modal popups
    • GLFW integration सहित MainWindow
      • ImRAD GLFW calls generate करता है, जिससे ImGui window और OS window के title bar, resize flags, auto size आदि synchronize होते हैं
    • Activity
      • पूरे viewport area को भरने वाली undecorated window
      • एक समय में केवल एक activity दिखाई जा सकती है
      • मुख्य रूप से Android apps में उपयोग होती है
  • Templates भी शामिल हैं
    • GLFW-based general main.cpp
    • Android के लिए MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt

Widgets और layout features

  • ImGui widgets की व्यापक range support करता है
    • Text, Checkbox, Combo, Button, Slider, ColorEdit जैसे basic widgets
    • Child, Table, CollapsingHeader, TreeNode, TabBar जैसे container widgets
    • Splitter, DockSpace जैसे widgets
    • MenuBar और context menu editing
    • बाहरी widget code को call करने वाला CustomWidget
  • Layout absolute positioning के बजाय SameLine, Spacing, NextColumn का इस्तेमाल करके generate होता है
    • Widgets को item spacing और frame padding का consistent पालन करने देता है
    • Table जैसे container widgets के लिए महत्वपूर्ण parent-child संबंध और child order स्पष्ट रहते हैं
    • चुने गए parent corner से relative distance बनाए रखने वाला वैकल्पिक positioning भी संभव है, जिसे overlay widgets के लिए इस्तेमाल किया जा सकता है
  • Box layout support करता है
    • ImGui features के ऊपर implemented layout mechanism
    • Resizable widgets को horizontal या vertical direction में stretch किया जा सकता है
    • Alignment बनाने के लिए spacer डाला जा सकता है
    • अदृश्य Table का उपयोग करके horizontal layout generate करने वाला Table Layout Helper भी इस्तेमाल किया जा सकता है

Binding, events, user code

  • ImGui एक immediate mode GUI library है, इसलिए input text या combo box items जैसे widget states को draw करते समय generated code के भीतर set करना होता है; ImRAD इसे property binding से handle करता है
  • Class variables को simple class wizard या binding dialog में manage किया जा सकता है
  • Property binding का उपयोग करने पर generated UI dynamic तरीके से काम करता है, फिर भी design योग्य बना रहता है
  • Event handlers और support code generation को support करता है
    • उदाहरण के लिए, modal dialog के लिए बंद होने पर call होने वाले lambda callback वाला OpenPopup member function automatically generate होता है
    • Event handlers user event handling code और generated हिस्से को अलग रखते हैं, ताकि designer चलता रहे
  • Generated code comment markers से अलग किया जाता है
    • User generated code के आसपास extra code डाल सकता है
    • Draw पर निर्भर popup calls या कुछ variable calculations में इसका उपयोग किया जा सकता है
    • CustomWidget का इस्तेमाल करके user callback को delegate भी किया जा सकता है

Settings, styles, runtime variants

  • Window configuration runtime पर activate की जा सकने वाली UI variant है
    • अलग-अलग platforms या screen rotation आदि के लिए उपयोगी है
  • Style रंगों, style variables और fonts को grouping करने वाली setting है
    • ImGui default style के अलावा user नया style define कर सकता है
    • Styles को style folder के नीचे INI files के रूप में save किया जा सकता है
  • Dialog unit को device-independent pixels के रूप में set किया जा सकता है
    • Android और DPI-aware apps के लिए उपयोगी है
  • ImRAD open files में changes track करता है
    • ImRAD में design करते समय user अपनी चुनी हुई IDE में भी वही files edit कर सकता है
    • INI style changes भी तुरंत दिखाई देते हैं

Generated code dependencies और options

  • Generated code project में सीधे इस्तेमाल किया जा सकता है, और default रूप से केवल ImGui library और companion header imrad.h पर निर्भर करता है
  • वर्तमान में imrad.h में interface और implementation दोनों शामिल हैं
    • main.cpp में implementation बनाने के लिए include से पहले IMRAD_H_IMPLEMENTATION define करें
  • Generated code ImRad::Format formatting routine का उपयोग करता है
    • C++20 में यह default रूप से std::format को delegate करता है
    • IMRAD_WITH_FMT define करने पर fmt library का इस्तेमाल किया जा सकता है
    • अगर दोनों नहीं हैं, तो formatting flags को skip करने वाला simple formatting routine इस्तेमाल होता है
  • कुछ features के लिए additional dependencies और explicit activation चाहिए
    • MainWindow या Image widget के लिए GLFW, STB जैसी additional libraries चाहिए
    • IMRAD_WITH_LOAD_TEXTURE define करना आवश्यक है
  • imrad.h zlib library का उपयोग करके zip files से assets load कर सकता है
    • इसे IMRAD_WITH_MINIZIP से activate किया जाता है
  • Translation strings सहित code generate किया जा सकता है
    • IMRAD_WITH_GETTEXT से imrad.h compile करने पर gettext/libintl से translation संभव है
    • बिना dependency वाला libintl-lite भी इस्तेमाल किया जा सकता है

License और distribution

  • ImRAD source code GPL license के तहत है
  • Tool द्वारा generated code GPL से बाहर है
    • इसे open source या commercial projects में शामिल किया जा सकता है
    • Generated code का license user तय करता है
  • Generated code द्वारा इस्तेमाल किया जाने वाला imrad.h भी GPL से बाहर है
  • Latest version repository clone करने के बाद CMake से build करें
    • 3rdparty directory के submodules भी लाने होंगे
  • कुछ पुराने versions Releases से download किए जा सकते हैं
  • Tutorials और विस्तृत documentation wiki पर देखे जा सकते हैं

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-08-17
Hacker News की राय

  • इस प्रोजेक्ट की सबसे हैरान करने वाली चीज़ों में से एक यह है कि इसके पास अपने द्वारा generate किए जा सकने वाले C++ subset को पढ़ने के लिए एक हाथ से बनाया गया parser है
    पूरा का पूरा single header में implement किया गया है, और यह प्रभावशाली होने के साथ-साथ थोड़ा पागलपन जैसा भी लगता है
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • मैं जानना चाहता हूँ कि इस बात का ठीक-ठीक मतलब क्या है
      मैं programming में बहुत familiar नहीं हूँ, इसलिए बस इतना समझा कि इस project में data पढ़ सकने वाली कोई चीज़ है
      अगर कोई समझा सके कि C++ पढ़ सकने वाला tool क्यों बड़ी बात है, तो अच्छा होगा

  • वाकई शानदार। शायद Visual Basic nostalgia की वजह से हो, लेकिन मेरे लिए यह imgui केक पर icing जैसा project है

    • आज तक Visual Basic 6 से तेज़ RAD experience नहीं मिला

  • अगर यह browser में GUI जल्दी बनाने और result को editor में copy-paste करने के लिए wasm HTML5 app के रूप में आ जाए, तो बढ़िया होगा
    इसमें लिखा है, “C++ code generate और parse करता है, और यह code application में सीधे इस्तेमाल किया जा सकता है”; यहाँ parsing से मतलब क्या अपने ही generated code को दोबारा पढ़ने से है, यह जानना चाहता हूँ

    • parser यहाँ है: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      लगता है कि यह अपने generated code को पढ़ने के लिए ही है। हाथ से बना parser पूरी भाषा नहीं, सिर्फ़ subset handle करता है
      उदाहरण के लिए STL containers को पहचानना hardcode किया गया है, और शायद केवल वही चीज़ें handle करता है जो generated code में आ सकती हैं
      इस stage पर यह Abstract Syntax Tree (AST) नहीं बनाता। यह tokenization और lexical analysis करता है, और parsing “state machine” को कैसे आगे बढ़ाना है यह caller को समझना पड़ता है—ऐसा structure लगता है
      AST बनाना और code generation शायद 9000+ lines वाली इस file में होता है: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • क्या native application install करके चलाना भूल गए हैं? :)
      लिखा है, “ImRAD Windows, Linux, MacOS पर चलता है”
    • wasm HTML5 app imgui library की उस direction से थोड़ा मेल नहीं खाता लगता, जो कई platforms पर natively चलने और dependencies कम रखने की कोशिश करती है

  • बेहतरीन। पिछले कुछ वर्षों से ImGui C++ apps बना रहा था; अगर यह होता तो लगता है बहुत समय बच जाता

    • मैं अभी imGui शुरू ही कर रहा हूँ, और जानना चाहता हूँ कि यह time कैसे बचाता है

  • अगर dear-imgui के creator ने बताया है कि नाम “dear” है, तो क्या “for the Dear library” नहीं कहना चाहिए?
    IMGUI का मतलब immediate mode GUI है, और ocornut ने कहा था कि वह “simgui” नाम के एक दूसरे IMGUI से inspired थे
    “लगभग 15 महीने बाद नाम बदलकर ‘dear imgui’ किया। क्योंकि ‘imgui’ पूरे acronym पर कब्ज़ा कर रहा था। आज तक confusion पैदा करने के लिए माफ़ी।”
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui official full name है, लेकिन सिर्फ़ ImGui कहना भी अभी बहुत common है
      namespace का नाम भी ImGui है, और यह कभी भी केवल “Dear” नहीं है

  • उसमें sudo बहुत ज़्यादा नहीं होना चाहिए, ऐसा लगता है। बाकी सच में बहुत अच्छा दिखता है

  • generated C++ code को pyimgui bindings इस्तेमाल करते समय Python जैसी जगहों में भी use किया जा सकता है या नहीं, यह जानना चाहता हूँ

  • ImGui के लिए GUI builder ImGui itself में implement क्यों नहीं किया गया, यह जानना चाहता हूँ

    • पता नहीं आपको क्यों लगता है कि ऐसा नहीं है। code और screenshots देखने पर UI में Dear ImGui इस्तेमाल हो रहा है

  • बढ़िया। मैं ImGui से project बना रहा हूँ और लगातार सोचता रहा कि काश ऐसा कुछ होता। इसे try करूँगा

  • Steam एक popular cross-platform system है; क्या इसे non-game applications के लिए भी इस्तेमाल किया जा सकता है? यहाँ तक कि enterprise applications के लिए भी?

    • applications को आम तौर पर अच्छे text rendering और layout support की ज़रूरत होती है
      multiple lines, fonts, और कुछ मामलों में RTL जैसी features चाहिए होते हैं, लेकिन ImGUI में ये हिस्से कमज़ोर हैं
    • समझ नहीं आया कि Steam का ज़िक्र क्यों आया, लेकिन Steam पर software भी बेचा जाता है