After a quick review of the hardware, we'll fire up a micro:bit and write our first program. All you'll need for this tutorial is a micro:bit and a micro-USB lead. There's no software to download because we write code from within the web browser!
G'day, today I'll show you how to get started with your Micro:bit. So we will take a quick look at the hardware features, and then we will create a program start to finish. Let's get started.
On the top side of the board we have 2 user input buttons and 5x5 LED matrix, so that will make a nice user display, and we also have some general purpose input and output pads, and they are alligator clip friendly. Or if you have 4mm banana plugs, you can use those aswell, so that gives you two options to make a sturdy and easy connection. The other side of the board is mostly just filled with some small ICs, but among those is a magnetometer, so you can read the direction of the Earth's magnetic field, like a compass, or an external magnet even. There's also an accelerometer so you can tilt the micro:Bit and use that as some user input, or detect shaking or tapping. There's also a Low Energy Bluetooth Radio on there so you can have micro:bits interacting with each other wirelessly and you can even program it wirelessly.
Let's take a quick look at this graphical programming environment, so we have, on the right-hand side a big empty field where we develop our code, and on the left is our menus of commands. So this on start, I guess that almost a loop symbol, but it only runs once. This on start chunk here that is a piece of code that runs a single time on startup, and this forever loop is the main body of code that is going to run forever or at least run for as long as we power our micro:bit. So let's just take a quick look at what we can do, I quite like that LED matrix, so I'm going to look for something to program that. There are no outputs so maybe it's in basic. Okay, so we can show LED, so I'll drag this show LED block out and this little triangle symbol here looks like it wants to click the triangle on the Show LEDs, and I actually got an audible click there so that's a nice bit of user feedback. And let's just draw a smiley face, so I'm going to activate two eyes and then draw a happy mouth, oh yeah, perfect, there you go, let me give it a nose aswell. So that's a complete program, we can program our micro:bit now, let's give it a crack.
All I need to program my micro:bit is a micro-USB lead, so I'll plug one end into the computer and the other into the micro:bit. And once that's powered, ah you can hear that prompt that a device was just connected, so a window was automatically opened up just like if you were to plug in a flash drive, this device looks like some portable storage device. And this is how we can upload our code to the micro:bit, so all I have to do is download my program from the micro:bit editor, so I can just hit this big download button and that would go into my Downloads directory, so I'll just...before I do that maybe I should name it. Okay, so I'll just name that script Smile and hit save, and it starts up my download, so I'll download that into my downloads folder. And there is my HEX file in my download folder, I'll zoom in so that is a little more visible. So there's my smile script and if I go back to the micro:bit all I have to do to program it is drag it across.
On the bench, you can see that the LED is strobing to indicate that there is some program being uploaded, and once that's done, there's my smile, Nice!
And just in case that doesn't show up on the camera too well, I've just zoomed in a bit and maybe it's a bit clearer with a bit of paper over it that there is a smile pattern displayed on the LEDs. Okay not that that wasn't heaps of fun, but it wasn't a very substantial program, I think we can do something a bit more interesting and thinking about that compass, I think I'd like to make a compass script that shows N, S, E or W for North, South, East or West depending on which way the micro:bit is oriented, so here's the program we are going to write. If this is north south east and west, if the micro:bit is anywhere within this region (if it's pointing in that direction) I'm not sure which edge is the forward or the way that it's pointing but we will figure it out, if the micro:bit is facing anywhere in this region, then that should be North, and likewise for East, South and West. This should be east, this should be south, and this should be west. So that means this is 45 degrees, I think this is 135 degrees, and 225 degrees and lastly 315 degrees. So those are the four numbers that we are going to have to use for this script.
Back over on the web browser I'm going to delete all of my hard work, so I'm just going to delete that one block by right clicking and hitting delete. And, now what do we need to do? We need to take a reading from the compass and that will return a value in degrees, and then we just need some logic to decide which direction we are facing and then display that relevant letter (N,E,S & W) so the first thing we are going to need to do is take a reading from the compass, so we will need a variable for that and there is a variable here for that. So I can assign a variable to some value, so I'm going to grab that and put that as the first statement. Now it looks like this little jigsaw piece here, we can drop something else into that other than a constant, so I'm going to look in the Input menu for some compass, I have acceleration, light, oh there's the compass heading. So we can drop that in and now we have the compass heading in degrees being assigned to some variable called item. I'm going to rename that to 'Dir' for direction I suppose, and hit okay. Alright so we have assigned a variable now we just need some logic, which will be under Logic, and then and If then Else is what I am going to need. So drop that in underneath, and now we need the condition, so if we go back to our diagram the condition was 45 degrees, 135 degrees, 225 degrees and 315 degrees, so those are the numbers that I need, and I need to compare heading to those values. So in logic, I'll be able to compare something, so I'll grab that, and I want to drop the variable into this spot to say if direction is less than 45, I might go less than or equal to, why not.
So what do I need there? I need to access a variable and I can grab, oh that's interesting, we have the default which I guess is item, that my direction variable is already pre-populated in here. So I can just grab that straight away. Drop that in, and just hard code 45 degrees. And if that is true then we need to display something on the screen, we want to display N for north so I'll need, I think that was in basic to display something on the LEDs. Actually, I don't even need to use that I have a show string, so this will be how we can display I guess scrolling text across the screen. And I want to show N for north. Now this If Else chain, this is what we call an if else chain, if this then that, else if this, else if this to create this sequence of this if else conditions for our 4 if conditions for the compass. But this only has if, then and a single else. It might be tempting to grab another if then else, and kind of put it in there have this kind of cascaded structure. I don't think that is very sustainable, and it won't look very good. If we go up to this gear icon, we can configure what our if else chain looks like. So I'm going to drop in 1,2,3, I'll drop in 3 else ifs, and then it will end on an else. And then you can close that by clicking that settings icon again. Now our if else chain has grown and it's just a single block and so looks a lot nicer.
Now the rest is just copying the condition and string blocks, duplicating them into the chain and filling out the values. I will skip ahead for that.
Okay, so I have finished duplicating those blocks and finishing the if else chain. Just to recap we have 1,2,3,4 comparisons. So that's essentially 4 if or else or if statements where we just compare the direction that our compass is returning and deciding what letter we want to be displayed. Now, this script is a little more complicated than the last one, so I'm going to bring your attention to the very left-hand side of the screen where we have this picture of the micro:bit, and you can see that it is currently on it own LED display showing an E symbol. So as we program blocks over here, the code is automatically compiled and simulated on this virtual micro:bit, now this up here, this little tool up here, this is the, essentially a simulation of what our compass is returning. So if I click and hold on this and rotate it to face the top, you can see the display has now displayed an N character, and likewise if I bring it around to the left, we get a W, and then down we get an S and then an E when pointing to the right.
So this is a really neat tool for kind of road testing our code before we go through the process of uploading it and that might help us find any bugs in it. For now, let's just upload our code like before.
I'm going to, I didn't even spell smile correctly, anyway I'm going to call this Compass and hit that save button, I did spell smile correctly, so I'll just save my new compass script and I'll open u the micro:bit and the downloads file. So there's my compass file, I'll just drag that across into the micro:bit and it's uploading as it did before. Off camera, I've just put a little bit of blue-tack over the LED display, hopefully, that makes it a bit easier to see. Oh, okay, what's going on here; it's giving me a message to draw a circle, so this will be typical for calibrating the Magnetometer, I might just turn off some of the lights so that a bit easier to see.