Streaming live sensor data from the BBC micro:bit to a web page

For this demo, we're going to:


We're going to use a TCS34725, sold on Adafruit. The wiring is simple: just like in the clock demo, we need to connect the sensor's four pins: SDA, SCL, 3V and GND.

the pinout of the micro:bit

the pinout of the micro:bit

The sensor has a very bright, white LED. It's used to illuminate the target and make sure the right color is captured. You can turn it on by connecting the sensor's LED pin to 3V.

Programming the micro:bit

For my demo, I cloned the microbit-touchdevelop project, then replaced main.cpp with the following program:

#include "MicroBitTouchDevelop.h"
#include "TCS34725.h"

using namespace touch_develop;
using namespace micro_bit;

bool enabled = false;

void app_main() {
  forever([=] () {
    if (enabled) {
      uint16_t r, g, b, c, k;
      tcs34725::getRawData(&r, &g, &b, &c);

      uBit.serial.printf("%d, %d, %d, %d\r\n", r, g, b, c);
  onButtonPressed(MICROBIT_ID_BUTTON_A, [=] () {
    enabled = true;
    /* tcs34725::setGain(tcs34725::TCS34725_GAIN_4X); */
  onButtonPressed(MICROBIT_ID_BUTTON_B, [=] () {
    enabled = false;

// vim: set ts=2 sw=2 sts=2

After running yotta update then yotta build, I had the binary, ready to flash, in build/bbc-microbit-classic-gcc/source/microbit-touchdevelop-combined.hex. If you don't have a local environment setup, you can also use TouchDevelop and compile the program from there.

Flash the program on the micro:bit, then open up a serial terminal and see the micro:bit output the readings from the color sensor (serial instructions here).

Reading the serial from a web page

You need a special chrome extension that we wrote to read the serial data from JavaScript. The extension is available on GitHub, but is not yet published on Chrome's app store. Clone the repository, then follow the developer instructions to install our addon.

Once the addon is installed, navigate to the microbit-chrome directory. You need to customize the demo.js file to connect to the extension with the right id (look up in chrome://extensions to see which one is yours). Once you're all done, run an http-server from the microbit-chrome directory. For instance:

npm install -g http-server
http-server .

then, visit demo.html at http://localhost:8080/demo.html.


You can do more demos, such as read the accelerometer's data in real-time from TouchDevelop. Once the Chrome extension makes it to the app store, we should be able to have more tutorials!

BBC micro:bit data streaming from TouchDevelop on Vimeo.