書法動畫

這段 code 是用來將 Humidity, Alcohol, UV 顯示在網頁上，並將數值傳給 IoTtalk 的 server 和透過 websocket 傳給 calligraphy 的 websocket server。

Line 2-12 是在處理 humidity 的部分。

Line 2 如果 humidity 有數值且數值大於 0 便會執行 Line 3-12。

Line 5-7 如果 mainsection 等於 1，便會呼叫 user_using()去判斷使用者何時吹氣，

當吹氣時便會將濕度值透過 websocket 傳給 calligraphy 的 websocket server

（此 mainsection 變數會在使用者點選要顯示 humidity, alcohol 或 uv 的資料而改 變其數值，選擇 humidity，mainsection 的數值就會是 1，選擇 alcohol，mainsection 的數值就會是 2，選擇 uv，mainsection 的數值就會是 3）。

Line 8-10 如果 mainsection 等於 1 且 humidity 的欄位尚未在網頁上顯示，便會顯 示其欄位。

Line 11 呼叫 csmPush()將 humidity 數值透過 http put 傳給 IoTtalk 的 server。

Line 13-23 是在處理 uv 的部分，和 Line2-12 類似。

Line 17 呼叫 uv_dect()去判斷 uv 數值是否有改變，有改變便會透過 websocket 傳 給 calligraphy 的 websocket server。

Line 24-34 是在處理 alcohol 的部分，和 Line2-12 類似。

Line 28 呼叫 find_max()去找 alcohol 的最大值，找到後透過 websocket 傳給 calligraphy 的 websocket server。

3.3 書法動畫

圖 3-15 Browser 和 Calligraphy 溝通的 Functional Blocks

Step E: sendData()透過 WebSocket 去傳送數值給 calligraphy 的

Line 1 void webSocketServerEvent(String msg){

Line 2 float temp = 0.0;

這段 code 是匯入 websocket library[10]改寫 webSocketServerEvent 此 function，用 來處理當 websocket server 接受到訊息後要如何運作。

Line 5-17 是在處理第一個網頁傳給 server 的訊息，當判斷封包內的訊息含有 enter 的字串，便會再去判斷訊息是否包含 1 或 2 或 3，若包含便會把變數 mainsection 設為此數值，並把 starting 設為 true 和 enterGame 設為 false，代表準備開始，但 尚未開始動畫(一開始網頁和 websocket server 連線後會先傳第一個訊息給 server，

此訊息根據網頁的 mainsection 這個變數而不同，如果 mainsection 等於 1，此訊 息便會是 enter1)。

Line 19-29 是在處理之後網頁傳給 server 的訊息，接下來網頁只會傳給 server 數 字的訊息，所以 Line 19 先判斷訊息是否為數字，如果是的話，會在 Line 20 把

Line 25-28 代表此數值是和 humidity 相關，會把 speed 設為 1，和 write 設為 true(write 為是否能開始部分播放動畫的布林值)。

Line 17 enterGame = false;

Line 52 } 動畫，Line 13-15 每當 timer_transit 值小於 time_transit，便會把 timer_transit 值加 1/frameRate，為了讓初始畫面漸漸淡去（因為 Line 9

tint(225,map(timer_transit,0,time_transit,225,0))，隨著 timer_transit 的值上升，初始 畫面會愈來愈透明），Line 16-22 當 timer_transit 值大於 time_transit，代表初始畫 面已消失（才可以在之後呈現動畫的圖），所以會在 Line 21 將 mode 變為 1，才 能執行 Line 29-53 的程式，Line 24-27 當 enterGame 為 false 時，載入初始畫面（因 為 Line 9 tint(225,map(timer_transit,0,time_transit,225,0))，隨著 timer_transit 的值上 升，初始畫面會愈來愈明顯）。

Line 29-53 當 mode 為 1 時，Line 31 呼叫 VideoCal()依照 mainsection 為多少，決定 播放動畫的顯示方式（如果 mainsection 為 1，動畫播放會播放一小部分後等待下 一次網頁傳的訊息決定是否播放下一小部分的動畫，反之 mainsection 非 1，便會 一次把動畫播完），Line 32 呼叫 VideoSpeed()，依照變數 speed 的值改變播放動畫 的速度，Line 33 呼叫 VideoDraw()開始播放動畫圖，Line 35-49 如果 leaveGame 或 videoEnding 為 true，Line 36-38 為了要讓已播放完的動畫圖漸漸消失，Line 39-48