FotoVision Web Application

.NET Compact Framework 1.0

Ralph Arvesen
Vertigo Software, Inc.

June 2004

Applies to:
   Microsoft® ASP.NET®
   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 web application. The sample is written in VB.NET and the installation application installs pre-built binaries and source code for the web application. (7 printed pages)

FotoVision Overview
Web Application Overview
Web services
Login Manager Tool
Other FotoVision Samples

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

Web Application Overview

The web application contains three parts: a website that displays albums and photos, Web services that perform photo management and offline viewing, and a tool that updates the encrypted password in the config file. The figure below shows the web application parts.

Figure 2. Overview of the FotoVision web application

Photos folder permissions

FotoVision uses the file system and XML files as a simple database. Each folder in the file system represents an album and each image file in a folder represents a photo. Optional album and photo metadata information (description for example) is stored in corresponding XML files. The files are stored under the photos folder.

The website auto-generates thumbnail images and the Web service adds and deletes files. This means that the ASP.NET user account requires read, write, and change permissions to the photos folder. The ASP.NET account is ASPNET on IIS 5.x and NETWORK SERVICE on IIS 6 (Windows Server 2003). The MSI installation application grants these permissions by executing the cacls.exe command-line tool during installation. You do not need to set these permissions again, but they do need to be set if you install the website on another system.


The website is an ASP.NET application and displays albums, thumbnails, and full size photos. The Default.aspx page provides an overview of the albums on the site; each album contains a name, description, date, photo count, and sample thumbnail. The Album.aspx page displays thumbnails for the selected album and the Photo.aspx page displays the full size photo with the date and description. The album and photo pages use the AlbumListControl.ascx user control to display the album selection list. The web pages are shown in the following figure.

Figure 3. Different pages on the website

Caching is not enabled in the sample website so changes (new albums for example) are immediately apparent, but caching can be easily enabled. The web pages are loosely coupled to the underlying data so it is easy to replace the interface with your own pages.

Avoiding SPAM-bots

An optional contact email address is stored in the web.config file that allows people to send email to the site owner. To avoid SPAM-bots, which constantly scan the web and harvest email addresses from web pages, news groups and other sources, the site does not store the email address in plain text. Instead, the email address is encoded on the server using the BitConverter class and decoded on the client with a JavaScript function in the email.js file. The result is the same to the user; they click on the contact link and a new email is generated, but the email address remains hidden from the SPAM-bots since it never appears in the HTML. The following snippets show how the email address is encoded and decoded.

(1) The email address is stored in the config file
    <add key="EmailAddress" value="" />

(2) The address is encoded before it's displayed in the HTML page
Dim email As String = ConfigurationSettings.AppSettings("EmailAddress")
If Not email Is Nothing Then
  Application("EmailAddress") = BitConverter.ToString( _
    ASCIIEncoding.ASCII.GetBytes(email)).Replace("-", "")
End If

(3) The HTML link contains the encoded email address
<a id="linkContact" class="txt-hdr-links" 

(4) A client side function decodes the email address
function sendEmail(encodedEmail)
  // holds the decoded email address
  var email = "";

  // decode the email address
  for (i=0; i < encodedEmail.length;)
    // holds each letter (2 digits)
    var letter = "";
    letter = encodedEmail.charAt(i) + encodedEmail.charAt(i+1)

    // build the real email address
    email += String.fromCharCode(parseInt(letter,16));
    i += 2;

  // do the mailto: link
  location.href = "mailto:" + email;

Web services

The web application contains two Web services: PhotoService.asmx that exposes offline-browsing methods, and PhotoAdmin.asmx that exposes photo-management methods.

Photo service

The photo service contains read-only methods that are used by the Pocket PC application and returns a list of albums, thumbnails, and individual photos. The service contains logic to scale and rotate photos so they occupy the largest space available on the Pocket PC device.

Photo admin service

The photo admin service is used by the desktop application and contains management and synchronization methods so files on the site can be synchronized with files on the user's local system. The management methods allow the owner to delete, add, and update albums, photos, and metadata XML files. The synchronization methods return an array of hash codes that uniquely identify files on the site so the caller can determine which files need to be updated.

The service requires the caller to be authenticated before the methods are executed. It uses a custom SOAP header that contains the user credentials. The user credentials is a hashed password that must match the value stored in the web.config file (the hashed password is stored as an encrypted value in the config file). An exception is thrown if the custom SOAP header does not exist or if the user credentials do not match.

The service can be extended by using the Microsoft Web Services Enhancements (WSE) for authentication and file attachments using WS-Security and WS-Attachments respectively. You can find more information at

Login Manager Tool

The Login Manager allows the site owner to update the password, which is stored in the web.config file as an encrypted hash value, for the FotoVision application. This tool hashes the password using the SHA1 algorithm and then encrypts the value using the Data Protection API (DPAPI). The result can be copied to the clipboard or the web.config file can be updated automatically. The Login Manager tool is shown below.

Figure 4. The Login Manager tool that updates the config file

Data encryption and decryption must be done on the same computer when using the Data Protection API. The site owner might not have executable access to the web server (they can copy files but cannot run the Login Manager tool on the site). If this is the case, check the option Only hash the password, which stores the hashed password in the config file instead of an encrypted hash value (the password is never stored in clear text). The following snippet shows the different values that are stored in the config file.

<!-- storing hashed password in config file -->
<add key="Encrypted" value="False" />
<add key="Password" value="qUqP5cyxm6YcTAhz05Hph5gvu9M=" />

<!-- storing encrypted hashed password in config file -->
<add key="Encrypted" value="True" />

Other FotoVision Samples

The web application is one of three parts of the FotoVision sample application. You can also install the desktop and Pocket PC applications.