小綠行動導覽實習
學 校 ：南開科技大學 系 所 ：數位生活創意系 老 師 ：林正敏教授 1
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統實習課程
Intelligent living laboratory @ NKUT
教育部智慧生活整合性人才培育計畫
Outline
• • • •
實驗目的 實驗器材料單 小綠人行動導覽系統App 實驗成果
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
實驗目的
• 本實驗導入無線感知網路、擴增實境與 Android系統平台，研製了一款情境感知 導覽系統，讓展覽品也能很生活化的、 擬人化的與參觀者相互互動。 • 本實驗課程，將以概括的方式介紹行動 小綠人的製作過程與操作。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
Outline
• • • •
實驗目的 實驗器材料單 小綠人行動導覽系統App 實驗成果
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
實驗材料單 • 本實驗所需器材元件如下表所示:
編號
器材名稱
數量
1
感測信號採集板
2
2
ZigBee CC2430
N
3
BT-232B-E(藍芽RS-232傳輸器)
1
4
TI CC2430 模擬器
1
5
RS-232公對公轉接頭
1
6
AR標籤圖示
N
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
Outline
• • • •
實驗目的 實驗器材料單 小綠人行動導覽系統App 實驗成果
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(1) • 首先我們先來了解本行動導覽App之系統架構圖、功能簡介表、 案例圖與類別圖。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(2) 功能 選單
功能描述
最新 消息
管理員可發佈展覽館的最新消息至Server端，Server端 將最新消息之文字內容轉換至網頁給參觀者於APP內瀏覽 得知。
留言 版
參觀者可針對展覽館的任何疑問發佈留言，該留言將由 管理員回覆留言。
展場 資訊
此功能設計將蒐集館周邊感測器之數據，依據不同的感 測值內容，系統會提供穿著與防曬上建議給準備前往的 參觀者，一個穿著與防曬上的小叮嚀於網頁上給參觀者 在APP內瀏覽得知。
TOP10
依據參觀者對展覽品的喜愛度，系統將所有加分統計後， 並列出參觀者所喜愛的前10名展覽品，於網頁上，給參 觀者於APP內瀏覽得知。
此功能會自動跳出距離參觀者最近的展覽品選單給參觀 者選擇，並做該展覽品之簡介，亦可透過擴增實境與展 覽品分身拍照與對展覽品喜愛程度給予加分動作。 Intelligent living laboratory 行動 導覽
左表格為本行動 導覽系統App之功 能簡介表。
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(2) 功能選單
程式語言
最新消息
以c#撰寫UI介面，再以jsp顯示網頁呈現。
留言版
以jsp撰寫與呈現。
展場資訊
以c#撰寫感知數據收集UI介面，再以jsp顯示網頁呈 現。
TOP10
以c#撰寫展覽分數收集UI介面，再以jsp累計分數並 顯示網頁呈現。
行動導覽
以JAVA撰寫Android UI介面
上表格為本行動導覽系統App所使用程式語言表。 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(12)
情境感知導覽系統案例圖 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(13) AndARActivity
myWeb ConnectedThread
1
+setNonARRender(r: OpenGLRender): void +getArtoolkit(): ARToolkit
+onCreate()
+registerARObject(o: ARObject): void 0..1
BluetoothService
DeviceListActivity -mReceiver +doDiscovery() +mDeviceClickListener()
1
ARtoolkit
+run()
+start() +write() +getState() +connect() +connected() +stop()
ARRender
1
1
Navinfo
0..1
+msetup() +onActivityResult() +sendMessage() +onOptionsItemSelected()
ZbNavigation
0..*
AugmentedModelViewerActivity +onCreate()
+init(): void +draw(): void
0..*
+myListener() +myResID()
+draw(): void +initGL(): void +stepupEnv(): void
CustomObject +init(): void +draw(): void
CustomRender 0..1
情境感知導覽系統類別圖 Intelligent living laboratory
OpenGLRender
ARObject
+draw(): void +setupEnv(): void +initGL(): void
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
Android
本行動導覽App結合了四大 技術項目。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 本實驗課程，所製作的行動小綠人是透 過每個展覽品發送ID方式讓位在周圍的 行動導覽攜帶器接收，透過攜帶器將ID 以藍芽通訊轉送給Android智慧型裝置接 收，當Android智慧型裝置收到某展覽品 ID時將顯示該ID所對應的展覽品簡介。 • 而這之間的ZigBee傳送距離將由下頁簡 報所介紹。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(3)
實測CC2430晶片收送距離示意圖 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 本行動導覽App實驗課程，在擴增實境 部份，為了讓參觀者可與虛擬展覽品3D 分身合影所設計之功能，示意圖如下圖 所示。 • AR辨識流程圖如下頁簡報所示。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(16)
AR辨識流程圖 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 在AR設計流程上，第一步驟必須先將3D 物件繪製出來，最後再將3D物件匯出成 mlt與obj檔；第二步驟使用ARToolkit製 作自己的AR圖示標籤，最後轉換出patt 檔；第三步驟開啟AndAR開放式原始碼 至Eclipse內做編輯，將3D物件與AR圖示 標籤匯入，並進行創建3D物件角色與修 改AndAR程式碼，如下頁簡報圖所示。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(5)
AR設計流程 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 第二步驟用任何一款繪圖軟體設計AR標 籤圖示，AR標籤圖示外框需要為黑色邊 框，而中間需要為白色區域，白色區域 內可設計不同的圖案做為不同虛擬圖像 所代表的3D虛擬物件，AR標籤圖示的形 狀官方網站建議須為正方型，且以黑白 圖案為佳。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 在設計AR標籤圖示時，整個AR標籤圖 示的大小會影響到辨識距離，越大的AR 標籤圖示能辨識的距離就越遠，反之越 小就越近。一般造成AR標籤圖示無法讓 攝影鏡頭辨識原因有：AR標籤圖示中的 圖案複雜性過高、攝影鏡頭與AR標籤圖 示之間的俯視角度、環境燈光不足或反 光等等因素都會導致AR 3D虛擬物件顯 示失敗。 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 應用繪圖軟體將設計好的圖案放入黑色框 內也就是白色區域，即可使用列表機影印 出來，再透過ARToolkit資料夾內所附屬的 mk_patt.exe 進 行 掃 瞄 與 產 生 patt 檔 ， mk_patt.exe進入後將所列印的圖案放在攝 影鏡頭前面，程式會自動辨識黑框範圍， 如有辨識到，會與下圖一樣呈現紅綠色相 間的外框，如簡報下頁之AR標籤圖示辨 識掃瞄圖所示。 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(6)
AR標籤圖示辨識掃瞄 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(7)
AR標籤圖示命名 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(8)
AR標籤圖示更改副檔名 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(9)
匯入patt格式檔 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(10)
匯入obj與mtl格式檔 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(11)
模擬心跳動電路圖 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(15)
• 本行動導覽App實驗課程，在模擬心跳 動部份，為了讓參觀者可以更貼近與展 覽品互動，我們以燈光變化設計了LED 展覽品情感表達器，當展覽品所配置的 LED觸摸器沒有參觀者去握住它，它就 會快速閃爍紅燈(表示缺乏溫暖感)，當 參觀者用雙手像敷雞蛋方式握住LED觸 摸器，LED燈將恆亮紅燈，表示收到參 觀者溫暖，成品如下頁簡報所示。 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(14)
LED展覽品情感表達器 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(14)
import方式至Eclipse下，即 可看到整個行動導覽App code。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(20)
行動導覽App加分發送程式碼，會以sendMessage的方法 夾帶一串字串方式，透過藍芽通訊將其字串發送出去， server端收到“BU:A$ID:01#S:1@”這行字串，會進行 字串的處理。上行server端處理後為:展館:A 展品編 號:01 喜愛分數:1分。 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(19)
開啟ZigBee傳輸程式
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(17)
ZigBee傳輸主程式碼
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(18)
可修改ZigBee Channel與PAN_ID Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
小綠人行動導覽系統App(4) 如果對AR擴增實境有興趣可以至GOOGLE Code download andar專案下來，透過 import方式於Eclipse內編輯。這專案適合 初學者學習與研究。
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
Outline
• • • •
實驗目的 實驗器材料單 小綠人行動導覽系統App 實驗成果
Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
實驗成果 (1)
行動小綠人首頁畫面
Intelligent living laboratory
藍芽提示連接畫面
教育部智慧生活整合性人才培育計畫
實驗成果 (2)
展覽品選單畫面
Intelligent living laboratory
展覽品簡介畫面
教育部智慧生活整合性人才培育計畫
實驗成果 (3)
絕代香蕉AR分身圖
Intelligent living laboratory
精美茄子AR分身圖
教育部智慧生活整合性人才培育計畫
實驗成果 (4)
Intelligent living laboratory
Server端介面
教育部智慧生活整合性人才培育計畫
實驗成果 (5)
資料庫畫面 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
實驗成果 (6)
情境感知導覽系統硬體陳列 Intelligent living laboratory
教育部智慧生活整合性人才培育計畫
實驗成果 (7)
情境感知導覽系統硬體陳列 Intelligent living laboratory