FotoVision Pocket Application

.NET Compact Framework 1.0

Ralph Arvesen
Vertigo Software, Inc.

June 2004

Applies to:
   Microsoft® .NET Compact Framework® 1.0
   Microsoft® Visual Studio® .NET 2003

Download FotoVision

Summary: The FotoVision sample allows you to easily share photos on the web and demonstrates a variety of .NET technologies including Windows Forms, ASP.NET, Web services, and the .NET Compact Framework. It consists of a desktop, web, and Pocket PC sample applications. This paper provides information so you can get the most from the FotoVision Pocket PC application. The sample is written in VB.NET and the installation application installs the pocket application on the Pocket PC device and the source code on the desktop. A Pocket PC device is not required; you can run the sample on the desktop using the Visual Studio Pocket PC emulator. (8 printed pages)

FotoVision Overview
Pocket Application Overview
Downloading Photos
Viewing Photos Offline
Setting Options
More Information

FotoVision Overview

The figure below shows the main parts of the FotoVision application. There are two users: owner and viewers. The owner uses the desktop application to modify and manage photos on their local system. When the photos are ready to be published, the desktop application uses a Web service to synchronize files on the website; credentials are passed in a SOAP header to prevent unauthorized users from modifying photos on the site. Viewers view photos on the site through a web browser. The Pocket PC application uses another Web service to download and store photos on the device so they can be viewed offline.

Figure 1. Overview of the FotoVision application

Pocket Application Overview

The pocket application performs two main tasks: downloading photos from the website and viewing those photos offline. The figure below shows the main classes of the pocket application. The MainForm and PhotoControl classes display files from the local photo cache (offline photos). The SelectForm class uses the Web service to download information from the website so the user can decide which photos to take offline. Selected photos in each album are stored in a Hashtable and used later in the DownloadForm to download and store photos on the device. The Cache class manages the local photo cache on the device; providing methods to add and remove albums, photos, and thumbnails from the cache.

Figure 2. Overview of the FotoVision Pocket application

Downloading Photos

There are two steps when downloading photos: selecting photos and downloading photos. The SelectForm uses the web service to download the album list and thumbnail images. A ComboBox is populated with the album list and thumbnails are displayed in a checked ListView control. Photo selections are stored in a Hashtable; each item in the table is an array of PhotoSelection objects that store the selected state of photos in an album. A Panel control is hidden and shown to simulate a popup window that displays progress when calling the service.

The DownloadForm is displayed when the user is finished selecting photos. It iterates through the Hashtable and downloads the selected photos for each album. Each photo is added to a download log and the overall progress is shown in a ProgressBar control. The figure below shows the select and download forms.

Figure 3. Selecting and downloading photos from the website

The download log contains four different icons: album when an offline album is created, downloading when a photo is being downloaded from the website, success when the photo is successfully stored on the device, and failure if the photo could not be downloaded from the website. The different icons are shown below:

Figure 4. Different status icons displayed in the log

Viewing Photos Offline

The MainForm displays photos stored in the local photo cache. It uses the Cache class to populate a ComboBox control with the album list. Thumbnails are displayed in a ListView control and photos in a custom PhotoControl class. The figure below shows offline photos displayed on the device.

Figure 5. Viewing photos offline

The PhotoControl class maintains its own memory bitmap to prevent flashing since the Control.SetStyle method is not supported in the .NET Compact Framework. The control allows photos to be annotated by capturing mouse events and drawing line segments.

Figure 6. Custom control allows photos to be annotated

Setting Options

The OptionsForm contains two tabs: about and options. The about tab displays version information and details about the photo cache. The options tab contains two settings: website location and full-screen photos. The website location (URL) is used when the Web service proxy object is created. Entering text on the Pocket PC is time consuming (tapping each letter) so a context menu allows the previous location to be easily recalled.

Figure 7. Specifying download options

During startup, the application prompts the user if it detects that the website location has not been specified. The default server name is set to the name of the ActiveSync system. This information is located in the registry, which requires calling the Win32 API registry functions RegOpenKeyEx, RegQueryValueEx, and RegCloseKey. This functionality is encapsulated in the DefaultServer class.

If you have problems with the location setting when running in the emulator, you might try specifying the IP address (you have to configure the emulator correctly to resolve domain names). Also, remember that localhost does not resolve to your desktop system.

The full-screen photos option specifies how photos are downloaded. If checked, photos are downloaded so they occupy the available display surface (horizontal photos are rotated). Photo scaling and rotations are performed on the web server since these operations are time consuming and not well supported in the .NET Compact Framework. The hardware navigation button displays previous and next photos and the OK caption button returns to the thumbnail list.

Figure 8. Displaying photos using the maximum display area

Settings are stored in an application config file using the Settings class. The SettingValues class defines the key names and default values. A sample config file is shown below:

    <add key="ServiceName" value="PhotoService.asmx" />
    <add key="ServiceTimeout" value="60" />
    <add key="ServiceLocation" value="" />
    <add key="ServiceLastLocation" value="http://servername/FotoVision" />
    <add key="DownloadMode" value="True" />
    <add key="LocalMode" value="True" />
    <add key="PenColor" value="-256" />

More Information

The pocket application is one of three parts of the FotoVision sample application; you can also install the desktop and web applications. The following are helpful sites for .NET Compact Framework development and contain useful code samples, articles, and the latest service packs: