MakeCode coding tutorial - bitty audio prank

micro:bit code

Your micro:bit needs the right code on it for you to be able to control the sounds made by the bitty audio prank app. As with all our apps you can simply download and install a hex file which we've prepared for you or you can code it yourself, following the Bitty Software coding tutorial below. We recommend you code it yourself!


goals

Our micro:bit code needs to:

  1. Keep track of whether or not something is connected to the micro:bit over Bluetooth
  2. Keep track of whether the micro:bit is being held with the LED display facing up or facing down
  3. Detect and respond to button A or button B being pressed or both buttons A and B being pressed at the same time
  4. Send events with event ID 9005 and a distinct value of 1 - 6 over Bluetooth according to the button(s) pressed and whether the micro:bit is face up or face down

before you start

You should install the bitty audio prank application on your phone so you can use it for testing whilst you develop the micro:bit code. Check the bitty audio prank page for details of where to find the app for your type of phone or tablet.


step 1 - MakeCode

Go to the MakeCode web site in your web browser and start a new project by clicking Projects and then selecting New Project.


step 2 - make sure your project includes the right packages

Packages

MakeCode groups function blocks together in 'packages' and these are listed in a column. A screenshot of a list of MakeCode packages is shown above. By default it includes a package called 'Radio' which allows you to use a very simple wireless capability of the micro:bit. 'Radio' is good if you want to broadcast a short string of characters to any / all micro:bits around. It's not Bluetooth though and is not what we need for the bitty audio prank application. Importantly, a MakeCode project cannot include both the Radio package and the Bluetooth package at the same time. Add the Bluetooth package to your project using the Settings menu (cog icon on the right) and when prompted to, choose to remove the radio package.


step 3 - create some variables

We're going to use variables to tell us whether or not something has connected over Bluetooth, to indicate whether the micro:bit is oriented display-side up or down and to contain different values to use when we send events over Bluetooth. So the next job is to create those variables and set their initial values:

From within the "Variables" package, click on the "Make a Variable" block and use it to create a series of variables, named audio1, audio2, audio3, audio4, audio5, audio6, EVENT_ID, connection and orientation. Then add a series of the "Set Item to 0" blocks to your "on start" block and set the variable names ad values as shown in the next figure:


step 4 - change the start-up message

Next, we'll add a start-up message to be displayed on the micro:bit when it starts.

In the Basic tray, click on the "show string" block to add it to your project. Change the text to "AUDIO PRANK" and drag the block to snap to the variable blocks above it.


step 5 - Bluetooth connection tracking

Now we'll use some of the blocks in the Bluetooth package to add connection tracking to our project. What we'll do is set the 'connection' variable to 1 whenever a connection is established and display "C" on the micro:bit display or we'll set the variable to 0 and display "D" if a connection gets dropped.

From the Bluetooth tray, click on the "on bluetooth connected" block and then the "on bluetooth disconnected" block to add them to your project. Then add "set variable" blocks and "show string" blocks as shown, inside each of the bluetooth connection event blocks.


step 6 - micro:bit orientation tracking

We'll also make sure that our 'orientation' variable gets set to 1 when the micro:bit is screen up and 2 when it's screen down.

From the Input tray, click on the "on shake" block to add it to your project. Click on the drop down list, which currently has "shake" selected and change the value to "screen up". Add a "set variable" block from the Variables tray to the "on screen up" event handler block and set its parameters to "orientation" and 1 respectively and as shown in the graphic. Right click on the new "on screen up" block and select "duplicate". Change the "set variable" block it contains so that it sets the "orietnation" variable to 2. Check that your blocks match those shown in the image.


step 7 - buttons

Our basic goal is to send events over Bluetooth whenever a button or buttons are pressed. So being able to detect and respond to buttons is key. MakeCode makes this easy for us.

That said, this is still where we have the most work to do. However, the action we take when button B is pressed is very similar to the action we take when button A is pressed and so is the action we take when both buttons A and B are pressed together. So we can make things a lot easier for ourselves if we complete the coding for button A in full and then use the Duplicate action to create copies for button B and buttons A+B and modify their attributes as needed.

Depicted above is the entire button event handler code for Button A. We'll start by adding an empty event handler and then fill in the other parts later.

Add an event handler for button A. You'll find button event handlers in the Input tray.


step 8 - conditions

After detecting button interactions, we need to check which way up the micro:bit is being held and whether or not we have a Bluetooth connection and only then can we decide whether to send an event or not and if so, what type of event.

Add conditions as shown to the "if" and "else if" blocks so it looks the same as the graphic. You'll find "if/else" blocks in the Logic tray along with blocks which test conditions like "connection = 1" and "orientation < 2". Note that you can adjust your if block by clicking on its settings (cog) icon and dragging Else If or Else blocks in to extend the structure of the block.

Start by adding a logical "and" block to your if condition. Then add "0 = 0" logic blocks to each operand of the logical "and" and finally, set the variables and values in each of the two conditions. You should now have an if condition that looks the way it needs to.


step 9 - events

So all that remains is to send events of the appropriate type, according to which button or buttons were pressed and which way up the micro:bit is facing. MakeCode also makes it easy to create and send events.

What we need to do is create an event with values which will vary according to the button pressed and the micro:bit orientation and... well, that's all we need to do. The way micro:bit's "runtime" code works is that any other system component which has said it's interested in events with these values will have the event sent to them as if by magic. And the bitty audio prank application tells the micro:bit it wants these events by sending details over Bluetooth. So just using the Raise Event block is all we have to do for a special event message to be sent over Bluetooth to our smartphone application. micro:bit really is very cool!

Add Raise Event blocks to the "if" and "else if" parts of your button event handler as shown above. You'll find the Raise Event block in the Control tray under Advanced.


step 10 - event handlers for button B and buttons A+B

Right click on the "on button A pressed" block and select "Duplicate". Drag this block into place under the button A event handler block. Change "A" to "B" so that it now says "on button B pressed". Repeat this to duplicate your button B event handler and change it so that it handles A+B so that it will run when both buttons are pressed at the same time.

Finally, you need to make sure you are using the right event values for the 6 conditions our 3 button event handlers cover between them. Button A creates events with value 'audio1' and 'audio4' depending on whether the micro:bit is screen up or down. Change the button B event handler so it uses event values 'audio2' and 'audio5' and do the same for button A+B so that the values used are 'audio3' and 'audio6'.


step 11 - final testing

You've now created the complete bitty audio prank micro:bit code using PXT. As with any software development, you need to test it carefully and fix any problems you find. Compile the PXT project and install the hex file. You'll need to forget any pairing details on your smartphone and go through the pairing process again (unfortunately!) but once you've done that you should be able to systematically test all the 6 conditions covering buttons A, B and A+B in each of the two orientations of screen up and screen down. Good luck and enjoy having fun with bitty audio prank!


if you get stuck

Take a close look at the solution here or go to our ready made MakeCode project, which you can review and edit. Look for anywhere where your project is different. And don't forget, make sure you've paired your phone and micro:bit properly.