Introduction: Felt Micro:bit Name Badge - Craft + Coding!

About: Science Oxford creates the very best in live science events for families and adults, designs and delivers inspiring science learning activities for schools and gives training and support to teachers in the pro…

The most important thing you need at a summer camp is a cool name badge!

These instructions will show you how to program a BBC micro:bit to show everyone who you are, then create and customise a felt badge to contain it.

Steps 1 & 2 are about programming the micro:bit - you need to choose whether to use the text-based MicroPython (Step 1) or the drag-and-drop MakeCode (Step 2).

Steps 3-6 are about making the felt badge - you need to choose whether to use glue (Step 4) or thread (Step 5) to put it together.

This activity is part of Day 1 of Robocamp 2019, our week-long robotics summer camp for young people aged 10-13.

Supplies

Steps 1-2 (Programming):

  • BBC micro:bit
  • USB to microUSB data cable
  • Computer

Steps 3-6 (Felt Badge):

  • Felt
  • Hot glue gun
  • micro:bit battery pack
  • (optional) laser cutter
  • (optional) print-out templates
  • (optional) PVA glue
  • (optional) embroidery thread, needle & scissors

Step 1: Programming the BBC Micro:bit - Using MicroPython

If you want to use MakeCode instead, skip this step!

You have a few options for writing MicroPython code for your micro:bit:

These instructions assume you are using Mu.

Open Mu, and plug your micro:bit into your computer. Mu should recognise that you are using a micro:bit and select micro:bit 'Mode', but if it does not, change it manually (Picture #1).

Type these lines of code into Mu:

from microbit import *

while True:
    display.scroll('Hello')

Now click the 'Flash' button from Mu's toolbar, to send your new code to the micro:bit.

This will not work unless the micro:bit is plugged in!

The yellow light on the back of the micro:bit will start to flash. When it has finished, your code has been transferred.

You should now have the message 'Hello' scrolling across your micro:bit's screen!

This will continue forever, because 'while True' is a repeat loop. The indentation (horizontal spacing) before 'display.scroll' indicates that this line is inside the forever loop.


If there are any errors in your code, the micro:bit will show you an error message instead of the code you wanted!

Try to read this message to see which line number the error is on, then debug your code.

Check:

  • spelling
  • Capital Letters
  • colons :
    • indentation

Edit your code so that instead of scrolling 'Hello', it scrolls your name.

Hint: The message to be displayed must be inside both the brackets and the speech marks/apostrophes!

Now to expand your code!

Underneath the code you have written, keeping the indentation so that your new code is inside the loop as well, add these lines:

    display.show(Image.HAPPY)
    sleep(500)

'sleep' is important, it stops the loop from repeating too quickly. Without it, you won't be able to see the picture, as it will disappear immediately.

Once you have got it working, try out some other images. My personal favourite is DUCK!

A list of available images can be found here: https://microbit-micropython.readthedocs.io/en/latest/tutorials/images.html

To get some ideas to expand your code, for example using the micro:bit's buttons, download the attached help sheets. Start with the Inputs & Outputs sheet, then move on to the project ideas.

The next step repeats these instructions for the MakeCode Editor. Skip this step, and move on to Step 3 to make your felt badge.

Step 2: Programming the BBC Micro:bit - Using MakeCode

To use MakeCode, head to the editor here: https://makecode.microbit.org/

Create a new project, then click on the 'Basic' menu to find the 'show string' block. Drag this block inside the 'forever' block (Picture #1 & #2).

The emulator on the left should show the message 'Hello' scrolling across the micro:bit's screen!

To transfer this code onto your micro:bit, click the 'Download' button on the bottom left. When your file has downloaded, drag and drop it onto the micro:bit, which should show up as a removable drive (like a USB stick).

This will not work unless the micro:bit is plugged in!

The yellow light on the back of the micro:bit will start to flash. When it has finished, your code has been transferred.

You should now have the message 'Hello' scrolling across your micro:bit's screen!

This will continue forever, because you have added the code to a 'forever' loop. Try moving the code to 'on start' instead to see the difference.

Edit your code so that instead of scrolling 'Hello', it scrolls your name.

Now to expand your code!

Underneath the 'show string' block, add 'show icon', then 'pause' to your 'forever' block (Picture #3).

'pause' stops the loop from repeating too quickly.

You will notice that when your message repeats, it is attached to the icon! To force it to remove the icon before showing your message, look for the 'clear screen' block. This is hidden in the 'more' section of the 'Basic' menu (Picture #4).

When you are happy with your code on the emulator, 'Download' and transfer your new code to your micro:bit.

Step 3: Preparing the Felt Badge

There are a few ways to proceed with this step.

Option 1 - laser cutter (Picture #2 & #3)

This is the quickest and neatest option, but requires the use of a laser cutter.

Use the svg files, see below, with your laser cutter (for our machine we converted them to dxf format first).

Option 2 - print-out templates (Picture #4)

Print out the pdf templates, see below, in the shapes you want.

Pin or tape them to your felt, and cut around them.

Option 3 - freehand! (Picture #5)

Use your micro:bit as a guide to draw your own shape on piece of felt.

You will need to create both a front and a back piece - with holes for the micro:bit's screen and buttons on the front.

Now you have got your two pieces of felt, you are ready to make your badge!

Step 4: Creating the Felt Badge - Using Glue

If you want to sew your badge together instead, skip this step!

You can use a hot glue gun, or PVA glue for this step.

Hot glue dries much faster than PVA, but can look messy (and you have to be quick!).

Place your micro:bit in position on your back piece.

Spread glue on the bottom, up to your micro:bit, and around the sides of the back piece of felt. Leave the top free, so that you can remove the micro:bit easily. (Picture #2 & #5)

Remove your micro:bit and, while the glue is still hot / wet (you'll need to be quick if using a hot glue gun!), push the front piece into position and press down. (Picture #3 & #6)

If you are using PVA, give it a good squeeze, then put to one side and leave to dry for a few hours.

If you are using hot glue, you are ready to move on to the next step straight away.

Slot your micro:bit in position and check that it fits.

The next step repeats these instructions to sew your badge instead of glueing it. Skip this step, and move on to Step 6 to finish your badge.

Step 5: Creating the Felt Badge - Using Thread

Thread about 25cm of embroidery thread onto your needle, and tie a knot in the end.

If you are using a laser cut piece of felt, the holes will be cut for you - you will start to sew from the top of one side.

If you do not have holes pre cut, you will need to choose your own starting point - the top will stay unsewn, so the micro:bit can be taken in and out. Start from one side, approximately level with the top of the micro:bit when it is in position. (Picture #2)

Take the top piece of felt (with the micro:bit holes) and thread your needle through the first hole. (Picture #3)

Holding the felt so that the needle is at the front, place the back piece of felt into position. Your knot will now be hidden inside the two pieces of felt.

Bring the needle round to the back, and push it through the second hole to the front, going through both pieces of felt. (Picture #4)

Pull the stitches fairly tight to make them secure (Picture #5) and repeat (Picture #6) until you get all the way around.

For the last hole, push the needle through the back piece only, then remove the needle from the thread.

Separate the embroidery thread into two thinner strands, and tie in a knot (Picture #7). Your final knot should be hidden between the two pieces of felt.

Slot your micro:bit in position and check that it fits.

If necessary, put some hot glue inside the bottom of your badge, to fill the space and stop the micro:bit slipping down. (Picture #9)

Step 6: Finishing Touches

You should now have a felt name badge, either sewn or glued together, and some working code.

Plug your battery pack into the micro:bit to check that everything works fine:

  • Does your code run successfully?
  • Are you happy with your code, or do you want to add more features?
  • Is your felt badge glued or sewn securely?

The micro:bit's battery pack has a fairly sturdy wire so, by glueing it to the back of your name badge, you have a ready-made lanyard loop!

Unplug your battery pack then use a hot glue gun to glue it to the back of your badge. (Picture #3 & #4)

This is easier if you remove the micro:bit first!

When it has dried, plug the battery pack back in and attach to a lanyard.

You can now wear your name badge with pride!

Or, try some of these ideas to customise it further.

  • Make your micro:bit more secure by adding a velcro closure.
  • Make a loop from a strip of felt instead of using the battery wire.
  • Add googly eyes or sequins, or draw on the felt with markers.
  • Glue a pin badge to the back instead of attaching it to a lanyard.
DIY Summer Camp Contest

Participated in the
DIY Summer Camp Contest