4. 實作結果
4.1. 網頁上傳數據到 IoTtalk
圖 4-1 網頁的初始頁面. 圖 4-2 點選圖 4-1 Humidity 方框後的頁面
網頁的初始畫面會有三個方框（圖 4-1），分別對應濕度，酒精和紫外線三種 感測器，根據點選的方框，會進入到相對應的頁面，圖 4-2，點選 Humidity 方框 後，進入到濕度的頁面，網頁會去向 IoTtalk 註冊，註冊成功後 IoTtalk 會回傳給 網頁設備名稱（圖 4-2 的 a），之後網頁便會去向 APP 要求濕度、酒精和紫外線的 數據，如果數據取得成功，便會顯示在網頁上，此時只會顯示所點選圖 4-1 的方 框所對應的數值（圖 4-2 的 b），同時網頁也會將三者的有效數據上傳到 IoTtalk 上，從圖 4-3 可以知道網頁有成功將數據上傳到 IoTtalk 上。
圖 4-3 IoTtalk 網站上看到網頁上傳的資料，a 為 IoTtalk 回傳給網頁的設備名稱，b 為濕 度的數據值
4.2 網頁和書法動畫互動
一進入到方框點選後進入的畫面（圖 4-2），網頁會傳送訊息給書法動畫，告 訴書法動畫接下來溝通會傳送何者的數值（圖 4-5 的 a，濕度:enter1，酒精:enter2，
紫外線:enter3）。當網頁接收到 APP 傳來的數據後，會和書法動畫溝通，將圖 4-1 所點選方框的數據，傳給書法動畫，書法動畫會依據何種數值選擇何種播放方式 和播放速度，接下來會以傳送濕度數據為例子，網頁會去判斷使用者何時對 MorSensor chip 吹氣（吹氣溼度會增加），當使用者吹氣後，網頁會將濕度數值傳
送給書法動畫（圖 4-5 的 b），書法動畫接收到數值後會去播放一小部分的書法動
畫（圖 4-4），等待下次網頁傳送數據，等到書法動畫全部播放完畢後，書法動畫 會回傳 ACK 給網頁，網頁收到 ACK 後會回到初始畫面（圖 4-1）。
圖 4-6，為使用者對 MorSensor chip 吹氣，網頁判斷到使用者吹氣後，傳送濕 度數值給書法動畫，播放一小部份動畫。
圖 4-7，為使用者用手電筒對 MorSensor chip 照光，當紫外線數值改變，網頁 便會將紫外線數值傳送給書法動畫，書法動畫會改變其播放速度，紫外線數值愈 低，動畫播放速度愈慢。
圖 4-4 播放一部分的書法動畫
圖 4-6 使用者對 MorSensor chip 吹氣
圖 4-7 使用者對 MorSensor chip 照光
5. 結論和未來研究
本篇論文使用物聯網的技術讓人與物可以互動。透過一個行動應用(Mobile APP)，我們將一個特別設計的感測器 MorSensor 的數據上傳到 IoTtalk 物聯網平 台，讓需要收集此數據的使用者可以使用，另外網頁也透過 WebSocket 和書法動 畫溝通，讓觀賞者可以使用 MorSensor 和書法動畫互動。本論文描述如何在 Android 平台實作 APP 軟體以取得 MorSensor 的數據，並實作如何將數據上傳到 IoTtalk 平台上，最後以書法動畫為例來展示觀賞者如何利用 APP 和網頁來控制 畫框的書法藝術。
5.1 結論
我們說明如何實作，透過 APP 在手機背景服務下取得 MorSensor Chip 的數據，
並將數據傳送給網頁，讓網頁上傳數據到 IoTtalk 平台上，也透過網頁讓觀賞者 可以使用 MorSensor Chip 和書法動畫互動，增加其觀賞的趣味性。
5.2 未來研究
未來研究可以讓書法動畫直接接到 IoTtalk 平台，成為 ODF，網頁不需要另 外透過 WebSocket 和書法動畫溝通，書法動畫可以直接透過 IoTtalk 平台取得網 頁上傳的數據資料，其架構圖如圖 5-1。
圖 5-1 IoTtalk Mobile App (IDF) 和 Calligraphy (ODF) 連接 IoTtalk 的架構圖
參考文獻
[1] Yi-Bing Lin, Yun-Wei Lin, Chang-Yen Chih, Tzu-Yi Li, Chia-Chun Tai, Yung-Ching Wang, Fuchun Joseph Lin, Hsien-Chung Kuo, Chih-Chieh Huang, Su-Chu Hsu, ” EasyConnect: A Management System for IoT Devices and Its Applications for Interactive Design and Art”, IEEE 2015
[2] Wen-Shu Lai, Yi-Bing Lin, Chung-Yun Hsiao, Li-Kuan Chen, Chao-Fan Wu, Shu-Min Lin, ” FrameTalk: Human and Picture Frame Interaction through the IoT Technology”
[3] Chung-Yun Hsiao, Chih-Chieh Huang, Yi-Bing Lin, Yun-Wei Lin, “Flower Sermon:
An Interactive Visual Design Using IoTtalk”
[4] Kelly Yap, Clement Zheng, Angela Tay, Ching-Chiuan Yen, Ellen Yi-Luen, “Word Out! Learning the Alphabet through Full Body Interactions”
[5] Tsugunosuke Sakai, Haruya Tamaki, Yosuke Ota, Hiromi Tominaga, Fusako
Kusunoki, Horoshi Mizoguchi, “Interactive objet d’art based on IoT technology”,
IEEE 2016[6] Yi-Bing Lin, Yun-Wei Lin, Chun-Ming Huang, Chang-Yen Chih, Phone Lin, ” IoTtalk: A Management Platform for Reconfigurable Sensor Devices ”, IEEE 2017 [7] YI-Bing LIN, Li-Kuan Chen, Min-Zheng Shieh, Yun-Wei Lin, Tai-Hsiang Yen, ” CampusTalk: IoT Devices and Their Interesting Features on Campus Applications”, IEEE 2018
[8] Yi-Bing Lin, Min-Zheng Shieh, Yun-Wei Lin, ”DormTalk: Edge Computing for the Dormitory Applications on Campus”
[9] Yi-Bing Lin, Chun-Ming Huang, Li-Kuan Chen, Gang-Neng Sung, Chih-Chyau Yang, ” MorSocket: An Expandable IoT-based Smart Socket System”, IEEE 2018 [10] WebSocket server 的 library