The Micro Framework is one of the newest kids on the .NET block, but it does something really rather wonderful. It brings embedded development within the reach of any C# programmer. If you know C# and love Visual Studio, you can now get started building hardware and controlling it with your software. Moreover, it lets developers achieve one of their most cherished dreams, to control their festive lights using programs that they have written. This project shows you how to do just that and adds an extra magical feature, in that you can make all your festive lights flash red whenever I, Rob Miles, make a new post on that most famous of blogs, www.robmiles.com.

Actually, you can modify the code so that you can make your lights do most anything in response to an event that happens on the web. You could signal home that you are running late, send the weather forecast to your Christmas tree or explore any number of communication options. You might decide that this is so useful that you leave your decorations up all year round.

If you just want to play with the .NET Micro Framework and get a feel for how easy it is to create software for tiny devices you don't actually need to use any extra hardware at all. The project comes with a complete emulation of the lights display so that you can run the whole thing on your computer and learn how hardware and software can be made to work together without burning your fingers with a soldering iron.

However building the hardware will give you an understanding of how some simple electronic components can be controlled from C# and even how serial and parallel data transfer works. It is also great fun.

To get started you will need some hardware and some software. Let's take each in turn.

Hardware

Processor Hardware

The .NET Micro Framework lets you run C# programs on tiny embedded devices. There are a number of these available today, and they are getting progressively cheaper. You can base this project on any.NET Micro Framework device that has a network port and three or more output ports. The ones I'd recommend are:

• Digi Connect-ME: http://www.digi.com/products/embeddedsolutions/digiconnectme.jsp
• GHI Electronics Embedded Master: http://www.ghielectronics.com/embeddedmaster.php
• Devices Solutions Tahoe II: http://devicesolutions.net/Products/Tahoe.aspx

I built the project for Digi Connect board but the code can be customised for any of the above platforms. The beauty of the .NET Micro Framework is that you hardly need to change your program even if the underlying hardware is completely replaced. The only thing you will have to do is adjust the code to target different output pins. I'll flag this part of the program up when we get to it.

The project as supplied runs on a special emulator that runs on the PC and behaves like a .NET Micro Framework device with lights connected, so you can get started exploring the code right away.

Lights

I'm keeping things deliberately low voltage for this project. This means that kids of all ages can have a go at building the hardware without messing around with mains. The lights that I used were supplied as lines of twenty leds wired up as four strands of five leds each. All the leds in each strand were the same colour. The lights were fitted with a little battery box which held three AA batteries and a tiny controller. To get my display I simply removed the battery box and connected the strands to my hardware.

 
Figure 1: My Battery Powered Lights

You can do the same with any low power lighting kit that you wish to use. The drivers that I'm using can handle around 500 milliamps of continuous current and so you can connect a fair number of lights to each strand.

Buying the Lights

The lights I used can be bought in the UK from Lights4Fun: www.lights4fun.co.uk and are called "C-LED-4.5-M 20 Multi Coloured Battery Operated LED Fairy Lights". They are supplied with a battery box and controller that you can remove to connect to the Darlington drivers. I used an old 5 volt mobile phone charger to power the lights. If you search eBay for "led christmas lights battery" you should find plenty of suppliers.

Driver Hardware

We can't connect a .NET Micro Framework device directly to our lights. There are two reasons for this:

1. The Micro Framework device will not be able to switch the amount of current that we need to drive the lights themselves.
2. The Micro Framework device will not have enough outputs to control all the lights that we want to use.

This means that we need to make some hardware that goes between the processor and our lights. I actually don't see this as a problem. Making hardware is great fun, seeing something that you've built spring into life is very nice. The hardware we are going to use will provide a means by which we can control many hundreds of lights from a single Micro Framework board if we wish. It also has the ability to switch reasonable amounts of current, so you can use quite large numbers of lights if you wish. We are going to use two semiconductor components, a CD4094 Shift Register/Latch and a ULN2803 Octal Darlington Driver. A pair of these chips will allow us to control 8 outputs. If you want to control more outputs you simply get more chips and chain them together. For my version of the project I just used one of each chip, you can use as many as you like.The shift registers and Darlington amplifiers can be obtained in the UK from Maplin: www.maplin.co.uk. The chip numbers and part numbers as are as follows: QW54J 4094 Shift Register, QY79L ULN2803A Darlington Driver. In the US you can obtain the components and breadboard from Digi-Key: www.digikey.com.

Serial and Parallel Data

You might be wondering how we can use just three output lines to control lots of lights. We are going to do this by using the three output lines to provide a serial data stream which is converted by our hardware into parallel data that can be used to control our lights. This is a fundamental principle of digital electronics and is how, amongst many other things, computer networks transfer data.

We are going to use three signals which are called clock, data and latch. Each of these can be set high (a voltage is present) or low (no voltage is present) by the .NET Micro Framework device under the control of our software. The signals are connected to the clock, data and latch inputs of our CD4094 shift register so that the program can talk to it.

The clock line triggers the shift register to do two things:

1. Shift all the bits along to make room.
2. Sample the value of the data input and store this value in the space that was created.

To get a feel for how this works, take a look at Figure 2 below. It shows a shift register with a pattern of bits in it. The pattern is 01100001. Note that although this represents a number; it can also be regarded as a pattern of 0s and 1s in the shift register itself. The value 0 means 0 volts and the value 1 means some volts. These are the signals that will be used to control our lights. I'm going to call them 0 and 1 from now on. The Shift Register has Clock, Data and Latch signals connected and they are all set to 1. We can ignore the latch part of the chip for now.

Figure 2: A shift register and latch with some data in it

When the clock signal changes from 1 to 0 this causes the shift register to perform the two steps described above. First the data is shifted along to the right. Note that this means that there is an "empty" location at the start of the register, and that the right most bit in the register "falls off" the register and disappears. Figure 3 shows how this works.

Figure 3: Shifting along the values in the shift register

Once the shift has finished the shift register can copy the data signal into the empty bit at the left as shown in Figure 4 below.

Figure 4: Storing the new data bit

By repeating this process 8 times a program can load a new pattern of 8 bits into the shift register. Then it is time to latch the new value to control the lights. This is the point at which the lights will appear to change. When the latch value is changed from 0 to 1 this causes the chip to copy the value in the Shift Register into the latch, as shown in Figure 5 below.

Figure 5: Copying the shift register pattern into the latch.

The latch is required so that the lights will not flicker as the new patterns are shifted into position. Each of the bits in the latch is connected to an output pin on the CD4094 which is used to switch a particular light colour on or off.

We need to create some C# that will provide the appropriate sequence of signals. It turns out that using the .NET Micro Framework to achieve this is actually very easy. The displayByte method below sends an 8 bit value into a shift register and then latches it into the output. If you read through the code you can see how the clock, data and latch values are all set to true (high) or false (low) to first clock the data out and then trigger the latch to display the pattern on the lights. The input is an 8 bit byte value and the program uses a mask to pick out the value of each bit in turn and set the data output accordingly.

private static void displayByte(byte value)
{
    latchPort.Write(false);
    clockPort.Write(false);

    byte mask = 1;

    for (int i = 0; i < 8; i++)
    {
        if ((value & mask) > 0)
        {
            dataPort.Write(true);
        }
        else
        {
            dataPort.Write(false);
        }
        clockPort.Write(true);
        clockPort.Write(false);
        mask <<= 1;
    }
    latchPort.Write(true);
    latchPort.Write(false);
}

The dataPort, clockPort and latchPort variables are instances of the .NET Micro Framework class OutputPort, which provides a method called Write which can be used to control the state of the output signal. We will consider how these are created a little later in the article.

The sample code for this project comes with a software emulator of the CD4094 which shows how it works. Figure 6 below shows that a new pattern is in the process of being shifted into the shift register, while the lights retain the previous one in the latch. The Clock and Data signals are high and the next statement will drop the Clock signal to add the next bit into the new pattern.

Figure 6: The light emulator

This figure also shows that I have two bits in the pattern controlling a strand of each colour. You can single step through the displayByte method above and watch it perform this output.

You can use this technique every time you want to control a large number of outputs using a small number of output pins. The CD4094 has "daisy chain" inputs and outputs so that the devices can be connected in sequence. If I used two devices I could control 16 bits, with three I could control 24 and so on. This would require only minimal changes to the software.

Output Driver

The CD4094 device will produce a signal output, but it is not really powerful enough to drive things like lights. To do this we need an amplifier and the ULN2803 Octal Darlington Driver is perfect for this. It is packaged as a single chip which contains 8 pairs of transistors. Each transistor pair is wired in a "Darlington" configuration and can be used as a switch which is controlled by on output from the CD4094. When the transistors are turned on they allow current to pass through them and this will cause the lamps to light. The lights that I bought used a "pull down" arrangement to make them light up. All of the light emitting diode (LED) lamps had one end wired to a common line that was connected to the positive supply. To make the a chain of LEDs light the other end that controls that chain needed to be pulled down to the ground level. This is a common arrangement with lights like these. The ULN2803 driver has the transistors wired in an arrangement that allows it to pull signals low in this way. Figure 7 shows how this arrangement works. The resistor shown is actually wired into each LED in the set of lights that I used.

Figure 7: Lighting the LEDs

Complete Circuit

The complete circuit shown in Figure 8 simply links each output of the CD4094 shift register to an input on the ULN2803 Darlington Driver. Note that there is no reason to link any particular bit with any other, the diagram shown is one which will translate most easily to a prototype "breadboard".

Figure 8: The Complete Circuit

The diagram just shows four lights connected to OUT1 from pin 18 of the ULN2803, the other 7 channels are connected in exactly the same way. Some of the pins can be left unconnected. Pins 9 and 10 of the CD4094 are only required if you are connecting multiple shift registers together and the common connection on pin 10 of the ULN2803 is not required. The Latch, Data and Clock signals on the CD4094 are connected to the output signals from the Micro Framework device.

Figure 9 shows the completed circuit built up on a prototype breadboard. The chip on the left is the CD4094 and the one on the right is the ULN2803.

Figure 9: The Completed Circuit

The red wires carry the positive voltage from the power supply, which is connected to the top left of the circuit. The green wires are ground. Other coloured wires are used for signals. The Clock, Latch and Data signals are brought out to a connector which will fit a Digi-ME prototyping board.

Selecting Lights

Each bit in the value sent to the displayByte method and then into the shift register will be mapped to a particular chain of lights. The mapping of these is not particularly important, since you can use program constants to represent particular values. I wired the red signals to output pins 4 and 8. To light up just the red lights I used the value 0x88 which is the appropriate bit pattern. I then set up constants for all the other colors:

const byte GREEN = 0x11;
const byte BLUE = 0x22;
const byte YELLOW = 0x44;
const byte RED = 0x88;

Setting Up the Hardware

The .NET Micro Framework provides a set of classes that can be used to represent the hardware in a system. The program uses instances of the OutputPort class to represent the output pins. These are created in the method that sets up the hardware:

const Cpu.Pin clockPin = Cpu.Pin.GPIO_Pin0;
const Cpu.Pin dataPin = Cpu.Pin.GPIO_Pin1;
const Cpu.Pin latchPin = Cpu.Pin.GPIO_Pin2;

static OutputPort clockPort;
static OutputPort dataPort;
static OutputPort latchPort;

private static void setupOutputs()
{
    clockPort = new OutputPort(clockPin, false);
    dataPort = new OutputPort(dataPin, false);
    latchPort = new OutputPort(latchPin, false);
}

In this version of the hardware I have connected pin 0 of the processor to the clock, pin 1 to the data and pin 2 to the latch. If you use different pins you can change the settings above.

Software

Now that we have working hardware we can consider how the software is to work. Note that this version of the program works correctly but lacks exception handlers that would make it truly robust. I've left these out to simplify the explanation. To make sense of this description you will need to have a copy of the program itself available for reference.

You can develop the code using Visual Studio 2008 Express edition, which you can download from http://www.microsoft.com/express/

The software is written for the .NET Micro Framework 3.0 which you can download from http://www.microsoft.com/downloads/details.aspx?FamilyID=9356ed6f-f1f0-43ef-b21a-4644dd089b4a&displaylang=en

Reading the Blog

The program reads the RSS feed from a blog and looks for the <pubDate> value. This contains the date when the feed was last updated. Whenever this date changes the lights must flash red for a few seconds before resuming a random display. Users of the full .NET Framework can use the HTTPRequest class to build a GET command to be sent to a server. Unfortunately the .NET Micro Framework does not support this, so we have to access the web feed using socket based communication. This part of the program is heavily based on the SocketClient example supplied with the .NET Micro Framework.

// This method requests a page from the specified server.
private static String GetWebPage(String server, string webPage)
{
    const Int32 c_httpPort = 80;
    const Int32 c_microsecondsPerSecond = 1000000;

    // Create a socket connection to the specified server and port.
    using (Socket serverSocket = ConnectSocket(server, c_httpPort))
    {
        // Send request to the server.
        String request = "GET "+ webPage + 
             " HTTP/1.1\r\nHost: " + server + 
             "\r\nConnection: Close\r\n\r\n";
        Byte[] bytesToSend = Encoding.UTF8.GetBytes(request);
        serverSocket.Send(bytesToSend, bytesToSend.Length, 0);

        // Allocate a buffer to receive HTML chunks
        Byte[] buffer = new Byte[1024];

        // 'page' refers to the HTML data as it is built up.
        String page = String.Empty; 

        // Wait up to 30 seconds for initial data 
        // Will throw exception if connection closed
        DateTime timeoutAt = DateTime.Now.AddSeconds(30);
        while (serverSocket.Available == 0 && 
               DateTime.Now < timeoutAt)
        {
            System.Threading.Thread.Sleep(100);
        }

        // Poll for data until 30 second time out
        // Returns true for data and connection closed
        while (serverSocket.Poll(30 * c_microsecondsPerSecond,
                                 SelectMode.SelectRead))
        {
            // Zero all bytes in the re-usable buffer
            Array.Clear(buffer, 0, buffer.Length);

            // Read a buffer-sized HTML chunk
            Int32 bytesRead = serverSocket.Receive(buffer);

            // If 0 bytes in buffer, then connection is closed, 
            // or we have timed out
            if (bytesRead == 0)
                break;

            // Append the chunk to the string
            page += new String(Encoding.UTF8.GetChars(buffer));
        }

        return page;   // Return the complete string
    }
}

This method is called to fetch the journal RSS feed from my blog:

string address = "www.robmiles.com";
string name = "/journal/rss.xml";

string html = GetWebPage(address, name);

You can use it to download from any RSS feed or page on the web. It will throw an exception if the page cannot be read. This version of my program does not perform exception handling however.

Getting the Published Date

The date is held in the form:

<pubDate>Wed, 05 Nov 2008 22:38:52 +0000</pubDate>

It would be enough just to record this content and check for changes in the text, but I decided that I might want to use the date information in a later version of the program and so I created some small helper methods to read numbers from the input string and a larger method to read the publish date itself:

private static DateTime getRecentPubDate(string html, string startTag)
{
    int index = html.IndexOf(startTag) ;

    if (index < 0) 
        throw new Exception("Missing tag " + startTag);

    index += startTag.Length;

    // spin past the name of the day
    while (index < html.Length && html[index] != ',') index++;
    if (index == html.Length) 
        throw new Exception("Short publish date");

    int dayValue = getInt(html, ref index, ' ');

    string monthName = getString(html, ref index, ' ');
    int monthValue = getMonth(monthName);

    int yearValue = getInt(html, ref index, ' ');
    int hourValue = getInt(html, ref index, ':');
    int minuteValue = getInt(html, ref index, ':');
    int secondValue = getInt(html, ref index, ' ');

    return new DateTime(yearValue, monthValue, dayValue, 
                        hourValue, minuteValue, secondValue);
}

The main body of the program uses this method to extract the date out of the RSS feed. When a new date is found it is time to update the lights.

Lights and Threads

My first version of the program flashed the lights for a while and then checked to see if a new blog post had been made. This worked OK, but the process of loading the RSS feed from the server and checking the dates can take a few seconds, which meant that the flashing lights would freeze every now and then. This did not look very good, and so I decided to use two threads instead. One is in charge of flashing the lights in a random pattern and the other loads the RSS feed from my blog and checks the date of the most recent publication.

Note that the threading I am using is exactly the same as threading in the full .NET Framework.

Thread Communication

The two threads communicate by means of a single boolean variable which is set to true when the blog alert is to take place. The display thread reads this flag and flashes the lights red if it is time to alert.

public static bool alert = false;

public static void flasher()
{
    setupOutputs();

    while (true)
    {
        randomDisplay(400, 10);
        if (alert)
        {
            alert = false;
            flashRed(600, 20);
        }
    }
}

The methods randomDisplay and flashRed do exactly what you would expect. Each of them gets two numbers to control the lights. The first number gives the delay in milliseconds between flashes (a few hundred milliseconds giving best results). The second gives the number of times that the lights should be flashed before the method finishes. RandomDisplay displays random colors, whereas flashRed is simply flashes the red lights. The alert flag is cleared before the red lights are flashed so that the system will resume normal display after the alert.

The second thread in the system performs the blog download and date test behaviour. This all happens inside the Main method:

public static void Main()
{
    flashThread = new System.Threading.Thread(flasher);

    flashThread.Start();

    string address = "www.robmiles.com";
    string name = "/journal/rss.xml";

    String html = GetWebPage(address, name);

    DateTime lastUpdate = getRecentPubDate(html, "<pubDate>");

    Debug.Print("Initial Update Value : " + lastUpdate.ToString());

    while (true)
    {
        System.Threading.Thread.Sleep(10000);

        html = GetWebPage(address, name);

        DateTime blogUpdate = getRecentPubDate(html, "<pubDate>");

        if (!blogUpdate.Equals(lastUpdate))
        {
            Debug.Print("Updated at : " + blogUpdate.ToString());
            lastUpdate = blogUpdate;
            alert = true;
        }
    }
}

To reduce the load on the network the system only checks the blog feed every 10 seconds.

Future Work

The program itself works fine, but the error handling is not wonderful. Although some of the methods used throw exceptions these are not caught anywhere, causing the blog reading thread to terminate. This does not stop the lights flashing, but it does mean that there will be no more alerts. However, it is not too hard to create a version which contains proper error handling and even flashes the lights different colors to indicate the alarm conditions. I have created a version that flashes the lights yellow every now and then if the network connection fails. There is also considerable scope for reading other web based sources and changing the output accordingly. Feel free to do all these things and make sure that you have fun.

Thanks

Thanks go to Ian Mitchell of Ormston Technology (http://www.ormtec.co.uk/) for doing such a great job of hardware design and build.

Devices like Smartphones, Pocket PCs, and Sony Playstation Portables are very useful for carrying pictures around. The problem is that modern cameras take pictures that are far bigger than a mobile device requires. A large number of megapixels makes a picture great for printing or viewing on a large display, but it just makes things difficult when you use a small device. Such high-resolution picture files take a long time to load and use up lots of file space.

Many graphics programs, for example Microsoft Digital Image Pro 10, have bulk edit features, so that you can resize a whole bunch of pictures. If you have a portable media center, you can use Media Player 10 to resize the images as they are transferred. However, what you really want is a program that will resize your pictures and transfer them all at once. So I've written one, and we can explore how it works.

Getting started is easy, whether you just want to use the program or play with the code. I've supplied a user manual in case all you want to do is use the program.

Working with the Application

I've created the project in Visual C# 2005 Express edition. Open up the appropriate project file and you will be in business. If you have not got Visual Studio you can get hold of a copy for free from http://msdn.microsoft.com/vstudio/express/visualcsharp/.

The initial download is quite small, but the installation will fetch around 300 MB of code.

Once you have Visual Studio on your machine, you can open up the appropriate directory and select the solution file. In the next sections, we are going to consider each part of the program in detail. The examples as given are not exactly as in the source code, but we want to be able to concentrate on the important aspects of each part of the development.

Setting the Destination for the Images

I set the destination by using a FolderBrowserDialog. This allows the user to find a directory where the image files are to be transferred. I've set the option so that the user can also create a new directory in which to place the images:

Visual C#

outputDirDialog = new System.Windows.Forms.FolderBrowserDialog();
outputDirDialog.Description = "Select Destination";
outputDirDialog.ShowNewFolderButton = true;
outputDirDialog.ShowDialog();

Visual Basic

If outputDirDialog Is Nothing Then
    outputDirDialog = New System.Windows.Forms.FolderBrowserDialog()
    outputDirDialog.Description = "Select Destination"
    outputDirDialog.ShowNewFolderButton = True
End If
outputDirDialog.ShowDialog()

I use the ShowDialog method so that the rest of my program pauses while the user selects the destination using this dialog:

Figure 1. Browsing for a destination

If the user opens up the My Computer tree, they can then find all the drive letters, including any for memory devices. Note that the program must also handle the situation where the user does not select a folder but clicks the "Cancel" button instead. In this situation the length of the resulting path will be 0, and so we display an appropriate message:

Visual C#

if (outputDirDialog.SelectedPath.Length == 0)
{
    statusLabel.Text = "No destination selected";
    return;
}

Visual Basic

If outputDirDialog.SelectedPath.Length = 0 Then
    statusLabel.Text = "No destination selected"
    Return
End If

We use a label at the bottom of the form to send messages to the user.

Getting the Source Images

Once we know where to put the files, we now need to select some files for transfer. The OpenFileDialog is fine for this, since it can be configured to allow the user to select multiple files. The dialog can also show thumbnails of each image, so the user can easily see which files are to be transferred.

Visual C#

sourceFilesDialog = new OpenFileDialog();
sourceFilesDialog.Multiselect = true;
sourceFilesDialog.Title = "Select files to shrink";

Visual Basic

sourceFilesDialog = New OpenFileDialog()
sourceFilesDialog.Multiselect = True
sourceFilesDialog.Title = "Select files to shrink"

This code creates the dialog and configures it to allow multiple files to be selected. Now we can configure it to show only image files for transfer:

Visual C#

sourceFilesDialog.Filter = 
    "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|All files (*.*)|*.*";

Visual Basic

sourceFilesDialog.Filter = "Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|" _
    & "All files (*.*)|*.*"

The filter string looks rather complicated, but is really quite simple. Elements in the string are separated by the vertical bar character. Each filter is expressed as a pair of items, a description string followed by a list of filter expressions. It looks a bit clearer if I write it as:

Visual C#

"Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|" +
"All files (*.*)|*.*"

Visual Basic

"Image Files(*.BMP;*.JPG;*.GIF)|*.BMP;*.JPG;*.GIF|" _
    & "All files (*.*)|*.*"

The top filter lets the user select image files that are Bitmap, JPEG, or GIF images. The second line lets the user select all the files. For each line the vertical bar splits off the text to appear in front of the user from a list of file extensions that apply to that selection

When the user selects the top filter, only file names matching Bitmap, JPEG, or GIF images are shown. When the bottom filter is selected, all files are shown.

Figure 2. The filter in use

Note that just because a file has a particular extension does not necessarily mean that it contains a particular type of file; our program must make sure that an invalid file content does not cause problems. We can address this later.

Users can select as many files as they like from a directory, or even use CTRL+A to select all of them. When they click the "Open" button, the dialog completes, and the files can then be processed and transferred into the destination device.

Doing the Processing

The OpenFileDialog returns a list of file names as an array of strings. The program must now open each file, load the bitmap from it, resize this into a bitmap of the required dimensions, and then save the bitmap in the destination directory. The method processFiles is in charge of all this.

Visual C#

processFiles(sourceFilesDialog.FileNames, outputDirDialog.SelectedPath);

Visual Basic

processFiles(sourceFilesDialog.FileNames, outputDirDialog.SelectedPath)

This method is passed an array of file names and a destination path for the outputs. It must then work its way through the files and scale and save each one in turn.

Visual C#

private void processFiles(string[] FileNames, string outputPath)
{
    Bitmap dest = new Bitmap(size.width, size.height);
    foreach (string filename in FileNames)
    {
        Bitmap image;
        try
        {
            image = new Bitmap(filename);
        }
        catch
        {
            MessageBox.Show("Error loading bitmap : " + filename);
            continue;
        }
        scaleBitmap(dest,image);
        string destFilename = outputPath + @"\" + 
            System.IO.Path.GetFileNameWithoutExtension(filename) + ".jpg";
        try
        {
            dest.Save(destFilename, System.Drawing.Imaging.ImageFormat.Jpeg);
        }
        catch
        {
            MessageBox.Show("Error saving bitmap : " + destFilename);
            return;
        }
    }
}

Visual Basic

Private Sub processFiles(ByVal FileNames As String(), ByVal outputPath As String)
    Dim dest As Bitmap = New Bitmap(Size.Width, Size.Height)
    For Each filename As String In FileNames
        Dim image As Bitmap
        Try
            image = New Bitmap(filename)
        Catch
            MessageBox.Show("Error loading bitmap : " & filename, "Bitmap Load")
            Continue For
        End Try
        scaleBitmap(dest, image)
        Dim destFilename As String = outputPath & "\" _
            & System.IO.Path.GetFileNameWithoutExtension(filename) & ".jpg"
        Try
            dest.Save(destFilename, System.Drawing.Imaging.ImageFormat.Jpeg)
        Catch
            MessageBox.Show("Error saving bitmap : " & destFilename, "Bitmap Save")
            Return
        End Try
    Next
End Sub

This method works through each of the file names, creates a bitmap from each file, calls the scaleBitmap method to scale it, and then saves the result back to disk.

Note that I have put an exception handler around the creation of the bitmap from a file. If the load fails, a message is displayed and the method moves on to the next image. There is also a try catch construction around the save operation. However, if the save fails this usually means that the next save will probably fail too, because the output device might be full. For this reason, when the save call fails the method returns rather than continues.

Scaling the Bitmap

Scaling the bitmap is quite easy. There are draw methods that can be used to draw a rectangle from one image into another. By manipulating the sizes of the source and destinations, we can resize the image to fit on our device. The only difficulty is that we have to handle the aspect ratios of the source and destination, so that we don't clip off any parts of the image. This is exactly the same problem that you get when watching an old TV program on a widescreen TV or vice versa. The resize method must make the picture fit on the screen and insert empty space around it as required:

Visual C#

private Rectangle srcRect = new Rectangle();
private Rectangle destRect = new Rectangle();

private void scaleBitmap ( Bitmap dest, Bitmap src )
{
    destRect.Width = dest.Width;
    destRect.Height = dest.Height;
    using (Graphics g = Graphics.FromImage(dest))
    {
        Brush b = new SolidBrush(backgroundColor);
        g.FillRectangle(b, destRect);
        srcRect.Width = src.Width;
        srcRect.Height = src.Height;
        float sourceAspect = (float)src.Width / (float)src.Height;
        float destAspect = (float)dest.Width / (float)dest.Height;
        if (sourceAspect > destAspect)
        {
            // wider than high heep the width and scale the height
            destRect.Width = dest.Width;
            destRect.Height = (int)((float)dest.Width / sourceAspect);
            destRect.X = 0;
            destRect.Y = (dest.Height - destRect.Height) / 2;
        }
        else
        {
            // higher than wide – keep the height and scale the width
            destRect.Height = dest.Height;
            destRect.Width = (int)((float)dest.Height * sourceAspect);
            destRect.X = (dest.Width - destRect.Width) / 2;
            destRect.Y = 0;
        }
        g.DrawImage(src, destRect, srcRect, System.Drawing.GraphicsUnit.Pixel);
    }
}

Visual Basic

Private srcRect As Rectangle = New Rectangle()
Private destRect As Rectangle = New Rectangle()

Private Sub scaleBitmap(ByVal dest As Bitmap, ByVal src As Bitmap)
    destRect.Width = dest.Width
    destRect.Height = dest.Height
    Using g As Graphics = Graphics.FromImage(dest)
        Dim b As Brush = New SolidBrush(backgroundColor)
        g.FillRectangle(b, destRect)
        srcRect.Width = src.Width
        srcRect.Height = src.Height
        Dim sourceAspect As Single = src.Width / src.Height
        Dim destAspect As Single = dest.Width / dest.Height
        If sourceAspect > destAspect Then
            ' wider than high
            destRect.Width = dest.Width
            destRect.Height = (dest.Width / sourceAspect)
            destRect.X = 0
            destRect.Y = (dest.Height - destRect.Height) / 2
        Else
            ' higher than wide
            destRect.Height = dest.Height
            destRect.Width = ((dest.Height * sourceAspect))
            destRect.X = (dest.Width - destRect.Width) / 2
            destRect.Y = 0
        End If
        g.DrawImage(src, destRect, srcRect, System.Drawing.GraphicsUnit.Pixel)
    End Using
End Sub

Resizing images is actually quite easy. The DrawImage method can be supplied with source and destination rectangles. The method above decides which way the source needs to be scaled and then adjusts the size and position of the destination rectangle to suit. The call of DrawImage at the bottom of the method is the part that does the actual work. Note that the rectangles that we use to size the source and destination are declared outside the method. This is so that we do not end up creating and destroying new rectangles for each image that we scale. Since all we really want to do is change the dimensions of them each time we use them, there is no need to keep making new ones.

Managing the Size

The user needs to be able to select from a range of possible widths and heights, depending on the target device. The best screen component for doing this is the ComboBox, with a list of items from which the user picks one.

Figure 3. Selecting the output format

The best way to manage this is to create a special class that holds the size information. We can then supply an array of instances of this type to the ComboBox and it will let the user pick one.

Visual C#

public class OutputSize
{
    public int width;
    public int height;
    string name;
    public override string ToString()
    {
        return name + "  " + width.ToString() + " x " + height.ToString();
    }
    public OutputSize(string inName, int inWidth, int inHeight)
    {
        name = inName;
        width = inWidth;
        height = inHeight;
    }
}

Visual Basic

Public Class OutputSize
    Public width As Integer
    Public height As Integer
    Private name As String
    Public Overloads Overrides Function ToString() As String
        Return name & "  " & width.ToString() & " x " & height.ToString()
    End Function
    Public Sub New(ByVal inName As String, ByVal inWidth As Integer, _
            ByVal inHeight As Integer)
        name = inName
        width = inWidth
        height = inHeight
    End Sub
End Class

The OutputSize type contains a name property to identify it as well as height and width values. The ToString method that it exposes provides the text shown in the ComboBox. The width and height properties are made public so that they can be used by methods in other classes. Finally, it has a constructor that lets us set up all the values. We can now create an array of instances of this class which can be used to configure the ComboBox:

Visual C#

private OutputSize[] resolutionSettings = new OutputSize[] {
    new OutputSize ( "Pocket PC", 640, 480 ),
    new OutputSize ( "QVGA", 320, 240 ),
    new OutputSize ( "PSP", 480, 272 ),
    new OutputSize ( "Smartphone", 176, 180)
};

Visual Basic

Private resolutionSettings As OutputSize() = New OutputSize() { _
        New OutputSize("Pocket PC", 640, 480), _
        New OutputSize("QVGA", 320, 240), _
        New OutputSize("PSP", 480, 272), _
        New OutputSize("Smartphone", 176, 180)}

If you want to add other sizes to the program these can just be slotted into the array and will be picked up and used automatically. Adding the settings to the ComboBox is achieved very easily:

Visual C#

resolutionComboBox.DataSource = resolutionSettings;

Visual Basic

resolutionComboBox.DataSource = resolutionSettings

This is a very powerful feature of Windows forms. The ComboBox just pulls in the settings and populates its selections with the values in the array. When we want to get the present selection, we just have to get it and cast it to the actual type that we know is in there:

Visual C#

OutputSize size = resolutionComboBox.SelectedItem as OutputSize;

Visual Basic

Dim size As OutputSize = TryCast(resolutionComboBox.SelectedItem, OutputSize)

We can now use the width and height properties of the size instance to control the scaling.

Setting the Background Color

I let the user select the background color that is used to fill around images when their aspect ratio is not quite right. This color is stored as a member of the form:

Visual C#

private Color backgroundColor = Color.White;

Visual Basic

Private backgroundColor As Color = Color.White

Initially it is set to white, but the user can select different colors according to taste. I use the ColorDialog dialog to allow the user to do this:

Visual C#

backColorDialog = new ColorDialog();
backColorDialog.SolidColorOnly = true;
backColorDialog.Color = backgroundColor;
backColorDialog.ShowDialog();

Visual Basic

If backColorDialog Is Nothing Then
        backColorDialog = New ColorDialog()
        backColorDialog.SolidColorOnly = True
    End If
backColorDialog.Color = backgroundColor
backColorDialog.ShowDialog()

This dialog lets the user select a color:

Figure 4. Selecting a color

Once the user has selected the color, they can use it as the background for the image that is drawn as the background in the scaleBitmap method.

Previewing the Images

The user will want to see the images previewed as each is transferred. This is easily achieved by using a PictureBox component on the application form. We set the background color of the PictureBox to the selected background so that the previewed image looks as much like the transferred one as possible. The image on the PictureBox is set from the scaled image.

Visual C#

previewPictureBox.Image = dest;

Visual Basic

previewPictureBox.Image = dest

The only other thing that we have to do with the PictureBox is to make sure that its SizeMode property is set to Zoom, so that the preview image will fill the preview window exactly.

Showing the Progress

Another useful touch is a progress bar. If a large number of files are being transferred, the user will appreciate being given some indication of how far through the transfer the program has reached. We can calculate the amount of progress by dividing the number of files transferred so far by the total number of files that have been selected. This will give us a fraction we can multiply by 100 to generate a percentage value for the progress bar size.

Visual C#

loadProgressBar.Value = (int)(100 * ((float)fileCount / (float)noOfFiles));

Visual Basic

loadProgressBar.Value = (100 * (fileCount / noOfFiles))

Deadlock Difficulties

The program works well as it is, but it does have one problem. Sometimes the image transfer takes quite a while to complete. During this process, the error tracking provided by Visual Studio might decide that the program has stopped. It then throws an exception that causes the program to fail. Turning this exception off is not difficult; we need to find the "Exceptions" item (on the "Debug" menu item) and then set clear the "Thrown" box next to the ContextSwitchDeadlock exception, so that the dialog appears as below:

Figure 5. Turning off the ContextSwitchDeadlock exception

Once we have done this, the program will run correctly, even with very large transfers.

The Completed Program

The completed program works well. I have successfully transferred 127 pictures onto my Playstation Portable in a single go and I've found that I get lots more pictures on the machine — all 127 fitted into 3.7 MB. However, there are a number of enhancements you might like to consider.

Automatic Playstation Portable Detection

The Playstation Portable has a very distinctive file arrangement on its storage device. In fact you must put your pictures into the \PSP\PHOTO directory or they will not be displayed (use the path in Figure 1 as an example). It would be possible for the program to be made to check through each of the drives on the system, automatically find a PSP device, and configure itself appropriately.

Drag-and-Drop Image Transfer

Rather than pick the images from a file dialog, the program could be made to accept files that are dropped onto the form. It could then scale and transfer those.

Automatic Landscape/Portrait Rotation

The Smartphone has a portrait format display: It is higher than it is wide, which is in contrast to most pictures (which are landscape). This means that the program as written will not make the best use of the screen. It would be useful if pictures could be rotated as they are transferred, so that they fill as much of the display as possible. Alternatively the user could be given the option for all Smartphone pictures to be rotated before transfer, so that they can be shown to best effect.