Egui, GUI แบบ Immediate Mode ที่เขียนด้วย Rust

 (egui.rs)
10 คะแนน โดย GN⁺ 2024-12-27 | 1 ความคิดเห็น | แชร์ทาง WhatsApp
  • egui คือ ไลบรารี GUI แบบ Immediate Mode ที่เขียนด้วย Rust และทำงานได้ทั้งบนเว็บและในสภาพแวดล้อมเนทีฟ
  • บนเว็บจะคอมไพล์เป็น WebAssembly และเรนเดอร์ผ่าน WebGL ส่วนในสภาพแวดล้อมเนทีฟรองรับหลายแพลตฟอร์ม เช่น Mac, Linux, Windows
  • พัฒนาด้วย Rust ล้วน โดยไม่ใช้ DOM, HTML, JS, CSS
  • ออกแบบมาให้ ใช้งานง่าย, พกพาได้ดี, และมี ประสิทธิภาพรวดเร็ว

คุณสมบัติเด่น

1. Immediate Mode

  • เป็นแนวทางที่ทำให้การสร้าง GUI ง่ายขึ้นและทำให้โฟลว์ของโค้ดกระชับ
  • ตัวอย่าง: 
    if ui.button("Save").clicked() {  
    my_state.save();  
}
  • ไม่จำเป็นต้องเก็บสถานะของปุ่มหรือใช้ callback
  • Immediate Mode ช่วยเพิ่มความสะดวกในการใช้งานและลดความซับซ้อน แต่มีข้อจำกัดเล็กน้อยด้านเลย์เอาต์และประสิทธิภาพ

2. ความเข้ากันได้กับแพลตฟอร์ม

  • เว็บ: ทำงานผ่าน WebAssembly และ WebGL
  • เนทีฟ: รองรับ Mac, Linux, Windows, Android เป็นต้น
  • สามารถผสานเข้ากับเกมเอนจินได้ (เช่น การผสานกับ Bevy)

3. การผสานกับ ecosystem ของ Rust

  • มีเฟรมเวิร์กทางการ eframe ให้ใช้งาน:
  • สามารถเขียนแอปพลิเคชันเว็บและเนทีฟด้วยโค้ดชุดเดียวกัน
  • มี dependency ที่เบา:
  • egui ใช้เพียง dependency ขั้นต่ำของ Rust เช่น ab_glyph, ahash
  • dependency ที่หนักจะแยกออกไปเป็น crate ต่างหาก (เช่น egui_extras)

ฟีเจอร์หลัก

  • วิดเจ็ต: ปุ่ม, สไลเดอร์, เช็กบ็อกซ์, ปุ่มตัวเลือก, การแก้ไขข้อความ, ตัวเลือกสี เป็นต้น
  • เลย์เอาต์: รองรับแบบแนวนอน, แนวตั้ง, แบบคอลัมน์ และการตัดบรรทัดอัตโนมัติ
  • การแก้ไขข้อความ: รองรับหลายบรรทัด, คัดลอก/วาง, อีโมจิ
  • หน้าต่าง: ย้ายตำแหน่ง, ปรับขนาด, ย่อเล็กสุด/ปิด
  • การเรนเดอร์: เรนเดอร์ข้อความและรูปทรงพร้อม anti-aliasing
  • การเข้าถึง: รองรับ screen reader ผ่านการผสาน AccessKit

ข้อดีและข้อเสีย

  • ข้อดี
    • ความเรียบง่าย: เขียน GUI ได้ด้วยโค้ดที่กระชับโดยไม่ต้องใช้ callback
    • ความพกพา: รันได้ทั้งบนเว็บและในสภาพแวดล้อมเนทีฟด้วยโค้ดชุดเดียวกัน
    • การใช้งาน: ไม่มีปัญหาเรื่องการซิงก์ระหว่างสถานะของแอปพลิเคชันกับสถานะของ GUI
  • ข้อเสีย
    • ความซับซ้อนของเลย์เอาต์: ด้วยลักษณะของ Immediate Mode จึงต้องทำงานเพิ่มสำหรับเลย์เอาต์ที่ซับซ้อน
    • การใช้ CPU: ต้องคำนวณเลย์เอาต์ทั้งหมดในทุกเฟรม จึงอาจทำให้ประสิทธิภาพลดลงใน UI ขนาดใหญ่

ผู้ใช้เป้าหมาย

  • นักพัฒนาที่ต้องการเขียน GUI แบบง่าย ๆ ได้อย่างรวดเร็ว
  • ผู้ใช้ที่ต้องการเพิ่ม GUI ให้กับเกมเอนจินหรือโปรเจ็กต์ที่พัฒนาด้วย Rust
  • ผู้พัฒนาแอปพลิเคชันที่ต้องรองรับทั้งเว็บและสภาพแวดล้อมเนทีฟ

คำอธิบายเพิ่มเติมเกี่ยวกับ Immediate Mode

  • Immediate Mode แตกต่างจาก retained mode แบบ callback ตรงที่ประมวลผลสถานะโดยตรงในแต่ละเฟรม
  • ตัวอย่าง: if ui.button("Save").clicked() { save(); }
  • ข้อดี: โฟลว์ของโค้ดเรียบง่ายขึ้นและไม่มีปัญหาเรื่องการซิงก์สถานะ
  • ข้อเสีย: การคำนวณเลย์เอาต์มีความซับซ้อน และอาจกระทบประสิทธิภาพใน UI ขนาดใหญ่

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-12-27
ความคิดเห็นจาก Hacker News

  • พยายามทำความเข้าใจโจทย์คณิตศาสตร์โดยใช้เฟรมเวิร์ก Rust แต่รอบการแก้ไข-คอมไพล์-รันยาวเกินไปจนทำได้ยาก จึงสงสัยว่าถ้าแยกโปรเจ็กต์เป็นโมดูลจะช่วยให้ดีขึ้นหรือไม่

  • หากเบราว์เซอร์ไม่รองรับการเรนเดอร์แบบซับพิกเซล ไลบรารีเรนเดอร์ UI ที่อิงแคนวาสจะเสียเปรียบเมื่อเทียบกับแบบอิง DOM ยกเว้นบนอุปกรณ์ความละเอียดสูง และไลบรารี egui เองก็รับรู้ปัญหานี้อยู่

  • หน้าเดโมที่คอมไพล์มาสำหรับสภาพแวดล้อมเบราว์เซอร์นั้นน่าประทับใจในเชิงเทคนิค แต่ก็ยังนึกภาพไม่ออกว่าแอปที่ใช้ egui จะนำไปทำอะไรได้บ้าง จึงอยากรู้ว่ามีตัวอย่างการใช้งาน egui ที่น่าสนุกหรือไม่

  • ช่วงคริสต์มาสทำตัว naughty เลยไปบังคับ unwrap Option แทนการทำ pattern matching จนเกิดข้อผิดพลาด เกิดขึ้นบน Brave เวอร์ชันมือถือ

  • การรองรับ internationalization ยังมีจำกัด ตัวอย่างเช่น เมื่อนำคำว่า "hello" ภาษาอาหรับไปวาง จะแสดงเป็นกล่องสี่เหลี่ยม

  • สงสัยว่า "immediate mode" คืออะไร วิธีเพิ่มวิดเจ็ตเข้าไปใน UI ใช้ .add() จึงสงสัยว่า fluent builder API สำหรับวิดเจ็ตลักษณะนี้เองหรือไม่ที่ทำให้มันเป็น "immediate mode"

  • สงสัยว่าจะดีบักอินเทอร์เฟซแบบนี้ในเว็บเบราว์เซอร์อย่างไร ทำได้เหมือนกับการดีบัก JavaScript หรือ C++ WebAssembly หรือไม่

  • มีปัญหาเรื่องการปรับขนาดหน้าต่าง ในตัวอย่าง "Highlighting" หากคลิกพื้นที่จับที่มุมขวาล่าง ลูกศรแนวทแยงจะเปลี่ยนเป็นลูกศรแนวตั้ง ทำให้ปรับขนาดได้เฉพาะแนวตั้ง ดูเหมือนในตัวอย่างพื้นฐานอื่น ๆ ก็น่าจะปรับได้ทั้งแนวตั้งและแนวนอนพร้อมกัน แต่กลับปรับแนวตั้งไม่ได้

  • การตอบสนองต่ออินพุตช้ามาก หากพิมพ์เร็ว ๆ ระบบจะตามไม่ทัน และยังไม่สามารถเลือกข้อความหรือคัดลอกได้ ซึ่งเป็นปัญหาใหญ่สำหรับการทำ GUI แบบกำหนดเอง ขอให้ทุกคนมีความสุขในช่วงปลายปี