แผนผังการปลูกต้นไม้แบบอินเทอร์แอคทีฟ (Interactive Planting Plan)
โปรเจกต์นี้คือเว็บแอปพลิเคชันในรูปแบบ Dashboard สำหรับแสดงภาพและจัดการแผนผังการปลูกต้นไม้บนที่ดินขนาด 1 ไร่ (84 ต้น) สร้างขึ้นเพื่อเปลี่ยนแผนการปลูกแบบเดิมๆ ที่เป็นเพียงข้อความ ให้กลายเป็นเครื่องมือที่สวยงาม โต้ตอบได้ และเข้าใจง่าย
ผู้ใช้สามารถดูการจัดวางต้นไม้, ปรับเปลี่ยนจำนวนพันธุ์ไม้แต่ละชนิด, และสร้างแผนผังการปลูกใหม่ได้ทันทีตามเงื่อนไขที่กำหนด
- Visual Grid: แสดงแผนผังการปลูกในรูปแบบตารางที่เข้าใจง่าย
- Color Coded: แยกแยะพันธุ์ไม้แต่ละชนิดด้วยสีพื้นหลังที่แตกต่างกัน
- Interactive Modal: คลิกที่ต้นไม้แต่ละต้นเพื่อดูข้อมูลเพิ่มเติม (ตำแหน่ง, กลุ่มพันธุ์ไม้)
- Dynamic Controls: สามารถเพิ่มหรือลดจำนวนต้นไม้แต่ละชนิดได้
- Live Chart: Doughnut chart แสดงสัดส่วนของพันธุ์ไม้ และจะอัปเดตตามการปรับแก้ของผู้ใช้
- Regenerate Layout: ปุ่ม "จัดผังใหม่" เพื่อสร้างแผนผังการปลูกใหม่ตามจำนวนต้นไม้ที่กำหนด
- Reset Function: ปุ่ม "คืนค่าเริ่มต้น" เพื่อย้อนกลับไปยังแผนผังและจำนวนต้นไม้ดั้งเดิม
- Responsive Design: ออกแบบให้รองรับการแสดงผลบนอุปกรณ์ทุกขนาด ตั้งแต่เดสก์ท็อปจนถึงมือถือ
- HTML5
- CSS3
- Tailwind CSS: สำหรับการออกแบบและจัดวางเลย์เอาต์อย่างรวดเร็ว
- JavaScript (ES6+): สำหรับจัดการตรรกะทั้งหมดของแอปพลิเคชัน
- Chart.js: สำหรับสร้างและแสดงผล Doughnut chart
หัวใจหลักของโปรเจกต์คืออัลกอริทึมการจัดวางต้นไม้ในไฟล์ JavaScript ซึ่งทำงานเป็น 2 เฟสหลัก:
-
เฟสที่ 1: การวางต้นอาคาเซีย
- โปรแกรมจะนำต้นอาคาเซียไปวางในแถวที่ถูกกำหนดไว้โดยเฉพาะก่อน (แถวที่ 2, 4, 6, 8, 10, 12)
- หากมีต้นอาคาเซียเหลือ (จำนวนเกิน 42 ต้น) จะถูกนำไปรวมกับกลุ่มต้นไม้หลักเพื่อรอการสุ่มวางต่อไป
-
เฟสที่ 2: การวางต้นไม้กลุ่มหลัก
- โปรแกรมจะวนลูปในช่องที่เหลือ และพยายามวางต้นไม้จากกลุ่มหลัก
- ในการวางแต่ละครั้ง โปรแกรมจะพยายามทำตามกฎ "ห้ามปลูกพันธุ์เดียวกันติดกัน 4 ด้าน" ให้ได้มากที่สุด โดยจะตรวจสอบต้นไม้ที่อยู่ด้านบนและด้านซ้ายก่อนทำการตัดสินใจ
- หากไม่สามารถหาตัวเลือกที่ไม่ขัดกับกฎได้ โปรแกรมจะเลือกวางต้นไม้ที่ขัดกับกฎน้อยที่สุด เพื่อให้สามารถเติมต้นไม้ได้ครบทุกช่อง
This project is licensed under the MIT License.