How to Build a Flipbook Maker: Part 1
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.