Introduction

You are going to make an interactive badge, that will show your mood to your friends.

Instructions: If you’re reading this online, press A on the micro:bit below to display a happy face, and B to show a sad face.

Step 1: Displaying an image

Let’s start by showing an image on your micro:bit when it’s powered on.

Activity Checklist

  • Go to jumpto.cc/pxt-new to start a new project in the MakeCode (PXT) editor. Call your new project ‘Interactive badge’.
screenshot
screenshot
  • You should now see the code editor. To draw an image on your micro:bit when it’s powered on, drag a show leds block from the code area (on the left) inside the start block.
screenshot
screenshot
  • To create an image to display, click on leds that you want to light up:
screenshot
screenshot
  • Your code will run automatically in the emulator on the left:
screenshot
screenshot
  • You can also test your code on the micro:bit itself! To do this, click ‘Download’ on the menu at the left of the screen.
screenshot
screenshot

This will create and download a .hex file that will run on your micro:bit.

  • Use the USB cable to plug your micro:bit into your computer. You should then see your micro:bit appear in your computer’s file manager as a USB drive.
screenshot
screenshot
  • If you are using the micro:bit uploader then the .hex file will be automatically copied to the micro:bit. Check with your volunteer if you’re not sure.

Otherwise you will need to copy the .hex file to the micro:bit.

If you are using Internet Explorer you can choose Save as from the menu that appears at the bottom of your browser and then select the micro:bit drive:

screenshot
screenshot

If you are using Google Chrome you can click on the arrow after the downloaded file and choose ‘Show in folder’ and then drag the highlighted file to the micro:bit drive:

screenshot
screenshot
  • A light on the back of your micro:bit will flash while the file is being copied. Once this has stopped your program will run. You can click the reset button on the back of your micro:bit to restart the program.
screenshot
screenshot
  • You should now see your image on the micro:bit. If you prefer, you can remove the USB cable from your micro:bit, and attach the battery. The program will be saved on the micro:bit.
screenshot
screenshot

Save your project

You don’t need an account to save your stuff! Your project will automatically be saved in the browser, you can click on Projects to see your projects.

You can also click save to download your project as a .hex file which contains your project:

screenshot
screenshot

To load your project on another computer, click ‘Projects’ and then ‘Import file’ and select your .hex file.

screenshot
screenshot

Step 2: Displaying a happy face

Let’s show a happy face on your micro:bit when the ‘A’ button is pressed.

Activity Checklist

  • So far, you’ve only run code when the micro:bit is powered on. You can also run code when a button is pressed.

Drag an ‘on button pressed’ block from input and make sure ‘A’ is selected:

screenshot
screenshot

Any code added inside this block will run when the ‘A’ button on your micro:bit is pressed.

  • Drag another show leds block inside your new event, and draw a happy face pattern.
screenshot
screenshot
  • Test our your new code in the emulator. Press the ‘A’ button and you should see a happy face on your micro:bit:
screenshot
screenshot

You can also test out your new code on your micro:bit.

Save your project

Challenge: Displaying a sad face

Can you make your micro:bit display a sad face when the ‘B’ button is pressed? You’ll need to use another ‘on button pressed’ block to do this and select ‘B’.

screenshot
screenshot

Save your project

Step 3: Creating a simple animation

Let’s create a (very) simple animation for your happy and sad faces.

Activity Checklist

  • Add a second show leds block to your on button A pressed block, with a neutral face.
screenshot
screenshot
  • If you run this code to test it, you’ll notice that the pattern changes quickly. For a longer delay, you’ll need to add a pause block between the two images being displayed.
screenshot
screenshot

To choose how many milliseconds to wait, click the down-arrow and enter a number. 1000 milliseconds is 1 second, so 250 milliseconds is a quarter of a second.

  • You’ll also need to animate your sad face. The easiest way to do this is to duplicate the blocks you’ve just created. Right-click on a block to duplicate it. Note that the PXT editor just duplicates one block at a time (not multiple blocks like Scratch.)

  • You can then drag these blocks into your on button B pressed block. This is how your code should look:

screenshot
screenshot
  • Test your code, and you should see your animated happy and sad faces when you press button A and B.
screenshot
screenshot

Save your project

Challenge: Create your own interactive badge!

Create your own badge - you can use any images or animations you like!

Save your project