In this Instructable, we will build an interactive mBot with JavaScript. With Johnny-Five framework, we are able to program robotics with JavaScript. A web interface based on Socket.io will be set up to interact with mBot. We can play different sounds and push a ball horizontally on the web interface depending on the distance between sonar sensor on mBot and obstacle. The motor speed could be adjusted from the slider on the web interface. So, let’s get started!

Step 1: Initial Setup

1. Get a mBot with Bluetooth module from Makeblock, follow the user manual and assemble your mBot.

2. Follow the instruction on https://github.com/Makeblock-official/mbot_nodebots and install dependencies.

3. Install socket.io and express with commands npm install socket.io@1.3.6 and npm install express@2.5.1.

Step 2: Program the MBot

MBot is programmed with JavaScript based on Johnny-Five framework in this project. Basically, we will use motors, sonar sensor and leds on the mBot. Check the APIs and examples in the following websites to get detailed information:

Motor:
http://johnny-five.io/api/motor/

https://github.com/Makeblock-official/mbot_nodebots/blob/master/examples/motors.js

Sonar sensor:
http://johnny-five.io/api/proximity/

https://github.com/Makeblock-official/mbot_nodebots/blob/master/examples/sonar.js

Leds:
https://github.com/Makeblock-official/mbot_nodebots/blob/master/examples/leds.js

You can download the attached file to see all codes. Please make sure the sonar sensor is plugged into port 2.

move.js
Download

Step 3: Create a Web Interface

In this section, bootstrap-slider and CreateJS are used to set up the web interface. You can find their detailed information in the following websites:

http://seiyria.com/bootstrap-slider/

http://createjs.com/getting-started

Different sounds will be played depending on the distance between sonar sensor and obstacle, and then the red ball will move accordingly. Motor speed and distance are displayed on the web interface.

You can download the attached file to see all codes. Unzip the file, copy the pubic file and paste it into your project file.

public.rar
Download

Step 4: Test and Have Fun

1. Pair your laptop with Bluetooth module on the mBot, you can follow the instruction on https://github.com/Makeblock-official/mbot_nodebots (see Bluetooth module section).

2. Turn on mBot, run the move.js with the command node move.

3. Open your browser(Chrome suggested), input localhost:3000 in the address bar and press enter.

4. Use up, down, left, right and space keys on your keyboard to control the mBot. We are ready to play musical mBot, change motor speed and interact with ball on the web interface.