1. Getting started with Microsoft.NET Gadgeteer Comberton Village College Gadgeteer Club

2. 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.

3. Can you find the…… Touchscreen Display

4. Camera Can you find the……

5. Multicolor LED Can you find the……

6. Button Can you find the……

7. Potentiometer Can you find the……

8. USB Host Can you find the……

9. Ethernet Can you find the……

10. SD Card Can you find the……

11. USB Power Supply + Programming Interface Can you find the……

12. There are also… Some connector cables (same both ends) Some extender cards A black USB wire to power the power card

13. A Closer Look at the Mainboard Power LEDDebug LED Reset Button

14. Mainboard Socket Numbers

15. Mainboard Socket Types (Letters)

16. Socket Type Compatibility Labels “X or Y”

17. Match socket type letters when connecting modules to the mainboard

19. 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.

20. Constructing a Digital Camera What components will we need to make a camera like this one?

21. We need…. Main board Power board Screen Button Camera module We could also add an SD card….later….

22. Let’s connect it together like this…

23. Creating a New Gadgeteer Project Open Microsoft Visual C# 2010 Express, and select New Project… from the Start Page. (Alternatively, select File > New Project).

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

25. Designer Tab (Program.gadgeteer) Solution Explorer (Project Files)

26. Code Tab (Program.cs)

27. Designer Tab (Program.gadgeteer) Toolbox

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

30. 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.

31. 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.

32. Now make the image in C# 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.

33. Now we will write the code to make it work There are different parts to code in C# (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!

34. If it tells you text template may damage your computer….. Make sure that you click ‘OK’

35. When the button is pressed… Inside the ProgramStarted() method, type module name followed by a period, then select event using the arrow Enter keys. We want to say that once the program has started, if the button is pressed (an event), something happens (a method)

36. Type +=, followed by the Tab key twice.

37. Replace the line throw new NotImplementedException(); with your own code. Replace it with:

38. 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) Inside the ProgramStarted() method, type module name followed by a period, then select event using the arrow Enter keys (like we did for the button. You will have two lines inside the ProgramStarted() method now…..let’s finish off the camera method…

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

40. 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.

41. This is what the completed program should look like (comments and spare lines removed). void ProgramStarted() { camera.PictureCaptured += new Camera.PictureCapturedEventHandler(camera_PictureCaptured); myButton.ButtonPressed += new Button.ButtonEventHandler(button_ButtonPressed); Debug.Print("Program Started"); } void button_ButtonPressed(Button sender, Button.ButtonState state) { camera.TakePicture(); } void camera_PictureCaptured(Camera sender, GT.Picture picture) { display.SimpleGraphics.DisplayImage(picture, 0, 0); }

42. t Connect modules to mainboard, and connect to PC via USB. To PC

43. Now let’s run our program… Save your project and the program file to your own area. Press ‘run’ on the toolbar

44. 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.

45. 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...

46. 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

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

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