DIY Surface Table (VI): Play Multitouch with Fun

本文同步刊載在 <UIUI>

Posted by Mr. Monday

讓我們再回顧一下吧,在前面一系列的文章當中,你暸解了各種 Multitouch Table 的製作方式瞭解了 DI (Diffused Illumination) 的製作方式也知道了 FTIR (Frustrated Total Internal Reflection) 的製作原理最後你竟然會自己動手製作自己的紅外光攝影機了,然後你建立起了你自己的桌面,還看到了清晰到不行的手指頭。因為你的熱情,所以,現在你已經在夢想旁邊了,只差最後一步了! 讓我們一起完成它吧!

再看 TouchLib

我們在上一章中瞭解了 TouchLib 的一些特性,不過似乎不是完全的了解,現在讓我來解釋一下每個 Window。

你的最終目的就是要藉著調整參數,讓 “rectify4” 這個視窗裡面的東西只剩下手指,也就是說,手指以外的雜訊都應該要被濾掉,而當你手指沒放上去時它應該是要是全黑的才是。你試著拉一拉那個 Slider Bar 就會知到每一個參數是怎麼運作的。不過有些地方總是會一直有 “穩定的雜訊” 這該怎麼辦呢?沒關係,你試著按一下鍵盤上面的 “b” 鍵,程式就會執行去把 “背景給移除”,也就是所謂的穩定雜訊。按下 “b” 鍵之後你要觀察一下”rectify4” 這個視窗裡面是不是還是全黑,還是過了一陣子還是有雜訊跑出來,如果是後者的話。你就必須要調整你的光源、你的硬體 (架子) 之類的,因此為了避免不必要的外在干擾,通常來說還是把 Table 給密封起來好。

如果你的 “rectify4” 視窗在你的手指頭放上去後只會看到你的手指,並沒有其他的雜訊的話,就可以進入下一個步驟。不過在進入下一個步驟時,請在你想要作用的區域內測試手指頭是否可以被紅外線攝影機 (IR Camera/Webcam) 給看到,也就是說在 “rectify4” 視窗當中可以看到你的手指–在你所希望的作用範圍內。如果不行的話,請調整光源或是設定之類的。

指定作用範圍跟螢幕的對應

這一步有一個專門的術語,叫做 Calibration (校正)。在這一步當中我們要把你在 “壓克力桌面” 上的作用點配對到實際螢幕上面所應該要顯示的位置。也就是說,如果你手指投移到作用區域的右上角,你應該也希望在螢幕上面老鼠的鼠標會跑到右上角去。所以,這一步就是要做這一件事。上面的一步,我們已經確定沒有干擾因素了,這時候按下 “Enter” 鍵,就會進入到校正的模式。

cal.jpg

你會看到如上圖的畫面,在右上角的紅色方框裡面會顯示你紅外線攝影機 (IR Camera/Webcam) 所看到的東西,一共有 20 個點把螢幕分成了 12 等分。所以對於要做 Multitouch 觸控板的人,這就是為什麼我要你把紙上畫出 12 等分的原因。

如果你是有投影機的人,你會在你的壓克力的投影幕上面看到這個畫面,依順序按壓紅點,每一次一個紅點確認後,紅點就會自動跑到一下點去,你就依順序把它給按壓完畢。而這 20 個點就會跟你螢幕上面的 20 個點配對在一起,當你的手移到點跟點之間,它就會內插把它應該屬於配對的位置算出來。如果你在按壓的當中,點因為雜訊自己跑去下一個點,你可以按鍵盤上面的 “r” 鍵讓它倒退回來。這一個步驟很重要。因為如果沒校正好,你手移動的位置,跟螢幕上面應該要移動的位置看起來會很不搭。

對於沒有投影機的人,你要在自己的描圖紙上面畫出作用區域,並分成 12 個等分,然後一樣依序按壓應該要對應的點。如果點自己偷跑了 (也就是雜訊干擾),請按鍵盤上面的 “r” 鍵讓它倒退回來。最後當你全部按壓完畢後,就可以在螢幕上面移動你的手指,你的點應該會很準確才是,大概會像下面一樣:

如果你的點已經很準確了,按鍵盤上面的 “ESC” 退出,然後這些設定會被儲存到 “config.xml” 裡面去。

Multitouch 軟體,開玩!

太好啦! 終於可以開始玩了! 現在到 “TouchLib” 夾子裡,開啟 “demo_smoke.exe” ,你就可以用手玩 Smoke囉! 就像是下面 Demo 一般:

關掉 Smoke,開啟 “mousedriver.exe“,那你的面板瞬間就變成了單點觸控面板了。現在,我們要玩一些更好玩的了! 到這邊下載 Mark van Wijnen 所製作的 Multitouch 拼圖程式,下載完後,解壓縮。你會看到一個叫做 “PuzzleGame.swf” 的檔案,直接執行它似乎無用。那我們該怎麼玩它呢? 這要做一些設定,首先你到這個網址下面,你會看到如下的設定畫面:

flash.jpg

點選 “編輯” 下拉選單裡面的 “新增“,然後到到 “PuzzleGame.swf” 所在的位置,把它給加入。加入完後,依照順序執行 TouchLib 資料夾下的 “Server.bat” 以及 “Vision.bat“,要按照順序喔。然後再開啟 “PuzzleGame.swf“,放到全螢幕,你就會很驚訝它運作得很好。現在真是太棒了,因為 NUI 這個團體實在是太優秀了,因此大家在製作軟體時,用這個 TouchLib 都會遵循他們得 protocol,也就是說,他們所製作的軟體你都可以依照上面的設定把它們全部給跑起來。現在我提供一些連結可以,你可以把 MMA 這個圖片/影像管理軟體給跑起來水波紋軟體Audio 軟體連 Launcher 也有,真是一堆軟體任你玩,更多的軟體可以到 NUI 論壇裡面的 AS3 Section 裡面去翻找。

現在你一定很迫不及待想要秀給你朋友看了,快去吧! 趕快拍一張照片炫耀一下你的成果!

現在你到達了一個夢想的終點了,不過,一個結束的終點是另外一個起點的開始,把玩了這麼多別人的 Multitouch 的程式,你是不是也很手癢想開始自己寫一個了呢? 還等什麼! 快動手吧!

參考文章:

你的另外一個旅程開始了:) 有什麼好消息,還煩請跟我 Share 一下吧:) 喔,對了,別忘了去 NUI 論壇上面註冊一個帳號跟大家說聲 Hi!

謝誌

感謝 NUI 這個優秀的團體,他們不留餘力地推廣 Multitouch,不但公開了硬體規格,也完全公開了實做的方式,感謝他們。沒有他們,DIY 的路程絕對不會這麼簡單。當然,最感謝還是創始人 David Wallen。另外感謝我的恩師歐陽老師、陳老師、莊老師的支持,特別要感謝也是我的益友莊老師,我從一開有念頭就跟他討論,而他是自始自終相信我會自己 DIY 出來的人。另外感謝 Unison8 的朱大哥,朱大哥聽到我要做 Multitouch Table,不但讓我在他的工作室玩,還借了一堆設備給我,讓我在台北這個狹小的地方也可以有一個 “車庫” (我的 Prototype 二號是在他的工作室完成的)。其他 Unison 的夥伴們,Apple、居仁、尚仁、卓薇,感謝你們 🙂 另外要謝謝我的父母,感謝你們允許我把家裡搞得亂七八糟的 (我想…應該也還沒很亂吧…只是多了幾條木頭,幾塊板子…)。最後感謝我的女友,我想我應該很盡力地沒有縮短任何的約會時間吧 (?) 最後的最後,要謝謝我的好友們,感謝你們來玩我做的 Table,看到你們臉上的笑容跟驚奇,那真是我最好的回報了。感謝大家的幫忙跟支持,謝謝大家 🙂

喜歡這篇文章嗎? 分享出去給作者一點鼓勵吧!