步驟 7

JavaScript 程式碼是我們處理程式邏輯的核心，我們希望它可以處理使用者輸入的資訊，然後啟動板子，甚至希望板子斷掉重連之後，還可以偵測出來並回復正常運作。以下分幾個段落講解，最後再給出完整的程式碼。

變數宣告。我們加上一些變數，用來儲存使用者要輸入的資料。另外最後加了兩個輔助變數：sending 用來判斷目前是否在傳送資料，myboard 用來綁定我們的開發板。

var Name;
var photocell;
var Did;
var Url;
var Tab;
var Interval;
var myData;
var sending = false;
var myboard = null;

1
2
3
4
5
6
7
8
9

撰寫 start 函數，當使用者輸入所有資料，並按確定之後，我們就執行這個函數，主要分幾個動作：
1. 讀取使用者的輸入。
2. 把輸入值設定到相對應的輸出元素。
3. 隱藏輸入段，顯示輸出段。
4. 啟動開發板。

start = function () {
    // 取值
    Name = $("#iname").val();
    Did = $("#idid").val();
    Url = $("#url").val();
    Tab = $("#tab").val();
    Interval = parseFloat($("#interval").val());
    // 設值
    $("#name").text(Name);
    $("#did").text(Did);
    $("#sinterval").text(Interval);
    // 切換顯示
  	$("#myinput").css('display', 'none');
  	$("#myoutput").css('display', 'block');
    // 啟動開發板
  	RunBoard();
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

撰寫 sendSwitch 函數，這個函數主要是用來切換是否要傳送資料，處理前要先檢查 Url 和 Tab 是否已有設定：

sendSwitch = function () {
    if (Url==="" || Tab==="") {
        alert("URL 或 Tab 未正確設定！");
        return;
    }
  	sending = !sending;
  	if (sending) $("#bsend").text("暫停傳送");
  	else $("#bsend").text("繼續傳送");
};

1
2
3
4
5
6
7
8
9

撰寫 sendData 函數，這個函數主要是傳送資料的問題，傳送前要檢查是否可傳送。

sendData = function () {
    if (myboard && sending) {
        var myData= {};
        myData.sheetUrl = Url;
        myData.sheetName = Tab;
        myData.column0 = new Date();
        myData.column1 = Name;
        myData.column2 = photocell.detectedVal;
        writeSheetData(myData);
    }
};

1
2
3
4
5
6
7
8
9
10
11

撰寫 boardTask 函數，這個函數主要處理板子要執行的任務，分幾個部份：
1. 板子相關的設定和處理動作。
2. 設定資料處理計時器，每隔一段時間檢查是否要傳送資料。
3. 設定錯誤處理函數：如果板子斷線的話，把 myboard 設成空值，輸出 ERROR 訊息，清除資料處理計時器，重新嘗試啟動板子。

boardTask = function(board) {
    // 板子相關的設定和處理動作。
    console.log("boardTask Called!");
    board.samplingInterval = 200;
    photocell = getPhotocell(board, 0);
    photocell.measure(function (val) {
        photocell.detectedVal = val;
        $('#lightvalue').text(val);
    });
    console.log(Interval);
    // 設定資料處理計時器
    dataTimer = setInterval(sendData, Interval*1000);
    // 設定錯誤處理函數
    board.on('error', function (err) {
        console.log("board Error Called!");
        board.error = err;
        myboard = null;
        clearInterval(dataTimer);
        $('#lightvalue').text("ERROR，請重啟設備！");
        RunBoard();
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

撰寫 RunBoard 函數：把 myboard 綁定到一個新增的 Webduino 板子，等待板子連線並啟動相關工作。

RunBoard = function () {
    console.log("myboard, DEVICE = ", myboard, Did);
    myboard = new webduino.WebArduino({board: 'Smart', device: Did, transport: 'mqtt', multi: true});
    myboard.once(webduino.BoardEvent.READY, boardTask);
}

1
2
3
4
5

整合以上所有函數，如果有問題，可參考下面的提示連結，完成之後試著檢查執行結果。（如果連線之後斷線的話，等出現了重啟設備的訊息再試著重連）

← 步驟 6 步驟 8 →

# 步驟 7

步驟 7