[ English ] [ 日本語 ]

Web Bluetooth example using BBC micro:bit

Note

• The support for Web Bluetooth API may be limited to Chrome (>= 56) or Opera (>= 43).
• The following contents are verified on macOS 10.14 using Chrome 77 and Bluetooth Explorer included in Additional Tools for Xcode 10.2.

System Structure

Device Side

Your code written in Blocks/JavaScript using Microsoft Makecode

micro:bit runtime

micro:bit device

Browser Side

Your code written in JavaScript

Web Bluetooth API

Chrome (>= 56) or Opera (>= 43)

Preparation

Device Side

1. Launch any browser on your PC.

2. Open Microsoft Makecode for micro:bit site.

3. Create a New Project.

4. Add extension Bluetooth from Advanced -> Extensions if it is not listed. Note that incompatible extension Radio will be removed when you add Bluetooth.

5. Switch editor mode from Blocks to JavaScript and replace the existing code with the following.

   bluetooth.onBluetoothConnected(function () {
       basic.showIcon(IconNames.Yes)
   })
   bluetooth.onBluetoothDisconnected(function () {
       basic.showIcon(IconNames.Square)
   })
   bluetooth.onUartDataReceived(serial.delimiters(Delimiters.NewLine), function () {
       str = bluetooth.uartReadUntil(serial.delimiters(Delimiters.NewLine))
       basic.showIcon(IconNames.Heart)
       basic.pause(200)
       basic.showIcon(IconNames.Yes)
       bluetooth.uartWriteString("Received " + str + "\n")
   })
   let str = ""
   bluetooth.startButtonService()
   bluetooth.startLEDService()
   bluetooth.startUartService()
   basic.showIcon(IconNames.Square)

6. Open Project Settings and change paring method from JustWorks pairing (default) to No Pairing Required. This setting is required for this experiment.

7. Name the project (e.g., BLE) and save it. The .hex file (e.g. microbit-BLE.hex) for flashing to the device is automatically saved to your Downloads folder.

8. Connect your micro:bit device to a USB port on your PC and make sure that the usb storage named MICROBIT is mounted.

9. Copy the downloaded .hex file to the usb storage.

10. The device shows a square icon if it's ready for a Bluetooth connection.

Browser Side

1. Clone the repositry (web-bluetooth-example-using-microbit).

Operations

1. Launch Chrome or Opera and open source/index.html in the cloned repositry.
2. Make sure that the device shows a square icon. Reset the device if it shows a yes (checkmark) icon.
3. Press Connect button on the browser. Choose a device named BBC micro:bit [.....] from the list on the dialog box.
4. When connection is established, Connection Status field on the browser shows Connected. Also, the device shows a yes (checkmark) icon.
5. Press button A or B on the device. State changes are reported from the device and shown on Button Status field on the browser.

Documentation

To generate the documentation of JavaScript part, run JSDoc (github.com) as below with jsdoc.json file in the project root. JSDoc 3 or higher is required.

$ jsdoc -c jsdoc.json
$ open jsdoc/index.html

References

Bluetooth on micro:bit

• micro:bit Bluetooth profile overview (lancaster-university.github.io)
• micro:bit Bluetooth profile reference (lancaster-university.github.io)
• MakeCode Bluetooth reference (makecode.microbit.org)

Web Bluetooth

• Web Bluetooth API (mozilla.org)
• Web Bluetooth Samples (googlechrome.github.io)
• Web Bluetooth (webbluetoothcg.github.io)

JavaScript

• JavaScript (mozilla.org)
• JavaScript Tutorial (w3schools.com)

© 2019 Softgraph, Inc.