System Flow Diagram
PSUPN Smart Wheel —
กระบวนการทำงานระบบ
แอปพลิเคชันหมุนวงล้อจับรางวัล · สำนักงานวิทยาเขตปัตตานี
dtc.pn.psu.ac.th/app/wheel
⬡ ขั้นตอน
① นำเข้าข้อมูล
② ประมวลผล
③ ผลลัพธ์ / Output
1
เริ่มต้น
Start
🌐 เปิดหน้าเว็บ
dtc.pn.psu.ac.th/app/wheel
ไม่ต้องติดตั้ง · ใช้ได้ทุกอุปกรณ์
💾 โหลดข้อมูลเก่า
loadFromStorage()
ดึงรายชื่อ + ประวัติจาก
localStorage อัตโนมัติ
✅ พร้อมใช้งาน
แสดงสถิติ:
รายชื่อทั้งหมด / สุ่มไปแล้ว / คงเหลือ
2
นำเข้า
รายชื่อ
3 ช่องทาง
⌨️ พิมพ์ / วาง Textarea
กรอกรายชื่อทีละบรรทัด
"นำเข้าใหม่" หรือ "เพิ่มเติม"
📁 อัปโหลดไฟล์
.txt หรือ .csv
(แทนที่ / เพิ่มเติม)
📦 Import JSON
นำเข้าข้อมูลที่ Export ไว้
(รายชื่อ + ประวัติครบถ้วน)
ตรวจสอบซ้ำ (Auto)
🔍 ซ้ำในไฟล์เดียวกัน?
Set deduplication
ภายในรายการที่นำเข้า
🔍 ซ้ำกับรายชื่อเดิม?
กรณี appendMode
เทียบกับ participants ปัจจุบัน
🔢 เกิน 4,000 รายการ?
ตรวจสอบจำนวนรวม
(ปัจจุบัน + ใหม่)
✅ นำเข้าสำเร็จ
แจ้งจำนวนที่เพิ่ม
+ จำนวนซ้ำที่ไม่ถูกเพิ่ม
วงล้อพร้อมหมุน
❌ เกิน 4,000 / ซ้ำหมด
แสดง Error / Warning
ยกเลิกการนำเข้า
3
ตั้งค่า
Settings
การแสดงผลวงล้อ
🎡 จำนวนช่องวงล้อ
20 – 100 ช่อง (ค่าเริ่ม: 50)
Slider · แสดงตัวอย่างทันที
⏱ ความเร็วหมุน
2 – 15 วินาที (ค่าเริ่ม: 5)
ตัวเลือกเสริม
🔊 เปิด / ปิดเสียง
เสียงหมุน + เสียงแจ้งผู้โชคดี
🎊 Confetti
เอฟเฟกต์กระดาษหลากสีเมื่อประกาศผล
🗑 ลบหลังสุ่ม
removeAfterDraw
ลบชื่อออกหลังจับได้
โหมดแสดงผล
🖥 Normal Mode
หน้าจอปกติ พร้อมแผงควบคุม
🔲 Fullscreen Mode
เต็มจอ เหมาะฉายบนจอใหญ่
บนเวที / ห้องประชุม
4
หมุนวงล้อ
Spin
ผู้ใช้กดปุ่ม
🎰 กด "หมุนวงล้อ!"
ปุ่ม disable ระหว่างหมุน
รองรับทั้ง Normal
และ Fullscreen Mode
กระบวนการสุ่ม
🎲 สุ่ม winner index
Math.random() × จำนวน participants
เลือกจากรายชื่อที่เหลืออยู่
🌀 Animate วงล้อ
requestAnimationFrame
+ ease-out curve
หมุน 5–8 รอบ แล้วชี้ผู้โชคดี
🔒 กำลังหมุนอยู่?
isSpinning = true
ล็อคไม่ให้กดซ้ำระหว่างหมุน
5
ประกาศผล
& บันทึก
แสดงผลผู้โชคดี
🏆 Popup ผู้โชคดี
SweetAlert2 แสดงชื่อ
🎊 Confetti + 🔊 เสียง
สถานะผู้โชคดี?
ปุ่ม: ✓ อยู่ | ✗ ไม่อยู่
ถ้า "อยู่"
🎁 กรอกรหัสของขวัญ
ช่อง input รหัส เช่น A00001
บังคับกรอก / กด confirm
✅ บันทึก: อยู่ + รหัส
updateHistoryStatus()
บันทึก → localStorage
ถ้า "ไม่อยู่"
📝 บันทึก: ไม่อยู่
updateHistoryStatus('ไม่อยู่', '-')
บันทึก → localStorage
🗑 ลบออก (ถ้าตั้งค่า)
removeAfterDraw = true
participants.splice(i, 1)
6
ประวัติ
& Export
History Panel
📋 ประวัติการสุ่ม
สูงสุด 100 รายการ
ชื่อ / สถานะ / รหัสของขวัญ / เวลา
🔍 ค้นหารายชื่อ
searchParticipants()
filter แบบ real-time
Export ข้อมูล
📄 Export History (.csv)
ลำดับ / ชื่อ / สถานะ /
รหัสของขวัญ / เวลา
เปิดใน Excel ได้ทันที
📦 Export Data (.json)
รายชื่อ + ประวัติครบถ้วน
นำกลับมา Import ต่อได้
จัดการข้อมูล
🔄 ล้างประวัติ
clearHistory()
ล้างเฉพาะ history
รายชื่อยังคงอยู่
⚠️ รีเซ็ตทั้งหมด
resetAll()
ล้างรายชื่อ + ประวัติ
+ ล้าง localStorage
7
สิ้นสุด /
วนซ้ำ
🔁 หมุนรอบถัดไป
กลับสู่ Phase 4 ทันที
รายชื่อที่เหลืออัปเดตแล้ว
💾 บันทึกอัตโนมัติ
saveToStorage() ทุกครั้งที่ข้อมูลเปลี่ยน
ปิดแล้วเปิดใหม่ยังมีข้อมูลเดิม
🏁 จบกิจกรรม
Export .csv ผลรางวัลทั้งหมด
ส่งผู้จัดงาน / แจ้งบุคลากร
💾 Data Flow — การไหลของข้อมูล
📥 รายชื่อ Input
→
🔍 Dedup + Validate
→
🎡 participants[ ]
→
🎲 spinWheel()
→
🏆 winner
→
📋 history[ ]
→
💾 localStorage
→
📄 Export .csv / .json
กระบวนการ (Action)
การตัดสินใจ (Decision) ◆
ผลลัพธ์สำเร็จ (Success)
ข้อผิดพลาด / แจ้งเตือน (Error)
เงื่อนไขทางเลือก (Conditional)
ที่จัดเก็บข้อมูล (Storage)
รองรับสูงสุด 4,000 รายการ · ตรวจซ้ำอัตโนมัติ · บันทึกอัตโนมัติ (localStorage) · Export CSV / JSON