ระบบ Robot Arm Web UI
เป็นแพลตฟอร์มการควบคุมหุ่นยนต์ที่ถูกออกแบบมาเพื่อเชื่อมประสานช่องว่างระหว่างฮาร์ดแวร์กลไกกับผู้ใช้งานทั่วไป การทำงานเริ่มจากการรับส่งคำสั่งผ่านเครือข่าย ROS ที่มีเสถียรภาพ นำมาแสดงผลเป็น 3D Digital Twin ควบคู่กับการใช้ AI ประมวลผลจากภาพกล้องเพื่อความปลอดภัย ทั้งยังมีระบบฐานข้อมูลและ Simulation ที่ช่วยให้การวางแผนงาน (Task Planning) เป็นเรื่องง่ายและปลอดภัย ระบบนี้สะท้อนภาพลักษณ์ของเทคโนโลยีอุตสาหกรรมยุค 4.0 ที่เน้นความยืดหยุ่น ความปลอดภัย และประสิทธิภาพในระดับวิศวกรรม โดยมีรายละเอียดการพัฒนา ดังนี้
Closed Loop Stepper Control
User Interface and Digital Twin
ระบบ Robot Arm Web UI เป็นระบบส่วนต่อประสานผู้ใช้งานบนเว็บ (Web-based User Interface) ที่ถูกพัฒนาขึ้นเพื่อการควบคุมและติดตามสถานะ (Monitor) ของแขนกล 6 แกน (6-Axis Robot Arm) ระบบนี้บูรณาการเทคโนโลยีที่หลากหลายเข้าด้วยกัน ได้แก่ การควบคุมหุ่นยนต์แบบเรียลไทม์, ระบบฝาแฝดดิจิทัล (3D Digital Twin), การเชื่อมต่อโครงข่าย ROS (Robot Operating System), ระบบจำลองสถานการณ์ (Simulation) และระบบปัญญาประดิษฐ์ด้านการมองเห็น (AI Vision)
ภาพแสดงข้อดีของการใช้งานระบบบ UI และ Digital Twin
วัตถุประสงค์หลักของระบบคือการสร้างศูนย์กลางการควบคุมที่ใช้งานง่ายผ่านเว็บเบราว์เซอร์ ซึ่งผู้ใช้สามารถควบคุม สั่งการ บันทึกตำแหน่งการทำงาน (Jobs/Positions) ตลอดจนประเมินความปลอดภัยผ่านกล้องและเซนเซอร์จำลองสภาพแวดล้อมจริงแบบ 3 มิติได้อย่างมีประสิทธิภาพ
ภาพแสดงหน้าจอในหน้าการใช้งานหลัก
ภาพแสดงหน้าจอในโหมดการปรับตั้งค่าต่างๆรวามถึงปรับจูน
หน้า 3D Display Settings เป็นหน้าสำหรับปรับแต่งและตรวจสอบการแสดงผลของโมเดลแขนกล 3 มิติในระบบ Robot Arm Web UI โดยผู้ใช้สามารถตั้งค่ารูปแบบการแสดงผลของ Digital Twin ให้เหมาะกับการใช้งานจริง เช่น สีพื้นหลัง แสง เงา วัสดุของโมเดล ความคมชัด เอฟเฟกต์ภาพ และการจัดตำแหน่งฐานของหุ่นยนต์ เพื่อให้โมเดล 3D แสดงผลใกล้เคียงกับสภาพแวดล้อมจริงมากที่สุด
ภายในหน้านี้สามารถปรับค่าด้านกราฟิกของโมเดลได้หลายส่วน เช่น การเลือกพื้นหลังแบบสีหรือ HDR Environment, การปรับค่าสีของวัสดุแต่ละชิ้น, ความมันวาว ความหยาบของพื้นผิว, ความเข้มของแสง, เงาบนพื้น, fog, ambient occlusion และ motion blur นอกจากนี้ยังมีตัวอย่างโมเดล 3D แบบ real time ทางด้านขวา ทำให้ผู้ใช้เห็นผลของการตั้งค่าทันทีเมื่อมีการปรับค่า
อีกส่วนสำคัญคือการตั้งค่า Robot Base Alignment และ Joint Axis Flip ซึ่งใช้สำหรับปรับตำแหน่ง ทิศทาง และแกนหมุนของโมเดล 3D ให้ตรงกับแขนกลจริงหรือระบบจำลอง ผู้ใช้สามารถปรับ offset ของฐานหุ่นยนต์, yaw angle, การ flip แกน รวมถึง offset ของแต่ละ joint ได้ เพื่อแก้ปัญหากรณีโมเดล 3D หมุนไม่ตรงกับข้อมูล joint state ที่รับมาจาก ROS หรือ simulator
หน้านี้ยังรองรับการตั้งค่าระบบความปลอดภัยแบบ 3D เช่น การแสดง collision capsules รอบแขนกล, การปรับระยะ warning zone และ stop zone รวมถึงการแสดง skeleton/person overlay เพื่อใช้จำลองหรือแสดงตำแหน่งของคนในพื้นที่ทำงาน เมื่อมีข้อมูลจากระบบตรวจจับบุคคล โมเดล 3D สามารถใช้ข้อมูลนี้ช่วยประเมินระยะห่างระหว่างคนกับแขนกล และนำไปใช้กับ safety status ของระบบได้
นอกจากนี้หน้า 3D Display Settings ยังมีปุ่มสำหรับเริ่มหรือหยุด Simulation ซึ่งใช้รัน RobotToolkit/Swift simulator เพื่อทดสอบการเคลื่อนที่ของแขนกลโดยไม่ต้องใช้ hardware จริง ทำให้ผู้ใช้สามารถตรวจสอบการทำงานของ Digital Twin, การรับส่งค่า joint states และการตอบสนองของระบบก่อนนำไปใช้งานกับหุ่นยนต์จริง
โดยสรุป หน้า 3D Display Settings เป็นหน้าสำหรับควบคุมคุณภาพการแสดงผล ปรับ calibration ของโมเดล 3D ตรวจสอบแกนและตำแหน่งของ Digital Twin ตั้งค่าระบบ safety visualization และเชื่อมต่อกับ simulation เพื่อให้โมเดลแขนกลในระบบ Web UI มีความถูกต้อง สวยงาม และพร้อมใช้งานร่วมกับข้อมูล real time จาก ROS, camera และ simulator ได้อย่างมีประสิทธิภาพ
ภาพแสดงหน้าจอตอน Robot กำลังทำงาน
หน้า Jobs ใช้สำหรับสร้างและสั่งงานแขนกลให้ทำงานตามลำดับที่บันทึกไว้ ผู้ใช้สามารถสร้างงานใหม่ เพิ่มตำแหน่งหรือ Task ต่าง ๆ เช่น ค่า joint, slider, gripper, ความเร็ว และเวลาหน่วง ได้จากหน้า UI โดยตรง ทำให้การสอนตำแหน่งและบันทึกขั้นตอนการทำงานทำได้ง่าย ไม่จำเป็นต้องเขียนโค้ดเอง
เมื่องานถูกบันทึกไว้แล้ว ผู้ใช้สามารถกดรันงานได้ทันที ระบบจะส่งชุดคำสั่งไปยัง ROS หรือ simulator เพื่อให้แขนกลเคลื่อนที่ตามลำดับ Task ที่กำหนดไว้ พร้อมแสดงสถานะการทำงานและตำแหน่งของหุ่นยนต์แบบ real time ผ่านหน้า UI และ 3D Digital Twin
โดยสรุป หน้านี้ช่วยให้การสร้าง บันทึก และเรียกใช้งานแขนกลซ้ำเป็นเรื่องง่าย ผู้ใช้เพียงกำหนดตำแหน่งตามต้องการ บันทึกเป็นงาน และกดรัน หุ่นยนต์ก็จะทำงานตามขั้นตอนที่ตั้งไว้ได้อย่างเป็นระบบ.
การทำงานของ 3D Digital Twin
ระบบ 3D Digital Twin นำเสนอแบบจำลองเสมือนจริงที่มีกลไกการทำงานดังนี้
- Model Rendering: โหลดไฟล์ .glb โมเดลหุ่นยนต์ และผูก (Map) Node อ้างอิง J1 ถึง J6 เข้ากับข้อมูลองศาจาก ROS (แปลงเป็น Radian)
- Kinematics & Alignment: รองรับ Joint Offset, Joint Flip, การหมุนฐาน (Base Yaw) และ TCP Offset พร้อมแสดงแกน TCP แบบ 3D
- Visual Fidelity: ยกระดับกราฟิกด้วย Material Setting, การจัดแสง, HDR Environment, Fog, Shadow, Ambient Occlusion และ Motion Blur
- Safety Visualization: สร้างกล่องหรือโครงสร้างตรวจจับการชน (Collision Capsule) และ Overlay ขอบเขตโครงร่างกระดูกมนุษย์ (Skeleton) เข้าไปในมิติ 3D
- Calibration: ใช้ค่าจาก local Storage ในการชดเชยค่า (Offset) ให้ตรงกับฮาร์ดแวร์จริง
ภาพรวมสถาปัตยกรรม
ระบบถูกออกแบบในลักษณะ Distributed System โดยมี Web UI เป็นศูนย์กลางในการแลกเปลี่ยนข้อมูล ดังนี้
- Web UI (Control Center): ทำหน้าที่เป็นศูนย์กลางการแสดงผลและรับคำสั่งจากผู้ใช้ผ่านเว็บเบราว์เซอร์ (พัฒนาด้วย Next.js 16, React 19, TypeScript และ Tailwind CSS เพื่อสร้างหน้าจออินเทอร์เฟซที่ทันสมัยและตอบสนองได้แบบเรียลไทม์)
- ROS Bridge Communication: เชื่อมต่อระหว่าง Web UI และ ROS ผ่านโปรโตคอล WebSocket (ค่าเริ่มต้น ws://localhost:9090) (ใช้งานไลบรารี่ roslib ในฝั่ง Frontend และมี Mock ROS Bridge ที่เขียนด้วย Node.js ws สำหรับจำลองเซิร์ฟเวอร์ในช่วงการพัฒนาและทดสอบ)
- Real-time Data Flow (ROS to UI): รับข้อมูลสถานะหุ่นยนต์อย่างต่อเนื่อง เช่น มุมข้อต่อ (Joint States), พิกัดปลายแขนกล (End-effector Pose), สถานะเครื่องจักร (Machine State) และความปลอดภัย (จัดการข้อมูลด้วย React State และรับข้อมูลรูปแบบ Message Types มาตรฐานของ ROS เช่น sensor_msgs/Joint State)
- Command Execution (UI to ROS): ส่งคำสั่งควบคุมหุ่นยนต์ เช่น การเคลื่อนที่ตามเส้นทาง (Trajectory), การทำงานทีละแกน (Jog), คำสั่งหยุด และโหมดการสอน (Teach Mode) (ทำงานผ่านการ Publish JSON Payload จาก Web UI ไปยัง ROS Topics ที่กำหนดไว้)
- 3D Digital Twin Visualization: นำข้อมูล Joint States มาประมวลผลเป็นแบบจำลอง 3 มิติ เพื่อจำลองการเคลื่อนไหวควบคู่กับหุ่นยนต์จริงหรือ Simulator แบบเรียลไทม์ (พัฒนาด้วย Three.js ร่วมกับ react-three/fiber โดยนำไฟล์โมเดลหุ่นยนต์ .glb มา Render และอัปเดตมุมการหมุนของแต่ละข้อต่อตามข้อมูลที่ได้รับ)
- Vision & AI Integration: รับสตรีมวิดีโอและข้อมูลการตรวจจับ (Detection) ผ่าน WebSocket เพื่อแสดงผลและเพิ่มเลเยอร์ความปลอดภัย (ระบบฝั่งกล้องพัฒนาด้วย Python ใช้ OpenCV จัดการภาพ, Ultralytics YOLOv8 ตรวจจับวัตถุ และ Media Pipe Pose สำหรับสร้างโครงร่างกระดูกมนุษย์หรือ Skeleton)
- Simulation Environment: รองรับการทำงานในโหมดจำลอง (Simulator) สำหรับการรันและทดสอบอัลกอริทึมโดยไม่ต้องพึ่งพาฮาร์ดแวร์จริง (รันเป็นสคริปต์เบื้องหลังด้วย Python ใช้ไลบรารี่ robotics toolbox-python และ swift-sim ในการคำนวณ Kinematics และจำลองพฤติกรรมของฮาร์ดแวร์)
ภาพแสดงการส่งข้อมูลระหว่าง Robot Arm Web UI กับระบบต่างๆ
เทคโนโลยีและไลบรารี่ที่ใช้
- Frontend: Next.js 16, React 19, TypeScript และ Tailwind CSS
- 3D Digital Twin: Three.js, @react-three/fiber, @react-three/drei และ Postprocessing
- Backend API: Next.js API Routes
- Database: Prisma ORM ทำงานร่วมกับฐานข้อมูล SQLite
- ROS Connection: roslib สำหรับการเชื่อมต่อผ่าน Ros bridge WebSocket
- Simulation: Python, roboticstoolbox-python, swift-sim, spatialmath, spatialgeometry, numpy และ websocket-client
- Camera / AI Vision: Python, OpenCV, WebSocket, Ultralytics YOLOv8 และ Media Pipe Pose, Aruco
- Mock ROS Bridge: Node.js ws สำหรับจำลอง rosbridge v2 ในช่วงการพัฒนา
การเชื่อมต่อ ROS และ Data Flow
การสื่อสารทำงานผ่าน Ros bridge แบบ Pub/Sub (Publish/Subscribe) โดยมีโครงสร้าง Data Flow ดังนี้
Data Subscription (ROS -> Web UI)
Data Publishing (Web UI -> ROS)
ระบบฐานข้อมูล Jobs/Positions
การบันทึกกระบวนการทำงานและข้อมูลโครงสร้างระบบใช้ Prisma ORM + SQLite เพื่อความสะดวกรวดเร็ว
