教具：混合實境實驗互動桌  (Mixed Reality Experimental 

Interaction Table)  軟硬體系統組裝與設計

目錄

一、系統架構

二、硬體製作

2.1 設備需求

2.2 架構與安裝

2.2.1 Test Interaction Table 架構圖說明

2.2.2 Mixed Reality Interaction Table 架構圖說明

2.2.3 架構安裝流程

三、軟體裝設

3.1 軟體需求

3.2 軟/硬體結合與設定

3.2.1 封包套件介紹

3.2.2 投影畫面尺寸及位置定位

3.2.3 攝影機調校

3.2.4 動畫檔對應設定

四、使用執行步驟說明

一、系統架構

本系統的設計採用符號辨識技術 ( Kaltenbrunner et al, 2007)，以壓克力及玻璃板

製成桌面，於之間鋪一層可以描圖紙讓投影畫面成像，符號及手指也可以透過描圖紙

讓放置於桌底下的攝影機可以捕捉到正確的位置。

訊號傳遞之流程如下述，將貼有標籤的物品放置在桌面上，由桌面下的攝影機抓取圖

像，將影像傳送至 reacTIVision 作辨識處理。處理後經由 TUIO 協定傳送到 TUI

Application，做出是反應，並給予回饋，最後經由投影機將影像投影至對應物上。系

統架構圖如下圖 (參考網址：http://reactivision.sourceforge.net/)所示。

架構圖. (參考網址：reactable：http://reactivision.sourceforge.net/)

本說明書主要敍述如何製作實體介面及軟硬體整合的裝設，其中皆以封包套件之設定方式介紹，無詳述其程式細項寫作及應用軟體操作之方法，需另自行精進研習。

二、硬體製作

2.1 設備需求

1. 半透明桌子一張(含基座及面板)：

依桌台設計情況選擇適合之基座，本案將兩個可拆式之桌腳以層板聯結為基

座，面板部份則以上、中、下分別為 2mm 壓克力板、75gsm 描圖紙、5mm 強化

玻璃所構成，尺寸為 130x90cm。

2. 數位攝影機一台(含鏡頭及瀘光片)：

依實際桌面距離可選擇不同 CCD 尺寸的鏡頭，本案為 6mm。另需紅外線瀘光

片(infrared-filter)一片

3. 數位投影機一台(備梯形及 zoom 校正功能為佳)

4. 電腦主機一台(Laptop 皆可)

5. 反射玻璃一片：

依架構設計及鏡頭設定距離取決反射玻璃尺寸大小，本案為 50x60cm。

6. 影像擷取卡一片：

依使用主機情況，來更換不同型式擷取卡，本案使用 upmost304 影像擷取卡。

7. 紅外線 LED 燈兩座(或一座)：

2.2 架構與安裝

2.2.1 Test Interaction Table 架構圖說明：如下圖

2.2.2 Mixed Reality Interaction Table 架構圖說明：如下圖

2.2.3 架構安裝流程：

如下一頁完成圖所示：

1.首先將桌腳與層板聯結以固定基座及桌寬範圍，並置中固定面板位置。

2.依上列架構圖型式，架設反射玻璃板、投影機，並於適當之相對位置固定鎖

上。(反射玻璃及投影機之位置設定視畫面欲投影至面板大小而定，並做梯

形位置及角度之微調校正)

3.同上，架設攝影機及紅外線 LED 投射燈。(攝影機之位置主要以可完整含蓋

投影畫面為主；LED 投射燈位置視之後 reacTiVision 軟體是否可偵測辨識到阿米巴

標籤，且又不影響偵測畫面為主)

4.安裝完成如下圖所示。

註：架構安裝設定會因設計不同，各個物件相對位置會有不同之調校距離，因

此本說明不標示其中詳細距離尺寸。

Mixed Reality Interaction Table 架構完成照片

三、軟體裝設

3.1 軟體需求

1. ReacTIVision

使用 reacTIVision 這個軟體來讀取桌面上所有阿米巴標籤並判斷他們的

ID 為何。

2. TUIO

藉由 TUIO 將資訊傳達給 TUI Application。

3. TUI Application(TUIO Flash)

接收 reacTIVision 傳來的封包訊息後經由應用程式做出相對應的動作，本

案所選擇的是 Flash 來做。

4. 其他支援程式

Flash CS4 or CS3、Flash Player、Java(TM)

3.2 軟/硬體結合設定

3.2.1 封包套件介紹

(本說明書附增 reacTIVision 免安裝程式包。

請解壓縮到新增 reacTiVision_table 資料夾。

儲存位置，本說明書範例在 C 槽磁碟 (路徑位置: c:\\reacTiVision_table\)。

如下圖捷徑 1_reacTiVision，2_run，3_touch。

及主程式包 reacTiVision_Project(Red Issue)。

還有 Java(TM)驅動程式(本說明書附增 Downloads 資料夾內)

捷徑 1_reacTiVision.exe

(原檔位置: "c:\\reacTiVision_table\desktop\reacTiVision_Project(Red

Issue)\reacTIVision-1.4\reacTIVision.exe")

使用 reacTIVision.exe 這個軟體來讀取桌面上所有阿米巴標籤並判斷他們的

ID 為何。

捷徑 2_run.exe

(原檔位置: "c:\\reacTiVision_table\desktop\reacTiVision_Project(Red

Issue)\TUIO_Flash\run.bat")

此圖為一程式，其可介於 reacTiVision 與 flash 之間，協助傳遞訊息。

註:如果使用機台沒安裝 Java(TM)驅動程式。此程式原本會啟動，但是卻因為

無偵測效果而自動關閉。

捷徑 3_touch.fla

(原檔位置: "c:\\reacTiVision_table\desktop\reacTiVision_Project(Red

Issue)\TUIO\AS3\src\touch.fla")

reacTIVision.exe 操控快

捷建說明圖

動畫檔對應主程式，已寫好 ActionScript 程式。可輸出與 Java(TM)和 reacTiVision

程式軟體結合運用。( 檔案格式相容版本 Flash

CS4 )

3.2.2 投影畫面尺寸及位置定位

(1)如下圖打開 ca3.jpg 圖檔，並縮放置全投影視窗大小。

(2)如下圖取可擦拭的筆，在被投影桌面上的 ca3.jpg 圖檔，照著圖上的網格整桌面

定位點繪。

(3) 執行 1_reacTiVision.exe 會出現如下列圖示兩視窗。左圖為控制說明右圖之顯示

及定位系統…等模式之功能列表，右圖為顯示攝影機所看到之影像視窗。

照左圖控制說明的 ColibrationEngine 欄內，啟動如右圖顯示類似 ca3.jpg 圖檔

的定位網格。

(4) 如下圖手或超亮的手電筒壓著或擺設在剛才桌面上的點繪。然後照左圖的控制說明

ColibrationEngine 欄內操控。

鍵盤快捷建 a、b、c、d來切換 reacTiVision 軟體畫面上呈現的點。

以及鍵盤方向建↑、↓、←、→來控制 reacTiVision 軟體畫面上點的移動。

以上操控，在 reacTiVision 軟體畫面上呈現剛才手或超亮手電筒壓著的痕跡，調

整隨著 reacTiVision 軟體畫面上的點，局布切換移動定位整個畫面網格。

註：攝影機照射與投影畫面尺寸角度不同，無做定位設定導致動態介面與貼有阿米

巴標籤上物體偏離中心。

(5) 投影畫面尺寸及位置定位完成。如下圖

3.2.3 攝影機調校

3.2.4 動畫檔對應設定

攝影機調校如左圖。鍵盤快

捷建 o來啟動 VideoSource

內容視窗。對比亮度和清晰

度調校出能夠任何環境下完

整偵測出阿米巴標籤 ID。

優先繪製好 Flash 動畫界面(任何版本都可以)，確認檔名，輸出設定

FlashPlayer8.0 版本以上(.swf)檔案。

開啟 touch 檔。執行 MyTouchApp 程式檔，程式內容原本設定完成，及可在各種

tagID 號碼目標內更換繪製好 Flash 動畫界面所輸出的 FlashPlayer 檔名。

如下圖

(原檔位置:"c:\\reacTiVision_table\desktop\reacTiVision_Project(Red

Issue)\TUIO\AS3\src\touch.fla" 檔案相容 FLASH CS4 )

(FlashPlayer 動畫界面檔儲存路徑位置:

" c:\\ reacTiVision_table\desktop\reacTiVision_Project(RedIssue)\

TUIO\AS3\src" )

註：繪製設計 Flash 動畫界面軟體程式語言版本必要設定成 ActionScrip3.0 以上。

導致為無法執行。

四、使用執行步驟說明

1.打開 reacTiVision_table 資料夾，可看見執行檔捷徑 1_reacTiVision，2_run，

3_touch，如下圖。

2.依序執行 1_reacTiVision，2_run，3_touch 執行檔。

(1)執行 1_reacTiVision.exe 會出現如下列圖示兩視窗。

左圖為控制右圖之顯示及定位系統…等模式之功能列表，右圖為顯示攝影機所看到之影

像視窗。

(2)執行 2_run.exe 會出現如下列圖示視窗。

此圖為一程式，其可介於 reacTiVision 與 flash 之間，協助傳遞訊息。

(3)執行 3_touch.exe 會出現如下列圖示視窗。

此為一般開啓 flash 之視窗，但內含相關對應之程式檔。

3.延續使用 3_touch.exe 執行後之視窗(flash)。

(1)點擊紅框圈選的部份 PROPERTIES 之後，會跳出一浮動視窗如下(2)之圖示。

(2)點擊浮動視窗之紅框部份 Edit class definition，執行 MyTouchApp 程式檔

，其左方視窗會出現程式畫面如下(3)之圖示。

(3)此視窗內部程式可調整 tag 與.swf 動畫檔之對應內容。

(4)設定好 tag 與.swf 動畫的對應後，點擊 Control/TestMovie 即可產生執行畫面。

(5)如果程式設定無誤，測試畫面亦無錯誤訊息，可開啓 Debug/Debug Movie 全畫面模

式，如下圖紅框點擊區，此方式之投影顯示畫面將不會出現視窗邊框。

互動桌體驗實況:

─ 互動桌外觀及體驗過程

透過阿 米 巴 標 籤 圖 卡 辨 識，將 虛 擬 資 訊 展 示 於 互 動 桌 上，其目的除了提升資訊之快速有效傳

遞外，也添增使用者的體驗樂趣。

擴增影像互動展示系統融合「虛擬」介面與「實體」物件於一體。互動展示系統操作簡易，讓使用者

不須透過複雜的學習過程，便能輕易上手，同時也提升體驗的效率與趣味性。