JYW Garden - Webduino

步驟 3

這次要回到我們的 jsbin 專案，把剛才的程式碼移過來使用，並且加上一些格式設定，讓畫面好看一點。

  1. 把開發平台的 Javascript 程式碼找出來（按積木頁右邊的JavaScript）：
var Name;
var photocell;
var Did;

function get_time(t) {
  var varTime = new Date(),
    varHours = varTime.getHours(),
    varMinutes = varTime.getMinutes(),
    varSeconds = varTime.getSeconds();
  var varNow;
  if (t == "hms") {
    varNow = varHours + ":" + varMinutes + ":" + varSeconds;
  } else if (t == "h") {
    varNow = varHours;
  } else if (t == "m") {
    varNow = varMinutes;
  } else if (t == "s") {
    varNow = varSeconds;
  }
  return varNow;
}

Name = window.prompt('您的姓名');
Did = window.prompt('設備號碼');

boardReady({board: 'Smart', device: Did, transport: 'mqtt', multi: true}, function (board) {
  board.samplingInterval = 1000;
  photocell = getPhotocell(board, 0);
  photocell.measure(function (val) {
    photocell.detectedVal = val;
    document.getElementById('demo-area-01-show').innerHTML = ([get_time("hms"),Name,photocell.detectedVal].join(''));
  });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

  1. 把程式碼搬進我們的 jsbin 專案中，注意量測到的數值要綁定到我們 HTML 顯示數值的元素（元素的 id 要相同）。執行後應該會顯示類似以下的畫面：

  2. 接著要把姓名、時間和量測數值分幾個地方顯示。先在 HTML 加上姓名和設備編號的元素。

    <p>您的姓名為 <span id='name'></span>，設備 ID 為 <span id='did'></span></p>
    <p>設備的亮度值為：<span id="lightvalue">尚未連線</span>
1
2

  1. JavaScript 部份，要把變數值綁定到元素上。注意我們使用 document.getElementById('name').innerHTML=Name 這樣的語法來改變元素的值，但其實 Webduino 已經引入 jQuery，我們也可以使用 jQuery 的語法來改變元素值，會更容易一點，語法像這樣：$('#name').text(Name)。把姓名、設備編號以及量測數值，分別綁定到各自對應的元素。

  2. 完成之後，顯示頁面時會先跳出詢問視窗，讓使用者輸入姓名和設備編號，接下來應該會顯示類似以下的畫面：

← 步驟 4 →