DIY Surface Table (V): 製作 Multitouch Table & 初試 TouchLib

DIY Surface Table (V): 製作 Multitouch Table & 初試 TouchLib

Posted by Mr. Monday

在前面一系列的文章當中，你暸解了各種 Multitouch Table 的製作方式、瞭解了 DI (Diffused Illumination) 的製作方式、也知道了 FTIR (Frustrated Total Internal Reflection) 的製作原理、最後你竟然會自己動手製作自己的紅外光攝影機了! 看來夢想離你越來越近了，製作一個自己的多點觸控 (Multitouch) 桌面就近在咫尺了! 昨天我們談到了我們需要的材料，讓我們再回顧一下:

• 一個透明材質 (壓克力)
• 紅外光投光器 (IR Illuminator)
• 投影機 (Projector) (有讀者跟我說這個很難借到，是否可以製作多點觸控面板就好，是可以的，因此為了借不到投影機的朋友，我會解釋這一部份)
• 投影布幕 (Diffuser)
• 紅外線攝影機 (IR Camera/Webcam)
• 木材 (拿來做桌子，如果你要用別的材料也可以)
• 反光鏡 (如果要做大一點的 Table，需要把投影機的光線反射一下)
• Lee Filter (不一定要，我會解釋這樣做什麼用)
• 你的個人電腦
• TouchLib (偵測手指的軟體)

綠色的部份是我們上禮拜已經談過的，所以我們接著來談剩下的東西。

架子

 

你有了桌面，桌面當然不會平白出現在空中，所以你一定要有一個架子來支撐你的桌面。由於我的第一個 Prototype 買的是 30*40 cm 的小小壓克力，所以我要弄一個 Table 把它給架起來。木材的話，我家附近剛好有木材店，幾百塊就可以買一堆木材了，接下來就是工藝課了。

這就是我的一號原型，看來我工藝課修得不是很好。不過我是要用它來證明可以動作。所以，下面這是我的二號原型:

看起來比一號原型看起來帥氣多了，嗯，等我的 Table 開始開放預購的時候，我就會開始做第三號原型了 (開玩笑，我哪來這麼多時間! 不過我的確有開始考慮能夠做的像是 NUI 他們做的 Table 一樣可以到處推著走的那種)。Mr. Tomorrow 看了我的文章後，跟我說他家也有一個車庫 (他現在在美國，如果各位讀者還記得的話)，然後車庫裡面也堆滿了莫名奇妙的零件跟工具，不過都不是他的，最幸運的一件事情是他有一張大大的壓克力。

(圖片來源: Guus Knelissen)

如果是這種情形的話，那或許你也可不用做成密閉式的 Table (沒人說過 DI (Diffused Illumination) 一定要密閉的，但是密閉起來看起來會很專業，因為裡面一堆雜七雜八的零件會都被封裝起來)。你可以學學 Guus Knelissen，用兩張椅子先架起來也是可以，然後在後面軟體設定時指定作用的區域就可以了 (我稍後會介紹到)。

反射鏡

在二號原型機裡面，你會看到有個反光鏡在地上，那是要讓投影出來的畫面加大。我們都知道投影距離越長，投影出來的畫面越大。大概就是這樣子。反射竟 有些注意要點，普通的鏡子是可以用，但是因為普通的鏡子的鍍面是在後面，因此光線進到玻璃裡面可能會先折射一下，這樣子可能就會在螢幕上面產生鬼影。不 過，我用普通鍍面在後面的鏡子沒發生過這個問題，或許是我的審美觀不是很好。但是專業級的話，要用鍍面在前面的鏡子，這樣子就可以除去不必要的折射問題。 至於去那兒買這種鍍面在前面的鏡子，或許可以問一下鏡子店的老闆。我還沒去買就是了。

Lee Filter 273 號

由於我之前一直被打光不均勻的問題困擾著，因此我在網路以及 NUI 論壇中搜尋這些相關問題，後來我在 IAD 的 Blog 看到他解決了這個問題，作者說他用了 Lee Filter, 273 Soft Silver Reflector 這個東西，把這個紙鋪在桌子內圍，就可以獲得良好的均勻光源。當然，我後來發現是我參數沒有調整好，不過 Lee Filter 273 號的確可以解決暗角的問題。不過 Lee Filter 273 號一捲要 NT 3,800，如果不是像敝人如此有想要研究的話，大可不必購買就是了。我在 IAD 的 Blog 看到他用過錫箔紙測試過，似乎不怎麼好，我還買了車子的遮陽反射紙回來揉成一團來測試過 (因為表面要不規則才會 Diffuse 地很好)，結果我發現 Lee Filter 273 號還是有它好的道理。

如果是真要這樣子設置的話，可以將燈放在底部，對內投射燈光，這樣子光可以在裡面均勻散射開來。詳細的設置可以參考 IAD 的 Blog。

個人電腦

因為電腦需要做影像處理，像是辨認你的手指頭位置，還要做程式的圖形運算，所以可以的話，電腦的等級不要用太爛的。最好有獨立顯示卡，然後有個 1 GB 以上的 RAM，CPU 的話你不要跟我說你拿 PIII 來跑就好 (搞不好還跑的動，不過我拿這麼差的等級來試過就是了)。

最後設置

最後讓我用我的二號原型來做一個解說，你可以看到投影機打出來的畫面經過反射鏡投影到背投影板上面去。然後在反射鏡的左右兩邊有兩個紅外線投光器 (IR Illuminator)，最後你的手指的反射光源會被紅外線攝影機 (IR Webcam) 所接收。這邊讓我解釋一下攝影機跟 Webcam 之間關係的設置。

假設攝影機鏡頭所能看到的範圍是綠色的部份，而投影機所打出來的範圍是藍色的部份，請務必讓你的攝影機所看到的範圍大於或是等於你投影機所打出來的 範圍。因為你投影的範圍就是你的作用範圍，所以你的作用範圍裡面的手指移動一定要被你的攝影機給看到，不然超出攝影機之外，攝影機又怎麼會知到你做了些什 麼事情? 所以，設置的時候，請把握這個原則。 至於紅外線投光器，要怎麼才能打的均勻，你要要自己調一下。如果你願意的話，你可以焊接自己適合的形狀。 有讀者問是否可以只製作 Multitouch 面板就好，這也可以。在這篇文章當中有介紹多點觸控 (Multitouch) 面板的簡易製作方式。 如果你要製作大型的觸控面板，原則跟上面差不多。記住，你的你的作用範圍裡面的手指移動一定要被你的攝影機給看到。所以，你可以先把你的作用範圍先用線 (黑筆) 畫出來，然後分成 12 等分，看你是要 4:3還是 16:9 的螢幕。我在下一章會解釋，為什麼你要畫成 12 等分。

TouchLib

興奮的時刻要到了，你已經把 Table 設置好了，接下來就是希望能夠把玩多點觸控 (Multitouch) 介面。這時，你要先去下載 TouchLib 回來，把它給解壓縮開來。不過光有 TouchLib 還不夠，你要去下載 Flash Player 9 以及 Visual Studio 2005 SP1 x86 redistributable package、 Java 1.6+ (Download) ，這些東西下載完後需要灌起來。安裝完成後，去解開的 TouchLib 夾子下面，有一個檔案，叫做 “Config.bat“，趕快按下去執行。如果你前面該灌的都灌了，應該是可以順利跑起來才是。這時你會看到幾個視窗如下:

(圖片來源: NUI Forum)

你應該可以在視窗裡面看到你的手了，真是有夠興奮是吧? 你可以調一些參數來調整 Webcam 所能看到的東西，簡單的來說，你要調一個參數可以把雜訊全部濾掉，只留下你的手才行。最右邊下方的視窗是最後程式會吃進去的結果。結果你可能會發現你怎麼 調都不對 (或許搞不好會對，因為你光打得實在太均勻了!)，這是因為 DI (Diffuse Illumination) 打光本來就很難做到完全均勻，以及手指跟手掌的距離本來就有點近，因此手掌的部份也會被反射紅外光，可是你要的是手指，不要手掌啊! 手掌算是個干擾，該如何移除呢? 其實，這個原本的設定是給 FTIR (Frustrated Total Internal Reflection)，因此，你無論怎麼調應該都很難達到理想狀態，除非你打光打得很均勻。所以，如果你是用 DI (Diffused Illumination) 的話，你需要設定一些參數。現在把程式關掉。 找到一個夾子的名稱叫做 “TouchLib“，裡面有一個檔案，叫做 “config.xml“，把它用筆記本打開。在裡面找到一個叫做 <filtergraph> 的關鍵字，將 <filtergraph> 到 </filtergraph> 之間的東西全部刪掉，置換成下面的設定:

<filtergraph>
<dsvlcapture label=“dsvlcapture0″ />
<mono label=“mono1″ />
<backgroundremove label=“backgroundremove3″>
<threshold value=“0″ />
</backgroundremove>
<simplehighpass label=“hp”>
<blur value=“8″ />
<noise value=“2″ />
<noiseMethod value=“1″ />
</simplehighpass>
<scaler label=“sc”>
<level value=“78″ />
</scaler>
<rectify label=“rectify4″>
<level value=“78″ />
</rectify>
</filtergraph

我寫這系列的文章的目的，是讓一般人也可以設置多點觸控 (Multitouch) 桌面，所以，即使你不會寫程式，也可以完成架置，並且可以玩的很高興，這是我一開始的想法。所以，如果說上面那個叫做 “程式” (code) 的話，那這是你唯一要寫的 “程式”。

將設定置換成上面的設定之後，你再把 “Config.bat” 給執行下去，你應該可以看到上圖的視窗，跟剛剛是不是很不一樣了呢? 現在把你的手放去去，你會發現你的手指頭真是清楚的不得了，還好你先看了我的說明，少浪費了幾天在考慮怎麼把光給打均勻，不然你一定會弄到一半很想把桌子給砸了。

太好了! 如果你已經做到這一步，代表你已經離終點不遠了! 不過這篇文章到現在也有點長了，我們在下一篇再來介紹如何用這個軟體做螢幕校正，以及來玩一些有趣的軟體，我相信你不會原諒我要你再等一天，但是看在我寫了那麼多的份上，讓我先休息一下吧:)