網頁程設營

結合網頁和 Bit 板的設計

我們要使用 Konva 來開發一個如下圖所示的簡單應用。

按鈕 To Left 及 To Right 可以控制球往左和往右移動，stop 會讓球停下來。

之後我們會增加 Bit 板來控制球的移動。

Konva 程式

以下我們只說明程式碼中比較關鍵的部份，完整的內容和結果會放 jsFiddle 中，讀者可以詳細觀看。

HTML 部份

  • 要先設定一個容器元素給 Konva 使用。
  • 放置 3 個按鈕，並綁定每個按鈕的點擊事件給特定的函式 (定義在 JS 程式碼中)。
<div id="container"></div>
<button onclick="toLeft()">← To Left</button>
<button onclick="stopBall()">stop</button>
<button onclick="toRight()">To Right → </button>
1
2
3
4

CSS 部份

  • 設定容器元素的寬度、高度以及邊框。
  • 設定容器元素的外距，讓容器元素置中。
  • 按鈕屬於行內元素，可以設定 HTML body 的 text-align 屬性為 center，讓這些按鈕也擺放在正中間。
#container {
    width: 600px;
    height: 200px;
    border: solid blue 1px;
    margin: 0 auto;
}

body {
    text-align: center;
}
1
2
3
4
5
6
7
8
9
10

JS 部份

建立舞台 (stage)、圖層 (layer) 和球。

var width = 600;
var height = 200;
var stage = new Konva.Stage( {
  container: 'container',
  width: width,
  height: height
});
var layer = new Konva.Layer();
var ball = new Konva.Circle({
  x: width/2,
  y: height/2,
  radius:30,
  fill:'blue'
});
layer.add(ball);
stage.add(layer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

建立動畫，這邊我們使用 dir 變數來控制球的移動方向，如果為 1 表示往右移，-1 表示往左移，0 表示停止。

var dir = 0;
var speed = 200; // pixels per second

var aniBall = new Konva.Animation(function(frame){
  if (dir != 0) { // not stop mode
    ball.move({x: dir*speed*frame.timeDiff/1000, y:0}); // change x
    if(ball.x() >= width) { // when the ball reach the right end
      aniBall.stop() // stop animation
      dir = 0;       // reset direction
      ball.x(width); // calibrate ball position
    }
    if(ball.x() <= 0) { // when the ball reach the left end
      aniBall.stop() // stop animation
      dir = 0;       // reset direction
      ball.x(0);     // calibrate ball position
    }
  }
}, layer);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

最後，加上按鈕的動作。

function toRight() {
  dir = 1;         // right direction
  aniBall.start(); // start animation
}

function toLeft() {
  dir = -1;        // left direction
  aniBall.start(); // start animation
}

function stopBall() {
  dir = 0;         // stop mode
  aniBall.stop();  // stop animation
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完成結果


讓 Webduino Bit 參一腳

現在要加上一些程式碼，讓 Webduino Bit 的按鈕也可以控制球的移動。基本上，只有 HTML 和 JS 的部份需要修改。

HTML 部份

我們需要在 head 區段插入 Webduino Bit 相關的 JS 代碼。將以下這幾行程式碼放入 head 區塊中，可以放在插入 konva.min.js 的代碼前。

<script src="https://bit.webduino.io/blockly/components/jquery/dist/jquery.min.js"></script>
<script src="https://bit.webduino.io/blockly/dist/lib/webduino-all.min.js"></script>
<script src="https://bit.webduino.io/blockly/dist/MessageTransport.min.js"></script>
<script src="https://bit.webduino.io/blockly/dist/webduino-blockly.min.js"></script>
<script src="https://bit.webduino.io/blockly/dist/lib/firebase.min.js"></script>
<script src="https://bit.webduino.io/blockly/dist/lib/runtime.min.js"></script>
<script src="https://bit.webduino.io/blockly/components/webduino-bit-module-button/BitButton.js"></script>
<script src="https://bit.webduino.io/blockly/components/webduino-bit-module-button/BitButton-blockly.js"></script>
1
2
3
4
5
6
7
8

JS 部份

將以下的程式碼加入到上面 JS 的部份。這邊 buttonA 按下的事件會呼叫 toLeft(), buttonB 按下的事件會呼叫 toRight()，如果兩個鍵同時按下，則呼叫 stopBall()。

var buttons = 0; // save button status

boardReady({board: 'Bit', device: 'bit77730e', transport: 'mqtt'}, function (board) {
  board.samplingInterval = 250;
  btnA = getPullupButton(board, 35);
  btnB = getPullupButton(board, 27);
  btnA.on('pressed', function () {   // press button A
  	buttons += 1;                    // status +1
    if (buttons == 1) { toLeft(); }  // only left button
    else { stopBall(); }             // two buttons
  });
  btnB.on('pressed', function () {   // press button B
  	buttons += 2;                    // status +2
    if (buttons == 2) { toRight(); } // only right button
    else { stopBall(); }             // two buttons
  });
  btnA.on('released', function () { buttons -= 1; }); // update status
  btnB.on('released', function () { buttons -= 2; }); // update status
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

結果

注意：除了頁面按鈕之外，這個頁面只能使用 我的 Bit 設備 來控制。點選開啟 jsFiddle，把設備 ID 改成你的來試看看。



練習

把上面 Bit 頁面的版本改成你自己的版本，並嘗試修改頁面內容或效果。

← Bit 水平儀 →