Getting Started with .NET Gadgeteer

Hello World

In the world of programming, “Hello World” is the traditional first program that anyone writes when learning a new programming language. In the case of Gadgeteer, where we are concerned with hardware, we will make our first program turn an LED on and off when we press a button.

Start Visual Studio by launching the “Microsoft Visual C# 2010 Express” shortcut in your Start menu, which will be found inside All Programs→Microsoft Visual C# 2010 Express.

Creating a New Project

When Visual Studio has started up, you will see a welcome screen with the options “New Project…” and “Open Project…”. Select New Project; the new project screen will appear as shown in Figure 1-14.

Figure 1-14. Visual Studio New Project Screen

On the left-hand side, you will see a folding tree view where you can select the type of project that you want to create. Visual Studio is a general purpose integrated development platform, so we have to specify that we want a Gadgeteer project by selecting the Gadgeteer option within Visual C#.

We also need to provide the project with a name, which is done at the bottom of the window. We can just call the project “Hello”. When you have done this, click OK, and Visual Studio will construct the basic framework of a new project for us. When it has finished, Visual Studio will look something like Figure 1-15.

Figure 1-15. A New Project

Adding Components

This view of Visual Studio will allow us to add to the canvas the components that we want to use in our project and join them up to the Mainboard. In this case, we are going to use a button and a multicolor LED, as well as our Mainboard and USB Client DP module. We are using the USB Client DP module to program the Mainboard and provide power to it, but we do not need to add this to the canvas.

First, let’s delete the yellow note, as we do not need this. Right-click on it and select Delete. Our setup lets us use a number of different Mainboards. If the Mainboard on the screen is a Fez Spider and that is what we are using, then great, but we may find that the new project is given a different board, such as the Fez Hydra, which has more connections.

If you do not have a Fez Spider on your canvas, but rather have some other Mainboard, then delete it in the same way you did the note. You will then need to add a Fez Spider Mainboard by clicking the Toolbox on the left. A list of components will appear. Scroll down to the “GHI Electronics” section and then drag a Fez Spider onto the canvas (see Figure 1-16).

Figure 1-16. The Toolbox

Now drag both a Button and a Multicolor LED onto the canvas.

There are various types of connectors on the board, and not all are suitable for connecting all components to, so if you click the connector of the button that you have just dragged onto the canvas, you will see all of the compatible connectors on the Mainboard highlighted. Click again on connector 4 on the Mainboard.

Connect the left-hand connector on the Multicolor LED to connector 5 of the Mainboard. Your canvas should now look like Figure 1-17. The LED module has two connectors so that you can daisy-chain a number of LED modules to each other, without using another Mainboard connector.

Figure 1-17. Adding a button and LED

We should now save what we have done by clicking the File menu and selecting Save All. This will open the Save Project dialog box. If you like, you can group a number of projects into a “Solution,” however, for a Gadgeteer project it usually makes sense to just think in terms of individual projects, so we can just accept the defaults (shown in Figure 1-18).

Figure 1-18. Saving the Project

Now we need to do a little bit of conventional programming so that when our button is pressed, it can toggle the LED on and off. Switch to the tab labeled “Program.cs” (see Figure 1-19).

This code has been generated for us by Visual Studio. It mostly consists of a helpful comment telling us what we need to do to have our project do something useful.

Figure 1-19. The Code

This comment is particularly useful:

Many modules generate useful events. Type +=<tab><tab> to add a handler to an event, e.g.:
button.ButtonPressed +=<tab><tab>

It tells us how to run some code when a button is pressed. This is exactly what we want.

Visual Studio has a feature called auto-completion. This means that as we start to type some code, it will make a good guess at what we are trying to do and type a lot of the code for us.

So, just after the line:

Debug.Print("Program Started");

type:

button.ButtonPressed +=

Then press the Tab key twice. The first time you press the Tab key, it will add the text:

new Button.ButtonEventHandler(button_ButtonPressed);

The second time, it will add a whole new chunk of code:

void button_ButtonPressed(Button sender, Button.ButtonState state)
{
    throw new NotImplementedException();
}

If you are new to programming, this is called a method. It groups together a sequence of instructions to be performed. This method will be invoked every time we press the button, so it is here that we need to change the state of the LED.

Modify the button_ButtonPressed method so that it looks like this:

void button_ButtonPressed(Button sender, Button.ButtonState state)
{
    if (led.GetCurrentColor() == GT.Color.Black)
    {
        led.TurnRed();
    }
    else
    {
        led.TurnOff();
    }
}

This code checks to see if the current color of the LED is black (off) and if it is, it sets the color to red, otherwise it turns the LED off.

Trying It for Real

Finally, we are ready to try deploying the project to the real components.

Using the canvas shown in Figure 1-17 as a guide, connect the real components to the Mainboard as well as the USB Client DP module. When they are all connected together (see Figure 1-20), plug the USB cable into your computer.

Figure 1-20. The Hello World Project

On the top row of your Visual Studio toolbar, you will notice a little blue triangle Play button. This will deploy our program to the Fez Spider Mainboard.

When you press the button, the status area at the bottom of the window will tell you what is going on. This should finish with a “Ready” status.

Try pressing the button. If all is well, this will turn the LED red. Pressing it again will turn the LED off.

If you modify your code now, you will find that it can’t be modified. This is because you are in something called the Debugger. The Debugger is a useful tool for sorting out programs that are not behaving as expected. It allows you to set breakpoints to interrupt the code and see what is happening.

We will return to the debugger in a later chapter, but for now, if we want to exit the debugger and get back to the main code editor, then we can click on the small blue stop button on the second row of the toolbar.