.NET Gadgeteer

Upcoming Events: Seattle Mini Maker Faire and MADExpo

Kerry Hammil — Wed, 30 May 2012 03:04:08 GMT

There are two chances to play with Gadgeteer hands-on in the next month, one on each coast of the US.

This weekend, June 2-3, Gadgeteer will be at the Seattle Mini Maker Faire. This is a hometown event for the Redmond-based portion of the Gadgeteer team, so we’ll bring as much cool stuff as we can fit in our cars. It’s at Seattle Center from 10AM to 5 PM each day. Makers and artists from all over the region will be there showing their creations. Plus, with talks like “Unwise Microwave Oven Experiments” and “The Tesla Gun”, how can you not go?

At the end of June the Mid Atlantic Developer Expo (MADExpo) will feature sessions and demos on Gadgeteer, the .NET Micro Framework, Kinect and robotics (in addition to software development on a variety of platforms). There are plenty of hands-on activities for hardware tinkerers at all levels of experience, and a parallel MADKidz mini-conference for kids. Don’t miss Andrew Duthie’s talk “From Coder to Maker: One software geek's journey to hardware hackery” – it’s very possible that he’ll pull out his Kinect-controlled model helicopter. MADExpo runs from June 27-29 in Hampton Beach, VA.

3D-Print a Custom Gadget: Open-Source 3D Models of .NET Gadgeteer Hardware

nicvillar — Fri, 25 May 2012 17:22:00 GMT

Today we are contributing a large number of 3D models of .NET Gadgeteer-compatible hardware modules to the Gadgeteer Codeplex project.

The files make it easy to design custom enclosures for Gadgeteer devices – we call these shells. You can import these files into the 3D design tool of your choice (such as 123D, SolidWorks, Inventor or Alibre) and use the models as reference in your shell design. This saves you the trouble of having to measure each module individually, and improves the likelihood that everything will fit nicely inside your shell once it is actually manufactured.

Once you have designed a shell you can 3D-print it. If you don’t have direct access to a 3D printer, you can upload it to one of several online 3D printing services (such as Ponoko, Shapeways or iMaterialise). Today we are contributing models of many of the currently available Gadgeteer modules. Not every module is included - new modules are being released faster than we can model them! Over the coming months we will continue to add new models, and will be publishing some guidelines for others to contribute their own. We are also planning to release some ready-to-print shell designs. Below is a preview of the first one – a design for a Gadgeteer plant-moisture sensor.

You can find the models in STEP format under the \3D Models\MSR Contributed\ directory of the Gadgeteer Codeplex repository, licensed under the Creative Commons Attribution 3.0 license. Please bear in mind that although every effort has been made to make these models accurate, manufacturing tolerances and human error may mean that there may be discrepancies between the model and the actual hardware. If you do discover any issues with any of the models, please let us know by posting a bug report in the Gadgeteer Codeplex site.

.NET Gadgeteer at Maker Faire Bay Area

Kerry Hammil — Tue, 15 May 2012 01:39:14 GMT

The Gadgeteer team is packing up everything we can fit in our suitcases to show at Maker Faire Bay Area this weekend. We’ve got all the latest modules and a lot of inspirational new projects to show. If you’re in the area, stop by and say hi!

Assembly of the Light Sensor Robot

Mike Dodaro — Fri, 04 May 2012 16:22:00 GMT

The idea of this project is to build a simple robot that demonstrates control of motors using sensors. It is a light seeking robot that moves towards the brightest side. When the brightness on each side is the same, the robot moves forward. It can be steered with a flashlight. See the previous posts for parts and tools and for video of the working robot. Eduardo Velloso designed the robot, and I followed his tracks to build mine.

Assembly instructions

(1) Assemble the Gearbox
The instruction booklet that comes with the Tamiya gear box provides 4 different configurations for the gearbox. The first one, A, is the simplest, but it doesn't have enough torque to turn the wheels. So, use the fourth assembly, D. This is the most complex configuration, and it uses all gears.

Before installing the motors, solder four wires on the connectors. The polarity has to be the same on both connections to the motor driver so the wheels will turn the same direction.

(2) Mount the Gearbox on the base
In order to mount the gearbox on the base, we need to notch a bit on the sides of the plate using a side cutter. I mounted it on the third row from the top, using screws. In the first photo, below, the notch is right by my thumb.

3) Mount the wheels
For the small wheels, mount an eight-hole angle bracket on each side of the bottom of the plate. Use round shafts, not hexagonal. For the large idler wheels on the top side use a single shaft mount. Mount the drive sprockets on the gearbox shafts, the small wheels on the bottom, and the large idler wheels on the top. Then, mount the tracks on the wheels. I was able to get the right length tracks using parts from the Tamiya kit.

(4) Mount the battery holder
There are various ways to mount the battery holder. You want to be able to remove it easily so you can disconnect the power to the motor driver and so you can change batteries. Eduardo attached it to the plate using velcro strips and installed a shaft mount in each side to stabilize it. He also attached another velcro strip on the top of the battery holder to attach it to the top plate. I used two pieces of plastic as supports (this was scrap plastic to which the wheels were attached in the Tamiya packaging). The vertical orange plastic supports are visible in the following photo.

(5) Mount the board on the plate

Mount the hardware on a second Tamiya plate, in the following order: power module, Hydra main board, motor driver, sensors, as shown in the following photo.

I used rivets to hold the sensors horizontally. Eduardo used shaft mounts to hold them vertically. You can shine a light from above on the sensors either way. In order to be able to adjust the angle of the sensors, mount the sensors or shaft mounts using one push rivet; this will attach the module or mount to the plate and allow it to rotate.

Eduardo's vertically mounted sensors are shown in the following photo:

My horizontally mounted sensors are shown in the following photo:

(6) Connect the modules and mainboard

Use the ribbon cables, according to the Visual Studio Designer.

(7) Program the main board

The project code can be downloaded from: http://integral-data.com/robotsourcehydra.zip

(8) Mount the battery

Eduardo used a velcro strip to the bottom of the plate where the hardware is mounted and also a velcro strip on the bottom of this plate to attach the battery holder and two more shaft mounts to help stabilize it. There are batteries to drive the motors and a lithium battery to power the .NET Gadgeteer mainboard. My lithium battery was a little thicker, so I set it on top of the gear box, sandwiched it between the two plates, and tied the plates with the connectors that come coiled around USB cables and other things.

Eduardos battery connections:

My battery connections:

NOTES:

- The Hydra board is wider than the plate, so it sticks out a bit (we only attached one side to the plate).
- Eduardo tried using two AA batteries to feed the motors, but the H-Bridge IC on this board needs at least 4.0V to start moving the motors. So, we used 4 batteries and set the motor maximum speed at 53% (around 3V). At this setting, the robot moves a bit slowly. It shouldn't be a problem to increase this voltage a bit.

Video of the Light Sensor Robot

Mike Dodaro — Fri, 04 May 2012 02:33:00 GMT

This video is five minutes of the robot steered by a flashlight, not the Indy Five Hundred, but kind of cool.

Light Sensors control .NET Gadgeteer Robot

Mike Dodaro — Thu, 03 May 2012 21:13:00 GMT

Eduardo Velloso built the prototype for this .NET Gadgeteer robot that is controlled by two light sensor modules and a motor controller. The modules are available from GHI Electronics. The design uses two motors that separately drive the wheels and tracks of the robot. The code monitors the difference between the light on the sensors and adjusts the speed of the motors accordingly. You can steer the robot with a flashlight.

This is the first installment of the assembly instructions. I'll be updating this blog with more information and video as soon as the glue dries on the velcro patches that hold this thing together. The code (see below) and motors are working. If you want to order parts, the following list includes everything I can think of that you'll need.

You can get the .NET Gadgeteer components from GHI Electronics. The mechanical parts, including the track and wheel set, the motors, and gearbox, can be purchased from Tamiya.

Parts and Tools

- 1 FEZ Hydra mainboard: http://www.ghielectronics.com/catalog/product/328

- USB Client SP module: http://www.ghielectronics.com/catalog/product/330

- 1 GHI motor controller:http://www.ghielectronics.com/catalog/product/315

- 2 GHI Light Sensor modules:http://www.ghielectronics.com/catalog/product/336

- - 3.7 volt Kensington Battery Pack and Charger, or Duracell Powerhouse USB Charger with Lithium ion battery; the important thing is that the battery includes universal cable with USB and mini USB

- 4 AA Batteries

- 1 4-battery holder and connector

- 1 Tamiya 70157 Universal plate set (2 pcs): http://www.tamiyausa.com/product/item.php?product-id=70157

- 1 Tamiya 70168 Double Gearbox set: http://www.tamiyausa.com/product/item.php?product-id=70168 Use Assembly Type D

- 1 Tamiya 70100 Track and wheel set: http://www.tamiyausa.com/product/item.php?product-id=70100

- 1 side cutter

- 1 screwdriver

- 3 velcro strips

- Wires and ribbon cables

Here is a picture of the gears assembly. Two motors are included with the kit. They drive the wheels and tracks independently.

The following pictures show the robot in various stages of assembly.

Application Code

The .NET Gadgeteer application code is very simple. The Designer view and code are shown in the following sections.

.NET Gadgeteer in Pisa, Italy; Saturday, May 12, 2012

Mike Dodaro — Wed, 25 Apr 2012 15:05:27 GMT

A day dedicated to .NET Gadgeteer, the hardware and software platform for designing and developing applications for embedded devices.

The introduction of .NET Gadgeteer has greatly simplified the design of applications for embedded devices based on the .NET Micro Framework. During the various sessions of this conference, we will illustrate the main characteristics and objectives of .NET Gadgeteer. We will show how to design a system, putting various hardware modules together, and show how to easily program them, and run them on a real device. We will devote most of the day to design and development of a complete embedded system that uses sensors, motors, and input/output peripheral devices. After the initial assembly, we'll get to see it move independently!

Saturday, May 12, 2012
You can see the full agenda here:
http://www.dotnettoscana.org/net-micro-framework-presenta-gadgeteer.aspx.

Love Electronics Announces Argon R1 Mainboard for .NET Gadgeteer

Kerry Hammil — Mon, 23 Apr 2012 22:25:48 GMT

Love Electronics has announced a new Gadgeteer mainboard – the Argon R1, which is available for preorder for £59.99. The Argon R1 has some pretty impressive technical specs, including a huge amount of memory – 32MB DRAM and 128MB Flash. That may seem small compared to your laptop or desktop computer, but it’s a huge amount for an embedded device and will enable the Argon R1 to store lots of photos, images and audio files.

The Argon R1 supports a wide variety of Gadgeteer sockets, including the basics – GPIOs, serial, PWM, SPI and analog I/O – and some advanced features, too – LCD + touch, SD Card and CAN. Also, the Argon R1 brings a new interface to the Gadgeteer world – I2S, which is used for high quality audio connections.

Welcome to the Gadgeteer family, Love Electronics! We’re excited to see what else you have in store.

.NET Gadgeteer sparks school students’ creativity in the UK Schools pilot

Steven Johnston — Mon, 23 Apr 2012 15:08:11 GMT

.NET Gadgeteer has great potential in schools due to the fact that it can be used to teach students computer programming, simple electronics and also some computer-aided design. It’s also very motivating for young people to be able to build their own gadgets. A digital camera can be built in about half an hour!

The first .NET Gadgeteer pilot in UK Schools took place from October 2011 to January 2012. There were eight schools involved in Cambridgeshire, Essex and Bedfordshire. The pilot was launched via a Teachers’ workshop in October, held at Microsoft Research, Cambridge. The teachers spent the afternoon building gadgets using .NET Gadgeteer and had the opportunity to talk to the Cambridge team about the programming skills they would need and how to use this with their students.

The teachers then introduced .NET Gadgeteer to their schools in the form of after-school or lunchtime clubs. Each club was visited and the educational social networking tool Edmodo was used to share experiences. Lesson plans were developed for eight sessions to enable students to build a digital camera, a stop watch and a game. The students were then invited to develop a gadget of their choice to present at a final “show-and-tell” event at the end of January.

The students attending the club mostly ranged from 11 to 15 years old, with one school choosing to use .NET Gadgeteer with an older group of 17 year-olds. The students worked in groups of three to one kit - .NET Gadgeteer is great for facilitating collaborative working!

At the final show-and-tell event, students presented and demonstrated the gadgets that they had built during the pilot project. A competition was held and the winning school was presented with a prize.

(Full article and prize winning projects: http://www.netmf.com/gadgeteer/ukSchoolsPilot )

Accelerometer in .NET Gadgeteer Posture Sensor/Regulator

Mike Dodaro — Wed, 18 Apr 2012 23:15:27 GMT

It can be difficult to maintain awareness of posture during many hours at the computer. MSDN Channel 9 last week featured a .NET Gadgeteer device, the Accelerometer Posture Sensor/Regulator, that could prevent the malady that afflicts numerous technology workers. This device alerts the wearer when posture is not upright in a position conducive to a healthy neck and spine. There are two versions of the device, one that flashes a LED when the user slumps, and another that turns on a buzzer that will either maintain good posture or make the wearer deaf.

Coming Soon: .NETMF 4.2 Support + Visual Basic

Kerry Hammil — Wed, 11 Apr 2012 17:00:00 GMT

Gadgeteer support for .NET Micro Framework 4.2 is on the way, which means you'll soon be able to run Gadgeteer on .NETMF 4.2-compatible mainboards like GHI's Fez Cerberus. This update also enables Gadgeteer apps to be written using Visual Basic (Visual Studio or Visual Basic 2010 Express).

A beta version of GadgeteerCore is now available on Codeplex for people who want an early peek. Most Gadgeteer modules and mainboards still target NETMF 4.1 so most users won't see anything changed - your existing projects will continue to work as they currently do and you can still create new .NETMF 4.1 compatible projects. If you have a Cerberus and you're feeling adventurous, though, you can try creating a Gadgeteer NETMF 4.2 project. One warning: mainboards and modules won't show up in the designer for NETMF 4.2 apps until their drivers are updated, so you'll need to add references to module assemblies and instantiate them in code.

If you're building Gadgeteer-compatible hardware, you'll need to update your mainboard or module driver to provide NETMF 4.2-compatible assemblies. The changes are minor and are detailed in updated versions of the Mainboard and Module Builder's Guides.

If you take the plunge, please check the 2.42.600 Release Notes for changes and known issues - and please let us know if you run into any problems by logging them in the Issue Tracker.

** Quick Update: Visual Basic 2010 Express support didn't make it into this beta, but it will be included in the next one.

Twelve New Modules From GHI

Kerry Hammil — Fri, 06 Apr 2012 20:09:23 GMT

GHI announced 12 new modules today which open up a lot of new projects for .NET Gadgeteers.

VideoOut: VGA and RCA video output

OBD II: Interface with car computers

HD44780 Display: 16x2 and 20x4 character displays

MaxO: chainable output extender for “S” type sockets. 1 module extends a single socket to expose 32 GPIOs.

IO60P16: Another I/O extender. This one turns one “X” type socket into 60 GPIOs with interrupt capability. 16 of them can be controlled using PWM (handy for servo motors and 80’s style video game music)

RED LED Matrix: 8x8 array of red LEDs which can be individually controlled. DaisyLinkable, so you can chain several of these together.

Load Module: Seven switches designed to control high current loads, up to 3A and 30V. Can be used to turn on/off relays, motors, etc.

IR Receiver with remote: Detects infrared signals coming from a remote control (remote included, and will work with many TV remotes too)

MicroSD Card: A much smaller version of the SD Card module designed for MicroSD cards

Passive Infrared Motion Detector: Detects motion over a wide field of view

RFID Reader: Read RFID tags

RS232 Module: Converts any “U” or “K” socket to an RS232 serial port

Here’s a nice group shot of a few of them:

Some are available immediately at http://www.ghielectronics.com/catalog/category/265/. A few will ship late April or mid-May.

Beta Driver for GHI Electronics Bluetooth Module

Mike Dodaro — Tue, 03 Apr 2012 23:29:00 GMT

Eduardo Velloso has implemented a beta driver for the Bluetooth module. The driver makes the Bluetooth module discoverable from Windows Devices & Printers and other Bluetooth devices. The source code can be found at https://gadgeteerbluetooth.codeplex.com/ . The solution includes the driver implementation code and a test project using .NET Gadgeteer. For more information, see Eduardo Velloso.

Eduardo has also created a test scenario that demonstrates communication between two Bluetooth devices built on .NET Gadgeteer. For details, see http://eduardovelloso.com/2012/04/03/bluetooth-communication-with-net-gadgeteer/ .

Preorder Available for "Getting Started With .NET Gadgeteer"

Kerry Hammil — Tue, 03 Apr 2012 19:38:00 GMT

The very first book on .NET Gadgeteer, Simon Monk's "Getting Started With .NET Gadgeteer" is available for pre-order from O'Reilly Press and other booksellers. In addition to introducing core Gadgeteer concepts, it contains several project walkthroughs: a camera backup device, a game, a Web picture messenger and more.

See more at the book's Web site: http://www.gadgeteerbook.com/home

.NET Gadgeteer for stratospheric instrument platforms

Steven Johnston — Mon, 12 Mar 2012 17:51:18 GMT

The Ingenia is a publication from the Royal Academy of Engineering and the 50th issue is running an article on the ASTRA project which uses .NET Gadgeteer! [PDF]

(Image: ASTRA homepage, University of Southampton, http://www.southampton.ac.uk/~astra/diary.html)

The ASTRA project aims to demonstrate a capability to put sensors into the Stratosphere and then retrieve the payloads at the end of the mission. Along with flying commodity hardware such as a Windows Phone 7, the project focuses on rapid prototyping, for both the casing and the electronics. The current version (ready to fly and awaiting favourable weather) uses .NET Gadgeteer as a data logger and sensor platform in a 3d printed casing. (The latest version is only a 10cm cube)

Links

ASTRA project : http://www.southampton.ac.uk/~astra/

50th Ingenia article : http://www.ingenia.org.uk/ingenia/contents.aspx?Issue=50

PDF link : http://www.ingenia.org.uk/ingenia/issues/issue50/Sobester.pdf

.NET Gadgeteer will be at SIGCSE

Steven Johnston — Tue, 28 Feb 2012 14:52:00 GMT

This week we will be taking .NET Gadgeteer to the ACM Special Interest Group on Computer Science Education (SIGCSE) which “provides a forum for educators to discuss issues related to the development, implementation, and/or evaluation of computing programs, curricula, and courses, as well as syllabi, laboratories, and other elements of teaching and pedagogy.”

We are part of the Microsoft booth and will be showing a few prebuild .NET Gadgeteer demos, but more importantly this is a great opportunity to meet some of the .NET Gadgateer team, so if you will be attending SIGCSE please drop by the stand and have a chat. We are interested to hear how you think .NET Gadgeteer can be used as well as how you think we can improve in the future.

We are at booth 309 check the timetable for other demos: http://research.microsoft.com/en-us/events/sigcse2012/

Links

SIGCSE: http://www.sigcse.org/sigcse2012/

Internet of Things Day at SICS

Steven Johnston — Tue, 28 Feb 2012 10:35:44 GMT

We were lucky enough to be invited to present .NET Gadgeteer at the Internet of Things (IoT) day in Stockholm held at the Swedish Institute of Computer Science (SICS) earlier this month. The event was focused around networking the ‘things’ that surround us; basically making everything internet addressable. (How exciting!)

(Image: http://www.sics.se/Internet_of_Things_Day)

IoT involves interface/interaction design, networking, big data management and of course embedded systems. Since .NET Gadgeteer is a great platform for rapidly designing and building prototypes, we believe it is ideal for developing many of the next IoT concepts. Along with a presentation (slides) we took along a large box of modules for people to have a play with and ran a quick demo showing the Visual Studio designer in action.

Thank you for the overwhelming response, and flurry of questions, and sorry to those that did not have time to ask questions. For those interested in more module information (the most common question) check the product showcase to see the hardware made by all manufacturers. (.NET Gadgeteer is an open-source toolkit, many manufacturers are participating) http://www.netmf.com/gadgeteer/showcase.aspx?showcaseid=1. Also remember that .NET Gadgeteer is designed to be truly extensible, have a look at the .NET Gadgeteer Module Builder's Guide version.

Links:

Internet of Things Day at SICS (http://www.sics.se/Internet_of_Things_Day)

Twitter account: @siotcentre

Taking Gadgeteer to school

Colin Miller — Thu, 23 Feb 2012 20:10:51 GMT

There is a great volunteer program where Microsoft engineers are paired with teachers in the local high schools to increase the availability of engineering curriculum for the students. Basically the teacher provides the teaching skills and the Microsoft employee provides the technical skills. When I heard about this, I thought it was a good place to introduce the Gadgeteer platform. It may be just me but I find building things that do stuff more engaging than writing ‘Hello, World’ on the screen of a computer. So I went to the folks who run the volunteer program and gave them my Gadgeteer pitch. The response was predictable - “If you think this is a great way to teach programming, are you willing to try it yourself?”. And so I did.

Last fall I started teaching one class a day at the high school near my house on the way in to work – Intro to Computer Science. The class is one semester long and I have recently finished the first semester and started in on the second. This seems like a good time to share my experiences in using Gadgeteer to teach programming in C# to novices.

I thought that C# and Visual Studio and Gadgeteer all up is a pretty big first step so I decided to start with a 4 week module using Scratch from MIT - a visual programming language – to introduce the basics of programming like variables and loops and conditional logic. Once we completed that, I introduced the Gadgeteer environment. We started with simple projects like controlling an LED with a potentiometer that reintroduced the programming elements that they learned in Scratch with C# syntax. The process culminated in the final project – a fully functional digital camera. Drawing inspiration from the fact that last year was the 100th anniversary of the brownie box camera, we laser cut them some camera boxes that looked like this picture.

Here are some pictures of the students building out their cameras

The functionality in the final products included using the touch screen for the user input, bringing up menus for saving pictures, saving them off to the SD card and managing those files. Here is a picture showing some of one student’s code. Not bad for a first programming class.

This semester, we are looking at augmenting this with a weather station/irrigation system. Next year we are hoping to have a robotics section.

Here are some comments from the students at the end of the first semester:

“I thought overall this semester was a success. It got really confusing sometimes but once you got it, it was awesome.”

“Overall it was a great learning experience for me and has helped me to want to get into the computer field more.”

“I would much rather this class be a year long instead of a semester.”

Here are some thoughts of my own.

Gadgeteer is engaging to those with even a modest interest in making things work. It was great to see the pride the students took in getting their cameras home to show them off.

Gadgeteer’s higher level libraries and especially the wizard allow you to jump start the students into being productive immediately on simple tasks.

However, once you get beyond fairly simple tasks, you are now learning C# and using Visual Studio. There is no alternative to learning C# semantics and Visual Studio rudiments which can be daunting for novices. It pays to generate small projects that each introduce a single new element such as branching statements of various types, events and methods, etc.

I agree with the last student comment that to really start to master programming in C# will take more than a semester. That leads you into a discussion of what the right objective for an introductory class is. By making it a semester, it allows you to bring in more kids who are not necessarily bound for a CS degree in college but for whom the exposure to how things are made and to ‘computational thinking’ is beneficial in other realms. Here is an interesting article on the value of computational thinking for non-programmers - http://www.cs.cmu.edu/afs/cs/usr/wing/www/publications/Wing06.pdf. So, the benefits of Gadgeteer are not just that it makes it easier to get programmers started making interesting things – it also allows a broader set to students to be exposed to a computational approach to problem solving.

The good news is that Gadgeteer is spreading. I am working with teachers in other school districts on incorporation the technology in their classrooms. It is making the class more exciting for some of the teachers as well as the students.

Technorati Tags: .NET Gadgeteer,Education,C#

How to Build a Flipbook Maker: Part 3

Kerry Hammil — Wed, 04 Jan 2012 03:05:00 GMT

Happy New Year! The Gadgeteer team is back from the holidays and we'll conclude the Flipbook Maker series this week. In Part 1 and Part 2 we assembled the hardware and built the basic software architecture. This post covers using WPF to create a menuing system for the touchscreen display. This will provide the remaining user controls - saving the movie to the SD card, deleting a frame, etc. It will also provide visual cues like frame number and playback status.

Adding Resource Images and Fonts to the Project

We'll create the onscreen buttons and UI controls from GIFs, so the first step is to those images to the FlipbookMaker Resources directory. They're available in a .zip file attached to this post - with a couple of font files that the Flipbook Maker uses, too. Unzip this FlipbookMakerResources.zip and put the files in your project's Resources directory. Update: The entire project is now attached to this post, including the solution, source code and resources. You can use that project and skip this section if you want. This part is a useful reference for how to add resources to your future Gadgeteer projects, though.

Now, let's register the image and font resources with the Visual Studio project. From the Solution Explorer, open Resources.resx. You'll see something like this with the two default Gadgeteer fonts already registered:

Click the "Add Resouces" button, choose "Add Existing Files". Navigate to the spot where you unzipped the FlipbookMaker image and font resources. Make sure the file filter type is "*.*" so that you can add both the font and image files. Then click "Open".

Setting Up the Display

Let's declare some variables to store the current playback icon, the text of the current frame number, and the WPF Canvas and Window on which these objects will be rendered.

 Image icon;
        Text frameNumber;
        Canvas canvas;
        Window mainWindow;

We'll also create an ArrayList of images by instantiating some of the project image resources.

 	ArrayList buttons = new ArrayList();
        Image deleteThisButton = new Image(Resources.GetBitmap(Resources.BitmapResources.DeleteThisButton));
        Image deleteAllButton = new Image(Resources.GetBitmap(Resources.BitmapResources.DeleteAllButton));
        Image saveButton = new Image(Resources.GetBitmap(Resources.BitmapResources.SaveButton));
        Image cancelButton = new Image(Resources.GetBitmap(Resources.BitmapResources.CancelButton));
 
        bool buttonsVisible = false;

And finally, a setup method which adds the buttons to window. All of the buttons will default to being hidden, but they're ready to be shown when the user touches the screen.

 void SetupDisplay()
        {
            mainWindow = display.WPFWindow;
            canvas = new Canvas();
            cameraImage = new Image(Resources.GetBitmap(Resources.BitmapResources.StartScreen));
            frames.Add(cameraImage.Bitmap);
            icon = new Image(Resources.GetBitmap(Resources.BitmapResources.CALIBRATE));
            frameNumber = new Text(Resources.GetFont(Resources.FontResources.SegoeUI_20), "");
            frameNumber.ForeColor = GT.Color.FromRGB(0, 200, 0);
 
            canvas.Children.Add(cameraImage);
            canvas.Children.Add(icon);
            canvas.Children.Add(frameNumber);
 
            canvas.Width = (int)display.Width;
            canvas.Height = (int)display.Height;
 
            Canvas.SetLeft(cameraImage, 0);
            Canvas.SetTop(cameraImage, 0);
 
            Canvas.SetRight(frameNumber, 5);
            Canvas.SetTop(frameNumber, 0);
 
            Canvas.SetLeft(icon, 5);
            Canvas.SetTop(icon, 10);
 
            // Add and position menu buttons
            canvas.Children.Add(deleteAllButton);
            canvas.Children.Add(deleteThisButton);
            canvas.Children.Add(cancelButton);
            canvas.Children.Add(saveButton);
 
            Canvas.SetLeft(deleteAllButton, 40);
            Canvas.SetTop(deleteAllButton, 5);
            Canvas.SetLeft(deleteThisButton, 180);
            Canvas.SetTop(deleteThisButton, 5);
            Canvas.SetLeft(saveButton, 40);
            Canvas.SetTop(saveButton, 125);
            Canvas.SetLeft(cancelButton, 180);
            Canvas.SetTop(cancelButton, 125);
 
            buttons.Add(deleteThisButton);
            buttons.Add(deleteAllButton);
            buttons.Add(saveButton);
            buttons.Add(cancelButton);
 
            foreach (Image button in buttons)
            {
                button.Visibility = Visibility.Hidden;
            }
 
            buttonsVisible = false;
            mainWindow.Child = canvas;
        }

A Note on Implementing Lightweight Touch Buttons in Gadgeteer

If you've worked with WPF or Silverlight on other systems, you're probably wondering why the FlipbookMaker hasn't declared any "traditional" controls yet. It turns out that any UIElement subclass, including Image, can register for touch events. None of the onscreen UI needs to do anything more complicated than register touches (other program functions are controlled by the potentiometer and hardware button). So, this turns out to be a very straightorward way to implement a touch button.

When the user taps the screen to show the menu, we'll make each button visible and register a touchDown event handler for it. When the user dismisses the menu, we'll just hide the buttons and remove the event handlers.

 void ShowButtons()
        {
            foreach (Image button in buttons)
            {
                button.Visibility = Visibility.Visible;
            }
 
            deleteAllButton.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(deleteAllButton_TouchDown);
            deleteThisButton.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(deleteThisButton_TouchDown);
            saveButton.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(saveButton_TouchDown);
            cancelButton.TouchDown += new Microsoft.SPOT.Input.TouchEventHandler(cancelButton_TouchDown);
 
            mainWindow.Invalidate();
 
            buttonsVisible = true;
        }
 
        void HideButtons()
        {
            foreach (Image button in buttons)
            {
                button.Visibility = Visibility.Hidden;
            }
 
            deleteAllButton.TouchDown -= new Microsoft.SPOT.Input.TouchEventHandler(deleteAllButton_TouchDown);
            deleteThisButton.TouchDown -= new Microsoft.SPOT.Input.TouchEventHandler(deleteThisButton_TouchDown);
            saveButton.TouchDown -= new Microsoft.SPOT.Input.TouchEventHandler(saveButton_TouchDown);
            cancelButton.TouchDown -= new Microsoft.SPOT.Input.TouchEventHandler(cancelButton_TouchDown);
 
            mainWindow.Invalidate();
 
            buttonsVisible = false;
        }

The Touch Event Handlers

Here are the handlers for each touch event. First is the event handler for the main window - when the user touches the screen, the menu buttons are shown. Then, the event handlers for each button are activated, too.

void mainWindow_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
        {
            if (currentMode == PlaybackMode.Stopped && cancelButton.Visibility == Microsoft.SPOT.Presentation.Visibility.Hidden)
            {
                ShowButtons();
            }
        }
 
        void cancelButton_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
        {
            HideButtons();
        }
 
        void saveButton_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
        {
            SaveFiles();
            HideButtons();
        }
 
        void deleteThisButton_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
        {
            if (currentFrame != 0)
            {
                frames.RemoveAt(currentFrame);
                currentFrame--;
                cameraImage.Bitmap = (Bitmap)frames[currentFrame];
                frameNumber.TextContent = currentFrame == 0 ? "" : currentFrame.ToString();
            }
            Debug.GC(true);
 
            HideButtons();
        }
 
        void deleteAllButton_TouchDown(object sender, Microsoft.SPOT.Input.TouchEventArgs e)
        {
            frames = new ArrayList();
            cameraImage.Bitmap = Resources.GetBitmap(Resources.BitmapResources.StartScreen);
            frames.Add(cameraImage.Bitmap);
            frameNumber.TextContent = "";
            currentFrame = 0;
            Debug.GC(true);
 
            HideButtons();
        }

One last thing: Add a call to SetupDisplay to your ProgramStarted method.

 	// This method is run when the mainboard is powered up or reset.   
        void ProgramStarted()
        {
            // Set up event handlers for modules
            button.ButtonPressed += new GTM.GHIElectronics.Button.ButtonEventHandler(button_ButtonPressed);
            camera.BitmapStreamed += new GTM.GHIElectronics.Camera.BitmapStreamedEventHandler(camera_BitmapStreamed);
 
            sdCard.SDCardMounted += new SDCard.SDCardMountedEventHandler(sdCard_SDCardMounted);
            sdCard.SDCardUnmounted += new GTM.GHIElectronics.SDCard.SDCardUnmountedEventHandler(sdCard_SDCardUnmounted);
 
            SetupDisplay();  
            // Set up event handlers for timers, and start timers running
            playbackTimer.Tick += new GT.Timer.TickEventHandler(playbackTimer_Tick);
            playbackTimer.Start();
 
            potentiometerCheckTimer.Tick += new Gadgeteer.Timer.TickEventHandler(potentiometerCheckTimer_Tick);
            potentiometerCheckTimer.Start();
 
            // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
            Debug.Print("Program Started");
        }

The Home Stretch: Saving the Movie

The last bit of software to implement is the SaveFiles() method. First, adding a using directive for System.IO:

 using System.IO;

Then add the body for the SaveFiles() method, which creates a new directory for each movie that is saved. Only the raw bitmaps are written - converting this to an actual movie format is pretty easy to do using .NET on the desktop. I'll add a sample of that to a later entry if there's interest.

 void SaveFiles()
        {
            int dirNumber = 0;
            string baseDir = "MyMovie";
 
            if (SDCard != null)
            {
                Directory.SetCurrentDirectory(SDCard.RootDirectory);
 
                while (Directory.Exists(baseDir + dirNumber))
                {
                    dirNumber++;
                }
 
                Directory.CreateDirectory(baseDir + dirNumber);
 
                for (int i = 0; i < frames.Count; i++)
                {
                    SDCard.WriteFile(baseDir + dirNumber.ToString() + "\\" + "frame" + i + ".bmp", ((Bitmap)frames[0]).GetBitmap());
                }
            }
        }

Phew!

That was a fair bit of code. At this point you can build your FlipbookMaker and use it to start making movies. In the next (and final) entry, we'll talk about some ways to build a neat enclosure for your FlipbookMaker.

How to Build a Flipbook Maker: Part 2

Kerry Hammil — Wed, 21 Dec 2011 17:23:00 GMT

In Part 1, we assembled the hardware and created the event handlers for the Flipbook Maker. Now let's flesh out the software foundation and create a state machine to manage the Flipbook Maker's behavior.

Storing Images

First, the Flipbook Maker needs a place to store the images captured by the camera. The .NET Micro Framework's ArrayList class is great for this - it behaves like an array but it's dynamically resizable so it doesn't take up more memory than it needs at any given time. We'll set an upper limit of 60 images, though, to prevent running out of memory.

To use ArrayList, first add System.Collections to your program's using list.

using System.Collections;

Then create an ArrayList object and supporting objects inside the Program Class:

     Image cameraImage;
     bool pictureTakingInProgress = false;

We'll also create two TimeSpans representing slow and fast playback speeds.

 TimeSpan PLAYBACK_SPEED_NORMAL = new TimeSpan(0, 0, 0, 0, 1000);
    TimeSpan PLAYBACK_SPEED_FAST = new TimeSpan(0, 0, 0, 0, 300);

These timespans are specified in milliseconds, so the slower one equates to one frame per second and the faster one to 3.33 frames per second.

Finally, one last declaration inside the Program class:

    GT.StorageDevice SDCard;

This keeps a reference handy to the object that manages reads/writes to the SD card.

The event handlers for SD card mount/unmount simply need to update this reference:

 void sd_SDCardMounted(GTM.GHIElectronics.SDCard sender, StorageDevice SDCard)
     {
        this.SDCard = SDCard;
     }
 
     void sd_SDCardUnmounted(GTM.GHIElectronics.SDCard sender)
     {
        this.SDCard = null;
     }

Flipbook Maker Playback States

The Flipbook Maker is built as a state machine where the device does different things in different states. The relevant states are:

 enum PlaybackMode { Forward, ForwardFast, Backward, BackwardFast, Stopped, Recording, Initializing };
 PlaybackMode currentMode = PlaybackMode.Initializing;

These are pretty self-descriptive: the Flipbook Maker starts in initialization mode. After initialization, Stopped is the default playback state: this shows the current frame (or nothing if there are no frames yet).

The active playback states let you watch your movie in forward or reverse mode, and at the slow and fast playback intervals that we defined above.

Finally, the Recording mode helps you pose your shots. While you hold the Button down, the camera will stream a live feed to the display. This is Recording mode. When you release the button, the last image becomes the newest frame in the movie. The Flipbook Maker the returns to Stopped mode.

Implementing the Playback Timer

After the Flipbook Maker boots, two timers start running. Here's the implementation for the playback timer. It first checks whether there are frames to display and that the camera is ready (the camera takes a few second to start up and it also needs a second or two to process each picture it takes).

Then, if the current playback mode is Forward or ForwardFast, it increments the index to the current frame. If the playback mode is Backward or BackwardFast, it decrements the current frame index. In each case, it checks whether the index should wrap to the start or end of the picture array.

     void playbackTimer_Tick(GT.Timer timer)
     {
         if (frames.Count == 0) return;
         if (!camera.CameraReady) return;
 
         if (currentMode != PlaybackMode.Stopped || currentMode != PlaybackMode.Recording)
         {
             if (currentMode == PlaybackMode.Forward || currentMode == PlaybackMode.ForwardFast)
             {
                 currentFrame++;
                 if (currentFrame > frames.Count - 1)
                    currentFrame = 0;
             }
 
             if (currentMode == PlaybackMode.Backward || currentMode == PlaybackMode.BackwardFast)
             {
                 currentFrame--;
                 if (currentFrame < 0)
                     currentFrame = frames.Count - 1

              }
 
             cameraImage.Bitmap = (Bitmap)frames[currentFrame];
         }
     }

Taking Pictures

The Button is used for capturing pictures. Holding the button down causes live video to stream from the camera to the display. Releasing the button (or simply pressing it without holding it down) causes the camera to take a picture and add it to the ArrayList.

The ButtonPressed event handler checks that the camera is ready to take pictures and that there is room in memory to store more frames. Then it stops the playback and potentiometer timers - this prevents any confusing playback state changes between the end of the ButtonPressed method and the camera's BitmapStreamed callback.

 void button_ButtonPressed(GTM.GHIElectronics.Button sender, GTM.GHIElectronics.Button.ButtonState state)
     {
         if (!camera.CameraReady) return;
 
         if (frames.Count <= MAXIMUM_FRAMES)
         {
             if (playbackTimer.IsRunning) playbackTimer.Stop();
             if (potentiometerCheckTimer.IsRunning) potentiometerCheckTimer.Stop();
             currentFrame++;
             currentMode = PlaybackMode.Recording;
             cameraImage.Bitmap = new Bitmap((int)display.Width, (int)display.Height); // Give the camera and screen a new bitmap to stream to.
             camera.StartStreamingBitmaps(cameraImage.Bitmap);
         }

Now the camera is streaming bitmaps. Each time an image is sent to the mainboard, it's sent to the display if the user is holding the button down. When the button is released, the image is inserted into the array of frames. Then the potentiometer checker is restarted.

 void camera_BitmapStreamed(GTM.GHIElectronics.Camera sender, Bitmap bitmap)
     {
         if (currentMode == PlaybackMode.Initializing)
         {
             numBitmapsThrown++;
             if (numBitmapsThrown == BITMAPS_TO_THROW)
             {
                 currentMode = PlaybackMode.Stopped;
                 camera.StopStreamingBitmaps();
              }
             return;
         }
         cameraImage.Invalidate();
 
         if (button.IsPressed) return; //carry on streaming pictures to the screen while the button is pressed
 
         frames.Insert(currentFrame, cameraImage.Bitmap);
 
         camera.StopStreamingBitmaps();
         potentiometerCheckTimer.Start();
     }

See that bit which executes if the Flipbook Maker is initializing? The Camera module takes a few frame to callibrate its white balance. The Flipbook Maker throws away the first few bitmaps because they tend to look washed out. Here's a bit of support code which goes into the Program class:

 // Camera will calibrate its brightness by taking some pictures,
      // which we throw away.
      Bitmap throwawayBitmap = new Bitmap(320, 240);
      int numBitmapsThrown = 0;
      const int BITMAPS_TO_THROW = 5;

Implementing the Potentiometer Timer

The last thing we'll cover today is the implementation of the Potentiometer timer, which allows the user to play back the movies they've created. If the potentiometer is near the middle, nothing is played back (currentMode == PlaybackMode.Stopped). When the potentiometer is turned right or left, playback starts forward or backward respectively. The amount which the potentiometer is turned determines the playback speed - far to the right is PlaybackMode.ForwardFast, and far to the left is PlaybackMode.BackwardFast.

This event handler reads the Poteniometer's position relative to center. A value of 0.0 is as far left as the Potentiometer goes, and a value of 1.0 is as far right as it goes. 0.5 is exact center.

If the FlipbookMaker is initializing, the throwaway bitmaps are taken (and thrown away). If the camera is currently taking a picture, no playback events happen. The rest of the handler maps various Potentiometer readings to PlaybackModes, and the PlaybackTimer is set accordingly.

 void potentiometerCheckTimer_Tick(Gadgeteer.Timer timer)
     {
         double potValue = potentiometer.ReadPotentiometerPercentage();
 
         if (currentMode == PlaybackMode.Initializing)
         {
             if (camera.CameraReady)
             {
                camera.StartStreamingBitmaps(throwawayBitmap);
             }
             return;
         }
 
         if (pictureTakingInProgress) return;
 
         if (potValue < 0.40 && potValue > 0.2)
         {
             if (currentMode != PlaybackMode.Backward)
             { 
                 currentMode = PlaybackMode.Backward;
                 playbackTimer.Interval = PLAYBACK_SPEED_NORMAL;
                 if (!playbackTimer.IsRunning) playbackTimer.Start();
             }
         }

         else if (potValue < 0.15)
         {
             if (currentMode != PlaybackMode.BackwardFast)
             {
                 currentMode = PlaybackMode.BackwardFast;
                 playbackTimer.Interval = PLAYBACK_SPEED_FAST;
                 if (!playbackTimer.IsRunning) playbackTimer.Start();
             }
         }

         else if (potValue > 0.60 && potValue < 0.8)
         {
             if (currentMode != PlaybackMode.Forward)
             {
                 currentMode = PlaybackMode.Forward;
                 playbackTimer.Interval = PLAYBACK_SPEED_NORMAL;
                 if (!playbackTimer.IsRunning) playbackTimer.Start();
             }
         }

         else if (potValue > 0.85)
         {
             if (currentMode != PlaybackMode.ForwardFast)
             {
                 currentMode = PlaybackMode.ForwardFast;
                 playbackTimer.Interval = PLAYBACK_SPEED_FAST;
                 if (!playbackTimer.IsRunning) playbackTimer.Start();
              }
         }

         else if (potValue < 0.55 && potValue > 0.45)
         {
             if (currentMode != PlaybackMode.Stopped)
             {
                 currentMode = PlaybackMode.Stopped;
                 if (playbackTimer.IsRunning) playbackTimer.Stop();
             }
          }
      }

The Flipbook Maker to So Far and What's Next

In Part 3, we'll implement the WPF-based UI for the touchscreen menu. In the process, we'll also enable the Flipbook Maker to save images to disk, delete frames which didn't turn out quite right, or clear the entire movie and start over.

For convenience, here's the entire program to date:

using System;
using System.Collections;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Touch;
 
using Gadgeteer.Networking;
using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;
 
namespace FlipbookMaker
{
    public partial class Program
    {
        GT.StorageDevice SDCard;
 
        enum PlaybackMode { Forward, ForwardFast, Backward, BackwardFast, Stopped, Recording, Initializing };
        PlaybackMode currentMode = PlaybackMode.Initializing;
 
        ArrayList frames = new ArrayList();
        int currentFrame = 0;
 
        const int MAXIMUM_FRAMES = 60;
        TimeSpan PLAYBACK_SPEED_NORMAL = new TimeSpan(0, 0, 0, 0, 1000);
        TimeSpan PLAYBACK_SPEED_FAST = new TimeSpan(0, 0, 0, 0, 300);
 
        GT.Timer playbackTimer = new GT.Timer(new TimeSpan(0, 0, 0, 0, 200));
        GT.Timer potentiometerCheckTimer = new GT.Timer(new TimeSpan(0, 0, 0, 0, 100));
 
        // Camera will calibrate its brightness by taking some pictures,
        // which we throw away.
        Bitmap throwawayBitmap = new Bitmap(320, 240);
        int numBitmapsThrown = 0;
        const int BITMAPS_TO_THROW = 5;
        Image cameraImage;
        bool pictureTakingInProgress = false;
 
 
        // This method is run when the mainboard is powered up or reset.   
        void ProgramStarted()
        {
            // Set up event handlers for modules
            button.ButtonPressed += new GTM.GHIElectronics.Button.ButtonEventHandler(button_ButtonPressed);
            camera.BitmapStreamed += new GTM.GHIElectronics.Camera.BitmapStreamedEventHandler(camera_BitmapStreamed);
 
            sdCard.SDCardMounted += new SDCard.SDCardMountedEventHandler(sdCard_SDCardMounted);
            sdCard.SDCardUnmounted += new GTM.GHIElectronics.SDCard.SDCardUnmountedEventHandler(sdCard_SDCardUnmounted);
 
            // Set up event handlers for timers, and start timers running
            playbackTimer.Tick += new GT.Timer.TickEventHandler(playbackTimer_Tick);
            playbackTimer.Start();
 
            potentiometerCheckTimer.Tick += new Gadgeteer.Timer.TickEventHandler(potentiometerCheckTimer_Tick);
            potentiometerCheckTimer.Start();
 
            // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
            Debug.Print("Program Started");
        }
 
        void sdCard_SDCardMounted(GTM.GHIElectronics.SDCard sender, GT.StorageDevice SDCard)
        {
            this.SDCard = SDCard;
        }
 
        void sdCard_SDCardUnmounted(GTM.GHIElectronics.SDCard sender)
        {
            this.SDCard = null;
        }
 
        void button_ButtonPressed(GTM.GHIElectronics.Button sender, GTM.GHIElectronics.Button.ButtonState state)
        {
            if (!camera.CameraReady) return;
 
            if (frames.Count <= MAXIMUM_FRAMES)
            {
                if (playbackTimer.IsRunning) playbackTimer.Stop();
                if (potentiometerCheckTimer.IsRunning) potentiometerCheckTimer.Stop();
                currentFrame++;
                currentMode = PlaybackMode.Recording;
                cameraImage.Bitmap = new Bitmap((int)display.Width, (int)display.Height); // Give the camera and screen a new bitmap to stream to.
                camera.StartStreamingBitmaps(cameraImage.Bitmap);
            }
 
        }
 
        void playbackTimer_Tick(GT.Timer timer)
        {
            if (frames.Count == 0) return;
            if (!camera.CameraReady) return;
 
            if (currentMode != PlaybackMode.Stopped || currentMode != PlaybackMode.Recording)
            {
                if (currentMode == PlaybackMode.Forward || currentMode == PlaybackMode.ForwardFast)
                {
                    currentFrame++;
                    if (currentFrame > frames.Count - 1)
                        currentFrame = 0;
                }
 
                if (currentMode == PlaybackMode.Backward || currentMode == PlaybackMode.BackwardFast)
                {
                    currentFrame--;
                    if (currentFrame < 0)
                        currentFrame = frames.Count - 1;
                }
 
                cameraImage.Bitmap = (Bitmap)frames[currentFrame];
            }
 
        }
 
        void potentiometerCheckTimer_Tick(Gadgeteer.Timer timer)
        {
            double potValue = potentiometer.ReadPotentiometerPercentage();
 
            if (currentMode == PlaybackMode.Initializing)
            {
                if (camera.CameraReady)
                {
                    camera.StartStreamingBitmaps(throwawayBitmap);
                }
                return;
            }
 
            if (pictureTakingInProgress) return;
 
            if (potValue < 0.40 && potValue > 0.2)
            {
                if (currentMode != PlaybackMode.Backward)
                {
                    currentMode = PlaybackMode.Backward;
                    playbackTimer.Interval = PLAYBACK_SPEED_NORMAL;
                    if (!playbackTimer.IsRunning) playbackTimer.Start();
                }
            }
            else if (potValue < 0.15)
            {
                if (currentMode != PlaybackMode.BackwardFast)
                {
                    currentMode = PlaybackMode.BackwardFast;
                    playbackTimer.Interval = PLAYBACK_SPEED_FAST;
                    if (!playbackTimer.IsRunning) playbackTimer.Start();
                }
            }
            else if (potValue > 0.60 && potValue < 0.8)
            {
                if (currentMode != PlaybackMode.Forward)
                {
                    currentMode = PlaybackMode.Forward;
                    playbackTimer.Interval = PLAYBACK_SPEED_NORMAL;
                    if (!playbackTimer.IsRunning) playbackTimer.Start();
                }
            }
            else if (potValue > 0.85)
            {
                if (currentMode != PlaybackMode.ForwardFast)
                {
                    currentMode = PlaybackMode.ForwardFast;
                    playbackTimer.Interval = PLAYBACK_SPEED_FAST;
                    if (!playbackTimer.IsRunning) playbackTimer.Start();
                }
            }
            else if (potValue < 0.55 && potValue > 0.45)
            {
                if (currentMode != PlaybackMode.Stopped)
                {
                    currentMode = PlaybackMode.Stopped;
                    if (playbackTimer.IsRunning) playbackTimer.Stop();
                }
            }
        }
 
        void camera_BitmapStreamed(GTM.GHIElectronics.Camera sender, Bitmap bitmap)
        {
            if (currentMode == PlaybackMode.Initializing)
            {
                numBitmapsThrown++;
                if (numBitmapsThrown == BITMAPS_TO_THROW)
                {
                    currentMode = PlaybackMode.Stopped;
                    camera.StopStreamingBitmaps();
                }
                return;
            }
            cameraImage.Invalidate();
 
            if (button.IsPressed) return; //carry on streaming pictures to the screen while the button is pressed
 
            frames.Insert(currentFrame, cameraImage.Bitmap);
 
            camera.StopStreamingBitmaps();
            potentiometerCheckTimer.Start();
        }
    }
}

Looking for API reference docs for the core Gadgeteer libraries?

Kerry Hammil — Tue, 20 Dec 2011 20:12:00 GMT

Look no further. The Gadgeteer core library documentation is posted on the Gadgeteer community site at http://www.netmf.com/gadgeteer/docs/gadgeteercore/index.html.

This covers the namespaces:

Gadgeteer - including the Color, Mainboard, Picture, Program, Socket, StorageDevice and Timer classes.
Gadgeteer.Interfaces - including AnalogInput, AnalogOutput, DigitalInput, DigitalIO, DigitalOutput, I2CBus, InterruptInput, PWMOutput, Serial and SPI classes.
Gadgeteer.Modules - including Module, DaisyLinkModule, DisplayModule, DisplayModule.SimpleGraphicsInterface, and NetworkModule classes.
Gadgeteer.Networking

Check it out, and if you have any questions, let us know in the Gadgeteer forums.

Why not while(true)?

Kerry Hammil — Mon, 19 Dec 2011 20:29:00 GMT

Many programs have a basic structure of:

while (true)
{
    // Program goes here
}

This approach is logical if your program is responsible for monitoring user input, device I/O, threads, etc. However, it's not an optimal approach for most Gadgeteer programs. The rest of this post will explore the Gadgeteer event dispatcher, execution model, and best practices for utilizing their benefits.

How Gadgeteer Programs Run

When you write a Gadgeteer program, the code you want to run first should go into the ProgramStarted method. The system calls this method after the hardware is booted and the event dispatcher is running. ProgramStarted is a good place to create event handlers, set initial state in modules, and show a welcome screen if you're using a display.

However, you don't want to run an infinite loop in ProgramStarted. Why not? Because none of your event handlers will get called until after ProgramStarted exits. That includes any timers you've created.

This happens because modules send events to a queue which is processed by the same thread that executes ProgramStarted. If ProgramStarted never exits, the dispatcher never starts.

The .NET Micro Framework Dispatcher

Gadgeteer uses an event dispatcher to funnel events from modules and timers to your program. Many modules do processing on their own threads, but they send events to a dispatcher on the main program thread. That dispatcher routes events to the appropriate event handlers in your code.

That means you don't need to worry about multi-threading (and its pitfalls like race conditions) unless you choose to create multiple threads yourself. Any multithreading done by modules and timers is strictly behind the scenes.

The dispatcher makes it easy to work with devices that work asynchronously, too. For example, many camera modules take a while (in microprocessor clock cycle terms) to capture a picture, encode it into a useful format and send the data to the main processor. Networking events happen sporadically, and your application shouldn't spend time polling the network if it's not active. Same with user input components - you want to know when the user presses or releases a button, but you don't want to spend processor resources on it otherwise.

The tricky thing is that the dispatcher runs on the same thread as your program code, so you have to give it time to run. Any method which contains an infinite loop (or which takes a very long time to complete) will prevent the dispatcher from notifying your program about important events.

Care and Feeding of the Dispatcher

There are two design patterns which work very well for Gadgeteer programs.

1) Register event handlers whenever possible. Don't block on user or device input, as this will prevent other parts of your project from functioning.

2) Create a Gadgeteer.Timer and listen for its Tick event. Any operation which you want to do at regular intervals is a good candidate for a timer.

Here's an example of a program which controls a Button module that has an onboard LED. The LED is set to blink on and off at a 1 second interval, and the program prints debug text when the user presses the button.

public partial class Program
    {
        GT.Timer ledBlinkTimer = new GT.Timer(1000);
 
        void ProgramStarted()
        {
            button.ButtonPressed += new Button.ButtonEventHandler(button_ButtonPressed);
            ledBlinkTimer.Tick += new GT.Timer.TickEventHandler(ledBlinkTimer_Tick);

            ledBlinkTimer.Start();

        }
 
        void ledBlinkTimer_Tick(GT.Timer timer)
        {
            if (button.IsLedOn == true)
            {
                button.TurnLEDOff();
            }
 
            else
                button.TurnLEDOn();
        }
 
        void button_ButtonPressed(Button sender, Button.ButtonState state)
        {
            Debug.Print("Button Pressed");   
        }
    }

This program will not block the dispatcher from running, and it won't spend a lot of processor cycles listening for button events.

The corresponding anti-pattern for Gadgeteer looks like this:

    public partial class Program
    {
        GT.Timer ledBlinkTimer = new GT.Timer(1000);
 
        // Don't do this with Gadgeteer.  It won't work!
        void ProgramStarted()
        {
            ledBlinkTimer.Tick += new GT.Timer.TickEventHandler(ledBlinkTimer_Tick);
            ledBlinkTimer.Start();
 
            // This while loop prevents the timer event from firing
            while (true)
            {
                if (button.IsPressed == true)
                {
                    Debug.Print("Button pressed");
                }
            }
            
        }
 
        // This event handler is never called because the program thread is blocked!
        void ledBlinkTimer_Tick(GT.Timer timer)
        {
            if (button.IsLedOn == true)
            {
                button.TurnLEDOff();
            }
 
            else
                button.TurnLEDOn();
        }

This pattern is quite common, especially for embedded devices. It's not wrong, but it doesn't work with the Gadgeteer dispatcher, which is essentially a while(true) loop itself!

Questions?

The Microsoft Research team who created Gadgeteer hangs out on the Gadgeteer forums. We're also on Twitter (@netgadgeteer) and Facebook if you want to find us.

How to Build a Flipbook Maker: Part 1

Kerry Hammil — Sun, 18 Dec 2011 21:51:00 GMT

Build your own stop-motion animation tool using .NET Gadgeteer! The Flipbook Maker combines Gadgeteer's intuitive hardware and software construction with a useful enclosure to create a project that will appeal to your inner cartoonist.

The end result looks like this:

Read more about this project in the Gadgeteer Featured Projects library - including a video of it in action!

What You'll Need

This walkthrough uses modules from GHI Electronics' Fez Spider Starter Kit. Other mainboards and modules can be substituted - just check that your modules will work with the sockets on your mainboard. You can quickly determine whether a module will work with a mainboard by matching the module's socket type letter with the socket type letters on each mainboard socket.

Hardware Modules Used:

Mainboard
Camera Module
Potentiometer Module
Button Module
SD Card Module (plus an SD card - check your module to determine its card size and capacity requirements)
USBClient power module

You'll also need a Gadgeteer development environment. Check out this guide which describes how to set that up.

Finally, if you want to assemble your Flipbook Maker as pictured here, you'll need to create an enclosure for it. We'll talk about fabrication options in a later post - including stuff you can do yourself and services you can use to have the case constructed for you.

Step 1: Connect the Modules

First, create a new Gadgeteer project in Visual C# Express. From the File Menu, select New Project, then click the Gadgeteer category under Visual C#. Choose ".NET Gadgeteer Application" and give it the name "Flipbook Maker".

Next, add the Gadgeteer modules to the project by dragging the appropriate modules from the Toolbox to the design surface. Connect the modules together using the below picture as a guide, or just right-click in the designer and choose "Connect All Modules". The result should look something like this:

Finally, connect your physical Gadgeteer modules together as shown in the designer.

Step 2: Starting the Software

Next, we'll create the basic structure for the software. Open the auto-generated Program.cs and read through the comment in ProgramStarted - it describes how to access the modules that were created in the designer, how to quickly create event handlers, and how to create timers. We'll do all three of those tasks here.

The Gadgeteer programming model is largely event-driven: each module exposes events that represent important states or user actions such as a button being pressed. Your program can choose to listen to those events by registering event handlers.

The FlipbookMaker needs to listen to these events:

Button presses
SD card insertion and removal
Camera sending a picture to the mainboard

Also, the FlipbookMaker needs a couple of timers. Each timer fires an event at a specified interval, which allows your program to do things on a regular basis. We'll create timers for two purposes:

Animation playback
Reading the potentiometer. The Potentiometer module does not fire events when it is turned, so the program must check it regularly.

Here's the code to register the event handlers. This goes in ProgramStarted() so that the event handlers are created when the program launches.

button.ButtonPressed += new GTM.GHIElectronics.Button.ButtonEventHandler(button_ButtonPressed);
camera.BitmapStreamed += new GTM.GHIElectronics.Camera.BitmapStreamedEventHandler(camera_BitmapStreamed);

sdCard.SDCardMounted += new SDCard.SDCardMountedEventHandler(sdCard_SDCardMounted);
sdCard.SDCardUnmounted += new GTM.GHIElectronics.SDCard.SDCardUnmountedEventHandler(sd_SDCardUnmounted);

This process will also create empty methods named button_ButtonPressed, camera_BitmapStreamed, sdCard_SDCardMounted, and sdCard_sdCardUnmounted. These are the methods that will be called when the corresponding event happens. The next post in this series will discuss how to implement these methods.

Next, declare and instantiate two timers. These should go inside the Program class but not inside the ProgramStarted() method - they need to be accessible to the entire program.

GT.Timer playbackTimer = new GT.Timer(new TimeSpan(0, 0, 0, 0, 200));
GT.Timer potentiometerCheckTimer = new GT.Timer(new TimeSpan(0, 0, 0, 0, 100));

Finally, create the timer tick event handlers inside ProgramStarted() and start them running.

playbackTimer.Tick += new GT.Timer.TickEventHandler(playbackTimer_Tick);
playbackTimer.Start();
 
potentiometerCheckTimer.Tick += new Gadgeteer.Timer.TickEventHandler(potentiometerCheckTimer_Tick);
potentiometerCheckTimer.Start();

Here's the entire Program.cs listing so far:

using System;
using System.Threading;
using Microsoft.SPOT;
using Microsoft.SPOT.Presentation;
using Microsoft.SPOT.Presentation.Controls;
using Microsoft.SPOT.Presentation.Media;
using Microsoft.SPOT.Touch;
 
using Gadgeteer.Networking;
using GT = Gadgeteer;
using GTM = Gadgeteer.Modules;
using Gadgeteer.Modules.GHIElectronics;
 
namespace FlipbookMaker
{
    public partial class Program
    {
        GT.Timer playbackTimer = new GT.Timer(new TimeSpan(0, 0, 0, 0, 200));
        GT.Timer potentiometerCheckTimer = new GT.Timer(new TimeSpan(0, 0, 0, 0, 100));
 
        // This method is run when the mainboard is powered up or reset.   
        void ProgramStarted()
        {
            /*******************************************************************************************
            Modules added in the Program.gadgeteer designer view are used by typing 
            their name followed by a period, e.g.  button.  or  camera.
            
            Many modules generate useful events. Type +=<tab><tab> to add a handler to an event, e.g.:
                button.ButtonPressed +=<tab><tab>
            
            If you want to do something periodically, use a GT.Timer and handle its Tick event, e.g.:
                GT.Timer timer = new GT.Timer(1000); // every second (1000ms)
                timer.Tick +=<tab><tab>
                timer.Start();
            *******************************************************************************************/
 
            // Set up event handlers for modules
            button.ButtonPressed += new GTM.GHIElectronics.Button.ButtonEventHandler(button_ButtonPressed);
            camera.BitmapStreamed += new GTM.GHIElectronics.Camera.BitmapStreamedEventHandler(camera_BitmapStreamed);
 
            sdCard.SDCardMounted += new SDCard.SDCardMountedEventHandler(sdCard_SDCardMounted);
            sdCard.SDCardUnmounted += new GTM.GHIElectronics.SDCard.SDCardUnmountedEventHandler(sdCard_SDCardUnmounted);
 
            // Set up event handlers for timers, and start timers running
            playbackTimer.Tick += new GT.Timer.TickEventHandler(playbackTimer_Tick);
            playbackTimer.Start();
 
            potentiometerCheckTimer.Tick += new Gadgeteer.Timer.TickEventHandler(potentiometerCheckTimer_Tick);
            potentiometerCheckTimer.Start();
 
            // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
            Debug.Print("Program Started");
        }
 
        void sdCard_SDCardMounted(GTM.GHIElectronics.SDCard sender, GT.StorageDevice SDCard)
        {
        }
 
        void sdCard_SDCardUnmounted(GTM.GHIElectronics.SDCard sender)
        {
        }
 
        void potentiometerCheckTimer_Tick(Gadgeteer.Timer timer)
        {
        }
 
        void button_ButtonPressed(GTM.GHIElectronics.Button sender, GTM.GHIElectronics.Button.ButtonState state)
        {
        }
 
        void camera_BitmapStreamed(GTM.GHIElectronics.Camera sender, Bitmap bitmap)
        {
        }
 
        void playbackTimer_Tick(GT.Timer timer)
        {
        }
    }

What's Next?

In Part 2, we'll design the behavior for the FlipbookMaker in various states: taking pictures, playing back movies, editing and saving to disk. Part 3 will cover creating a touchscreen menu system using Gadgeteer. Finally, in Part 4 we'll add the finishing touches to the program and discuss some ways to create FlipbookMaker enclosures.

Can't wait? Check out the Gadgeteer forums to see what others are building. And follow us on Twitter (@netgadgeteer) - we post about cool projects there, too.

Thursday Featured Module: Buttons

Kerry Hammil — Fri, 09 Dec 2011 02:42:00 GMT

This is the first in a new series of posts: Thursday Featured Modules. Each week we'll post about an interesting Gadgeteer module, including how to use it and where to find it.

The Mighty Button

Today we'll cover one of the most fundamental modules in many devices you already use today: the button. It's universally understood by users and easy to program. There are currently two button modules available for Gadgeteer, one from GHI Electronics and one from Sytech. Each offers a little something extra: an LED you can use as a status indicator or to visually register button presses.

How to Add a Button to Your Gadgeteer Project

Adding a button to your Gadgeteer project is really easy. In Visual Studio or Visual C# Express, create a new Gadgeteer project. (This walkthrough assumes you have the necessary Gadgeteer software installed on your computer. If you still need to do that, go here first.)

Drag a button from the toolbox onto the design surface and connect it to a compatible socket.

Now, go to Program.cs and use Intellisense to see what the Button module can do. The API is quite similar for the GHI and Sytech buttons, so this walkthrough works well for both.

Detecting Button Presses

The Button exposes two events: ButtonPressed and ButtonReleased. By listening to both, your gadget can do something when the button is pressed and again when the user releases it. Here's a quick code snippet that shows how to toggle the Button's LED each time the button is pressed:

public partial class Program
    {
        // This method is run when the mainboard is powered up or reset.   
        void ProgramStarted()
        {
            button.ButtonPressed += new Button.ButtonEventHandler(button_ButtonPressed);
 
            // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
            Debug.Print("Program Started");
        }
 
        void button_ButtonPressed(Button sender, Button.ButtonState state)
        {
            // Toggle the LED when the button is pressed.
            button.ToggleLED();
        }
    }

Using Button.LEDMode Property

You can use the Button's LEDMode property to make the LED automatically respond to button presses. You can set the LED to respond in several ways:

This snippet shows how to make the LED's button light up while the button is held down:

public partial class Program
    {
        // This method is run when the mainboard is powered up or reset.   
        void ProgramStarted()
        {
            button.LEDMode = Button.LEDModes.OnWhilePressed;
 
            // Use Debug.Print to show messages in Visual Studio's "Output" window during debugging.
            Debug.Print("Program Started");
        }
 
    }

That's it! Click away :)

Questions?

Ask them in the Gadgeteer forums!

Want up to date information on Gadgeteer-compatible button modules? Search the Gadgeteer Product Showcase for buttons to see individual modules and kit options.

How to use Gadgeteer Interfaces directly from your application

nicvillar — Thu, 10 Nov 2011 23:41:00 GMT

One of the benefits of the .NET Gadgeteer design is that it provides ready-to-use hardware modules. Module designers can build libraries in such a way that they take care of the lower-level communication protocols and electrical signals that need to take place between the mainboard and the modules. Users of those modules can simply connect the hardware together, and use the high-level programming interfaces provided by the libraries.

At the same time, .NET Gadgeteer is just as much about extensibility as it is about ease of use. To this end, the Gadgeteer.Interfaces namespace provides direct access to the most commonly used communication and electrical input/output capabilities of the mainboard. Interfaces are not usually accessed directly from a Gadgeteer application, and are more regularly used inside module libraries as a way to control or communicate with the module hardware. For example, a module library might internally use a DigitalInput interface to monitor the state of a button, a DigitalOutput to control an LED, or an I2CBus to read the value of a sensor.

The interfaces currently supported are: AnalogInput, AnalogOutput, DigitalInput, DigitalIO, DigitalOutput, I2CBus, InterruptInput, PWMOutput, Serial and SPI.

Interfaces are closely related to the concept of socket types, in that different socket types support different interfaces. For example, socket type I specifies the electrical pinout for the I2CBus interface (SDA and SCL, on pins 8 and 9). However, there is not a one-to-one mapping between socket types and interfaces. For instance, the same socket type I definition specifies that in any mainboard socket labelled with an I, both pins 3 and 6 are GPIOs. These pins can be controlled by using any of the DigitalInput, DigitalOutput or DigitalIO interfaces. In addition, pin 3 is marked as being interrupt-capable, and these capabilities can be accessed by using the InterrruptInput interface.

Using Gadgeteer.Interfaces from an Application

As mentioned, interfaces are most often used from within module libraries. I highly recommend reading this blog post, written by Pete Brown about the process of creating a new hardware module, and writing the accompanying software library for it.

There are also cases when it is useful to be able to use the interfaces directly from the application code. For example, you might want to quickly test a new sensor without the overhead of creating a new module library. Here's how you do that:

As a first step, it is good practice to add the following line of code to the using-statement block, at the top of the application code file:

using GTI = Gadgeteer.Interfaces;

This is optional, but it allows GTI to be used as a shortcut to the Gadgeteer.Interfaces namespace throughout the code, in the same way that GT is used as a shortcut for Gadgeteer, and GTM for Gadgeteer.Modules.

In order to initialize any interface, it is necessary to specify the mainboard socket through which the interface will be used. It is possible to get a reference to any of the mainboard sockets by using a statement like this:

GT.Socket socket = GT.Socket.GetSocket(4, true, null, null);

In this case, the GetSocket method returns a reference to the mainboard socket number 4. The second parameter specifies that an exception will be thrown if the socket number is invalid (i.e.. if the mainboard didn't actually have a socket number 4). The third and fourth parameters can be null, since they are only applicable when the interface is being used from within a module library.

The following code snippet is an example of a I2CBus interface being defined, initialized within ProgramStarted(), and then used from a method called Test():

public partial class Program
{

GTI.I2CBus i2c;

void ProgramStarted()
{

GT.Socket socket = GT.Socket.GetSocket(4, true, null, null);
i2c = new GTI.I2CBus(socket, 0x11, 50, null);
Test();

}

void Test()
{

byte[] buffer = new byte[]{0x01, 0x02, 0x03};
i2c.Write(buffer, 100);

}

}