Introduction
All Windows Mobile devices nowadays come equipped with a built-in camera. With its increasing resolution and the overall quality of the pictures it can take, its use is no longer limited to taking family photographs. Every business or institution which requires photographic documentation (such as insurance agents, billboard maints, crime scene inspectors, photo journalists, etc.) can find such Windows Mobile devices useful.
In this article, I will demonstrate how to create a smart device application using Microsoft Visual Studio (any of 2005 or 2008 will do), which uses a camera and built-in microphone. The application will provide this functionality:
- Start the built-in camera and take a picture.
- Display the taken picture and let the user adjust it (by rotating, cropping, adjusting brightness, contrast, gamma correction value).
- Record a voice note belonging to the picture.
- Save the picture together with the voice note into a mobile SQL CE database.
- View the pictures stored in the database and play back the recorded notes.
This is the look of the main screen of the application:
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.
- Resco MobileForms Toolkit Volume 2, which you can download here.
Resco MobileForms Toolkit is a set of Visual Studio controls designed for mobile devices. After installing Resco MobileForms Toolkit Volume 2 to your computer, the controls will be automatically added to Visual Studio’s toolbox. We will use these Resco controls and libraries in the project:
- Resco Audio library for .NET CF
- Resco ImageBox for .NET CF
- Resco ImageButton for .NET CF
The application can be created for both .NET Compact Framework 2.0 and .NET Compact Framework 3.5. Just download the appropriate version of Resco MobileForms Toolkit 2008.
Preparing the Project
Start by creating a new smart device project in Visual Studio. 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
You will also have to set their CopyToOutputDirectory
property to either CopyAlways
or CopyIfNewer
. Also, add a database file named data.sdf to the project.
Database
The application will use mobile SQL CE server, which is part of .NET Compact Framework. Visual Studio should be able to install .NET Compact Framework and SQL CE server to your mobile device automatically upon deploying the application. The database model is very simple. The database contains only one table and its schema can be seen in Figure 1.
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 let the user see a preview of the images.
User Interface
The application consists of three Form objects:
MainForm
allows the user to take a picture using the camera and adjust 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 recorded notes.
MainForm
MainForm
in Visual Studio’s designer is displayed in Figure 2. It contains the ImageBox
control, which displays the taken picture. The ImageButton
s at the top right corner are used to rotate the image and start the built-in camera. In the lower part of the form, there are 4 track bars which can be used to zoom in and out, adjust brightness, contrast and gamma correction value. The Crop
mode checkbox sets the ImageBox
control into Crop
mode, as can be seen on Figure 3.
|
|
Figure 2: MainForm designer |
Figure 3: Crop mode |
The user can adjust the size and position of the cropping rectangle and then perform the cropping. There are two menu items on the form:
Save
saves the picture (including the performed adjustments) into the database together with a voice note.
View
views the images from the database.
RecordForm
You can see the design of this form in Figure 4. The form is very simple. It contains an ImageButton
which starts and pauses the recording. The recorded length in milliseconds is displayed in a TextBox
. The value of TextBox
is refreshed every 500 milliseconds using a Windows Timer object. As soon as the user has finished recording, he can close the form by clicking the OK button.
Figure 4: RecordForm
design
ViewImagesForm
Most of the contents of this form are created during run-time. The designer contains only a Panel
container which fills the entire client area. As soon as the user chooses to view the images, the images in the database are first counted. Then the corresponding amount of ImageButton
s are created and added to the Panel
, each displaying a thumbnail of an image (see Figure 5). The user can click any of these ImageButton
s. Then the image is displayed using an ImageBox
across the whole client area of ViewImages
form (see Figure 6).
|
|
Figure 5: ViewImages form |
Figure 6: ViewImages form - image displayed |
Application Logic
The logic of the application is depicted in Figure 7. The state diagram shows how and when the individual forms are displayed. You can see that recording a voice note is arbitrary. 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
Having an intelligent camera with you which can not only take pictures, but also allow the user to process them and save them to the database, can be very useful in many business sectors. The mobile database can consequently be synchronized with a company’s main database server, ensuring the accessibility and safety of data. You can download the whole application, including the source code in C#, here.