Getting started with Microsoft .NET Gadgeteer

Gadgeteer Club

The .NET Gadgeteer Hardware At the heart of every Gadgeteer project is a mainboard.

A mainboard is made up of a programmable processor, and a number of sockets that Gadgeteer modules can plug into.

Can you find the……

Touchscreen Display

Camera

Can you find the……

Multicolor LED

Can you find the……

Button

Can you find the…… Can you find the……

Potentiometer

Can you find the……

USB Host

Can you find the……

Ethernet

Can you find the……

SD Card

Can you find the……

USB Power Supply + Programming Interface

Can you find the……

There are also…

• Some connector cables (same both ends)

• Some extender cards

• A black USB wire to power the power card

A Closer Look at the Mainboard

Power LED Debug LED

Reset Button

Mainboard Socket Numbers

Mainboard Socket Types (Letters)

Socket Type Compatibility Labels

“X or Y”

Match socket type letters when connecting modules to the mainboard

• If a module is connected to the wrong socket type it won’t work (but it won’t damage anything, either)

• Red modules supply power to the mainboard. Only one red module should ever be connected to the mainboard at any time. (We only have one type of power card at the moment)

• When connecting modules, always make sure that the mainboard is not powered on, and that it is disconnected from the PC.

Constructing a Digital Camera

What components will we need to make a camera like this one?

We need….

• Main board

• Power board

• Screen

• Button

• Camera module

• We could also add an SD card….later….

t

Connect modules to mainboard, and connect to PC via USB.

Let’s connect it together like this…

Creating a New Gadgeteer Project

Open Microsoft Visual Basic 2010 Express, and select New Project… from the Start Page. (Alternatively, select File > New Project).

Select Gadgeteer from the list of Installed Templates, then select .NET Gadgeteer Application. You can give your project a name, then select OK.

Designer Tab (Program.gadgeteer)

Solution Explorer (Project Files)

Code Tab (Program.vb)

Designer Tab (Program.gadgeteer)

Toolbox

You can rename button. For example, rename it to myButton.

Click and drag to connect the button to a compatible socket.

Click on the button’s socket. Compatible sockets on the mainboard are highlighted in green.

Add USBClientDP module from the toolbox, and connect it to socket 1. The USBClientDP module is both a power supply and a USB programming interface.

Now make the image in VB look like the Gadgeteer you have made…

Make sure that you use the right sockets. The diagram in C# must be the same as your actual gadget.

Now we will write the code to make it work

There are different parts to code in VB (and other languages). We will use terms like: • Properties • Events • Methods Don’t worry about them too much at the moment….let’s just get something that works!

If it tells you text template may damage your computer…..

Make sure that you click ‘OK’

When the button is pressed… We want to say that once the program has started, if the button is pressed (an event), something happens (a method)

Select Button from pull-down menu Then select ButtonPressed

Find the button_ButtonPressed procedure

Add the line camera.TakePicture()

When the camera receives an image… We want to say that once the program is started, if the camera receives an image (the event), something happens (the method)

…and then PictureCaptured Select camera

When the camera has captured a picture, use the display’s SimpleGraphics to display the image.

Add this line of code to the procedure that appears

The DisplayImage method takes three parameters: a Picture object, an X coordinate and a Y coordinate. The PicturedCaptured event returns a Picture object, called picture, which can be directly passed to the DisplayImage method as the first parameter.

The coordinate 0, 0 (passed as the second and third parameters) refers top-left

corner of the display.

This is what the completed program should look like

(comments and spare lines removed).

Now let’s run our program…

Save your project and the program file to your own area.

Press ‘run’ on the toolbar

What happens? Be patient…. In the output window you will see messages about debugging and rebooting. The program is being transferred to the main board, which will then reboot itself and run the program. You will know it has done this (and is ready) when it says “Program Started” in the window. ONLY THEN CAN YOU TEST YOUR CAMERA.

If you see the following message in the output window, stop debugging (Shift+F5) and try again (F5): Updating display configuration. DEVICE WILL NOW REBOOT. Visual Studio might lose connection, and debugging might need to be manually restarted.

If the output window is stuck displaying the following message, press the reset button on the mainboard: Rebooting...

When the Program is running…

1. Press the button – an image should be displayed on the screen.

2. You may wish to hold the camera steady and re-focus a little at a time until the image improves

You can also use SimpleGraphics to perform basic drawing operations. For example, use it to overlay a rectangle on top of the picture.

Use the prompts and drop-down lists to discover and select the appropriate parameters.

Other things to try

Add an LED that is red while the camera is busy taking a picture and green when it is not busy

Next week:

Saving pictures to an SD Card