ImRAD - Trình dựng GUI cho thư viện ImGui

 (github.com/tpecholt)
2 điểm bởi GN⁺ 2024-08-17 | 1 bình luận | Chia sẻ qua WhatsApp
  • ImRAD là trình dựng GUI cho ImGui, có thể tạo mã C++ dùng trực tiếp trong ứng dụng và phân tích lại mã đó để tiếp tục chỉnh sửa UI đã tạo
  • Hỗ trợ data binding, sự kiện và bổ sung mã UI thủ công; mã được tạo được phân tách bằng các dấu chú thích để người dùng vẫn có thể tiếp tục dùng trình thiết kế sau khi chèn mã riêng
  • Chạy trên Windows, Linux, MacOS; mã được tạo chạy trên Windows, Linux, MacOS và Android
  • Thay vì vị trí tuyệt đối, bố cục dùng SameLine, Spacing, NextColumn và box layout, đồng thời giữ quan hệ cha-con và thứ tự giữa các widget
  • Mã nguồn ImRAD dùng GPL, nhưng mã do công cụ tạo ra và imrad.h mà mã tạo ra sử dụng được loại trừ khỏi GPL, nên có thể đưa vào dự án mã nguồn mở hoặc thương mại

Vai trò của ImRAD và cách tạo mã

  • ImRAD là trình dựng GUI cho thư viện ImGui
  • Tạo và phân tích mã C++ có thể dùng trực tiếp trong ứng dụng
  • Khác với nhiều công cụ khác, nó hỗ trợ quy trình tiếp tục chỉnh sửa UI đã được tạo

    • Data binding

      • Sự kiện
      • Bổ sung mã UI thủ công
      • Mã được tạo được lưu thành các tệp .h và .cpp, đồng thời có thể kiểm tra nhanh bằng phần xem trước mã

Nền tảng hỗ trợ và loại cửa sổ

  • Bản thân ImRAD chạy trên Windows, Linux, MacOS
  • Mã được tạo chạy trên Windows, Linux, MacOS, Android
  • Hỗ trợ thiết kế nhiều loại cửa sổ
    • Cửa sổ nổi, popup, popup modal
    • MainWindow bao gồm tích hợp GLFW
      • ImRAD tạo các lệnh gọi GLFW để đồng bộ cửa sổ ImGui với thanh tiêu đề, cờ cho phép đổi kích thước, tự động đổi kích thước... của cửa sổ hệ điều hành
    • Activity
      • Cửa sổ không viền phủ kín toàn bộ vùng viewport
      • Mỗi lần chỉ có thể hiển thị một activity
      • Chủ yếu dùng cho ứng dụng Android
  • Cũng bao gồm các mẫu có sẵn
    • main.cpp thông thường dựa trên GLFW
    • MainActivity.java, AndroidManifest.xml, main.cpp, CMakeLists.txt cho Android

Widget và tính năng bố cục

  • Hỗ trợ nhiều widget ImGui
    • Các widget cơ bản như Text, Checkbox, Combo, Button, Slider, ColorEdit
    • Các widget container như Child, Table, CollapsingHeader, TreeNode, TabBar
    • Các widget như Splitter, DockSpace
    • Chỉnh sửa MenuBar và menu ngữ cảnh
    • CustomWidget có thể gọi mã widget bên ngoài
  • Bố cục được tạo bằng SameLine, Spacing, NextColumn thay vì vị trí tuyệt đối
    • Giúp widget nhất quán với item spacing và frame padding
    • Quan hệ cha-con và thứ tự con, vốn quan trọng với các widget container như Table, được thể hiện rõ ràng
    • Cũng có thể dùng cách chỉ định vị trí thay thế để giữ khoảng cách tương đối từ góc cha được chọn, phù hợp cho widget overlay
  • Hỗ trợ box layout
    • Đây là cơ chế bố cục được triển khai trên các tính năng của ImGui
    • Có thể kéo giãn widget có thể đổi kích thước theo chiều ngang hoặc dọc
    • Có thể chèn spacer để căn chỉnh
    • Cũng có thể dùng Table Layout Helper để tạo bố cục ngang bằng Table ẩn

Binding, sự kiện và mã người dùng

  • Vì ImGui là thư viện GUI immediate mode, trạng thái widget như văn bản nhập hay mục của combobox phải được thiết lập trong mã tạo ra tại thời điểm vẽ, và ImRAD xử lý điều này bằng property binding
  • Biến lớp có thể được quản lý bằng class wizard đơn giản hoặc trong hộp thoại binding
  • Dùng property binding giúp UI được tạo hoạt động động mà vẫn tiếp tục thiết kế được
  • Hỗ trợ tạo trình xử lý sự kiện và mã phụ trợ
    • Ví dụ, hộp thoại modal sẽ tự động tạo hàm thành viên OpenPopup có callback lambda được gọi khi đóng
    • Trình xử lý sự kiện tách mã xử lý sự kiện của người dùng khỏi phần được tạo ra để trình thiết kế vẫn tiếp tục hoạt động
  • Mã được tạo được phân tách bằng dấu chú thích
    • Người dùng có thể thêm mã bổ sung xung quanh mã được tạo
    • Có thể dùng cho lời gọi popup phụ thuộc vào draw hoặc cho một số phép tính biến
    • Cũng có thể ủy quyền cho callback người dùng bằng CustomWidget

Cấu hình, style và biến thể runtime

  • Window configuration là các biến thể UI có thể kích hoạt khi runtime
    • Hữu ích cho các nền tảng khác nhau hoặc khi xoay màn hình
  • Style là tập hợp cấu hình gồm màu sắc, biến style và font
    • Ngoài style mặc định của ImGui, người dùng có thể định nghĩa style mới
    • Style có thể được lưu thành tệp INI trong thư mục style
  • Dialog unit có thể được đặt theo pixel độc lập thiết bị
    • Hữu ích cho Android và các ứng dụng nhận biết DPI
  • ImRAD theo dõi thay đổi của các tệp đang mở
    • Trong khi thiết kế bằng ImRAD, người dùng vẫn có thể chỉnh sửa cùng các tệp đó trong IDE đã chọn
    • Các thay đổi style INI cũng được hiển thị ngay lập tức

Phụ thuộc của mã tạo ra và các tùy chọn

  • Mã được tạo có thể dùng trực tiếp trong dự án và mặc định chỉ phụ thuộc vào thư viện ImGui cùng header đi kèm imrad.h
  • Hiện tại imrad.h bao gồm cả giao diện lẫn phần triển khai
    • Để tạo phần triển khai trong main.cpp, hãy định nghĩa IMRAD_H_IMPLEMENTATION trước khi include
  • Mã được tạo sử dụng routine định dạng ImRad::Format
    • Trên C++20, mặc định nó ủy quyền cho std::format
    • Nếu định nghĩa IMRAD_WITH_FMT thì có thể dùng thư viện fmt
    • Nếu không có cả hai, sẽ dùng routine định dạng đơn giản bỏ qua các cờ định dạng
  • Một số tính năng cần thêm phụ thuộc và phải bật tường minh
    • Widget MainWindow hoặc Image cần thêm thư viện như GLFW, STB
    • Cần định nghĩa IMRAD_WITH_LOAD_TEXTURE
  • imrad.h có thể dùng thư viện zlib để nạp asset từ tệp zip
    • Bật bằng IMRAD_WITH_MINIZIP
  • Có thể tạo mã bao gồm chuỗi dịch
    • Nếu biên dịch imrad.h với IMRAD_WITH_GETTEXT, có thể dịch bằng gettext/libintl
    • Cũng có thể dùng libintl-lite không có phụ thuộc

Giấy phép và phát hành

  • Mã nguồn ImRAD dùng giấy phép GPL
  • Mã do công cụ tạo ra được loại trừ khỏi GPL
    • Có thể đưa vào dự án mã nguồn mở hoặc thương mại
    • Người dùng tự quyết định giấy phép của mã được tạo
  • imrad.h mà mã được tạo sử dụng cũng được loại trừ khỏi GPL
  • Phiên bản mới nhất được build bằng CMake sau khi clone kho chứa
    • Cần lấy cả các submodule trong thư mục 3rdparty
  • Một số phiên bản hơi cũ hơn có thể tải từ Releases
  • Có thể xem hướng dẫn và tài liệu chi tiết trong wiki

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-08-17
Ý kiến trên Hacker News

  • Một trong những phần đáng kinh ngạc nhất của dự án này là nó có một parser tự viết để đọc tập con C++ mà chính nó có thể tạo ra
    Tất cả được triển khai trong một header duy nhất, vừa ấn tượng vừa trông như một việc điên rồ
    https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h

    • Tôi tò mò không biết chính xác điều đó nghĩa là gì
      Tôi không quen với lập trình, nên chỉ hiểu đại khái là dự án này có thứ gì đó có thể đọc dữ liệu
      Mong ai đó giải thích vì sao một công cụ có thể đọc C++ lại đáng nể như vậy

  • Thực sự rất tuyệt. Có thể là vì nỗi hoài niệm Visual Basic, nhưng với tôi đây giống như lớp trang trí trên chiếc bánh imgui vậy

    • Đến giờ vẫn chưa có trải nghiệm RAD nào nhanh hơn Visual Basic 6

  • Sẽ rất tuyệt nếu nó trở thành một ứng dụng wasm HTML5, để có thể nhanh chóng tạo GUI trong trình duyệt rồi sao chép kết quả dán vào editor
    Có đoạn nói “tạo và phân tích cú pháp mã C++, và mã này có thể được dùng trực tiếp trong ứng dụng”, nên tôi tự hỏi việc phân tích cú pháp ở đây có phải là để đọc lại chính mã mà nó đã tạo ra không

    • Parser nằm ở đây: https://github.com/tpecholt/imrad/blob/main/src/cpp_parser.h
      Có vẻ đúng là để đọc mã do chính nó tạo ra. Parser tự viết này chỉ xử lý một tập con, không phải toàn bộ ngôn ngữ
      Ví dụ, nó hard-code việc nhận diện các container STL, và có lẽ chỉ xử lý những thứ có thể xuất hiện trong mã được tạo ra
      Ở bước này nó không tạo cây cú pháp trừu tượng (AST). Có vẻ nó thực hiện token hóa và phân tích từ vựng, còn cách tiến “máy trạng thái” phân tích cú pháp ra sao thì caller phải tự hiểu
      Việc tạo AST và sinh mã dường như nằm trong file hơn 9000 dòng này: https://github.com/tpecholt/imrad/blob/main/src/node.cpp
    • Bạn quên cách cài và chạy ứng dụng native rồi à? :)
      Có ghi rằng “ImRAD chạy trên Windows, Linux, MacOS”
    • Ứng dụng wasm HTML5 có vẻ không hợp lắm với hướng đi của thư viện imgui là chạy native trên nhiều nền tảng và giảm thiểu dependency

  • Tuyệt vời. Vài năm qua tôi đã làm các ứng dụng ImGui C++, và nếu có cái này thì chắc đã tiết kiệm được rất nhiều thời gian

    • Tôi vừa mới bắt đầu với imGui, nên muốn biết cái này giúp tiết kiệm thời gian như thế nào

  • Nếu người tạo ra dear-imgui đã nói rằng tên là “dear”, thì chẳng phải nên gọi là “for the Dear library” sao?
    IMGUI nghĩa là GUI chế độ tức thời, và ocornut từng nói mình lấy cảm hứng từ một IMGUI khác tên là “simgui”
    “Khoảng 15 tháng sau tôi đổi tên thành ‘dear imgui’, vì ‘imgui’ đang chiếm trọn cả cụm viết tắt. Tôi vẫn xin lỗi vì đến nay nó còn gây nhầm lẫn.”
    https://github.com/ocornut/imgui/issues/7892

    • Dear ImGui là tên đầy đủ chính thức, nhưng việc gọi đơn giản là ImGui vẫn rất phổ biến
      Tên namespace cũng là ImGui, và tuyệt đối không chỉ là “Dear”

  • Có lẽ không nên nhét quá nhiều sudo vào đó. Ngoài chuyện đó thì trông thật sự rất tuyệt

  • Tôi tự hỏi liệu mã C++ được sinh ra có thể dùng được ở những nơi như Python khi sử dụng binding pyimgui không

  • Tôi tự hỏi tại sao GUI builder cho ImGui lại không được triển khai bằng chính ImGui

    • Không hiểu vì sao bạn nghĩ là không. Nhìn code và ảnh chụp màn hình thì UI đang dùng Dear ImGui

  • Hay đấy. Tôi đang làm một dự án bằng ImGui và cứ nghĩ mãi rằng giá mà có thứ như thế này. Tôi sẽ thử dùng xem

  • Steam là một hệ thống đa nền tảng phổ biến, vậy có thể dùng cho cả ứng dụng không phải game không? Thậm chí có dùng được cho ứng dụng doanh nghiệp không?

    • Ứng dụng thường cần render văn bản và hỗ trợ layout tốt
      Chẳng hạn nhiều dòng, phông chữ, và trong một số trường hợp là RTL; ImGUI còn thiếu ở các phần này
    • Tôi không rõ vì sao lại nhắc đến Steam, nhưng trên Steam đúng là cũng có bán phần mềm