Image Processing (OpenCV + MFC Application)

เว้นช่วงมานาน กับบทความเรื่อง OpenCV under MFC Application หรือ GUI Application อย่างที่ทราบว่า OpenCV มีฟังก์ชั่นสำหรับการแสดงผลเป็นของตัวเอง และมีฟังก์ชั่นรองรับการทำงานแบบ UI (User Interface) อยู่แล้ว เรียกได้ว่าพร้อมใช้งาน แต่หลายๆ Application ที่ถูกพัฒนาขึ้นในรูปของ GUI Application ไม่ว่าจะเป็นการพัฒนาด้วย Visual C++ หรือ C++ Builder หรือ IDE ตัวอื่นๆ ที่มีความสามารถด้าน GUI อยู่แล้ว โปรแกรมเมอร์อาจจะไม่ต้องการความสามารถทางด้าน GUI ของ OpenCV อันเนื่องมาจากการสร้าง GUI ด้วยความสามารถของ IDE จะสะดวก ง่าย ยืดหยุ่น และรวดเร็วกว่าเป็นต้น

อย่างในก็ตามการใช้งาน OpenCV นิยมพัฒนาขึ้นภายใต้ Application ที่เรียกว่า Console Application หรือรันภายใต้ DOS Mode นั่นเอง เพราะในงานที่ต้องการทราบผลของการทำงานด้าน Algorithm ทางด้าน Image Processing and Computer Vision ของ OpenCV ไม่จำเป็นต้องสร้าง GUI Application เพราะอาจไม่จำเป็นหรือเป็นการเสียเวลาโดยไม่มีความจำเป็น เนื่องจาก OpenCV มีความสามารถในการแสดงผลได้เพียงแค่ใช้คำสั่ง(ฟังก์ชั่น) เดียวนั่นคือ cvShowImage

แบบไหนดีกว่าระหว่าง GUI Application กับ Console Application?

คำถามนี้ตอบยากครับ ขึ้นกับจุดประสงของโปรแกรมเมอร์ และโปรแกรมที่ต้องการพัฒนา ในที่นี้ขอยกเป็นกรณีตัวอย่าง 2 กรณีดังนี้ครับ

• แบบ Colsole Application ดีกว่า ถ้าต้องการใช้เพื่อต้องการพิสูจน์หรือทดลองงานต่างๆในระดับงานวิจัย หรือการทดลองเพื่อดูผลที่เกิดขึ้นจากกระบวนการของระบบหรือ Algorithm ต่างๆ แต่อาจไม่สะดวกถ้าโปรแกรมที่พัฒนาอยู่ต้องมีการแก้ไขตัวแปรหรือพารามิเตอร์หลายๆตัว เพราะอาจจะต้องเข้าไปแก้ในระดับ Source code นั่นก็หมายความว่า Colsole Application เหมาะสำหรับงานที่อยู่ในช่วงพัฒนามากกว่า Colsole Application ทั่วๆไปมีลักษณะดังรูปด่านล่าง แต่อย่างไรก็ตามสามารถเพิ่มส่วนติดต่อกับผู้ใช้ (UI) เช่นแถบเลื่อน (ScrollBar) และอื่นๆลงไปได้เช่นกัน แต่อาจจะมีความยุ่งยากเล็กน้อย

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

เริ่มสร้าง GUI Application ด้วย Microsoft Visual C++ แบบ MFC Application

ความยากของผู้เริ่มต้นใช้งาน OpenCV ร่วมกับ MFC Applacation คือการนำภาพมาแสดงบนฟอร์มหรืออาจจะเป็นบน PictureBox (Picture Control) เนื่องจากรูปแบบของไฟล์ภาพที่กำหนดโดย OpenCV (Intel) เป็นแบบ IplImage และไม่สามาารถนำมาใช้กับ PictureBox ได้โดยตรง จึงจำเป็นต้องเปลี่ยนรูปแบบของ IplImage มาอยู่ในรูปแบบของ Bitmap ก่อนนำไปแสดงผลบน PictureBox ส่วนนี้เป็นเรื่องที่ค่อนข้างซับซ้อนสำหรับมือใหม่ แต่จำเป็นอย่างมากที่จะต้องศึกษาอย่างละเอียด ผมขอย้ำว่าจำเป็น ไม่เช่นนั้นแล้วคุณอาจจะเป็นได้แค่ผู้ที่รู้ แต่รู้ไม่จริง อันนี้คุณเลือกเองได้ครับว่าจะเป็นผู้รู้ หรือผู้รู้จริง



อย่างไรก็ตาม บทความนี้ไม่ได้มีจุดประสงค์ให้คุณรู้จริงหรือรู้ลึกอะไรมากนัก แต่มีจุดประสงค์เพียงแค่ให้คุณใช้ OpenCV ร่วมกับ Visual C++ เพื่อสร้าง Application แบบ GUI เท่านั้น
บทความนี้ผมจึงได้สร้าง DLL (Dynamic Link Library) และห่อหุ้มไว้ด้วย Class แบบง่ายๆ เพื่อให้คุณได้นำเอาไปใช้งานได้แบบไม่ต้องใช้ความสามารถในการเขียนโปรแกรมมากนัก เพราะฉนั้นตอนนี้ให้คุณเปิดใจรับสิ่งที่ผมจะนำเสนอเป็นแค่เครื่องมือ คือรู้ว่ามั้นทำอะไรได้ คุณจะใช้งานมันอย่างไร โดยที่ยังไม่จำเป็นต้องรู้ว่าเครื่องมือตัวนี้สร้างมาได้อย่างไร (ความคิดส่วนตัวผม อยากให้คุณรู้พื้นฐานแบบเชิงลึก ก่อนอ่านบทความนี้ แต่นั่นอาจจะเป็นเรื่องที่ค่อนข้างยาก เอาเป็นว่าศึกษาให้เห็นก่อนว่ามันทำอะไรได้บ้าง แล้วค่อยตามไปศึกษาด้วยตัวคุณเองว่ามันทำได้อย่างไร)

เกริ่นนำเชิงบั่นทอนกำลังใจผู้อ่านไปแล้วพอหอมปากหอมคอ ตอนนี้มาเริ่มสร้าง MFC Application กันเลยดีกว่าครับ ผู้ที่ยังไม่ค่อยคุ้นเคยกับ Visual C++ 2008 ก็ค่อยๆทำตามไปทีละขั้นตอนครับ เริ่มกันเลย...

Step 01. เปิดโปรแกรม Visual C++ 2008 ขึ้นนมา จากนั้นทำการสร้าง Project ใหม่ โดยการคลิกที่ File -> New -> Project...

Step 02. เลือก Project types: เป็น MFC และ Template: เป็น MFC Application จากนั้นทำการกำหนดชื่อในช่อง Name: เป็น Project01 (หรือชื่ออื่น) และที่เซฟไฟล์ต่างๆในช่อง Location: เป็น D:OpenCV_MFC_Projects (หรือ path อื่น) ตามรูป เสร็จเรียบร้อยแล้วคลิกปุ่ม OK

Step 03. คลิกปุ่ม Next เพื่อดำเนอนการต่อ

Step 04. คลิกเลือก Dialog based เพื่อทำการเลือกชนิดของ Application เป็นแบบ Dialog จากนั้นคลิกปุ่ม Finish ได้เลย

Step 05. เริ่มทำการออกแบบหน้าตาของ GUI เริ่มทำการเปิดหน้าต่าง Resource View โดยการกดปุ่ม Ctrl+Shift+E ที่คีย์บอร์ด หรืออาจจะคลิกที่ View -> Resource View ที่ Menubar ก็ได้เช่นกัน จากนั้นใหเดับเบิ้ลคลิกที่ IDD_PROJECT01_DIALOG เพื่อเปิด Form หรือ Dialog ซึ่งเป็นพื้นที่สำหรับออกแบบ GUI (โดยปรกติ Form นี้จะปรากฎขึ้นโดยอัตโนมัติ หลังกดปุ่ม Finish ใน Step 04)

Step 06. รูปร่างหน้าตาเริ่มต้นของ Dialog หรือ Form สำหรับสร้าง GUI

Step 07. จาก Step 06 ให้ทำการลบทุกอย่าง (Edit Control และ Button) ออกไปจาก Form ให้เหลือเฉพาะ Form ว่างๆ จากนั้นให้กดปุ่ม Ctrl+Alt+X ที่คีย์บอร์ด เพื่อเรียกหน้าต่าง Toolbox ขึ้นมา แล้วทำการคลิกที่ Button ลากไปวางบน Form ตามด้วยคลิกที่ Picture Control แล้วลากไปวางบน Form เช่นเดียวกัน

Step 08. ทำการปรับขนาด และตำแหน่งของ Button และ Picture Control ตามความต้องการ

Step 09. คลิกขวาที่ Button แล้วคลิกเลือกที่ Properties เพื่อเรียกหน้าต่าง Properties ของ Button จากนั้นให้เปลี่ยนข้อความในช่อง Caption เป็น Open (ข้อความที่แสดงบน Button) ตามรูป

Step 10. คลิกขวาที่ Picture Control แล้วคลิกเลือกที่ Properties เพื่อเรียกหน้าต่าง Properties ของ Picture Control จากนั้นให้คลิกในช่อง Border เพื่อเปลี่ยนจาก False เป็น True ตามรูป (ให้ Picture Control มีกรอบขึ้นมา)

Step 10. กดปุ่ม Ctrl+T บนคีย์บอร์ดเพื่อดูผลของ GUI ที่ได้ทำการออกแบบไว้

Step 11. อย่างที่กล่าวไว้ตอนต้นว่า ผมได้เตรียม DLL และ Class สำหรับการแสดงผล IplImage ของ OpenCV ให้สามารถแสดงผลบน PictureBox (Picture Control) ไว้ให้แล้ว เพราะฉนั้นให้ทำการดาวน์โหลดไฟล์ทั้ง 4 ไฟล์ (ตามรูป) มาเก็บไว้ในเครื่องคอมพิวเตอร์ของคุณก่อน สามารถโหลดได้ที่นี่ หรือคลิกที่รูปด้านล่าง

Step 12. ไฟล์ทั้ง 4 ไฟล์ที่ได้ทำการดาวน์โหลดมา จะต้องนำไปไว้ที่เดียวกับไฟล์ของโปรเจ็ค ในที่นีคือ D:OpenCV_MFC_ProjectsProject01 ซึ่งได้กำหนดไว้ใน Step 02.

Step 13. ตรวจสอบให้มั่นใจว่าไฟล์ทั้ง 4 ไฟล์ได้ถูกนำมาไว้ที่เดียวกันกับไฟล์ต่างๆของโปรเจ็ค และในกรณีที่คุณสร้างโปรเจ็คใหม่ คุณจะต้องนำไฟล์ทั้ง 4 ไฟล์นี้ไปไว้ที่เดียวกับไฟล์ของโปรเจ็คทุกครั้ง ไม่เช่นนั้นโปรแกรมจะไม่สามารถทำงานได้

มาถึงตรงนี้แล้ว Application แบบ GUI ของเราพร้อมจะทำงานแล้วครับ แต่ตอนนั้นรันไปก็ยังไม่เห็นอะไร นอกจาก Button กับ Picture Control ก่อนจะเขียนโปรแกรม ตอนนี้ให้คุณไปเตรียมไฟล์รูปมาสักรูปครับ เอาเป็นไฟลชนิด BMP หรือ JPG ก็ได้ครับ ขาดของรูปไม่ต้องใหญ่มากนะครับ สักประมาณ 320*240 อาจจะเล็กหรือใหญ่กว่าก็ไม่ผิดกฏแต่อย่างใดครับ สุดท้ายให้คุณนำไฟล์รูปนี้ไปไว้ที่ Drive C ของคอมพิวเตอร์ และถ้าให้สมบูรณ์ตามใจผม ให้เปลี่ยนชื่อไฟล์รูปดังกล่าวเป็น Image ครับ ในนั้นตอนต่อไป ผมจะอธิบายว่าคุณจะใช้ DLL และ Class ที่คุณได้ดาวโหลดมาแล้วได้อย่างไร รับรองได้เลยครับว่าง่ายมากๆ เริ่มกันเลยครับ

Step 14. ทำการเพิ่มไฟล์ .h เข้ามาในโปรเจ็ค โดยการคลิกที่แทป Solution Explorer หรือกดปุ่ม Ctrl+Alt+L จากนั้นทำการคลิกขวาที่ไอคอน Header Files -> Add -> Existing Item... ตามรูป

Step 15. ทำการคลิกเลือกไฟล์ SDW_DisplayImage_MFC_V1.h และ SDW_Image.h (กดปุ่ม Ctrl ค้างไว้) จากนั้นคลิกปุ่ม Add เพื่อทำการเพิ่มไฟล์ไปยังโปรเจ็ค

Step 16. ทำการเพิ่มไฟล์ .cpp เข้ามาในโปรเจ็ค โดยการคลิกที่แทป Solution Explorer หรือกดปุ่ม Ctrl+Alt+L จากนั้นทำการคลิกขวาที่ไอคอน Source Files -> Add -> Existing Item... ตามรูป

Step 17. ทำการคลิกเลือกไฟล์ SDW_Image.cpp จากนั้นคลิกปุ่ม Add เพื่อทำการเพิ่มไฟล์ไปยังโปรเจ็ค

Step 18. ตวจสอบให้มั่นใจว่าไฟล์ SDW_DisplayImage_MFC_V1.h, SDW_Image.h และ SDW_Image.cpp ถูกเพิ่มเข้ามายังโปรเจ็คเรียบร้อยแล้วจริง (ไฟล์์ SDW_DisplayImage_MFC_V1.h ไม่จำเป็นต้องเพิ่มเข้ามาในโปรเจ็คก็ได้ แต่เพื่อในง่ายต่อการเปิดเพื่อดูรายละเอียดของไฟล์ จึงแนะนำให้เพิ่มเข้ามาด้วย) ทดลองเปิดไฟล์เหล่านี้ขึ้นมาดู ว่าข้างในมีอะไรอยู่บ้าง โดยการดับเบิลคลิกที่ไอคอนหรือชื่อของไไล์แต่ละตัว

Step 19. กลับมาที่หน้าต่าง Resource View อีกครั้ง โดยการคลิกที่แทป Resource View หรือกดปุ่ม Ctrl+Shift+E จากนั้นให้ดับเบิลคลิกที่ IDD_PROJECT01_DIALOG และ ดับเบิลคลิกที่ปุ่ม Open ตามลำดับ

Step 20. เมื่อดับเบิลคลิกที่ปุ่ม Open จะเป็นการเปิดไฟล์ Project01Dlg.cpp ขึ้นมา และตัว Visual C++ จะทำการสร้างฟังก์ชั่นที่ชื่อว่า OnBnClickedButton1() ขึ้นมาให้เองโดยอัตโนมัติ พร้อมให้ทำการเขียนโปรแกรมที่ต้องการลงไปในตัวของฟังก์ชั่นนี้

Step 21. ให้ทำการเขียนโปรแกรมลงไปในฟังชั่นนี้ตามโปรแกรมด้านล่าง (แนะนำให้พิมพ์ด้วยตนเอง ฝึกไว้ครับ นี่คือการเรียน ไม่ใช่การลอก)

Step 22. เลื่อนขึ้นไปด้านบนสุด จากนั้นทำการ include ไฟล์ SDW_Image.h ตามรูป

Step 23. ตอนนี้ขั้นตอนการเขียนโปรแกรมเสร็จแล้ว ให้ทำการ Build ไฟล์โดยการคลิกที่ Build -> Build Solution หรือกดปุ่ม F7

Step 24. ตรวจสอบให้มั่นใจทุกครั้งหลังการ Build ว่าไม่มีข้อผิดพลาดเกิดขึ้น นั่นคือจะต้องมีข้อความ 0 failed ถ้ามากกว่า 0 ให้ตรวจสอบและแก้ไขให้ถูกต้อง จากนั้นสั่ง Build อีกครั้ง

Step 25. ขั้นตอนที่รอคอยคือการสั่งรันโปรแกรมที่เราได้สร้างขึ้น โดยการคลิกที่ Debug -> Start Debugging ตามรูป

Step 26. และนี่คือผลที่ได้ (ห้องทำงานของผมเอง)

แล้วว่างๆ จะมาเล่าให้ฟังว่ารายละเอียดของโปรแกรม มันคืออะไร มันทำอะไรกัน จากนั้นก็จะว่ากันต่อในการสร้างโปรเจ็คที่ดูดีขึ้น

Create Date : 25 กุมภาพันธ์ 2553
Last Update : 25 กุมภาพันธ์ 2553 20:59:16 น.		7 comments
Counter : 1829 Pageviews.
Share Tweet