Update สิ่งที่ต้องทำเพิ่มเติม (ต่อ)

• แก้ไขให้แสดงสถานะของระบบนำทางทุกหน้า
  
• ย้าย dropdown เลือกชั้นให้มาอยู่กับ dropdown เลือกสถานที่เพื่อลด Popup

• เพิ่มปุ่ม next และ previous ในหน้าแสดงภาพของสถานที่ เพื่อรองรับการแสดงภาพหลายภาพในมุมต่างๆ

Update สิ่งที่ต้องทำเพิ่มเติม

1. ทำการแจ้งเตือนผู้ใช้ว่าตอนนี้ ตัวอุปกรณ์กำลังใช้งาน GPS หรือ IPS

ได้ทำการเพิ่มตัวอักษรแจ้งสถานะระบบนำทางที่ใช้ไว้ที่มุมขวาบนของจอ จะแสดงเมื่ออยู่ในหน้าการนำทาง

2. ทำปุ่มย้อนกลับไปยัง Node ก่อนหน้า

ทำการเพิ่มปุ่ม "จุดก่อนหน้า" ไว้ที่หน้าการนำทาง เพื่อใช้ย้อนกลับไปยัง Node ก่อนหน้าเรียบร้อย

3. สำรวจหน้าภาค CE, IEE, ChE, MPTE , LE (ตึก 89, 86, 88)

ผลการสำรวจที่ตั้งของภาควิชาทั้ง 3 ตึก

• อาคาร 86
• ภาควิชา MPTE อยู่ทางเข้าข้างหน้าตึก
• ภาควิชา CHE อยู่ที่ชั้น 13
• อาคาร 88
• ภาควิชา LE อยู่ที่ชั้น 5
• อาคาร 89
• ภาควิชา CE อยู่ที่ชั้น 2
• ภาควิชา IEE อยู่ที่ชั้น 8

สิ่งที่จะต้องทำ(เพิ่มเติม)

    หลังจากการสอบวิชา Project II ได้มีเรื่องที่จะต้องทำเพิ่มเติมดังนี้
1. ทำการแจ้งเตือนผู้ใช้ว่าตอนนี้ ตัวอุปกรณ์กำลังใช้งาน GPS หรือ IPS
2. ทำปุ่มย้อนกลับไปยัง Node ก่อนหน้า
3. สำรวจหน้าภาค CE, IEE, ChE, InSE, LE (ตึก 89, 86, 88)
4. ทำหน้าแจ้งเตือนสำหรับผู้ใช้ที่มีระบบปฏิบัติการเป็น Android 9
5. เขียนวิทยานิพนธ์

Publishing App on Play Store

    ในขณะนี้เราได้ทดลองนำแอปพลิเคชั่นของเราไปเผยแพร่อยู่บน Play Store แล้ว แต่ว่าอาจจะต้องรอทาง Google ตรวจสอบก่อนครับ

Privacy Policy

นโยบายการคุ้มครองข้อมูลส่วนบุคคลของผู้ใช้บริการ

    ในแอปพลิเคชั่น AR Navigator @ENG KUMTNB ของเรานั้นสำหรับการเก็บข้อมูล ทางเราไม่ได้มีการเก็บข้อมูลของผู้ใช้งาน เพราะเราต้องการแค่ขออนุญาตใช้งาน GPS เพื่อใช้ในการระบุตำแหน่งของผู้ใช้ เพื่อที่เราจะได้นำทางได้อย่างถูกต้อง และขออนุญาตในการใช้กล้องเพื่อที่จะใช้งานในตัวของ AR เพียงเท่านั้น

การสมัคร Play Store Developer

    เนื่องจากเราต้องการที่จะนำ Application ของเรานั้นอัพโหลดขึ้นไปอยู่บน Play Store เพื่อที่จะให้คนอื่นนั้นสามารถที่จะนำ Application ของเรานั้นไปทดสอบใช้งานได้ง่าย ทางเราจึงได้สมัคร Play Store Developer โดยจ่ายเงินเป็นจำนวน 25 USD แบบครั้งเดียวตลอดชีพ ภายใต้ชื่อ Neo5 Studio โดย Neo5 นั้นสามารถออกเสียงได้เป็น Neophyte ที่แปลว่าผู้ฝึกหัด โดยเราใช้ชื่อนี้เพื่อสื่อความหมายถึงบริษัท หรือทีมงานที่เป็น Startup

ความคลาดเคลื่อนของการวัดระยะโดยแอปพลิเคชั่น

    ในฟังก์ชันการวัดระยะที่ใช้อยู่ในปัจจุบันจะทำการวัดจากนำตำแหน่งพิกัดละติจูดและลองติจูดของตำแหน่งของอุปกรณ์ของผู้ใช้ กับพิกัดของตำแหน่งที่เรากำหนดไว้มาเข้าฟังก์ชันหาระยะห่าง ซึ่งในการวัดระยะที่ต้องอาศัย GPS นั้นย่อมมีความผิดพลาด เราจึงทดลองความผิดพลาดด้วยวิธีดังนี้

    1. คาดคะเนตำแหน่งของพิกัดที่เราเก็บไว้แล้วให้ผู้ทดสอบไปยืน

    2. ให้อีกคนหนึ่งยืนห่างจากผู้ทดสอบคนแรกเป็นระยะ 5 เมตร (ใช้ตลับเมตรวัด)

    3. ทดลองเปิดแอปพลิเคชั่นแล้วดูระยะที่ขึ้นมาว่าคลาดเคลื่อนไปมากเท่าไร

    จากผลการทดลองจะสรุปได้ว่าระยะที่เรานั้นยืนห่างจากจุดตำแหน่งที่กำหนดไว้เป็น 5 เมตร แต่ระยะที่วัดได้จากแอปพลิเคชั่นจะอยู่ที่ 9 เมตร ซึ่งสามารถบอกได้ว่ามีความคลาดเคลื่อนอยู่ที่ประมาณ 4 เมตร แต่ระหว่างที่ทดลองอยู่นั้นจะมีบางจังหวะที่ตำแหน่งของวัตถุเสมือนนั้นมีการกระโดดไปเนื่องจากความผิดเพี้ยนของ GPS 

ขอ Permission ให้กับ App

เริ่มจากทำการสร้าง Activity ใหม่ขึ้นมา แล้วนำโค้ดเก่าย้ายไปใส่ Activity ใหม่

*Activity เปรียบเสมือน หน้าของ App; 1 Activity = 1 หน้า

จากนั้นให้เพิ่มโค้ดใน AndroidManifest.xml เพื่อบอกให้รู้ว่ามี Activity ใหม่เพิ่มมา (ดั่งเดิมมีแค่ MainActivity)

ถัดมาการทำการเพิ่มโค้ดสำหรับเช็ค Permission ไว้ใน MainActivity

โดย Code ส่วนสำคัญที่จะทำการ Override คือ

1) permissionsGranted เป็น methed ที่จะทำงานหาก permission ที่กำหนดไว้ได้รับการอนุญาติหมดแล้ว ซึ่งในที่นี้หากผู้ใช้อนุญาติ Permission หมดแล้วก็จะทำการเรียกใช้ ArActivity ซึ่งเป็นหน้า Application หลัก

2) permissionsDinied จะทำงานเมื่อมีการปฏิเสธ ไม่อนุญาติ Permission ในที่นี้จะทำการโชว์เป็นข้อความ popup แบบ Toast ขึ้นมา(จะโผล่ขึ้นมาด้านล่าง แล้วค่อยๆจางหายไป)

3) showPermissionRationale เป็น method ที่จะทำงานเมื่อ Permission ที่กำหนดไว้ยังไม่ได้รับการอนุญาต(และยังไม่ได้ปฏิเสธ) และจะทำการเรียกใช้ฟังก์ชั่น positiveRationaleResult สำหรับเรียกหน้าต่างขอ Permission ของ Android ขึ้นมา

ความคลาดเคลื่อนของ Google Maps

    ในการเก็บพิกัดตำแหน่งของสถานที่ต่างๆที่เราจะให้แสดงตัวของโมเดล เราจะใช้อุปกรณ์ช่วยอย่าง Google Maps ในการเก็บพิกัด แต่เมื่อเรานำมาใช้กับแอปพลิเคชั่น แล้วปรากฏว่ามีความคลาดเคลื่อนในเบื้องต้นได้สันนิษฐานว่าอาจจะเป็นที่เครื่องโทรศัพท์มือถือของเรานั้น มีความบกพร่องทางการรับสัญญาณ GPS แต่ในระหว่างที่กำลังเก็บพิกัดเพิ่มเติม ผมได้สังเกตเห็นอะไรบางอย่างตามรูปภาพด้านล่าง

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

    จากผลการทดสอบดังกล่าวผมจึงคิดว่าน่าจะเป็นความคลาดเคลื่อนของ Google Maps ที่บางจุดก็ไม่สามารถที่จะดึงตำแหน่งของ GPS มาได้เลยเลือกตำแหน่งใกล้เคียงแทน ซึ่งในส่วนนี้ผมยังไม่ได้หาข้อมูลละเอียดมากนัก แต่ได้ลองเปลี่ยนไปใช้ https://www.mapcoordinates.net แทนครับ
   

GPS Accuracy

    ในช่วงสัปดาห์ที่ผ่านมานั้นได้มีคำแนะนำเกี่ยวกับการหาค่าความคลาดเคลื่อนของระบบ GPS โดยเราสามารถใช้ค่าของ Accuracy มาช่วยในการระบุเกี่ยวกับค่าความคลาดเคลื่อนได้ ดังรูปข้างล่าง

    ในรูปด้านบนได้บอกว่าเราได้ค่าความคลาดเคลื่อนมีค่าเท่ากับ 2 ซึ่งจากการเดินสำรวจ ได้พบว่าค่าความคลาดเคลื่อนดังกล่าวนั้นมีแค่ค่า 1-3 เท่านั้น เลยเกิดข้อสงสัยว่าค่าที่ได้นั้นมีความถูกต้องหรือเปล่า ก็เลยไปค้นคว้าในตัวเอกสาร ปรากฏว่าค่าที่ได้นั้นเป็นค่าระดับ 1 - 3 (High Mid Low) ซึ่งเป็นผลจากการใช้ SDK Wikitude 

    วิธีแก้ไขคือเราได้ใช้ API ของ Android ส่งค่าให้แสดงค่าโดยตรงซึ่งจะได้มาเป็นค่าดังรูปด้านล่าง

    โดยเลข 22 เมตรนั้นหมายถึงมีค่าความผิดพลาดของตัว GPS อยู่ที่ 22 เมตรเป็นรัศมีวงกลม คล้ายๆกับของเวลาเราใช้ Google Maps

    

ข้อจำกัดเรื่อง WiFi ของ Android 9 (หรือเวอร์ชั่นที่ใหม่กว่า)

    เนื่องจากในขณะที่กำลังทดสอบการตรวจจับข้อมูลสัญญาณ WiFi พบว่ามือถือของผมนั้น (Xiaomi Mi A1, Android 9) มีการอัพเดทข้อมูลเพียงเล็กน้อยแล้วนิ่งไปสักพักจึงจะมีการอัพเดทข้อมูลอีกครั้ง ส่วนมือถือของธนัท (Asus Zenfone Max Pro M2, Android 8.1) กลับอัพเดทข้อมูลได้เรื่อยๆไม่มีปัญหาอะไร ผมจึงได้ทำการหาข้อมูลว่าปัญหาเกิดจากอะไร จนพบว่า

    ฟังก์ชั่น startScan() ซึ่งใช้สำหรับ trigger ให้อุปกรณ์ทำการ Scan WiFi เพื่ออัพเดทข้อมูล ถูกเลิกใช้ตั้งแต่ API level 28 (Android 9) ขึ้นไป และมีการจำกัดจำนวนครั้งการสแกน โดยจะสามารถสแกนได้ 4 ครั้งใน 2 นาทีสำหรับ Foreground Application และ 1 ครั้งใน 30 นาที สำหรับ Background Application

    ซึ่งการยกเลิกฟังก์ชั่นดังกล่าวทำให้ Developer ที่ทำ Application ที่เกี่ยวกับ indoor maps และ wifi analyzer พบกับปัญหากัน ซึ่งทางออกที่ Google แนะนำคือให้ใช้ WifiRttManager แทน แต่ก็มีข้อจำกัดคือ อุปกรณ์ทั้งมือถือ และ Access Point จะต้องรองรับมาตรฐาน wifi IEEE 802.11mc ซึ่งอุปกรณ์ที่รองรับตอนนี้ยังมีไม่มากนัก

แนวทางการแก้ปัญหา

    อาจจะต้องจำกัดให้สามารถใช้ได้แค่ Android 8.1 ลง

แหล่งอ้างอิง

- https://developer.android.com/reference/android/net/wifi/WifiManager#startScan()

- https://stackoverflow.com/questions/49178307/startscan-in-wifimanager-deprecated-in-android-p

- https://issuetracker.google.com/issues/112688545

การติดต่อกันระหว่าง Java และ JavaScript

    โดยปกติแล้วการสร้างแอปพลิเคชั่น android จะเขียนด้วยภาษา Java แต่ในโปรเจค AR Navigator ของเรานั้นมีการใช้ Wikitude JavaScript API ทำให้ในโปรเจคนี้จะมีการใช้ภาษาโปรแกรมมิ่ง 2 ภาษา คือ Java และ JavaScript โดยจะแบ่งหน้าที่กันดังนี้

• JavaScript (HTML, CSS, Jquery Mobile, etc.) ใช้สำหรับสร้างแอป AR และระบบการทำงานโดยส่วนใหญ่ของแอปพลิเคชั่น
• Java จะเรียกใช้แอปที่สร้างด้วย JS มาแสดงผล และระบบการทำงานที่เกี่ยวกับ Hardware เช่น ตั้งค่าความละเอียดกล้อง, การเรียกใช้ GPS

ภาพตัวอย่าง คำสั่งการเรียกใช้แอปที่สร้างด้วย JS เพื่อมาแสดงผล

การส่งค่า GPS จาก Java ไปสู่ JavaScript

    ใน Java เราจะใช้คำสั่งจาก Library ของ Wikitude คือ ArchitectView.setLocation() เพื่อเซ็ตค่าบอกให้ Wikitude API รู้ว่าเรากำลังอยู่ที่ตำแหน่งไหน

    ส่วนใน JavaScript ก็จะมีฟังก์ชั่น AR.context.onLocationChanged() ที่จะถูกเรียกอัตโนมัติเมื่อค่าตำแหน่งใน Wikitude API มีการเปลี่ยนแปลง วิธีใช้คือให้ทำการ override ฟังก์ชั่นนี้แล้วทำการเพิ่ม statement ที่ต้องการลงไป

Java เรียกใช้ฟังก์ชั่นของ JavaScript ได้

    โดยใช้คำสั่ง architectView.callJavascript("") เช่น จะเรียกใช้ฟังก์ชั่น resetDropdown ก็จะใช้คำสั่ง architectView.callJavascript("resetDropdown()") เป็นต้น ซึ่งคำสั่งนี้จะสามารถเรียกใช้ฟังก์ชั่นของ JS ได้อย่างเดียว ไม่สามารถที่จะรับค่าจะฟังก์ชั่นที่มีการ return ค่าได้

JavaScript ไม่สามารถเรียกใช้ฟังก์ชั่น Java ได้ แต่สามารถส่ง JSON Object ให้ Java ได้

    โดยจะส่งค่าผ่านคำสั่ง AR.platform.sendJSONObject() ใน JavaScript ส่วนใน Java จะต้องทำการเรียกใช้ ArchitectView.addArchitectJavaScriptInterfaceListener(this); ก่อน ซึ่งควรเรียกใช้ใน onCreate() เพื่อจะได้เรียกใช้ตั้งแต่เปิดแอปพลิเคชั่น และควรใส่ ArchitectView.removeArchitectJavaScriptInterfaceListener(this); ไว้ใน onDestroy() เพื่อที่จะ remove listener ออกเมื่อปิดแอป

    การรับค่าที่ JavaScript ส่งมาสามารถทำได้โดยการ override ฟังก์ชั่น onJSONObjectReceived() ใน Java ที่จะถูกเรียกใช้ทุกคร้ังเมื่อมีการส่ง JSON Object มา

    ตัวอย่างการใช้งาน

         ต้องการจะส่งค่า State จาก JS มาเก็บไว้ที่ Java โดยใช้คำสั่ง AR.platform.sendJSONObject({action: "sendState", state: "home"}); ก็จะทำการ override ฟังก์ชั่น onJSONObjectReceived() ออกมาได้ดังนี้

        สาเหตุที่ต้องส่ง action มา และ override onJSONObjectReceived() ออกมาเป็นรูปแบบของ Switch-Case ก็เพราะเผื่อในอนาคตเราต้องการที่จะส่งค่า JSON Object อย่างอื่นที่ไม่เกี่ยวกับเรื่อง state เข้ามาก็จะได้แบ่งการทำงานแยกกันได้

การส่งเรื่องขอใช้ Wikitude Startup

    จากในโพสต์ที่ผ่านมาเรื่องปัญหาของการอัพโหลด App ของเราขึ้นไปบน App Store นั้นติดปัญหาเรื่อง License ของ Wikitude SDK ที่เป็นเวอร์ชั่น EDU โดยมีข้อจำกัดที่ว่าเราไม่สามารถทำการเผยแพร่ App ของเราผ่านทาง App Store ใดๆได้ทำให้เราจำเป็นจะต้องหาวิธีอื่นในการเผยแพร่ App

    ทางเลือกอื่นที่น่าสนใจคือการเปลี่ยนตัว License จากที่ใช้เวอร์ชั่น EDU ไปใช้เป็นของ Startup แทนซึ่งผมได้ทำการใส่กรอกแบบฟอร์มเพื่อขอใช้งานตัว License Startup ไปแล้วซึ่งทาง Wikitude ก็ได้ส่งเมล์ตอบรับกลับมาว่าข้อมูลที่ส่งไปตรงตามเกณฑ์สามารถใช้งาน License Startup ของเขาได้ และขอให้ผมส่งชื่อ package name ของ App เพื่อให้เขาทำการสร้าง License แล้วส่งมาให้เราใช้งาน

    ในวันที่เขียนโพสต์นี้นั้นคือวันที่ 5 มีนาคม 2562 ซึ่งผมได้ส่ง package name ที่ต้องการไปตั้งแต่วันที่ 1 มีนาคม 2562 ยังไม่มีการตอบกลับมาซึ่งถ้าได้ผลลัพธ์อย่างไรจะมาอัพเดทอีกรอบครับผม

ปัญหาหลังจาก Update Android

Mi A1 หลังจาก Update Security Patch ประจำเดือนกุมภาพันธ์ ได้พบเจอปัญหากับ WikitudeSDK

• อยู่ๆก็ไม่สามารถติดตั้งไฟล์ APK ได้ ต้องตั้งค่ากล้องให้ความละเอียดต่ำ(480p)ถึงจะใช้ได้
• ไฟล์ APK ตัวอย่างของทาง Wikitude ก็ไม่สามารถติดตั้งได้
• ทดลองติดตั้งไฟล์ APK ของ App อื่นๆแล้ว ติดตั้งได้ปกติ จึงคิดว่าเป็นเฉพาะ Wikitude

แนวทางการแก้ปัญหา

• พัฒนา App โดยตั้งค่ากล้องให้ใช้ความละเอียดต่ำไปก่อน

เพิ่มเติม : ตั้งค่าที่ความละเอียด HD (720p) สามารถใช้ได้ มีอาการหน่วงเล็กน้อย ส่วนความละเอียด Full HD (1080p) ทดลองติดตั้งแอปผ่านทาง Android Studio พบว่าเกิดปัญหากล้องมีแถบลาย

ปัญหาการอัพโหลด App ขึ้น App Store

    จากที่ท่านอ. SPN ได้ให้พวกผมลองไปดูเรื่องของการอัพโหลดตัว Application AR Navigator ขึ้นไปบน Play Store ว่าต้องมีค่าใช้จ่ายอย่างไรบ้างนั้น หลังจากที่ได้ทำการค้นคว้าดูแล้วปรากฏว่าในเงื่อนไขของการใช้งานตัวของ SDK Wikitude ในเวอร์ชั่นของ EDU นั้นมีระบุไว้ดังนี้

    ในย่อหน้าข้างต้นนั้นจะมีใจความว่า ตัว Wikitude EDU License นั้นมีอายุการใช้งานมากสุดเพียง 1 ปี และทาง Wikitude นั้นไม่อนุญาตนำไปเผยแพร่บน App stores ต่างๆ และไม่อนุญาตให้นำตัว EDU License นั้นไปขายหรือแชร์ให้กับบุคคลอื่นๆ และผู้ใช้นั้นจะต้องเป็นนักศึกษาและนักเรียนเท่านั้น

ลิงค์อ้างอิง (https://www.wikitude.com/wikitude-academy/)

    ด้วยข้อบังคับดังกล่าวทำให้เราไม่สามารถที่จะนำตัวของ App AR Navigator ขึ้นไปยัง App store ได้ครับ

วิดิโอการทดสอบการเดิน

    ด้านล่างจะเป็นวิดิโอที่ผมได้ทดลองเดินทางไปยังสถานที่ต่างๆภายในคณะวิศวกรรมศาสตร์ของ มจพ. ครับ โดยจะทดลองตามเส้นทางที่ได้ทำเป็นกราฟแล้วทำการคำนวณ ได้ทดลองทั้งหมด 4 เส้นทางดังนี้

1. จากหน้าร้านแป้งปูนไปยังหน้าตึก 89

เส้นทางที่คำนวณได้

คลิปทดลองการเดินจริง

2. การเดินทางจากบริเวณหอในไปยังโรงอาหาร

เส้นทางที่คำนวณได้

คลิปทดลองการเดินจริง

3. การเดินทางจากโรงอาหารไปยังชั้น 3 ห้องคอมพิวเตอร์ (KMUTNB)

เส้นทางที่คำนวณได้

คลิปทดลองการเดินจริง

4. การเดินทางจากทางแยกตึก 81 ไปยังหน้าภาควิชา ECE (KMUTNB)

เส้นทางที่คำนวณได้

คลิปทดลองการเดินจริง

เครื่องมือการวาดรูปกราฟ

    ในการวาดรูปกราฟเพื่อให้เห็นถึงรายละเอียดตำแหน่งจุดที่เราอ้างอิงกับสถานที่จริง เราได้ใช้เครื่องมืออย่าง Google Map ในการเก็บตำแหน่งพิกัดจุดต่างๆ และใช้ Feature ในการวัดระยะทางเพื่อนำไปใส่ในกราฟ ส่วนเครื่องมือที่เราใช้ในการวาดรูปกราฟนั้น เราได้ใช้ https://www.draw.io/ ในการวาด

  

    ซึ่งเราสามารถ export ได้เป็นไฟล์ภาพชนิดต่างๆ เช่น jpg, png หรือจะเป็นไฟล์ svg ก็ได้ และสามารถ save ไฟล์งานเป็น xml ได้เพื่อสำหรับการแก้ไขในครั้งต่อๆไป

กราฟบริเวณรอบคณะวิศวกรรมศาสตร์

    ในสัปดาห์ที่ผ่านมาได้ทำการรวบรวมข้อมูลและสร้างจุดกราฟของบริเวณคณะวิศวกรรมศาสตร์ ตั้งแต่ชั้น 1-4 โดยทั้งหมดในตอนนี้มี 50 จุด (อัพเดท 4 ก.พ. 62) โดยมีรายละเอียดดังนี้




    จากข้อมูลสามา่รถสรุปได้ดังนี้

1. ชั้นที่ 1 มี 23 จุด
2. ชั้นที่ 2 มี 10 จุด
3. ชั้นที่ 3 มี 8 จุด
4. ชั้นที่ 4 มี 9 จุด

    โดยข้อมูลล่าสุดตอนนี้ยังไม่ได้ทำการเชื่อมจุดระหว่างชั้นที่ 3 ที่กำลังก่อสร้างอยู่

จากการนำเสนอครั้งที่ 6 ผมได้ทำการเพิ่มเติมจุดสำคัญ 7 จุดได้แก่

1. จุดหน้าโรงอาหารที่มีสะพาน
2. จุดหน้า Smo Cafe
3. จุดตึกหน้าสะพานเขียว
4. จุดหอใน
5. จุดหน้าลานจอดรถสนามบอล
6. จุดทางเข้าประตูเหล็ก
7. จุดทางแยกหน้าตึก 88

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

    เมื่อรวมรวบข้อมูลเสร็จแล้วก็จะนำมาทดลองกับตัวของ Algorithm ของเราโดยจะทดลอง 4 แบบ ดังนี้

1. ทดลองการเดินทางในชั้นเดียวกัน
2. ทดลองการเดินทางไปยังชั้นที่สูงกว่า
3. ทดลองการเดินทางไปยังชั้นที่ต่ำกว่า
4. ทดลองการเดินทางที่ต้องขึ้นและลงบันได

    การทดสอบนี้ทำไปเพื่อจะทดลองว่ามี Bug เกิดขึ้นหรือเปล่าในการใช้บันได เพราะในระหว่างการทำงานนั้นอาจจะมีการลืมใส่จุดเชื่อมระหว่างบันไดและทำให้การคำนวณผิดพลาดได้

ใช้ Dijkstra's algorithm ในการหาเส้นทาง (ชั้น 1)

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

                                    

                                 


    โดยในการทดลองเราจะทดลองเดินทางจากจุด A ไปยังจุด H หรือ จากหน้าตึก 81 ไปยังหน้าตึก 88 เส้นทางไหนจะสั้นที่สุด ซึ่งผลการนำข้อมูลของกราฟที่ได้ไประมวลผลเป็นดังนี้

    A=>B=>D=>F=>G=>H จะเป็นเส้นทางที่สั้นที่สุด โดยมีระยะรวม 227 เมตร

    ซึ่งถ้าอ้างอิงจากกราฟนี้ จะสามารถเดินทางได้อีก 2 ทาง ได้แก่

    A=>B=>C=>E=>G=>H และ  A=>B=>D=>E=>G=>H ซึ่งทั้ง 2 เส้นทางนี้จะได้ระยะทางรวมเป็น 252 เมตร ซึ่งมากกว่า เส้นทางที่ประมวลผลได้

สิ่งที่จะทำต่อไป

    1) ทดลองเพิ่มเติมกับชั้นที่ 2 และ 3
    2) แก้ไขเพิ่มเติมกราฟของชั้นที่ 1

Dijkstra's algorithm in Javascript

    จากครั้งที่แล้วเราได้หาตัวอย่างการ implement โค้ดของ Dijkstra's algorithm ในภาษา Python ไปแล้ว แต่เนื่องจากว่าภาษาที่เราใช้ในการพัฒนาแอปพลิเคชั่นคือภาษา Javascript เราจึงค้นคว้าหาข้อมูลเกี่ยวกับการ implement algorithm ดังกล่าว
    ซึ่งก็ได้มีหลายต่อหลายคนได้ทำและก็แชร์ข้อมูลผ่านต่างเว็บไซต์ต่างๆมากมาย โดยแต่ละแหล่งข้อมูลก็ได้มีวิธีการทำที่แตกต่างกัน แต่ผลลัพธ์ที่ได้ออกมานั้นก็จะเป็นในลักษณะคล้ายๆกัน คือเป็น array เรียงลำดับจาก node เริ่มต้นไปยัง node ถัดๆไป จนถึง node ปลายทางได้สำเร็จโดยใช้จะเป็นเส้นทางที่ใช้ระยะทางสั้นที่สุด
    ในบรรดาหลายๆแหล่งข้อมูลนั้น ก็มีที่ผมนั้นสนใจอยู่ที่หนึ่งก็คือ Link โดยจะตัวโค้ดนั้นสามารถนำมาทดลองใช้ได้ง่าย และโค้ดของส่วนการสร้างกราฟนั้นก็ไม่ซับซ้อนมากนัก เข้าใจได้ง่าย

 

    ในส่วนของการสร้างข้อมูลกราฟนั้นสามารถทำได้ดังนี้

    จากตัวอย่างกราฟด้านบน ถ้าเรานำมาแปลงเป็นโค้ดจะได้ดังนี้ 

    โดยวิธีการใส่ข้อมูลนั้นจะเป็นลักษณะของการนำ node ทุกตัว มาใส่รายละเอียดข้อมูลว่าเชื่อมกับจุดใดบางด้วยระยะทางเท่าไร ซึ่งจะไม่เหมือนกับตัวอย่างของภาษา Python ที่เราได้ทดลองในบทความครั้งที่แล้ว โดยคำตอบที่ได้จะเป็น A => B => D => F

                                                    

Dijkstra's algorithm in Python

    จากบทความที่แล้วผู้เขียนได้อธิบายการแก้ปัญหาการหาเส้นทางที่สั้นที่สุด โดยการใช้ Dijkstra's algorithm แบบพื้นฐาน โดยสามารถใช้มือคิดไปแล้ว ในส่วนของการเขียนโปรแกรมนั้นก็ได้มีบุคคลหลายท่านที่ได้นำขั้นตอนวิธีดังกล่าวมาเขียนให้อยู่ในรูปของโค้ดในหลายๆภาษา ซึ่งตัวผู้เขียนก็ได้ไปลองศึกษาโค้ด Dijkstra's algorithm ที่ใช้ภาษา Python ในการพัฒนา จากเว็บ https://dev.to/mxl/dijkstras-algorithm-in-python-algorithms-for-beginners-dkc 

    ในโค้ดตัวอย่างที่ทางเจ้าของบทความนำมาให้เราศึกษานั้นเราสามารถที่จะนำมาใช้ได้เลย โดยส่วนสำคัญที่เราจะต้องสนใจเพื่อที่จะใช้งานชุดโค้ดดังกล่าวนั้นมี 3 ส่วนด้วยกันดังนี้

1. ส่วนของข้อมูล Graph จะเป็นส่วนที่เราจะต้องทำการใส่ข้อมูลของจุดแต่ละจุดว่าเชื่อมอยู่กับจุดไหน และมีระยะทางเท่าไร เพื่อที่จะให้ตัวโปรแกรมนั้นคำนวณ

2. ส่วนของการเรียกใช้ฟังก์ชั่น จะต้องใส่ค่าลงไปให้ 2 ตัว ได้แก่ จุดเริ่มต้น และ จุดปลายทาง ในตัวอย่างด้านบนจะเป็น จากจุด a ไปยังจุด e 

3. ส่วนของ output จะออกมาเป็น list  โดยสมาชิกใน list จะเป็นการเรียงลำดับจุดที่จะใช้ค่าระยะทางน้อยที่สุด

สิ่งที่ต้องทำต่อไป

1. หาวิธีขั้นตอนการทำ Dijkstra's algorithm ในภาษา Javascript         

2. ต้องเริ่มกำหนดจุดในตัวของแผนที่ว่าจะให้จุดแต่ละจุดอยู่ตรงไหนในสถานที่จริง และแต่ละจุดนั้นห่างกันเท่าไร

Dijkstra's algorithm

    ในสัปดาห์ก่อนๆเราได้มีการพูดคุยกันว่าจะใช้ตัวของ Dijkstra's algorithm ในการหาเส้นทางที่สั้นที่สุดในการเดินทางจากตำแหน่งปัจจุบันไปยังจุดหมายปลายทาง ซึ่งขั้นตอนวิธีทำนั้นค่อนข้างเรียบง่ายและไม่ซับซ้อนมากนัก โดยจะมีทั้งหมด 6 ขั้นตอนดังนี้ (ลิงค์แหล่งที่มา https://th.wikipedia.org/wiki/ขั้นตอนวิธีของไดก์สตรา, https://dev.to/mxl/dijkstras-algorithm-in-python-algorithms-for-beginners-dkc)

หมายเหตุ ผู้เขียนแนะนำให้อ่านขั้นตอนแล้วดูรูปภาพประกอบไปด้วยเพราะจะทำให้เข้าใจง่ายมากยิ่งขึ้น

1. กำหนดให้ทุกจุดมีค่าระยะทางตามเส้นเชื่อมโดยให้จุดเริ่มต้นมีค่าเป็นศูนย์ และจุดอื่นๆมีค่าเป็นอนันต์

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

3. จากจุดปัจจุบัน ให้พิจารณาดูจุดข้างเคียงตามเส้นเชื่อมทุกจุดที่ยังไม่ได้ไป และคำนวณระยะทางต่อเนื่องของเส้นเชื่อม ซึ่งจะคำนวณด้วยการนำระยะของจุดปัจจุบันมาบวกกับค่าระยะทางของเส้นเชื่อม

4. เมื่อพิจารณาจุดข้างเคียงจากจุดปัจจุบันครบทุกจุดแล้ว ทำเครื่องหมายจุดปัจจุบันว่าไปถึงแล้ว และนำออกจากเซตของจุดที่ยังไม่ได้ไป ซึ่งจุดที่เราไปถึงแล้ว เราจะไม่นำมาพิจารณาอีก ค่าระยะทางที่บันทึกอยู่จะสิ้นสุดและมีค่าน้อยสุด

5. จุดปัจจุบันตัวถัดไปที่ถูกเลือกจะเป็นปมที่มีค่าระยะทางน้อยสุดในเซตของจุดที่ยังไม่ไปไม่ถึง

6. ถ้าเซตของจุดที่ยังไม่ได้ไปนั้นว่างหรือก็คือเราเดินไปครบทุกจุดแล้วให้หยุดทำ ขั้นตอนวิธีเสร็จสิ้น หากไม่ใช่ให้เลือกจุดที่ยังไม่ได้ไปที่มีค่าระยะทางน้อยสุดเป็นจุดปัจจุบัน แล้ววนกลับไปทำขั้นตอนที่ 3

รูปตัวอย่างจาก https://th.wikipedia.org/wiki/ขั้นตอนวิธีของไดก์สตรา

    ถ้าหากผู้อ่าน มีความสับสนอ่านแล้วไม่เข้าใจผู้เขียนแนะนำให้ดูเป็นคลิปวิดิโอจาก Youtube ด้านล่าง เพราะผู้จัดทำคลิปวิดิโอได้สอนอย่างละเอียดทีละขั้นตอน แต่จะไม่เหมือนกับที่ผู้เขียนได้เขียนอยู่เล็กน้อยตรงที่ "ในขั้นตอนวิธีของผู้เขียนนั้นจะเป็นการสร้างเซตจุดที่ยังไม่เคยไป แต่ในวิดิโอจะเป็นการสร้างเซตของจุดที่เคยไปแล้ว" เท่านั้นเอง

ความคืบหน้าโปรเจค 04/01/2019

สิ่งที่ได้ทำไป

- เพิ่มแถบ Status ด้านบน (Incomplete)

        แถบสถานะที่จะต้องแสดงหลังจากที่เริ่มต้นการนำทาง แต่ในตอนนี้ให้แสดงอยู่ตลอด และแสดงเพียงค่าระยะห่างจากจุดหมาย จะมีการเพิ่มเติมเรื่องการนำทางภายหลัง

- เพิ่ม Indicator บอกตำแหน่งของ model

        Indicator เป็นลูกศรบอกทิศทางของตัว Model ช่วยให้ผู้ใช้หันหน้าไปทิศทางที่ตัว Model อยู่ได้ถูกต้อง

เป้าหมายต่อไปที่คาดว่าจะทำ

• Search Box
• Menu