A live dashboard

Open project · after lesson 2: Commands from the computer

Build both ends of a micro:bit gadget: the micro:bit measures something (light, temperature, movement) and sends it, and your own web page shows it live, changes how it looks when the reading crosses a line you choose, and has a button that sends the micro:bit a command.

The page talks to the micro:bit with microbit.js, which is already in the starter. In this preview it opens a pretend micro:bit (type the lines it would send). For the real thing, download the page and open it in Chrome or Edge with the micro:bit plugged in.

One way it could look. Yours will be different.

You'll use

These light up when your code uses them. Click one to see where you learned it.

The micro:bit

serial write serial read (on data received, read line)compare text (== "A")

The web page

JavaScript events (addEventListener)changing text (textContent)changing style from JavaScript (el.style.color = …)

The micro:bit

Try it yourselfYour edits are saved in this browser.

It takes a few seconds to load. Your work in this step is kept.

The web page

Try it yourselfYour edits are saved in this browser.

Milestones

Tick each one when it is true of your project. Nobody marks it: be honest with yourself.

The micro:bit sends a reading again and again, by name (serial write value).
My page shows the reading as it changes (try it with the pretend micro:bit).
My page changes how it looks when the reading crosses a line I chose.
A button on my page sends a command, and the micro:bit does something when it arrives.

Make it yours

Send two readings and show both.
Keep a list of the last ten readings on the page.
Try it with a real micro:bit: download the page and open it in Chrome or Edge.

Looking back

What was the hardest part, and how did you get past it?

Tick every milestone first.

A live dashboard

You'll use

The micro:bit

The web page

Milestones

Make it yours

Looking back

★ A live dashboard

★ A live dashboard

Built with

Milestones

The hardest part