Buttons and bows

Or lights, at least

In this post, I’m going to do a walkthrough of creating a very simple Gadgeteer prototype. It will not do a great deal, other than make some lights change when a button is pressed, but it will serve as an introduction to illustrate the Gadgeteer development process.

First, get a telegraph pole…

When I was a kid, I had a book called something like ‘Four thousand projects for inquisitive young minds’. Amongst the ideas for healthy, practical things to amuse children who should know better was a project called ‘Make your own totem pole’ (if you don’t know what a totem pole is, wikipedia will help). Anyway, the instructions began with something like ‘First, get an old telegraph pole…’, at which point the project became rather more difficult than a ten year old child could manage. And that’s before the talk of axes and chainsaws. The point of this rambling is that before you can start playing with the Gadgeteer hardware, there is some software you need to download and install. Rest assured that it’s easier to acquire and set up than a telegraph pole.

1. Visual Studio with C#
If you have not already got Visual Studio installed for other reasons, you can (at the moment) use the free Express edition of Visual Studio, which you can download from Microsoft.
2. .Net Micro Framework SDK
The current version is 4.1. You can download this from Microsoft as well.
Once you’ve got these two installed, you can start installing the SDKs for the non-Microsoft hardware components you are going to use.
3. Third-party SDKs and drivers

  • GHI Electronics make a lot of Gadgeteer boards, and you should definitely download their SDK.
  • If you are using Sytech products (for example the Nano processor board), you can get their SDK direct from Sytech.
  • For Seeed Studio components, you may need to get the individual drivers as you need them. You can get theme from this link.

Once you’ve got the components installed, you are ready to begin a simple project. For this example, I’m going to use the GHI Fez Hydra main board, a Sytech button and a GHI LED7R rosette. You could just as easily use one of GHI’s buttons, or a different main board – the steps would be almost exactly the same. I’m just using these because I have them to hand.

P1020237-001

The other required hardware component is a power supply. The Gadgeteer components all draw their electrical power from the standard connection to the main board. This simplifies wiring, but means that the main board must get enough power from somewhere to be able to supplying itself and all the devices plugged in to it. The ‘D’ socket on the main board is used for this purpose. A power supply board (usually coloured red to distinguish it from other components) connects to the ‘D’ socket. For less complex gadgets with lower power requirements, you can use a USB power supply board, like GHI’s USB client SP module. Calling this board a power supply is a bit disingenuous – not only does it take power from the computer’s USB port, it also acts as a serial connector for programming and debugging the main processor board. As your projects get more complex (with more components) and draw more power, they may exceed the current available from a standard USB port. In this case, you might need to consider a module which can take an external power supply, like GHI’s USB client DP module. That should not be necessary for our simple project.

It’s time to fire up Visual Studio. Start a new project. You should see ‘Gadgeteer’ in the list of templates on the left. If not, then your installation has not worked properly, and you need to check that all the components described earlier are properly in place. Assuming all is well, create a new .NET Gadgeteer application as shown:

gadgeteer 1

That having been done, you’ll be presented with the Gadgeteer design surface in Visual Studio.

gadgeteer 2

The design surface allows you to modify your hardware configuration in a a drag and drop manner, very similar to the way you can edit Windows Forms or WPF applications. Part of the Gadgeteer system is that drivers for devices come with properly-scaled images and their connection details, which makes it easy.

The next step is to add a button and an LED rosette. From the toolbox on the left, drag a Sytech Button control and a GHI LED7R on to the design surface. You can put them where you like, but I suggest you drop them approximately as shown below. Note that it’s not necessary to add the USB/power supply board to the design surface.

gadgeteer 6

Now the remaining task is to wire the components together. You can do this manually by pressing the left mouse button on the picture of any connector, then dragging a virtual wire to the connector you want to plug it in to. You’ll notice that when you do this, the connectors which are appropriate to the device you’ve selected light up green. You can also get Visual Studio to do the wiring for you. As the little yellow note suggests, if you right-click on the design surface and select ‘connect all modules’, it will automatically create connections to valid sockets for each unconnected module. Do this now, and you should end up with something like this:

gadgeteer 7

If the wires don’t look like that (the button should be connected to socket 14, and the LED rosette to socket 13), you can click on the wires to select them, then delete them and add them manually to the right sockets. In fact, for the purposes of this example it doesn’t matter if they go to other numbered sockets, as long as they are the right type (as denoted by the letters).

Now, build the hardware to match the wiring diagram on screen (but add the power supply board as well). Plug it together and (with the aid of a little Blu-Tack to hold the wires in place) it will look like this:

P1020247-001

Connect a USB lead to the red board, and you should see a small red LED on the Hydra board showing that it’s got power. Nothing else will happen. After all, we haven’t programmed the board yet. Now we need to write the code to make the combination of components do what we want. Go back to Visual Studio and open up the file ‘Program.generated.cs’. This file is created (and re-created when necessary, so there is no point in manually editing it) by the Gadgeteer designer. It contains code to instantiate and initialise objects which represent the hardware. In the constructor, you can see it’s declaring two objects representing the button and the LED rosette:

Gadgeteer.Modules.Sytech.Button button;
Gadgeteer.Modules.GHIElectronics.LED7R lED7R;

these are then instantiated in the method InitializeModules:

private void InitializeModules()
{
// Initialize GTM.Modules and event handlers here.
lED7R = new GTM.GHIElectronics.LED7R(13);
button = new GTM.Sytech.Button(14);
}

You’ve probably spotted that the numbers passed as parameters to the constructors are the sockets to which they are connected. You don’t need to do anything to this file. Just note that the objects created are called ‘button’ and ‘lED7R’, because we’ll be using thse objects in our code. Now open up our main code file, ‘Program.cs’. Thsi is where our own code will go. At the moment, the program does nothing at all when the ProgramStarted() method is called by the Main() method in the Program.generated.cs file. Just to make sure everything is set up correctly, we’ll make it turn on some lights. Add the following code in to the ProgramStarted() method:

for (int i=1; i<9; i++)
{
lED7R.TurnLightOn(i);
}

The LED7R board has 7 leds on it: six green ones in a circle around a red one in the centre. They can each be turned on using the LED7R.TurnLightOn() method, so our code simply turns them all on. There’s also a LED7R.TurnLightOff() method, in case you were wondering. Having written that complex program, we can now build it, deploy it and run it on the hardware. Make sure your hadrware is connected to your PC, and press F5 in Visual Studio. After a few seconds, this should happen:

P1020249

Now you may be more cynical than I am, but I think it’s pretty amazing that it’s so easy to do that, especially given that we’ve only had to write c# code. What’s equally entertaining is that this code is now installed on the hardware. You can unplug it from the PC and connect it to any USB-type power supply, and the program will run automatically. Now, we want the program to do more than just light some LEDs every time we switch it on – we want it to respond to the button, too. This is also very simple, because the Button object exposes ‘ButtonPressed’ and ‘ButtonReleased’ events, which we can subscribe to just as if they were Windows Forms button events. Simply modify the Program.cs code so it looks like this:

ProgramStarted()
{
button.ButtonPressed += new Button.ButtonEventHandler(button_ButtonPressed);
button.ButtonReleased += new Button.ButtonEventHandler(button_ButtonReleased);
}

void button_ButtonReleased(Button sender, Button.ButtonState state)
{
for (int i = 1; i < 9; i++)
{
lED7R.TurnLightOff(i);
}
}

void button_ButtonPressed(Button sender, Button.ButtonState state)
{
for (int i = 1; i < 9; i++)
{
lED7R.TurnLightOn(i);
}
}

All we have done is add handlers for the ButtonPressed and ButtonReleased events. Now when you build and deploy the code, the LEDs will be off until you press the button, at which point they will all light up. Release the button, and they go off again. It’s a light show worthy of the opening ceremony of the Olympics.

That’s it for this post. I hope you’ve now got a working light show, and are suitably impressed at how easy it is. Next time, I’ll go through some slightly more complex stuff. We might end up controlling motors, driving displays or even communicating over the mobile phone network. Who knows?

Leave a Reply

Your email address will not be published. Required fields are marked *