Introduction

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

screenshot
screenshot

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/mb-new to start a new project in the Code Kingdoms 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 draw block from the code area (on the left) inside the onStart event.
screenshot
screenshot
  • If you make a mistake, you can drag the code block and a bin will appear, drag the code block over the bin and the bin will open, let go of the block to delete it.
screenshot
screenshot
  • To create an image to display, click on the word Pattern. You can choose an image to display, or even draw your own.
screenshot
screenshot
  • To test your code, click ‘Run’ in the menu on the left the screen.
screenshot
screenshot
  • You should then see your image on the micro:bit.
screenshot
screenshot
  • You can also test your code on the micro:bit itself! To do this, click ‘Compile’ 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 drag the .hex file onto the micro:bit drive in the file manager.

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! To save your project, click ‘My Scripts’ near the bottom of the menu on the left.

screenshot
screenshot

Select your ‘Interactive Badge’ project and click the ‘save’ button.

screenshot
screenshot

This will a download your script in a .jsz file, which you can save anywhere you like.

To load your project on another computer, click ‘Import Code’ and select your .jsz file.

screenshot
screenshot

You can then get back to your code by clicking ‘edit’.

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. To run code when a button is pressed, you’ll need to add a new event.

Click ‘Add Event’ and then choose the onPressA event.

screenshot
screenshot
screenshot
screenshot

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

  • Drag another draw block inside your new event, and select the happy face pattern.
screenshot
screenshot
  • Test our your new code in the editor, by clicking ‘run’. 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 create a new event to do this.

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 draw block to your onPressA event, with a neutral face.
screenshot
screenshot
  • If you run this code to test it, you’ll notice that you don’t see the first pattern. To fix this, you’ll need to add a wait block between the two images being displayed.

To find the wait block, click the ‘Language’ icon on the left of the editor.

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

This is how your code should look:

screenshot
screenshot
  • You’ll also need to animate your sad face. The easiest way to do this is to copy the blocks you’ve just created. Drag the neutral face draw block and the wait block to the left of the editor, into the ‘Copy to snippets’ area.
screenshot
screenshot
  • If you click the ‘Snippets’ icon, you should see your 2 blocks.
screenshot
screenshot
  • You can then drag these blocks into your onPressB event. This is how your code should look:
screenshot
screenshot
  • Test your code, and you should see your animated happy and sad faces!
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