Getting Started with scroll:bit and Microsoft MakeCode
scroll:bit is a grid of bright white LEDs that you can control with your micro:bit, making them do a bunch of stuff like displaying and scrolling text, simple animations, and more! We've designed it to be really easy to use: just plug your micro:bit into the slot, fire up Microsoft MakeCode, and away you go!
In this tutorial, we'll look at how to get up and running, how to display and scroll text and icons, control pixels, a simple animation, and lastly how to link in with the sensors on the micro:bit, by making a spirit level!
This tutorial is looooooong but each section, after the four sections on getting set up, should stand alone so you can dip in and out at your leisure. :-)
Connecting scroll:bit to your micro:bit
There's just one catch to connecting scroll:bit to your micro:bit; remember to have both the LEDs on scroll:bit (the grid with numbers along two sides) and the LEDs on your micro:bit (the 5x5 grid) the same way up when you plug the micro:bit in (as in the image above).
Push your micro:bit into the slot firmly until it won't go in any further. About half of the large holes on the bottom of the micro:bit should be sticking out of the top of the connector.
Nothing bad will happen if you plug in your scroll:bit the wrong way, so don't worry about getting it wrong!
Connecting your micro:bit to your computer
To code your scroll:bit and micro:bit, you'll need to connect them to your computer or tablet. You'll need a micro-USB cable to do this. If you don't already have one, you can get one here, or you can get a handy micro:bit accessories kit that has a micro-USB cable, battery pack, and batteries, here.
Plug the little end of the cable into the top of your micro:bit, and the big end into one of your computer or tablet's USB ports. You should see your micro:bit appear as a new drive called "MICROBIT". We'll use this later to drag our code onto, to transfer it across to the micro:bit.
Using Microsoft MakeCode
Microsoft MakeCode is a block-based coding system, where you drag, drop, and connect together different blocks to build your own code. We've made a MakeCode package to let you code your scroll:bit really simply.
It's great for a couple of reasons: first, you don't have to remember a bunch of complicated commands that will fail if you don't type them exactly correct and, second, it teaches you the principles of coding like conditionals, loops, and so on (don't worry if you don't know what those words mean yet) that you'll need as you get onto more advanced coding.
Let's jump into MakeCode! Open your web browser, and head to the following URL: https://makecode.microbit.org . Click on the big purple "New Project" button, give your project a name, and click on the "Create" button.
You'll see a window like the one below - this is the MakeCode editor. We'll very quickly go through how it's laid out.
The main part of the window has a little preview of the micro:bit itself that will show a simulation of your code (although not of scroll:bit), a list of the different types of code blocks in the middle, and a large grey area on the right where you'll stick the blocks together to build your code.
At the bottom, you can "Download" your code, name and save your project, undo or redo, and zoom in or zoom out on your code blocks.
Try clicking on a couple of the code block groups in the middle, like "Input" or "Math" to get an idea of the types of block that there are.
Adding the scroll:bit package
The first thing we'll do is to add the scroll:bit package, which will add a new menu item and set of blocks to that list in the middle of the MakeCode window.
Click on the "Advanced" tab in the middle to drop down all of the advanced menus, and then on "Extensions" to pop up the window where you can add new packages. Type "scrollbit" into the box, and press enter, then click on the scroll:bit icon to add the package.
You'll see that a new menu item called "Scroll:Bit" has appeared. Click on it, and you'll see all of the new blocks that have been added. We're going to start by looking at displaying text and icons on scroll:bit.
Note that you'll have to add the scroll:bit package again every time you create a new project.
In the Scroll:Bit blocks menu, click on the
scroll " " at brightness 128 with delay 50 ms block to add it to your code.
Now drag it into the
forever block, which is a loop that runs constantly
(in more advanced coding, this is called a
while True loop), so once it gets
to the end of the first scroll then it'll go back to the beginning and start
again, and so on, and so on...
Click on the set of empty quotation marks, and then type "Hello world!" in the box. We'll leave the brightness at 128, and the delay at 50ms (milliseconds), for now.
Now give your project a name (click in the box at the bottom middle), e.g.
hello-world, and then save it, which will download a file ending in
Move that file that's downloaded to the "MICROBIT" drive, and you'll see
the LED blink on the back of your micro:bit while it uploads your code to the
micro:bit. After a few seconds you'll see your text scrolling on the scroll:bit!
Here's how your project should look:
Try changing the text displayed, and the brightness and delay to see how the values affect the way that the text looks.
Let's start a new project. Click "Home" at the top and then
"New Project" to create a blank project. This means that you'll keep the
hello-world project we just made as it was.
You can display the same icons that you can display on the micro:bit's built-in LED display on scroll:bit, although with scroll:bit's wider display you can obviously display 3 of the 5x5 pixel icons across its display.
We'll start by displaying just one icon, and then try displaying three across
the whole display. Click on the
display icon block in the Scroll:Bit blocks
menu to add it to your code window, then drag it into the "on start" block.
Click on the icon to drop down the whole selection of icons and pick your
favourite to show. To actually display our icon on scroll:bit, we'll also need
to add a
display your changes block below (and connected to) our icon block.
Give your project a name (
icons?), save and download it, then move it to the
"MICROBIT" drive again. Once the code has uploaded, you'll see your icon!
Look at where it's displayed, at the top left corner. This is because the LEDs
on scroll:bit are numbered from the top left corner beginning at 0,0.
We'll try now to display three icons equally-spaced and centred across scroll:bit. Because the icons are 5x5 pixels and the display is 7 pixels high, we can have one blank row at the top and bottom to centre the icon, and because we are displaying three of the icons we can have one blank column between each of the icons. This means that every icon will be at row 1, and the columns will be 0, 6, and 12 respectively.
Right click on the
display icon block and then click "Duplicate" to make
a copy of it, then do it once more, so that we have three of them altogether.
Connect the three blocks to each other, making sure that the
display your changes block is still at the bottom.
On the first block, change the row to 1, and leave the column as 0. On the second, make the row 1 again, and the column 6, then on the third make the row 1 again, and the column 12. Change the icons to whatever you want!
Now save the project and upload it your micro:bit again. Don't the icons look pretty and nicely-aligned!?
Here's how the project should look:
Try to think about how you could move your
display icon blocks into the
forever loop and then fade the brightness up and down to make the icons pulse.
Start another new project. In this one, we'll look at controlling the individual pixels on scroll:bit using a loop. In code, loops let you repeat the same task over and over again, so that you only have to write one instruction and it gets repeated a number of times.
We're going to begin by lighting the pixels in the top row, one at a time. Each
pixel on scroll:bit has a set of coordinates, which is the column and row number
of that pixel, beginning in the top left corner at
0, 0 and ending in the
bottom right corner at
16, 6. Notice that they begin at 0 rather than 1; this
is something that you'll get more used to when you get more advanced in your
We'll be using the forever loop, which repeats the same set of instructions
forever, as the name suggests. Grab a
for index from 0 to 4 do block from the
Loops blocks menu, and the
number of columns block from the Scroll:Bit blocks
menu. Replace the
4 in the
for index... block with the
number of columns
Next, from the Scroll:Bit blocks menu, grab a
set pixel at col... block, and a
display your changes block. Put those blocks inside the the
do part of the
for index... block, as in the project below, and change the
by getting an
index block from the
Save and download your project to your micro:bit, and watch closely what happens!
Each time the
for index... loop runs, the
index variable increases, so it'll
start at 0, then 1, then 2, and so on, until it reaches 16, the number of columns.
But... we're not changing the row number, so it's only row 0 that gets filled up,
and we're not clearing the pixels that we've already lit, so once they fill up
once we can't see them filling up again.
Let's improve it, and make it light each pixel in turn on the first row, then the second row, and so on, so that it looks like it's scanning across the whole display.
Click on the Variables block menu and then "Make a Variable" and make two
new variables called
row. We'll be adding another
block inside the one that we already have to deal with the rows and the
Pull the existing
for index... loop out of the
forever block and put a new
for index... block inside the
forever block. Change the
to 4 to
to number of rows by getting the
number of rows block from the Scroll:Bit
blocks menu. Now put your other
for index... block inside the new one. Change
index on the first (outermost)
for block to
row by clicking on the
little arrow next to
index, and change the
index om the second
Lastly, change the
0 on your
set pixel... block to
row, so that each the two
for blocks loop the pixel that we're setting takes
the value that
col are at (they get bigger every time). Also add a
clear scroll:bit block from the Scroll:Bit blocks menu just above the
set pixel... block, so that any set pixels are cleared every time, meaning
that only one pixel is lit at any time. The whole thing should look like the
Save and download your project to your micro:bit. Does it do what you expect
now? Experiment with changing round the
row loops, and moving the
clear scroll:bit block to after the whole of the innermost
Linking with the micro:bit's sensors
The micro:bit has built-in sensors and buttons. We're going to turn the micro:bit and scroll:bit into a little spirit level that acts just like a real spirit level, except the bubble is an LED!
Because this example is quite complicated, even although it's just five blocks
forever loop, we'll show the
whole project first, then go
through how it works step by step.
If you've ever used a real spirit level, then you'll know that the little bubble inside moves in the opposite direction to the direction that you move the spirit level. So if you tilt one end of the spirit level down, then the bubble will move up to the other end. We'll make our spirit level do the same thing!
Because we want our spirit level to only ever show one pixel, then the very
first thing that we'll do inside our
forever loop is to
clear scroll:bit to
clear the last position that the pixel was in.
The next two lines work out which of the pixels to light, based on the values from the accelerometer on the micro:bit. Accelerometers are devices that can work out the acceleration acting on them at any one time in different axes of motion. That sound awfully complex, doesn't it? Well, in this case the accelerometer is just measuring the acceleration due to gravity in the x, and y axes, i.e. how much the board is being tilted in those directions.
Grab a couple of
set item to 0 blocks from the Variables blocks menu, and then
Make a Variable in the Variables menu and make two new variables
row. These will store our column and row pixels values that
we calculate. Click on the little dropdown arrow next to the
index on the
set index to... block, and change
index to the
row variables on
each of your two blocks respectively.
For each axis, the accelerometer will give a value between -1023 and +1023, with 0 being when the board is being held perfectly flat. We need to translate those values to numbers between 0 and 16 for the x axis, and between 0 and 6 for the y axis (the numbers of the pixels on scroll:bit).
Because of the negative numbers, we have to shift everything up by 1023 to make
all of the numbers positive. We do this by adding 1023, giving us numbers from 0
to 2046. From the Math blocks menu, get two
0 + 0 blocks. Also get two
acceleration (mg) x blocks from the Input blocks menu.
Replace the first
0 in both
0 + 0 blocks with the
and change one of them to
acceleration (mg) y, leaving the other as
acceleration (mg) x. Change the second
0 in both blocks to
To get the numbers into the ranges 0-16 and 0-6 we'd have to divide by 2046 then multiply by either 16 or 6, but we can simplify that a little by just dividing by 128 or 342 for the columns (x axis) and rows (y axis) respectively.
0 ÷ 0 blocks from the Math blocks menu, and replace the first two
with the two blocks we've built so far (
acceleration (mg) x + 1023 and
acceleration (mg) y + 1023), and replace the second
for the columns (x axis) and rows (y axis) respectively.
Last of all we do 16 minus or 6 minus those numbers we calculated to do the
flipping of the direction like a real spirit level. Use two
0 - 0 blocks from
the Math blocks menu and change them to
16 - acceleration (mg) x + 1023 ÷ 128
6 - acceleration (mg) y + 1023 ÷ 342, before connecting them up to the
set col to and
set row to blocks respectively. Phew!
We just need to add the two blocks that will actually display our pixel on
set pixel at col col row row to 128 block and
display your changes block from the Scroll:Bit blocks menu. Drop all of the
blocks into the
forever loop to keep it running... forever. Check the project
above to see how your finished project should look, in case you got lost along
Save and download your project to your micro:bit, then tilt your micro:bit and scroll:bit this way and that to see how it works.
This is just scratching the surface in terms of how you can use your scroll:bit. Things get really fun when you add a second micro:bit and another of our micro:bit add-ons like enviro:bit and use the radio to send data from one to the other.
Search above to find more great tutorials and guides.