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” 給執行下去，你應該可以看到上圖的視窗，跟剛剛是不是很不一樣了呢? 現在把你的手放去去，你會發現你的手指頭真是清楚的不得了，還好你先看了我的說明，少浪費了幾天在考慮怎麼把光給打均勻，不然你一定會弄到一半很想把桌子給砸了。

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

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

Posted by Mr. Monday

在上一篇文章當中，我們已經瞭解了 FTIR (Frustrated Total Internal Reflection)，不過由於我是用 DI (Diffused Illumination) 來實作，因此在 DI (Diffused Illumination) 的實作上面的細節我比較可以清楚描述。我所描述的材料購買地點僅適用於台灣台北市，如果你是在海外的朋友，請在你家附近找找，或是網路上面找找。

所需材料

所需要準備的材料如下:

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

讓我們一個一個來解釋吧。

透明材質

(圖片來源: 喬達壓克力)

由於需要一個 Table 可以讓紅外光反射回去，因此我們的桌子必須要是透明的材質，這邊我選用壓克力，因為壓克力還蠻便宜的。我一開始的 Table 所做的面板大小是 30*40 cm，(凡事總得一步一步來，先試小的，再試大的)，我的第二個 prototype 則是 67*50 cm。壓克力的話，如果你家附近有廣告看板公司的話，可以去問一下，買的厚度的話，我當時是買 8mm (因為我一開始原本想實作 FTIR)，價格的話，因為我是在家附近的廣告公司買的，所以 30*40 cm 的壓克力，我花了 NT 450，OK，我知道我買貴了，但是我也不太想花太多時間去找便宜個兩百塊的地方，那可能會花我很多時間以及車程。我是有在網路上面查到一家，叫做喬達壓克力，上面都列有相關規格跟價錢，因為我不需要是特定尺吋的，我寄信去問了一下，30*40*0.8 cm 只要 NT 230，不過店離我家實在是有點遠，如果你家在這家旁邊的話可以跟他買。(老闆我好心幫你做了廣告啊…)

紅外線投光器

我在其他的部落格上面看到很多 DI (Diffused Illumination) 的設置，讓我最驚訝的是，它們的紅外線投光陣列都是大砲級的，真是有夠誇張。像是 Orion 他的設置，用了三個大砲 (如下圖)，真是誇張，不過根據 Paul 的解釋是，因為他製作的 Table 想要放在陽光照到的地方，也就是說他要克服太陽的紅外光，因此他向上打上來的紅外光要比太陽照下來的紅外光強很多才可以。

(圖片來源: Orion)

這樣子的解釋是合理的，不過如果你只是要放在家裡的角落玩，那實在不需要這麼麻煩。雖然我也想找大砲級的紅外線投光器，不過我在網路上面沒看到哪邊有賣就是了，或許在光華商場會有賣…不過我懶病又發作了，所以我在露天拍賣上面看到有人在賣紅外線投光器，看一下價格還可以我就買了。我在露天拍賣上面找到的是這一家 LED SHOP，裡面有一個類別叫做紅外線投光器，一個 NT 430，看起來價錢合理，是老闆自己 DIY 的，一個投光器有 18 個 LED，我想要老闆客製化應該也是可以，不過可能要多收一點錢就是了。

(圖片來源: LED SHOP)

我陸續跟老闆買了 850 nm 跟 940 nm 的投光器，秉持著實驗的精神，我兩種都試了，結果我發現 840 nm 的效果似乎比 940 nm 的效果好。另外，由於老闆賣的時候前端有加一個光敏電阻(Cds)，這個東西會偵測你的環境光源，如果環境光源比較暗，他功率就會調高，反之。不過我要的是穩定的光源，所以我後來買的投光器就請老闆把這個光敏電阻拿掉，並用最大功率來投光。還有另外一點，我買的是 40 度角度的投光器，你不會想買 15 度的，這麼小的角度要把平面打均勻光時在是有點麻煩。另外買超過 NT 1000，似乎不用運費。(黃老闆，我幫你做了一個好廣告啊…)

投影機

這大概是裡面僅次於 PC 最貴的材料。當然，我們不能 DIY 一個投影機，(如果你真的這麼做的話，請通知我一下，請務必讓小弟參觀)，所以，你只能去買一台，或是借一台。因為作者平時人緣還算可以，因此就借到投影機了，(看來我最後應該需要寫個感謝誌)。有讀者跟我反應說投影機難以取得，所以，我在稍後會介紹無投影機版的作法。不過這就不是多點觸控桌，而是多點觸控面板囉。感覺還是會有一段距離的差距 (這在 HCI 著名的大師 Bill Buxton 的書中 Direct Manipulation interfaces 中會討論到)，因此，如果能夠的話，還是弄一台投影機來吧，這樣子比較會有 WOW 的效果。

投影布幕 (Diffuser)

投影布幕不只是要將影像呈現出來，還肩負著要把紅外光線散射開來的功用。這邊一開始你可以挑選描圖紙來做你的投影布幕 (Diffuser)，我在師大路上面的美術社買了一捲回來，好大一張，也才 NT 60。所表現出來的效果來說還算是及格，當然如果你不滿意如此低廉的投影布幕的話，在 NUI 的論壇裡面有一個專區就在討論這個東西，你可以在 NUI 論壇裡面，敲入關鍵字 Diffuser，看看大家用了什麼布幕 (Diffuser)，以及所呈現的效果。

進階一點之後，你可以試著去買一些比較專業的投影紙，或是投影背板，而比較常在用的投影紙有兩個，一個是在 Jeff Han 的 FTIR 的原始 Paper 當中的 Rosco Grey，另外一個是 Lee Filter 225 號。後面的兩個都是比較專門的材料，沒有特別專門的門路似乎還問不太到。Rosco 跟 Lee Filter 都是給專業攝影的人所使用的，因此當我初次看到這麼名詞時，還挺不相信我走對網站了。這是我去正成貿易公司拿來的 Lee Filter Sample 紙本:

有些人可能會有疑惑，一定是要投影布幕 (Diffuser) 嗎? 是的，這是必須，因為投影布幕有幾個用處，他必須要呈現投影機打上來的影像，除此之外，它要散射光源。另外，這個布幕必須要讓紅外光可以穿透，因為用 DI (Diffused Illumination) 來實作的話，是要讓紅外線攝影機可以看到你手反射回來的紅外光線。根據我在 NUI 論壇裡所看到的，Rosco Grey 似乎會吸收紅外光，或者是說，紅外光穿透率不是這麼好，不過我也沒真的試過 (一張專業的投影紙都很貴的)。不過對於大多數的人來說，你可以用描圖紙 (Tracing Paper) 就好。

紅外線攝影機 (IR Camera/Webcam)

紅外線攝影機是要用來偵測從手反射回來的紅外光，這邊你不用真的去買一個紅外線攝影機，你可以用 Webcam 來改造就可以了。在選擇 Webcam 時，請務必注意幾點事情。第一點，你所選擇的 Webcam 必須是定焦的 Webcam，也就是說，你的 Webcam 不會是追蹤人臉的，因為那會變成不定焦，焦距會隨著偵測到的東西而改變，這樣子我們的鏡頭所吃入的東西就極端不穩定。第二點，一般的 Webcam 都會有 IR Filter，用來過濾紅外光 (IR) ，我不知道為什麼需要 IR Filter，而在選擇 Webcam 時，你需要注意一下它的 Filter 是怎麼安置的。

(圖片來源: Dabinn的筆記)

在Dabinn的筆記裡面有介紹到如何製作 紅外線攝影機 (IR Webcam)，你可以看到 Dabinn 是用羅技的 Webcam 來改造，而裡面有 IR Filter，這個 IR Filter 就直接鍍在鏡頭上面，所以你必須要用工具來把它磨掉，磨掉之後，還要重新拋光。如果我真的介紹這種作法，我想大家應該會想要把我給殺了。真是別鬧了!

(圖片來源: 露天拍賣)

所以，你選擇 Webcam 時，要注意一下型號，看看 IR Filter 是不是直接鍍膜在鏡頭表面，如果是的話，就放棄它吧。我們要選擇省力的方式啊! 我選擇 Microsoft VX-1000，因為它的 IR Filter 是一片玻璃，你只要把 Webcam 拆開，然後把鏡頭後面的 IR Filter 取出來就可以了。當然不是只有 VX-1000 是這樣子設計的，你可以在 NUI 論壇裡面的 Camera Section 裏面查尋其他相關的 Webcam。為了讓大家都可以自己動手做多點觸控桌，我這邊就以 VX-1000 拆解來做說明，如果你已經了解並可以自己拆解的話，你可以跳過這一段。(這讓我想到當兵時的槍枝分解…)

**分解開始**

開始之前，請先準備好你的螺絲起子。

這就是我們可愛的 Webcam，它將要擔負最重要的任務啊!

我們將 Webcam 轉到側面，會看到一個軟墊，把它戳出來就是了。

戳出來的結果，然後把螺絲轉出來。左邊做完換右邊。

當你把兩邊的螺絲轉起來後，Webcam 主體就跟架子分離了，然後你會看到兩邊有著兩個橡膠環，當然是要把它拿起來。

Webcam 的後面還有一個螺絲，別忘記了。

拆解下來的零件，請妥善放好來，你等會兒還要把它組回去。

然後把你的 Webcam 給扒開來。

內部長相，不要太粗魯，不然你等會兒拉斷電線，就要自己焊回去了 (當然，你還要先有銲槍跟錫線)。把上面那個按鈕拿起來，然後把兩個螺絲給轉出來。

螺絲轉起還後，把電路板翻過來，會看到兩個螺絲把鏡頭鎖在上面。把這兩個螺絲也轉起來吧。

轉起來的鏡頭。我們會看到裡面有一個紅紅的遮片，這就是 IR Filter，我們必須把它拿出來。如果可以的話，你就輕輕地把它拿出來，這樣你做完實驗後，不想要玩多點觸控時，這個 Webcam 還可以拿來用做視訊交談。

不過粗魯的我，不小心把它弄爆了。看來這個 Webcam 無法復原了。

拿出來後，你怎麼過來的，就怎麼回去，現在再把所有的零件復原。這個時候，你只是把 IR Filter 給拿掉，這個 Webcam 目前還不是紅外線攝影機。我們還要做一件事情，加上遮片。這個遮片你可以用:

• IR BandPass Filter : 這個當然是高檔貨。在 Gravano 的 FTIR 實作手冊 裡面有介紹到。IR BandPass Filter，顧名思義就是只讓某個波段的紅外光可以通過，因此，你如果加了 BandPass Filter ，可以讓你的 Table 更加穩定，因為它只會接收某個波段的紅外光。不過這也意味著，你要記住你挑選的紅外光波段，不然你的投光器的波段跟你的 BandPass Filter 的波段不一樣，那可就糟糕了。這是專家級在使用的，我只是介紹出來讓大家知到，因為 BandPass Filter 並不便宜。

(圖片來源: vgod)

• 透明包裝紙: 在 vgod 的部落格上面有介紹到用藍色跟紅色的透明包裝紙就可以製作了。我沒試過這種，或許你可以試試。

• 完全曝光的底片: 這個我試過了，似乎沒有磁碟片的效果來的好。我疊了三張完全曝光的底片。底片的話，我從舊照片的頭部通常都會有那種完全曝光的部份，我從那裡裁剪的。

• 磁碟片: 我最後是用磁碟片來做遮片，效果看起來很好。磁碟片的話，家裡到處都是，看來以前累積沒丟掉的磁碟片現在倒是發揮了用處。

做好之後，試著到到處看一下，應該除了光源之外，什麼東西都看不到才是。

休息一下

我原本想要一口氣講完所有的硬體相關製作，結果我發現，寫到這邊文章已經落落長了。爲了方便大家吸收，也為了讓我可以喘一口氣 (寫文章很耗時間的)，在下一章我們再來繼續我們沒有講到的部份。所以，這一章，我們已經談到了壓克力 (Acrylic)、描圖紙 (Tracing Paper) 以及紅外線投影機 (IR Webcam)，看來你可以有很多事情可以忙了。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

Posted by Mr. Monday

各位久等了，不好意思，這幾天有點忙，所以這篇有點慢才出來。在前一篇文章中我們已經瞭解了紅外光線，也瞭解了 DI (Diffused Illumination) 的背後原理，想必大家已經迫不及待想做一個 Table 來玩玩了。不過在這一章裡面先讓我們瞭解另外一個類似的作法 FTIR (Frustrated Total Internal Reflection)。

FTIR (Frustrated Total Internal Reflection) 的背後原理

雖然我們已經知道了 DI (Diffused Illumination) 的方式來實作 Table，然而多了解一種實作的方式，會讓你有多一種選擇。而 FTIR (Frustrated Total Internal Reflection) 的實作方式跟 DI (Diffused Illumination) 是有點類似的。FTIR (Frustrated Total Internal Reflection) 的實作方式是由 Jeff Han 在 2006 年提出的，他的論文在 UIST 這個 UI 的知名 Conference 上面也可以看到。讓我們來拆解一下 FTIR (Frustrated Total Internal Reflection) 的背後原理吧!

先由 FTIR (Frustrated Total Internal Reflection) 名字來看，後面三個字 TIR (Total Internal Reflection)，代表的就是全反射，所謂的全反射就是光在一直在一個介質裡面一直反射而不會逸出。讓我們看一下 Wikipedia 的正式解釋:

全內反射（又稱全反射）是一種光學現象。當光線經過兩個不同折射率的介質時，部份的光線會於介質的界面被折射，其餘的則被反射。但是，當入射角比臨界角大時（光線遠離法線），光線會停止進入另一介面，反之會全部向內面反射。

所以，上圖的藍色的線就是全反射路徑。因此我們知道全反射跟入射角以及介質有關，而介質是最重要的一件事情。而 Jeff Han 最大的貢獻就是找到了一種介質，可以讓紅外線在裡面進行全反射，而這個莫大的貢獻就是這個全反射的介質竟然是如此便宜的壓克力。因此，知道了全反射介質，知道了紅外光，我們就知道這個互動桌面大概是要怎麼建置了。既然大家已經知道了 DI (Diffused Illumination) 的作法，那 FTIR 的原理跟 DI 非常類似，因此我們就一口氣解決它吧! 還有，由於我的實作是用 DI (Diffused Illumination)，因此在下面的介紹當中，我會順便介紹一下 FTIR (Frustrated Total Internal Reflection) 實作需要注意的地方，以及可以參考的資料。而又由於我沒實作過這種方式，因此，或許會在實作細節遇到的問題我就不是很清楚了，不過，大體來說，應該是沒什麼大問題就是了。

首先，你還是要有透明的介質，因為透明的介質是需要能夠產生全反射的，所以，這個介質目前是限制在壓克力 (Acrylic)，而由於要讓紅外線光可以打進去，以及產生全反射，你的壓克力的厚度必須要超過 8 mm；而你又要讓光在裡面做全反射，因此你的壓克力的四個邊必須要磨光，這裡所指的磨光是磨到你從一個邊可以看到另外一頭邊上的東西。這樣子說明如果還不夠清楚的話，那下圖 Laurence Muller 的結果圖應該會讓你明瞭什麼叫做磨光:

(圖片來源: Laurence Muller)

所以，在準備你的壓克力的階段時，你需要的不只是壓克力，你還需要水砂紙來拋光，以及最後用 Brasso 銅油來做最後的拋光動作。所需要的材料 Laurence Muller 在他的 FTIR 實作的這篇文章裡有提到:

• 水砂紙型號:
  • P320 (I used Norton T223 / P320 / Very Fine)
  • P800A (I used Auto-paper P800A / Super fine)
  • P1200A (I used Auto-paper P1200A / Super fine)
• Brasso 銅油
• 舊衣服
• 舊報紙
• 一桶水
• 最後你需要的是無限的耐心…你的面板越大 ，你需要拋光的面積就越大，加油吧!

在上面的設計圖當中，你可以看到在 FTIR 的實作當中是要把紅外光放在邊邊的，然後讓紅外光射到壓克力裡面去，在裡面做全反射。這樣子有一些好處，包括了你的紅外光在平面上面是絕對均勻的，至少會比用 DI (Diffused Illumination) 來的均勻。同樣的，還是利用紅外線攝影機 (IR Camera/Webcam) 來接收所反彈回來的紅外光線。然後，投影機的內容還是要打到投影布幕 (Diffuser) 上面。

整個設計大概是這個樣子，但是你會遇到一些問題，你必須要自己焊接你的 LED 燈，還好，在網路上面可以找到一票這種資料，你也可以在 Laurence Muller 的介紹文章裡瞭解你要如何焊接。最後，你終於做出來了，你或許會遇到一些問題，正如 Jeff Han 在他的 Paper 中所描述的，你必須要在螢幕上面用力按壓才會得到比較清晰的手指亮點，這樣子有點讓人困擾。因此 NUI 的團體發現，如果在壓克力表面上鋪上一層 Silicon，那這個問題就可以獲得解決了。如何鋪置? 在 BlaXwan’s 中有詳細介紹，以下是 DIY 影片:

如果你順利用 FTIR (Frustrated Total Internal Reflection) 建立了你的 Table，你就可以直接跳過下一章 DI (Diffused Illumination) 的建置。然後把 TouchLib 給跑起來就可以了，這個軟體我會在後面介紹到。

基本上，如果你想要用 FTIR 來建立 Table，在網路上面有很多資源，你只要打入 “Multitouch, DIY, FTIR” 應該就多到看不完了，大部分的都是 NUI Group 的人。然後你就會發現，為什麼隨便一個外國人家裡面都有個車庫，然後車庫裡面都有一些雜七雜八的工具。一些參考資料:

• Laurence Muller 的網站
• Gravano 的 FTIR 實作手冊
• FTIR 實作介紹
• 其他的就 Google 吧!

回顧 DI/FTIR 優缺點

不過在進入下一篇前，在讓我們回顧一下 DI (Diffused Illumination) 以及 FTIR (Frustrated Total Internal Reflection) 的作法。兩種作法都是用紅外光的反射原來來製作互動桌面，因此，這會有一個缺點，那就是紅外線干擾的問題，你不可以把你的桌子放在太陽光下，或是環境當中有很多紅外線的地方，這會讓你的桌子很不穩定。另外，它們都是用投影機，因此會有個問題，就是你的互動桌面怎樣都不可能太 “薄”，因為你的投影機就佔據了投影的距離。這也就意味著，如果我們實作比較小的面板似乎就沒有多大的意義，所以你會看到許多利用紅外光設計的多點觸控 (Multitouch) 桌面都會設計的比較大張一點。最後，你用的因為是投影機，除非是特殊的投影機，不然你不可以持續開機太久，會產生投影機過熱的問題。

當然用紅外光也有一些好處，包括因為是利用反射的原理，因此可以辨認一些物體的形狀，能夠辨識物體的形狀，那可以做的互動應用就廣了一些。當然，你可以說，我們可以用電阻做成的多點觸控 (Multitouch) 桌面，然後在桌面上面再架一個 Webcam，也可以達到。所以，我說，FTIR/DI 的優勢就是要把桌子做的大一點，這樣子在成本的優勢之下，這個樣式就勝出了。不過即使不是成本的優勢，這兩種方式因為容易 DIY，所以在目前為止也是勝出，至少每一個人，只要有心都可以做的出來。沒錯，是每一個人。

關於 FTIR 以及 DI 支間的比較。由於 FTIR 是用紅外光在壓克力裡面做全反射，因此，打光可以說是相當均勻，不會有什麼暗角的問題，而 DI 在這方面就要多費一點苦心。 不過 FTIR 受制於全反射的介質，因此只能用壓克力；而 DI 的話，你要用什麼都可以，我在論壇上面看到有人甚至拿毛玻璃做桌面，這樣子連投影布幕 (Diffuser) 都省了。相較於 FTIR，DI 在環境的考量上面要多了一點，就是因為紅外光是往上射，因此在可以反彈紅外線的角度內，如果有個反射很強的物質，也會照成干擾，像是你把鏡子放在上方之類的；或是你穿的衣服在袖子的地方是閃亮亮容易反射的材質。

管那麼多! 做就是了!

分析了那麼多，真是嘴砲一大堆，管他那麼多，選一個方式，開始實作就是了。最後讓我們來一段 Laurence Muller 的熱血製作 Video:

看完之後，手是不是很癢了呢? 下一篇我會開始介紹 DI (Diffused Illumination) 的實作，並告訴你我用的材料是什麼，以及可以在哪裡購買。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

Posted by Mr. Monday

前面的文章中， 我們談到了許多不同種的實作方式，最後由於整體考量我們選擇了 DI (Diffuse Illumination) 以及 FTIR (Frustrated Total Internal Reflection) 的方式來製作我們的多點觸控 (Multitouch) 桌面。而這兩種方式其實背後的原理都是相同的，它們都利用紅外線反射的原理來實作出來的。而瞭解紅外線的特性對於互動設計是有很大的幫助的，因為紅外線的 一些特性的關係，許多互動設計都會利用到紅外光 (IR)。像是之前在 Blog 上面介紹的棒球互動設計，就是利用紅外光投射到人身上，並偵測反射的變動量來達成。

紅外線是什麼?

(圖片來源: 金龍俊科技股份有限公司)

我們知道太陽打出來的能量是以電磁波的形式所存在，而對於人類眼睛可見的能量範圍我們稱之為可見光。根據Wikipedia 上面的解釋:

「光域」通常指的是肉眼可 見的光波域，即是從400nm（紫）到700nm（紅）可以被人類眼睛感覺得到的範圍，一般稱為「可見光域」（Visible）。由於近代科技的發達，人 類利用各種「介質」（特殊材質的感應器），把感覺範圍從「可見光」部份向兩端擴充，最低可達到0.08～0.1nm（X-RAY, 0.8～1A），最高可達10,000nm（遠紅外線)

因此，我們知道，如果我們不是天賦異稟的人，我們所能感知到光的範圍應該不會超出「光域」的範圍太多。而瞭解了這個特性之後，我們就可以設計一種機 制，讓機器 “只” 可以看到紅外光，而藉由感知到紅外光的變化量來做出改變。當然，你也可以說，我們不一定要用紅外光啊! 是這樣子沒錯，但是因為紅外光對於人類來說是看不到的，但是機器卻可以感知的到，有了這一層特性之後利用紅外光來建立互動桌面會方便的多。

當然，你也可以利用環境光源來建立互動桌面，但是環境光源由於並不穩定，因此你所製作出來的互動桌面也就無法穩定了。然而，用紅外光真的只有好處沒有壞處嗎? 其實不是，其實還是有副作用的。我在研究人眼追蹤 (Eye-Tracking) 儀器時，偶然發現，原來紅外光看久了會導致白內障。所以，在各位動手實驗之前，請勿將紅外光直射到自己的眼睛上頭。在後面我會一再強調這件事情，希望各位不要為了研究搞砸了身體，那我會感到非常愧疚的。

瞭解了紅外線是怎麼一回事之後，我們就可以解釋一下 DI (Diffuse Illumination) 以及 FTIR (Frustrated Total Internal Reflection) 的背後原理。當然，暸解背後原理到實際做出來還是有一段距離，說的跟做的還是會有一段差距的。這就是為什麼讀萬卷書要行萬里路的原因啊。

DI (Diffused Illumination) 的背後原理

我們先一步一步來拆解背後的原理，現在我們知道要做一個多點觸控 (Multitouch) 的桌面需要一個 “桌面”，這點毫無疑問是吧? 而我們又知道要利用紅外光 (IR) 反射的原理，因此，這個桌面好歹要是透光的。因此，我們已經知道需要兩個物件了，一個是透光的桌面，一個是紅外線投光器。關於透光的桌面，可以用玻璃或是 壓克力都可以；而紅外線投光器的話，我在之後再介紹。

而手一接近桌子這個介面後，由於紅外線 (IR) 受阻，因此就會反射回來。

聰明的你就會知到，要在下面裝一個接受器，藉由這個可以感知紅外光線的接受器之後，我們就可以抓到手究竟是觸碰到桌子哪一個位置。而紅外線的接受器 是什麼呢? 最普通也是最容易取的的就是紅外線攝影機 (IR Camera)。這時你會開始抱怨到，最好是紅外線攝影機 (IR Camera) 很容易取得，又很便宜! 的確，你自己買一個紅外線攝影機 (IR Camera) 價格的確不便宜，但是如果你自己做一個，價格就很便宜了。我在後面會告訴你該如何製作你自己的紅外線攝影機 (IR Camera)。這邊就讓我們把這些條件當成已知。所以，我們現在知道，我們要利用 DI 的方式製作多點觸控桌面需要一個透明的介質、紅外線投光器 (IR Illuminator) 以及紅外線攝影機 (IR Camera/Webcam)。

不過，既然是互動桌面，應該是要有影像啊! 沒錯，所以，我們還需要一個投影機 (Projector)，而既然需要投影機，就需要投影的螢幕 (Diffuser)，投影的螢幕的材質不同會有差別這是必然的。在初期的試驗，你可以用描圖紙 (Tracing Paper) 來當成你的投影螢幕。我買了一大捲，用都用不完，也才 60 塊台幣。關於投影紙比較進階的資訊，我們在實作的章節裡再來談它。現在我們只要瞭解原理就好了。

所以，整個設置就會如上圖所示，我們先用紅外線光 (IR Illuminator) 往上打，紅外光碰到阻礙物後，反射回來，經過紅外線攝影機 (IR Camera/Webcam) 接收之後，經過一陣程式分析，就會瞭解手指觸碰到桌面那個位置。而投影機 (Projector) 所打出的畫面，就會隨著你手的移動來做應該要有的反應，這就要看你最終程式是怎麼寫。當然，投影機是接在個人電腦 (PC) 上面的。

在上圖的設置中，我們可以看到投影布幕 (Diffuser) 是放在桌面下，這是有原因的。實際上你也是可以把投影布幕 (Diffuser) 放到桌面上，不過設置就有些不同。讓我來解釋一下。因為紅外線投光器 (IR Illuminator) 直接往上打時會在桌子的表面上面產生熱點 (Hot Spot)，這點應該是很容易理解，你把手電筒往玻璃上面一照，可以看到中間的點特別亮，那就是熱點 (Hot Spot)。

而我們不希望有熱點 (Hot Spot) 產生，因此投影布幕 (Diffuser) 在此就扮演了兩個腳色，一個是把影像投影出來，另外一個是把光源散射開來。因為，一但產生熱點，產生熱點的位置，手接近的時候是不會有反應的。因為熱點所 反射的紅外光已經太強了，以致於你手移過去時所反射的紅外光不會大於熱點 (Hot Spot)，因此紅外線攝影機 (IR Camera/Webcam) 就無法判別。

此外，投影機直射也會產生熱點 (Hot Spot)，為什麼呢? 這是因為投影機打出來的光不僅僅只包含可見光的光域，還包含了紅外線 (IR)。所以，更好的作法就是在投影機前面加一個 IR Cut，這個東西會把紅外線的波段全部濾掉，但是對你所投影出來的東西沒什麼影響 (因為人只見到可見光)。不過，如果不想這麼麻煩，你就把投影布幕 (Diffuser) 弄在桌面下面就是了。

因此，從 DI (Diffused Illumination) 的名字來看，我們從實作的細節來回顧，大概就很清楚瞭解這個名字的意思。它就是要讓紅外光能夠 “均勻” 在表面上面散色，然後利用紅外光反射的原理來達成互動桌面的原理。因此，”均勻” 地讓光在表面散射是個關鍵，因為不均勻的光會造成程式難以處理。不過，如果堅持是用紅外線往上打的方式，基本上是很難均勻，還是要靠電腦視覺的方式來做後 處理，這個 TouchLib 已經幫我們處理好了，就不用擔心了。

但是，均勻光相對於不均勻光還是有很多好處的，像是桌面角角的地方，如果不是均勻光的話，在桌面角角的地方獲得不到紅外線光源，或是獲得的光源較為 稀少，這時手即使案上去，反射回去的紅外光 (IR) 也是非常地稀少，因此電腦將無法判別。不過在後面我會介紹幾個方式來把它弄均勻，如果你不是要生產一個產品，而只是要拿來玩，拿來做研究，螢幕中間的部分 應該就很夠玩了。

所以，當我們瞭解 DI (Diffused Illumination) 的方式之後，我們也就會瞭解 Microsoft Surface Table 的實作原理，兩個其實是一樣的。我們來看一下 Surface Table 的設計圖 (上圖)。同樣的，Surface Table 需要一個紅外線投光器 (Diffused Illuminator)，這就是圖中的 2 號的那個圓圓的東西。然後需要紅外線攝影機 (IR Camera/Webcam) 來抓取反射回來的紅外線光，就是 3 號的那個東西。

不過我們會發現，3號的東西似乎有四個，沒錯，Surface Table 利用了四個紅外線攝影機 (IR Camera/Webcam)。這是有原因的，原因有兩個，一個是精準度問題，一個是桌面高低的問題。我們想想一個攝影機所能看到的範圍是有限的，因此， 你要讓攝影機能夠看到更多只有兩個方式，一個是裝廣角鏡，一個是把桌子拉高。而把桌子拉高絕對是 Microsoft 所不能接受的，因為它的桌子是要像一般的餐桌一般，太高就像是吧檯桌了，在使用上的行為跟感覺就不太一樣了。因此，在這層考量下麵，它們選用了四個紅外線 攝影機 (IR Camera/Webcam)。選用四個紅外線攝影機 (IR Camera/Webcam) 也可以增加精準度，想想看，一個攝影機只負責一個區域，而一個攝影機的像素也是有限的，對於個別手的接觸，各個區塊的參數可以自己調校，而不是所有的攝影 機全都用一樣的參數設定之類的。

最後，投影機是 4 號那個東西，打在 1 號的投影布上面。所以，這就是 Microsoft Surface Table 所有的設置，你以後看到這類東西也可以跟你的朋友解釋了。而我最後介紹的實作方式也會是 DI (Diffused Illumination)，但是不會像 Microsoft Surface Table 這麼麻煩就是了，我們只需要一個紅外線攝影機 (IR Camera/Webcam)，當然，桌子就要拉高一點。

我想文章到這邊已經有點長了，這邊我們就先休息一下，我們在明天會再繼續介紹另外一個實作方式 FTIR (Frustrated Total Internal Reflection)，雖然我們已經知道了 DI (Diffused Illumination) 的方式來實作 Table，然而多了解一種實作的方式，會讓你有多一種選擇。而 FTIR (Frustrated Total Internal Reflection) 的實作方式跟 DI (Diffused Illumination) 是有點類似的。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章

(我想寫的應該是很通俗了:))

Posted by Mr. Monday

我曾經在前面一篇文章提 到要寫一系列的教學文來告訴大家如何製作硬體，因為我瞭解做軟體的人的瓶頸在於硬體，硬體解決之後，就是軟體人的天空了。而多點觸控 (Multitouch) 這種新型態的介面在未來必定會成為一個趨勢，一個通用的介面，在國外已經有許多的研究機構開始大量投入人力研究了。因此，希望台灣對於 UI 研究有興趣的人也可以多加參與。其實在台灣已經有不少人做出了多點觸控 (Multitouch) 的硬體，但是在 Google 上面一查，便會發現，中文的相關資料是非常稀少的。相較於國外的熱絡程度來說是有差距的。因此希望這一系列的教學文可以彌補這個遺憾。當然，並不是我特別 懂，而我只是願意花些時間來寫寫這些文件而已。

什麼是多點觸控 (Multitouch) ?

為了以防有人不知道什麼是多點觸控，讓我簡單解釋一下，單點觸控就像是你在捷運系統儲值票卡看到的螢幕一般，一次只能感應一個點。而多點觸控則是可以一次感應很多點。多點觸控現在最流行的機器就是 iPhone，因為 iPhone 可以讓你用兩個手指頭來把圖片放大縮小 (兩大於一，所以是多點)。而真正強大的多點觸控是，沒有點數的限制。那可以有什麼應用呢? 看以下 Demo 你就會瞭解了:

誰在推廣多點觸控 (Multitouch):

在正式開始時實做之前，我要先介紹一些基本原理，以及一個團體 NUI (Natural User Interface)。NUI 是一個荷蘭 Geek 所發起的團體，他們對於多點觸控 (Multitouch) 的介面推廣不留餘力，他們成員中的每一個人都會在 Blog 旁邊加上上面的那ㄧ個 Logo。他們不但公開他們的影體作法，也完全公開他們的軟體。對於他們無私的奉獻這是我深受感動的地方，他們似乎就只是為了推廣而推廣。

這邊先介紹幾個 NUI 靈魂人物的 Blog:

• David Wallin: 主要負責 TouchLib 的開發，他似乎有很深的電腦視覺 (Computer Vision) 的知識
• Laurence Muller : 非常積極投入新的多點觸控 (Multitouch) 程式 的開發，以及修改 TouchLib 這個程式庫
• Adithya | Divesh: 兩位印度人，在 NUI 裡面非常活躍，時常回答大家的問題，他們 Build 一個自己的移動式系統
• Paul D’Intino: NUI裡面的一個要角，積極投入多點觸控 (Multitouch) 研究
• Seth Sandler: 剛完成他的大學學位，主要是從事互動藝術，他專心在音樂領域上面，他專門開發跟音樂有關的多點觸控程式
• Tim: 德國設計學院的學生，已經拿他設計的桌子做了幾次參展
• Chris: 在 NUI 當中非常活躍的能人

好吧，我不能再繼續介紹下去了，我只能說 NUI 聚集了一群對於 多點觸控 (Multitouch) 介面非常喜愛的同好，來自各個不同國家。他們實驗了各種不同的材質，互相交換實作的訊息，所以，如果想要實做 多點觸控 (Multitouch) 的人在這個論壇裡 面可以獲得非常詳盡的資料。那意思是說，我也不用介紹囉? 因為你們自己看資料就瞭解囉? 嗯，我當初是從 Google 先找到這幾個人的 Blog，後來才發現他們的 Blog 有一些共同之處，就是他們的 Blog 上面會掛個那個像波浪一般的奇怪 Logo，所以我就點進去後，才發現真正的寶山。不過因為寶山太過複雜，要理出一個頭緒還是需要些時間。如果你先看完我的教學後，在進去裡面查找，可能會 對你比較方便，第一個是，因為你已經有了概念，第二個是，因為你知道要下哪些關鍵字來查找。

當然不只 NUI 在推廣多點觸控 (Multitouch) ，還有一些團體像是 OpenTable、vvvv 這兩個 Group。不過我想一開始我們不要把事情搞的這麼複雜，我們先從 NUI 的東西來入手好了。

Multitouch 建置原理:

我們想要研究多點觸控 (Multitouch) 的介面，就必須要先建置一個多點觸控 (Multitouch) 的桌子。如何實做桌子的方法非常多。你可以用電阻/電容的方式來建置你的多點觸控 (Multitouch) 桌，也可以用純粹電腦視覺的方式來建置你的 桌子，像是下面這篇 UIST會議上 的 論文，這位博士生證明了即時手指頭偵測是可以辦的到的。

或者是學 Joe Marshall 偵測手指顏色改變來抓取手指位置:

你也可以學 Diamond Table，不過建置這個桌子，不過會遇到複雜的電流計算就是了:

你也可以參考 Microsoft ThinSight 的作法，做一個紅外光的投光以及感應器陣列:

或是 Sony 的 SmartSkin，另外一種利用電阻的特性的方式:

或者是由英國的 Cardiff University 的研究員利用聲波的方式:

又或是像 Microsoft TouchLight 利用紅外光以及兩個 Camera 的方式:

不然也可以學 NextWindow 在角落塞上 2 個紅外光感測器，只是常常會很不準而已:

不然你也可以參考 Johnny Lee 的方式來把 Wii 當成多點觸控 (Multitouch) 儀器來用，但是你最多只能支援四個點，在 vgod 的部落格上面有介紹其中一個做法:

所以，當我們在選擇用什麼方式來實做時，是有很多考量的，所以，任何一種選擇都有其優劣，主要是看你想要製作什麼樣的桌子，在什麼情況下使用，並且你期望花多少力氣。在考量到穩定性、實做方便性、低成本以及真正的多點觸控 (Multitouch) (不是 Johnny Lee 的陽春型 Multitouch) 之下，有兩個方案顯得非常迷人。一個是 Microsoft Surface Table 所用的 DI (Diffused Illumination):

另外一個是由 Jeff Han 所發明的 FTIR (Frustrated Total Internal Reflection):

而這兩項建置技術也是 DIY 族群所廣為擁抱的，因為價格低，實做不複雜的原因。在 NUI 論壇裡面可以看出來有兩派，一派擁護 FTIR，一派擁護 DI，而觀察的趨勢是，早起大部分 NUI 的人都是用 FTIR，不過當 Microsoft Surface Table 推出後，DI 的方式在 NUI 裡面就大為盛行了。

因為 FTIR 以及 DI 都是利用紅外光 (IR) 的原理，因此在下篇文章當中我將會先介紹 IR 的特性，這篇文章到目前為止有點長，就在此先休息一下吧。我希望的是，不瞭解技術的人在看完文章之後，也能完全建立你們自己的桌子，所以如果有任何不懂的地方可以隨時提出來，如果是我能夠解答的部份，我會為你解答。(不過這一篇似乎還沒講到如何實做)。

加入MMDays在facebook的粉絲團 隨時閱讀最新文章