Web Programming Camp

Combined Web and Bit Design

Let's create a very simple application like follows by using Konva.

The button To Left and To Right control the ball to move left and right. The button stop will stop the moving.

Later we will use Webduino Bit board to control the moving.

Konva program

Here we only show the key parts of the coding. And at last we will show the complete code in jsFiddle.

HTML part

  • We need to set a container for Konva.
  • Add 3 buttons and assign the click event of each button to a specific function (defined in JS code).
<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 part

  • Set width and height for the container and add a border.
  • For the container, set margins to put the container in center.
  • The buttons are inline elements. Set body's text-align to center to put these buttons in 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 part

Create the stage, layer, and ball.

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

Create the animation. Here we use dir variable to control the moving direction of the ball. It is 1 for right move, -1 for left move, and 0 for stop.

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

Finally, Let's create the button actions.

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

Complete result


Enable Webduino Bit

Now we want to add codes to enable the Webduino Bit function, that is, enable the Bit buttons to control the ball. Basically, only HTML and JS parts are needed to modify.

HTML part

We need JS codes for Webduino Bit in head section. Insert these lines before 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 part

Add the following code to the JS part. Here we will bind buttonA to toLeft(), buttonB to toRight(). And if we press two buttons simultaneously, we will call 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

Result

Note that this result can only be controlled by my Bit device. Jump to jsFiddle and change the Device ID to enable your Bit device.



Exercise

Modify the Bit page version to suit for your Bit board. Try to modify the page content or effects by yourself.

← Bit Level →