Using the Buttons and LED Matrix on micro:bit

Difficulty
Easy
Steps
11

The micro:bit comes with two on-board pushbuttons called momentary pushbuttons, labelled 'A' and 'B' as well as an LED matrix display. 

In this guide, you'll learn how to use the two pushbuttons and the LED display using the MakeCode editor.

Complete this guide to get comfortable with using the pushbuttons and LED display.

Parts Used in This Guide

Buy

Step 1  The pushbuttons

The micro:bit has two on-board momentary pushbuttons, displayed at the front of the board and positioned on either side of the display. They are labelled 'Button A' and 'Button B' and are the primary input devices on the micro:bit.

These buttons are unlike the switches you would use to turn on a light. Unlike toggle switches, the pushbuttons on the micro:bit are known as momentary switches. This means it only stays 'on' only as long as it is being pressed. On the other hand, a toggle switch stays 'on' and only goes from 'on' to 'off' when you toggle it again.


Step 2  The LED Matrix Display

The micro:bit's LED screen is composed of 25 red LEDs arranged in a 5x5 grid. 

It is similar to a desktop computer where the monitor may be 1,920 columns of 1,080 pixels. But unlike a desktop monitor, the micro:bit's display has just five columns of five pixels. This is a total of 25 pixels and it's enough to get started with displaying messages, bar graphs or a simple game! Shortly, you will learn to use the display using MakeCode.

For more information on the micro:bit and its features, take a look at 'Meet the micro:bit'.

Step 3  Use the Makecode Editor

Let's get started with using them!

Step 4  Use the 'on button ... pressed' block

To start off, let's see how we can use one push button on the micro:bit, specifically Button A.

  • Click on the 'Input' tab and get out a 'on button ... pressed' block. 
  • By default, it will be set to button A, so you can leave it as is.

Step 5  Use the 'show icon ...' block


  • Next, click on the 'Basic' tab to get a 'show icon ... ' block
  • Place this block within the 'on button A pressed' block.
  • If you uploaded this code to the micro:bit now and pressed button A, the icon will be displayed on the LED matrix. But first, let's add code for the other button.

Step 6  Use another 'on button ... pressed' block

Being able to use one pushbutton is great, but the micro:bit has two pushbuttons. Adding in the second button is as simple as repeating what you’ve already done:

  • So get out another 'on button ... pressed' block.
  • Set it as ' on button B pressed'
  • Grab another 'show icon ... ' block
  • Click on the icon to change it to a different one.

Jump to step 11 to upload this code to the micro:bit!

Step 7  Display strings with the LED matrix display

  • Click on the 'Basic' tab again, this time getting out a 'show string "Hello!" block.
  • Click on "Hello!" to change the string. Use "Hello World!" instead.
  • Upload this code to the micro:bit as before. 

You might notice that the "Hello World!" string will display forever while the micro:bit is powered on. Click on the buttons A or B, and the icon will briefly display after "Hello World!"

Step 8  Show string on button press

This time, let's get "Hello World!" to display only on button press. There is actually a third option for reading buttons, too. You can read both at the same time. So let's get "Hello World!" to show when buttons A and B are pressed together.

  • Get out another 'on button A pressed' block from the 'Input' tab. 
  • Click on 'A' to change it to 'A+B'. 
  • Move the 'show string "Hello World!"' block from 'forever' to 'on button A+B pressed'.

Step 9  Using the 'plot x ... y ...' block

Another way to use the LED display is by using the 'plot x ... y ... ' block, this comes in handy when displaying graphs.

  • Try it out for yourself, get a "plot x ... y ...' block from the 'Led' tab.
  • Enter the coordinates, 'x 1 y 1' and place it in the 'forever' block
  • Upload this code to the micro:bit!

The LED on x:1 y:1 will light up.

Step 10  Change the brightness

You can also control the brightness of the LEDs being displayed. 

  • To do so, use a 'plot x ... y ... brightness ...' block.
  • To see the difference, use another 'plot x ... y ... brightness' block.
  • Set the first block's brightness to be '255' and the other as '35'.

Step 11  Upload the code to micro:bit

To upload the code to the micro:bit, follow these steps:

  • Click the download button in the bottom left corner of the screen.
    • This will download a hex file (computer program file)  which the micro:bit can read.
  • Next, plug in your micro:bit, this will reveal a USB on your computer.
  • Copy across the downloaded file to the micro:bit by dragging and dropping it to the MICRO:BIT drive
  • The micro:bit will flash as the code is being uploaded. Once done, unplug the micro:bit.