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.

We'll begin with the menubar at the top. The "Home" tab returns you to the previous screen and the "Share" tab lets you publish and share your projects. The "Blocks/JavaScript" slider lets you code with blocks and then view the equivalent code in JavaScript, or vice versa. Last, there's a help tab and a settings tab.

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.

Scrolling text

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 .hex. 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.

Displaying icons

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.

Controlling pixels

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 coding.

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 block.

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 col to index by getting an index block from the Variables menu.

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 col and row. We'll be adding another for index... block inside the one that we already have to deal with the rows and the columns.

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 the 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 for block to col.

Lastly, change the index and 0 on your set pixel... block to col and row, so that each the two for blocks loop the pixel that we're setting takes the value that row and 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 project below.

Save and download your project to your micro:bit. Does it do what you expect now? Experiment with changing round the col and row loops, and moving the clear scroll:bit block to after the whole of the innermost for block.

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 inside the 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 click on Make a Variable in the Variables menu and make two new variables called col and 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 col and 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 acceleration... blocks, and change one of them to acceleration (mg) y, leaving the other as acceleration (mg) x. Change the second 0 in both blocks to 1023.

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.

Get two 0 ÷ 0 blocks from the Math blocks menu, and replace the first two 0s with the two blocks we've built so far (acceleration (mg) x + 1023 and acceleration (mg) y + 1023), and replace the second 0s with 128 and 342 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 and 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 scroll:bit: a 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 the way!

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.

More ideas

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.

That's all folks!

Search above to find more great tutorials and guides.