วันจันทร์ที่ 31 สิงหาคม พ.ศ. 2552

มาทำ Multitouch กันเองดีกว่า

ระบบมัลติทัช (Multitouch) ที่ใช้ใน iphone, MacBook Pro, และ MacBook Air นั้น สามารถทำเองได้ด้วยวิธีง่ายๆ ราคาไม่แพง

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

Multitouch เป็นที่คุ้นหูเราพอสมควรเพราะถูกนำมาใช้กับจอของ iphone และ touch pad ของ MacBook Pro และ MacBook Air ของค่าย Apple ซึ่งเป็นระบบ interface ที่ถูกใจของใครหลายคน เพราะทำให้ผู้ใช้สามารถย่อ-ขยายภาพได้ง่ายตามที่ต้องการ รวมถึงการใช้งานในรูปแบบอื่นๆ ที่โทรศัพท์มือถือและโน้ตบุ๊คค่ายอื่นไม่เคยมีให้ใช้

เช่นเดียวกันกับ ค่าย Microsoft ที่เปิดตัวระบบ interface แบบเดียวกันนี้ในชื่อ Microsoft Surface ซึ่งมาในรูปแบบโต๊ะกาแฟเตี้ยๆ พื้นโต๊ะเป็นกระจก touch pad ขนาดมหึมา ซึ่งผู้ใช้สามารถจัดการภาพถ่าย วีดีโอ และไฟล์ต่างๆ ได้ด้วยการใช้นิ้วกวาดไปมาบนโต๊ะเหมือนสัมผัสไฟล์รูปเหล่านั้นได้จริงๆ แม้กระทั่งการถ่ายโอนไฟล์จากอุปกรณ์หนึ่งไปสู่อีกอุปกรณ์หนึ่ง ก็ทำได้ง่ายเพียงวางไว้บนโต๊ะ แล้วก็โยนไฟล์ระหว่างกันได้เหมือนเล่นกล


ยังมีระบบอื่นๆ ที่มีลักษณะการทำงานคล้ายๆ กับ multitouch เช่น เกมของอาตาริที่ดัดแปลงให้เล่นด้วยระบบ multitouch แต่ ของค่าย Apple และ Microsoft ได้รับการกล่าวขวัญกันมากที่สุด โดยเฉพาะของค่าย Apple ที่นำมาใช้กับสินค้า home use อย่างโทรศัพท์มือถือและโน้ตบุ๊ค ทำให้คนเริ่มคุ้นชินกัน แต่ด้วยราคาที่แพงระยับ คนที่เบี้ยน้อยหอยน้อยก็ได้แต่มองตาปริบๆ

และก็เป็นโชคดีเหลือเกินที่มีคนหัวใส คิดระบบ multitouch แบบประกอบเอง หรือแนว DIY (do it yourself) มาให้ดูกันใน youtube ครับ


เจ้าแรก ดูเป็นไปได้และใช้งานได้ง่ายที่สุด ด้วยการใช้อุปกรณ์ง่ายๆ ราคารวมกันไม่เกิน 500 บาท ได้แก่ เว็บแคม, กระจกหรืออะคริลิคใส, กระดาษ, กล่องหรือลังเปล่า, เทปกาว, และโปรแกรมมัลติทัชที่ชื่อ Touchlib ซึ่งเป็น opensource ดาวน์โหลดฟรี (คลิกเพื่อ download)


วิธีการก็ไม่ยาก เพียงแค่นำกระดาษมาตัดให้เท่ากับกระจกหรืออะคริลิคใส แล้วแปะเข้าด้วยกันเพื่อจะนำมาใช้เป็น touch pad จากนั้นนำเว็บแคมติดในกล่องหรือลังเปล่า ให้เลนส์หงายขึ้น แล้วเจาะรูด้านข้างกล่อง เพื่อให้สาย usb ของเว็บแคมโผล่ออกมาเสียบเข้ากับคอมพิวเตอร์ได้ ขั้นตอนสุดท้ายก็นำกระดาษที่แปะกับกระจกมาวางบนปากกล่อง แค่นี้ก็พร้อมใช้งาน (คลิกดู VDO)


เพราะฉะนั้นถ้าใครอยากใช้ระบบ multitouch แต่ไม่อยากเสียเงินแพงๆ จะลองทำดูเองก็น่าสนุกดีไม่น้อย


สร้างเองใน 10 ขั้นตอน

จอหลากสัมผัสไม่ใช่เทคโนโลยีอวกาศ เราสามารถหาวัสดุพื้นๆ มาสร้างจอแบบนี้ขึ้นใช้งานเองได้ ไม่จำเป็นต้องใช้เครื่องมือประหลาดพิสดารในห้องทดลองปรมาณู เครื่องมือช่างหรือเครื่องมือของนักสมัครเล่นทั่วๆ ไปก็ใช้ได้แล้ว จอหลากสัมผัสที่จะแนะนำวิธีสร้างนี้ ใช้หลักการตามที่ ฮาน บรรยายไว้ในรายงาน “วิธีสร้างจอหลากสัมผัสราคาถูก” ที่ตีพิมพ์ในวารสารของการประชุม ACM Symposium on Applied Computing ในปีค.ศ. 2005 (เครื่องต้นแบบที่ฮานนำเสนอในงานเท็ด 2006 ก็ใช้หลักการเดียวกันนี้)

ขั้นตอนที่ 1 : เข้าใจทฤษฏีจอหลากสัมผัส
ทฤษฏีจอหลากสัมผัสเรียบง่ายจนน่าแปลกใจ ตัวจอภาพสร้างจากแผ่นอะครีลิกใสธรรมดาๆ แล้วใช้เครื่องฉายภาพ ฉายภาพจากคอมพิวเตอร์ลงบนตัวรับภาพด้านหลังโดยตรง หรือจะฉายให้สะท้อนกับกระจกก่อนก็ได้ ส่วนการตรวจสอบว่านิ้วมือจิ้มที่ตำแหน่งใด ทำได้โดยใช้แสงอินฟราเรดจากหลอด LED (ความจริงควรเรียกว่า IED) หลายๆ ตัว ติดเรียงไว้จำนวนมากที่ขอบจอ เมื่อนิ้วแตะที่จุดใดกล้องอินฟราเรดจะรับภาพได้ การตรวจสอบนิ้วหลายนิ้วที่จิ้มลงหลายจุดพร้อมๆ กันทำได้ง่ายมาก เพราะกล้องอินฟราเรดรับภาพทั้งจอได้ในคราวเดียวกันอยู่แล้ว

p001
หลักการของจอหลากสัมผัสอาศัยความจริงที่ว่าเมื่อนิ้วแตะลงบนแผ่นอะครีลิก จะเป็นผลให้แสงอินฟราเรดที่ส่องผ่านในแผ่นอะครีลิกเกิดการกระจายตัว

p002

อุปกรณ์หลักๆ ที่ต้องใช้ในการสร้างจอหลากสัมผัสมีเพียง 4 อย่างคือ 1)ตัวจอภาพ (ที่เราจะสร้างขึ้นเองจากแผ่นอะครีลิก ไม้อัด และ LED แบบอินฟราเรด) 2)แผ่นรับภาพ 3)กล้องอินฟราเรดและ 4)คอมพิวเตอร์

p003
กาวหรือสารสำหรับยึดจับต่างๆ ให้ใช้สีดำเพื่อลดการสะท้อนแสง

ขั้นตอนที่ 2 : ทำกรอบ
กรอบของจอภาพเป็นกรอบไม้ธรรมดาเหมือนกรอบรูป จะทำใหญ่เท่าใดก็ได้ตามใจชอบ ถ้าเป็น LED อินฟราเรดธรรมดาราคาถูก จอไม่ควรใหญ่เกิน 30 นิ้ว เพราะความแรงของแสงจาก LED จะเป็นตัวจำกัดขนาดของจอ

p004

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

ขั้นตอนที่ 3 : สร้างรางใส่หลอด
เราต้องติดตั้งหลอด LED จำนวน 88 ดวงไว้รอบๆ ขอบจอ (คือจะติดที่ขอบทั้งสี่ด้าน ด้านละ 22 ดวง) อาจจะยึด LED กับอะลูมิเนียมเส้นด้วยกาวตราช้างก็ได้

p006

หลอด LED อินฟราเรดคือพระเอกของงานนี้ LED ไม่ใช่หลอดไฟ จึงไม่มีไส้หลอด มันเป็นไดโอดที่สร้างจากสารกึ่งตัวนำ เป็นอุปกรณ์อิเล็กทรอนิกส์ที่ดาษดื่น หาซื้อได้ที่บ้านหม้อ ราคาหลอดละสามถึงห้าบาท สำหรับจอขนาด 30 นิ้วใช้ LED จำนวน 88 หลอดก็พอ (ยกตัวอย่างเช่นตัวนี้ www.es.co.th/Detail.asp?Prod=TSAL7400 เป็น GAAS/GAAIAS INFRARED EMITTING DIODE ถ้าซื้อจำนวน 150 หลอดจะตกหลอดละ 2.22 บาท)

p005
หาอะลูมีเนียมเส้นยาวสามสิบนิ้ว กว้างหนึ่งนิ้วมาเจาะรูเป็นระยะๆ อย่างที่เห็นในรูป ดูให้แน่ว่าขนาดของรูสรวมหลอด LED ได้พอดีไม่หลวม ให้แน่นไว้จะดีกว่า เมื่อเจาะเสร็จแล้วให้พ่นสีดำด้าน


p007
ภาพนี้แสดงวิธีติดหลอด LED อินฟราเรด อย่าลืมใส่ตัวต้านทาน (ขนาดสัก 1K) ไว้ลดกระแสด้วย ไม่อย่างนั้นหลอดอาจจะชำรุดได้ ไฟที่จ่ายให้ LED ใช้แรงดันขนาด 5 โวลต์ก็พอ

ขั้นตอนที่ 4 : ขัดขอบอะครีลิก
เพื่อให้แสงอินฟราเรดเดินทางได้ดีขึ้น เราจำเป็นต้องขัดขอบทุกด้านของแผ่นอะครีลิกด้วยกระดาษทรายเบอร์ 200

p008

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

ขั้นตอนที่ 5 : ประกอบจอ
เมื่อเตรียมทุกอย่างครบแล้วก็ถึงเวลานำมาประกอบเข้าด้วยกัน

p009
นำแผ่นไม้ที่ตัดไว้ทำกรอบมาประกบเข้าด้วยกัน ใส่รางอะลูมีเนียม (ซึ่งมี LED ติดไว้แล้ว) สอดเป็นไส้ไว้ตรงกลาง เราจะใช้แผ่นอะครีลิกสองแผ่น แผ่นด้านบน (คือด้านที่จะใช้นิ้วจิ้ม) ต้องหนาหน่อยเพื่อความแข็งแรง ตรงกลางใส่กระดาษฝ้า หรือกระดาษไขที่ใช้เขียนแบบเพื่อทำหน้าที่เป็นตัวรับภาพคอมพิวเตอร์จากเครื่องฉายภาพ

p010

ประกอบเสร็จดูด้านข้างจะเป็นเห็นว่ามีสภาพเหมือนแซนวิชแบบนี้

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

p012
แม้ตาคนจะมองไม่เห็นแสงอินฟราเรด แต่เว็บแคมจะไวต่อแสงอินฟราเรดมาก ผู้ผลิตจึงใส่แผ่นกรองแสงอินฟราเรดไว้ สิ่งที่เราต้องทำมีเพียงถอดแผ่นที่ว่านี้ออก ซึ่งทำได้โดยแกะเว็บแคมออกจนเห็นตัวรับภาพ (CCDs) จะเห็นว่ามีแผ่นสีเขียวสี่เหลี่ยมเล็กๆ มันคือแผ่นกรองแสงอินฟราเรด ให้ถอดออก เพียงเท่านี้กล้องก็จะรับแสงอินฟราเรดได้
เรื่องสำคัญอีกอย่างคือเราต้องการให้มันรับได้แค่อินฟราเรดเท่านั้น ไม่ต้องการให้รับแสงในย่านอื่นๆ เลย ซึ่งทำได้ง่ายอีกเช่นกัน วิธีทำคือให้นำแผ่นฟิล์มที่ใช้ถ่ายภาพ เอาเฉพาะส่วนที่เป็นสีดำมาตัดออกเป็นชิ้นสี่เหลี่ยม (ให้มีขนาดเท่ากับแผ่นกรองแสงอินฟราเรดที่ถอดออกไปก่อนหน้านี้) ใส่แทนที่แผ่นกรองแสงอินฟราเรด เพียงเท่านี้เว็บแคมเก่าๆ ก็จะกลายเป็นกล้องอินฟราเรดแล้ว

ขั้นตอนที่ 7 : ติดตั้งเครื่องฉายภาพ

p013
นำเครื่องฉายภาพมายึดไว้กับผนังเหนือจอภาพที่เราสร้างขึ้น หากต้องการใช้วิธีฉายใส่กระจกที่อยู่ใต้โต๊ะแล้วสะท้อนภาพเข้าใต้โต๊ะ หรือจะติดเครื่องฉายภาพไว้ใต้โต๊ะก็ได้เหมือนกัน


ขั้นตอนที่ 8 : ขาตั้ง

p014
นำเหล็กท่อหรือเหล็กฉากมาตัดแล้วเชื่อมเพื่อใช้เป็นฐานของจอภาพ
p011
ให้ทำขาตั้งที่มีพื้นด้านบนลาดเอียงเล็กน้อยเหมือนโต๊ะเขียนแบบ กะความสูงขนาดโต๊ะมาตรฐานให้พอทำงานสะดวก และที่สำคัญต้องให้มีระยะที่ภาพจากเครื่องฉายเต็มโต๊ะพอดี


ขั้นตอนที่ 9 : ซอฟต์แวร์
นอกจากฮาร์ดแวร์แล้วหัวใจสำคัญของจอหลากสัมผัสคือซอฟต์แวร์ที่จะตีความภาพตำแหน่งที่นิ้วแตะจอภาพไปเป็นพิกัด นอกจากนั้นซอฟท์แวร์ยังต้องรับรู้น้ำหนักและความเร็วในการกดด้วย ลองดูที่ www.fingerworks.com หากต้องการพัฒนาซอฟท์แวร์เองก็มีไลบรารีที่ช่วยให้การพัฒนาซอฟท์แวร์ทำได้ง่ายขึ้น ดาวน์โหลดซอฟท์แวร์ได้ที่ www.whitenoiseaudio.com/touchlib มีตัวอย่างโปรแกรมให้ทดสอบด้วย

p015
ภาพตำแหน่งที่นิ้วแตะจอภาพ เป็นภาพที่ได้จากกล้องอินฟราเรด

ขั้นตอนที่ 10 : ถึงเวลาสนุก
ประกอบทุกอย่างเข้าที่ ต่อสายไฟเลี้ยงเข้าหลอด LED (ใช้เครื่องจ่ายไฟตรง 5V หรือ 9V ขนาด 300ma ก็พอ) เสียบเว็บแคมกับคอมพิวเตอร์ ฉายภาพขึ้นจอ รันโปรแกรม เพียงเท่านี้เราก็จะได้สนุกกับจอหลากสัมผัสที่ทำเองในบ้านราคาประหยัด

ถ้าไม่นับคอมพิวเตอร์กับเครื่องฉายภาพซึ่งแพงเอาเรื่อง ค่าวัสดุทั้งหมดที่ใช้เพื่อสร้างจอหลากสัมผัสจะอยู่ประมาณสี่ถึงแปดพันบาท (ขึ้นอยู่กับว่าเรามีวัสดุเหลือใช้อะไรอยู่บ้าง) ใช้เวลาสร้างสองสามวันซึ่งส่วนมากจะหมดไปกับการเจาะรู ติดตั้งหลอด LED และการขัดขอบแผ่นอะครีลิก


ที่มา: http://thai-cs.spaces.live.com/blog/cns!4D52C1812766D2D7!1034.entry#comment

1 ความคิดเห็น:

Multi-Touch screen and Augmented Reality กล่าวว่า...

ตัว software ใช้ TUIO ก็ได้ครับ โดยใช้เป็นตัวส่ง XML แล้วรับ XML ด้วย Flash ครับ

แสดงความคิดเห็น