ImRAD, ตัวสร้าง GUI สำหรับไลบรารี ImGui

ImRAD

ImRAD เป็นตัวสร้าง GUI สำหรับไลบรารี ImGui สามารถสร้างและพาร์สโค้ด C++ เพื่อนำไปใช้ได้โดยตรงในแอปพลิเคชัน ImRAD สามารถทำงานได้บน Windows, Linux และ MacOS

คุณสมบัติ

ImRAD ยังอยู่ระหว่างการพัฒนาอย่างต่อเนื่อง และมีคุณสมบัติหลักดังนี้:

• รองรับการออกแบบหน้าต่างหลากหลายรูปแบบ

  • หน้าต่างลอย, ป๊อปอัป และโมดัลป๊อปอัป โดยไม่ขึ้นกับ ImGui backend
  • MainWindow ผ่านการผสานรวมกับ GLFW โดย ImRAD จะสร้างคำสั่งเรียก GLFW เพื่อซิงก์หน้าต่าง ImGui กับหน้าต่างของระบบปฏิบัติการ (แถบชื่อเรื่อง, แฟล็กปรับขนาดได้, ปรับขนาดอัตโนมัติ เป็นต้น)
  • Activity หน้าต่างไร้กรอบที่เติมเต็มพื้นที่ viewport ทั้งหมด ใช้กับแอป Android เป็นหลัก
  • มีเทมเพลต GLFW ที่สร้าง main.cpp ทั่วไป
  • มีเทมเพลต Android ที่สร้าง MainActivity.java + manifest + main.cpp ทั่วไป

• รองรับวิดเจ็ตหลากหลาย

  • วิดเจ็ตพื้นฐาน เช่น Text, Checkbox, Combo, Button, Slider, ColorEdit
  • วิดเจ็ตคอนเทนเนอร์ เช่น Child, Table, CollapsingHeader, TreeNode, TabBar
  • วิดเจ็ตเฉพาะทางอย่าง Splitter
  • การแก้ไข MenuBar และเมนูตามบริบท
  • CustomWidget สำหรับโค้ดของผู้ใช้ (placeholder)

• สร้างเลย์เอาต์ด้วย SameLine/Spacing/NextColumn

  • ช่วยให้วิดเจ็ตรักษาระยะห่างระหว่างรายการและ frame padding ได้อย่างสม่ำเสมอ
  • ความสัมพันธ์แบบพาเรนต์-ชิลด์ระหว่างวิดเจ็ตและลำดับของชิลด์มีความสำคัญ

• รองรับ box layout

  • เป็นกลไกเลย์เอาต์ที่ทรงพลังและใช้งานง่าย สร้างอยู่บนความสามารถของ ImGui
  • สามารถ stretch วิดเจ็ตที่ปรับขนาดได้ในแนวนอนหรือแนวตั้ง
  • สามารถแทรก spacer เพื่อใช้จัดแนวได้
  • สามารถสร้างเลย์เอาต์แนวนอนด้วย table layout helper

• รองรับการ bind properties

  • ตัวแปรของคลาสสามารถจัดการได้ผ่าน class wizard แบบง่ายหรือกล่องโต้ตอบ binding
  • UI ที่สร้างด้วยการ bind properties สามารถเป็นแบบไดนามิกและยังออกแบบได้พร้อมกัน

• สร้าง event handler และโค้ดสนับสนุนอื่น ๆ

  • ตัวอย่างเช่น modal dialog จะสร้างเมมเบอร์ฟังก์ชัน OpenPopup และ lambda callback ที่จะถูกเรียกเมื่อ dialog ถูกปิด
  • event handler แยกโค้ดของผู้ใช้ออกจากส่วนที่สร้างอัตโนมัติ เพื่อให้ตัวออกแบบยังทำงานต่อได้

• โค้ดที่สร้างขึ้นถูกแบ่งด้วย comment marker และผู้ใช้สามารถเพิ่มโค้ดเพิ่มเติมได้อย่างอิสระ

  • ใช้สำหรับเรียก Draw ของ dependent popup หรือคำนวณตัวแปรได้
  • สามารถใช้ CustomWidget ที่เรียก user code callback ได้

• สไตล์หน้าต่างเป้าหมายสามารถกำหนดค่าได้ทั้งหมด

  • นอกจากสไตล์พื้นฐานที่ ImGui มีให้แล้ว ผู้ใช้ยังสามารถกำหนดสไตล์ใหม่และบันทึกเป็นไฟล์ INI ในโฟลเดอร์ style ได้
  • ImRAD จะอ้างอิงการตั้งค่าสไตล์ขณะออกแบบ UI
  • สไตล์ที่บันทึกไว้สามารถโหลดในแอปพลิเคชันได้ด้วยฟังก์ชัน imrad.h แบบง่าย

• โค้ดที่สร้างขึ้นสามารถนำไปใช้ในโปรเจ็กต์ได้ทันที และต้องการเพียงไลบรารี ImGui กับไฟล์เฮดเดอร์เดียว (imrad.h)

  • บางฟีเจอร์ เช่น MainWindow หรือวิดเจ็ต Image ต้องมี dependency ของ GLFW และสามารถเปิดใช้งานได้โดยคอมไพล์ด้วย IMRAD_WITH_GLFW
  • ปัจจุบันวิดเจ็ต Image ยังต้องใช้ไลบรารี stb ด้วย สามารถเปิดใช้งานได้โดยคอมไพล์ด้วย IMRAD_WITH_STB หรือจัดเตรียม LoadTextureFromFile()
  • รองรับไลบรารี fmt ยอดนิยมแบบเลือกใช้ โดยเปิดใช้งานด้วยการกำหนด IMRAD_WITH_FMT ซึ่งจะทำให้สามารถใช้แฟล็ก format กับ string properties ทั้งหมดได้

• ImRAD ติดตามการเปลี่ยนแปลงของไฟล์ที่เปิดอยู่ ทำให้สามารถออกแบบและแก้ไขไฟล์จาก IDE ได้

  • ฟีเจอร์บันทึกอัตโนมัติอาจมีประโยชน์

ใบอนุญาต

• ซอร์สโค้ดของ ImRAD อยู่ภายใต้ใบอนุญาต GPL
• โค้ดที่เครื่องมือสร้างขึ้นไม่อยู่ภายใต้ GPL และสามารถรวมในโปรเจ็กต์โอเพนซอร์สหรือเชิงพาณิชย์ได้ โดยผู้ใช้เป็นผู้กำหนดใบอนุญาต
• imrad.h ก็ไม่อยู่ภายใต้ใบอนุญาต GPL เช่นกัน

ดาวน์โหลด

เวอร์ชันล่าสุดสามารถได้มาด้วยการโคลนรีโพซิทอรีและบิลด์ด้วย CMake โดยต้องดึง submodule ในไดเรกทอรี 3rdparty มาด้วย เวอร์ชันที่ค่อนข้างเก่ากว่าสามารถดาวน์โหลดได้จาก Releases

สรุปโดย GN⁺

• ImRAD เป็นตัวสร้าง GUI ที่ทรงพลังสำหรับไลบรารี ImGui และรองรับหน้าต่างกับวิดเจ็ตหลากหลาย
• สามารถออกแบบ UI ที่ไดนามิกและยืดหยุ่นได้ด้วยความสามารถในการ bind properties และสร้าง event handler
• โค้ดที่สร้างขึ้นสามารถนำไปใช้ในโปรเจ็กต์ได้ทันที และรองรับ dependency ที่หลากหลาย
• ImRAD ยังอยู่ระหว่างการพัฒนาอย่างต่อเนื่อง และผู้ใช้สามารถกำหนดและบันทึกสไตล์ได้อย่างอิสระ
• โปรเจ็กต์อื่นที่มีความสามารถคล้ายกัน ได้แก่ Qt Designer และ Dear ImGui

[GN⁺]

ความเห็นบน Hacker News

• หนึ่งในส่วนที่น่าทึ่งที่สุดของโปรเจ็กต์นี้คือการทำ parser แบบเขียนเองที่รองรับ subset ของ C++ ไว้ในไฟล์ header เดียว
• ผู้สร้าง dear-imgui บอกว่าตั้งชื่อว่า "dear" ดังนั้นจึงควรเรียกว่า "Dear library"
  • IMGUI หมายถึง immediate mode GUI และผู้สร้างบอกว่าได้รับแรงบันดาลใจจาก IMGUI อีกตัวหนึ่งชื่อว่า "simgui"
• ให้ความรู้สึกชวนคิดถึง Visual Basic แต่สิ่งนี้เหมือนการเติม icing บนเค้กของ imgui
• คงจะเจ๋งไม่น้อยถ้าทำเป็นแอป wasm html5 เพื่อให้สร้าง GUI ในเบราว์เซอร์ได้อย่างรวดเร็ว แล้วคัดลอกผลลัพธ์ไปวางในเอดิเตอร์
  • เครื่องมือนี้สามารถสร้างและ parse โค้ด C++ เพื่อใช้งานได้โดยตรงในแอปพลิเคชัน
• ฉันทำงานกับแอป C++ ที่ใช้ ImGui มาหลายปีแล้ว และเครื่องมือนี้น่าจะช่วยประหยัดเวลาได้มาก
• ตอนใช้ binding ของ pyimgui ฉันสงสัยว่าโค้ด C++ ที่สร้างขึ้นจะสามารถนำไปใช้จาก Python ได้หรือไม่
• สงสัยว่าทำไมถึงยังไม่มีการทำ GUI builder ไว้ใน ImGui เอง
• ตอนทำโปรเจ็กต์ด้วย ImGui ฉันเคยคิดว่าอยากได้เครื่องมือแบบนี้อยู่พอดี และจะต้องลองแน่นอน
• Steam เป็นระบบข้ามแพลตฟอร์มที่ได้รับความนิยม แต่สงสัยว่าจะใช้กับแอปพลิเคชันที่ไม่ใช่เกมหรือแอปพลิเคชันระดับองค์กรได้ด้วยหรือไม่
• ดูเหมือนจะมีคำสั่ง sudo มากเกินไปหน่อย แต่โดยรวมแล้วดูเจ๋งมาก