Using Resco’s ImageBox Control

Introduction

Most Windows Mobile devices nowadays are equipped with a built-in camera. The higher resolution and better picture quality from these embedded camera’s mean they can provide professional photographic documentation in business applications for insurance agents, photo journalists, etc.

This tutorial demonstrate how to create a smart device application using Microsoft Visual Studio (2005 or 2008) which uses the built-in camera and microphone.

Functionality provided by the application:

• Start the built-in camera and take a picture.
• Display the picture and let the user manipulate it (rotating, cropping, adjusting brightness, contrast, gamma correction value).
• Record a voice note to be associated with the picture.
• Save the picture together with the voice note into a SQL CE database.
• View the pictures stored in the database and play back the associated voice notes.

Prerequisites

You will need:

• Microsoft Windows Mobile 5.0 SDK (or later) which you can download here.
• A Windows Mobile 5.0 device with a built-in camera to test the application.
• The Resco MobileForms Toolkit Volume 2 which you can download download here.

The Resco MobileForms Toolkit is a set of Visual Studio controls designed for mobile devices. After installing Resco MobileForms Toolkit Volume 2, the controls will be automatically added to Visual Studio’s toolbox.

The following Resco controls and libraries will be used in the project:

• Resco Audio library for .NET CF
• Resco ImageBox for .NET CF
• Resco ImageButton for .NET CF

You can target both version 2.0 and 3.5 of the .NET Compact Framework by downloading the appropriate appropriate version of Resco MobileForms Toolkit 2008.

Preparing the project

Start by creating a new smart device project in Visual Studio. In order for the Resco Audio library and Resco ImageBox control to work properly, two .dll files containing the native code must be copied to the mobile device.
Add these two files as content to your project:

• Resco.Audio.Native.dll
• Resco.ImageBox.Native.dll

(Set the CopyToOutputDirectory property to either CopyAlways or CopyIfNewer.)

Add a SQL CE database file called data.sdf to the project.

Database

The application will use a SQL Server 2005 Compact Edition (SQLCE) database (data.sdf) to store the data. Visual Studio should install the .NET Compact Framework as well as SQL CE to your device automatically when you deploy the application.

The database model is very simple – it contains only one table:

 
Figure 1 Database model

The Thumb column will contain a thumbnail of the image which will be created from the original image by reducing its size. This will be used to preview of the images.

User interface

The application consists of three Forms:

• MainForm – allows the user to take a picture using the camera and manipulate it.
• RecordForm – allows the user to record a voice note.
• ViewImages – allows the user to view the images from the database and play back the associated voice notes.

MainForm

Figure 2 shows the MainForm in Visual Studio’s designer. It contains the ImageBox control which displays the picture and the ImageButtons (top right corner) which are used to rotate the image and start the built-in camera.
The bottom part of the form contains 4 trackbars which are used to zoom in and out, adjust the brightness, contrast and gamma correction values. The Crop mode checkbox sets the ImageBox control to crop mode as shown in Figure 3.

Figure 2 MainForm designer	Figure 3 Crop mode

The user can adjust the size and position of the cropping rectangle and then crop the picture. There are two menu items on the form:

• Save – saves the adjusted picture to the database together with the voice note.
• View – views the images from the database.

RecordForm

Figure 4 shows the design of the RecordForm. The form is very simple - it contains an ImageButton which starts and pauses the recording. The  length of the recording is displayed in milliseconds in the TextBox. The TextBox display is updated every 500 milliseconds using a Windows Timer object.

Figure 4 RecordForm design

ViewImagesForm

Most of the contents of this form are created at run-time. The form contains a Panel container which fills the entire client area. When the user chooses to view the images, the images in the database are first counted, then a corresponding number of ImageButtons are created and added to the Panel, each displaying an image thumbnail (see Figure 5). When the user clicks one of these ImageButtons the image is then displayed full screen using the ImageBox control (see Figure 6).

Figure 5 ViewImages form	Figure 6 ViewImages form - image displayed

Application logic

The state diagram below shows the application logic that applies when each of the individual forms are displayed. You can see that recording a voice note is very easy.
(If the user chooses not to record a voice note a DBNull.Value is stored into the Image table in the Audio column.)

 
Figure 7 State diagram

Conclusion

Using a Windows Mobile device that has a built-in camera combined with application functionality which allows the user to process images, associate voice notes and save them in a SQLCE database is compelling functionality for many business sectores,

You can download the C# application source code here.