Channel 9

Silverlight 3 File Transfer Application

Giovanni Montrone — Fri, 04 Sep 2009 03:43:00 GMT

Every once in a while I will run into a situation where I need to send a file to someone, but struggle to find an easy way of doing it. Instant messenger programs usually work until you run into a situation where someone just cannot send or receive a file from chat client whether it's due to firewalls, differing client versions, or multi-IM incompatibilities. Other times, I will try to send the file via email just to find out that the person's email server blocks specific extensions. This quick application will allow two users to quickly and easily connect to a Silverlight 3 client and send each other files.

Overview

In this application, a user will connect to the Silverlight application and choose to either host or join a session. If a user decides to host a session, he or she will be given a random eight character session key, and he or she will be in a waiting status until another user connects. When a user wishes to connect to the host, he or she can supply the host's session key which will establish a connection between the two users. Once connected, the users will be able to send files to one another, and will also be able to chat with each other via simple text messages.

Polling Duplex

Sending a file from one client application to another requires a common central point in order to properly route the message from one user to another. Since it is easy to host a Silverlight application in an ASP.NET page, we will use an ASP.NET back end to manage all communications between all connected users. In order to do this, we must be able to host a service that is able to accept incoming messages from the Silverlight client, and perform a push back out to the intended recipient. This is accomplished by using the WCF Polling Duplex (System.ServiceModel.PollingDuplex.dll) channel. Silverlight 3 allows us to directly add a service reference to a service of this type, and handles all of the complexities for us. I began by using the DuplexService.cs file from a sample application from MIX09 when Silverlight 3 beta was released. The code starts us out with a couple of base abstract classes, and interfaces that we must inherit from in order to create our own service.

FileSendService

The two main things we need to do in order to create our own service is to define custom message types that will be used for communication, and override the base DuplexService class to properly handle these messages. We will create our custom message types by using DuplexMessage (defined in DuplexService.cs) as our base class. Our message classes must be defined with the [DataContract] attribute, and the the member variables must be public and contain the [DataMember] attribute. This will allow our Silverlight client project to share these definitions using a service reference. Additionally, the Duplex message class must have the [KnownType] attribute for each descendant message created.

[KnownType(typeof(HostSessionMessage))]
[KnownType(typeof(JoinSessionMessage))]
[KnownType(typeof(FileBeginUploadMessage))]
[KnownType(typeof(FileTransferBytesMessage))]
public class DuplexMessage { }

[DataContract]
public class HostSessionMessage : DuplexMessage
{
    [DataMember]
    public string Username;
}

[DataContract]
public class JoinSessionMessage : DuplexMessage
{
    [DataMember]
    public string Username;
    [DataMember]
    public string SessionKey;
}

[DataContract]
public class FileBeginUploadMessage : DuplexMessage
{
    [DataMember]
    public string FileName;
    [DataMember]
    public long TotalBytes;
}

[DataContract]
public class FileTransferBytesMessage : DuplexMessage
{
    [DataMember]
    public long StartByte;
    [DataMember]
    public long PacketSize;
    [DataMember]
    public byte[] Bytes;
    [DataMember]
    public bool EndFile;
}

Namespace := "http://samples.microsoft.com/silverlight2/duplex"), 
KnownType(GetType(HostSessionMessage)), KnownType(GetType(JoinSessionMessage)), KnownType(GetType(FileBeginUploadMessage)), KnownType(GetType(FileTransferBytesMessage))> _
Public Class DuplexMessage
End Class

 _
Public Class HostSessionMessage
    Inherits DuplexMessage
     Public Username As String
End Class

 _
Public Class JoinSessionMessage
    Inherits DuplexMessage
     Public Username As String
     Public SessionKey As String
End Class

 _
Public Class FileTransferBytesMessage
    Inherits DuplexMessage
     Public StartByte As Long
     Public PacketSize As Long
     Public Bytes() As Byte
     Public EndFile As Boolean
End Class

 _
Public Class FileBeginUploadMessage
    Inherits DuplexMessage
     Public FileName As String
     Public TotalBytes As Long
End Class

The next step is to create our FileSendService class which descends from the DuplexService class as described above. We override the OnMessage method so that we can do custom processing based on the type of message sent as shown below.

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class FileSendService : DuplexService
{
    private List sessionConnections = new List();

    {...}

    protected override void OnMessage(string sessionId, DuplexMessage data)
    {
        if (data is HostSessionMessage)
            CreateHostSession(data as HostSessionMessage);
        else if (data is JoinSessionMessage)
            JoinSession(data as JoinSessionMessage);
        else if (data is FileBeginUploadMessage)
            StartSendFile(data as FileBeginUploadMessage);
        else
            SendMessage(data);
    }
    
}


        else if (data is JoinSessionMessage)
            JoinSession(data as JoinSessionMessage);
        else if (data is FileBeginUploadMessage)
            StartSendFile(data as FileBeginUploadMessage);
        else
            SendMessage(data);
    }
    
}


    }
    
}

Public Class FileSenderServiceFactory
    Inherits DuplexServiceFactory(Of FileSendService)
End Class

 _
Public Class FileSendService
    Inherits DuplexService
    Private sessionConnections As New List(Of SessionConnectionInfo)()

    ...

    Protected Overrides Sub OnMessage(ByVal sessionId As String, ByVal data As DuplexMessage)
        If TypeOf data Is HostSessionMessage Then
            CreateHostSession(TryCast(data, HostSessionMessage))
        ElseIf TypeOf data Is JoinSessionMessage Then
            JoinSession(TryCast(data, JoinSessionMessage))
        ElseIf TypeOf data Is FileBeginUploadMessage Then
            StartSendFile(TryCast(data, FileBeginUploadMessage))
        Else
            SendMessage(data)
        End If
    End Sub

End Class

Since we are going to have to keep track of each host and user connected to that host, we will create a class, SessionConnectionInfo, to manage the relevant data. When a user decides to host a session, our OnMessage method will receive a HostSessionMessage which will scan our List to see if there is another host with the same username. If not found, a new SessionConnectionInfo object is created along with a randomly generated session key. When a user attempts to join a session, the OnMessage method will receive a JoinSessionMessage containing a session key and the name of the user joining the session. The service will search for a SessionConnectionInfo object containing that session key, and if found, establishes a connection between the two users.

public class SessionConnectionInfo
{
    public string HostUserName { get; set; }
    public string ConnectedUsername { get; private set; }
    public string SessionKey { get; set; }

    public string ConnectedUserInternalSession { get; private set; }
    public string HostInternalSession { get; set; }

    public bool UserConnected
    {
        get { return ConnectedUserInternalSession != string.Empty; }
    }

    public SessionConnectionInfo()
    {
        ConnectedUserInternalSession = string.Empty;
        ConnectedUsername = string.Empty;
    }

    ....
}

Public Class SessionConnectionInfo
    Private privateHostUserName As String
    Public Property HostUserName() As String
        Get
            Return privateHostUserName
        End Get
        Set(ByVal value As String)
            privateHostUserName = value
        End Set
    End Property
    Private privateConnectedUsername As String
    Public Property ConnectedUsername() As String
        Get
            Return privateConnectedUsername
        End Get
        Private Set(ByVal value As String)
            privateConnectedUsername = value
        End Set
    End Property
    Private privateSessionKey As String
    Public Property SessionKey() As String
        Get
            Return privateSessionKey
        End Get
        Set(ByVal value As String)
            privateSessionKey = value
        End Set
    End Property

    Private privateConnectedUserInternalSession As String
    Public Property ConnectedUserInternalSession() As String
        Get
            Return privateConnectedUserInternalSession
        End Get
        Private Set(ByVal value As String)
            privateConnectedUserInternalSession = value
        End Set
    End Property
    Private privateHostInternalSession As String
    Public Property HostInternalSession() As String
        Get
            Return privateHostInternalSession
        End Get
        Set(ByVal value As String)
            privateHostInternalSession = value
        End Set
    End Property

    Public ReadOnly Property UserConnected() As Boolean
        Get
            Return ConnectedUserInternalSession <> String.Empty
        End Get
    End Property

    Public Sub New()
        ConnectedUserInternalSession = String.Empty
        ConnectedUsername = String.Empty
    End Sub


End Class

Client Side

Now that we have the basic server side complete, we can add a service reference, and create the necessary service reference. Our service is hosted within ASP.NET via a simple xml file (see FileSendService.svc), which allows our Silverlight project to see it.

Be sure to mark the checkbox “Always generate message contracts”. Note that your web portion of the project must be compiled before you will be able to “Discover” the service.

We will now have access to the DuplexServiceClient class which will allow us to send and receive messages to the server. We instantiate the service as shown below. In order to do this, you must manually add a reference to System.ServiceModel.PollingDuplex assembly.

private DuplexServiceClient fileDuplexService;

private CustomBinding binding = new CustomBinding(
    new PollingDuplexBindingElement(),
    new BinaryMessageEncodingBindingElement(),
    new HttpTransportBindingElement());

public MainPage()
{
    InitializeComponent();
    fileDuplexService = new DuplexServiceClient(binding, new EndpointAddress("http://localhost:9797/FileSendService.svc"));
    ...
}

Private fileDuplexService As DuplexServiceClient

Private binding As New CustomBinding(New PollingDuplexBindingElement(), New BinaryMessageEncodingBindingElement(), New HttpTransportBindingElement())
    
Public Sub New()
    InitializeComponent()
    fileDuplexService = New DuplexServiceClient(binding, New EndpointAddress("http://localhost:9797/FileSendService.svc"))
End Sub

Note that at the time of this writing, adding the service reference does not properly create the ServiceReferences.ClientConfig file. This is the reason the above is done using code.

Now that our service is setup, we need to set it up to handle sending and receiving of messages. In order to send a message, we must first create a DupexMessage (or a descendant), and use the SendToServiceAsync method. This requires a SendToService object which will contain the message, and an optional userState object which we can use to tag the request. In this case, we will pass an enum value which represents the status of our upload. In the example below, when the user clicks on the send file button, after choosing the file, we open our file, and send a FileBeginUpload message which contains the file name and its size. Note that the server is set to deny any file that is greater than 20 million bytes.

private void btnSendFile_Click(object sender, RoutedEventArgs e)
 {
     OpenFileDialog openFileDialog = new OpenFileDialog();
     openFileDialog.Multiselect = false;
     openFileDialog.ShowDialog();
     if (openFileDialog.File != null)
     {
         fileToSend = openFileDialog.File.OpenRead();

         FileBeginUploadMessage fsm = new FileBeginUploadMessage();
         fsm.FileName = openFileDialog.File.Name;
         fsm.TotalBytes = openFileDialog.File.Length;
         fileDuplexService.SendToServiceAsync(new SendToService(fsm), FileSendState.FileStart);
         ....
     }
 }

Private Sub btnSendFile_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim openFileDialog As New OpenFileDialog()
    openFileDialog.Multiselect = False
    openFileDialog.ShowDialog()
    If openFileDialog.File IsNot Nothing Then
        fileToSend = openFileDialog.File.OpenRead()
        Dim fsm As New FileBeginUploadMessage()
        fsm.FileName = openFileDialog.File.Name
        fsm.TotalBytes = openFileDialog.File.Length
        totalBytesSent = 0
        fileDuplexService.SendToServiceAsync(New SendToService(fsm), FileSendState.FileStart)
        ....
    End If
End Sub

The service object fires two main events that need to be handled: SendToServiceCompleted and SendToClientReceived. SendToServiceCompleted is the event which is fired after the server acknowledges that it has received and processed a message that the client has sent. Once the server receives and processes the FileBeginUploadMessage, the event handler below will receive the results. In this case, if there isn't an error, and the value of userState is FileSendState.FileStart, the method will send a FileTransferBytesMessage which will send the bytes from the file.

private void FileDuplexServiceSendToServiceCompleted(object sender, System.ComponentModel.AsyncCompletedEventArgs e)
{
    if (e.Error == null)
    {
        {...}
        if ((FileSendState)e.UserState == FileSendState.FileEnd)
        {
            fileToSend.Close();
            fileProgress.Value = 100;
            return;
        }
        if ((FileSendState)e.UserState == FileSendState.FileStart || (FileSendState)e.UserState == FileSendState.FileContinue)
        {

            ...
            FileTransferBytesMessage fileMessage = new FileTransferBytesMessage();
            fileMessage.StartByte = totalBytesSent;
            fileMessage.EndFile = false;
            fileMessage.PacketSize = CHUNK;

            ...

            byte[] bytes = new byte[numBytesToRead];
            fileToSend.Read(bytes, 0, numBytesToRead);
            totalBytesSent += numBytesToRead;
            fileMessage.Bytes = bytes;

            if (fileMessage.EndFile)
                fileDuplexService.SendToServiceAsync(new SendToService(fileMessage), FileSendState.FileEnd);
            else
                fileDuplexService.SendToServiceAsync(new SendToService(fileMessage), FileSendState.FileContinue);
        }
    }
}

Private Sub FileDuplexServiceSendToServiceCompleted(ByVal sender As Object, ByVal e As System.ComponentModel.AsyncCompletedEventArgs)
    If e.Error Is Nothing Then
        If e.UserState Is Nothing Then
            Return
        End If
        If CType(e.UserState, FileSendState) = FileSendState.FileEnd Then
            fileToSend.Close()
            fileProgress.Value = 100
            Return
        End If
        If CType(e.UserState, FileSendState) = FileSendState.FileStart OrElse CType(e.UserState, FileSendState) = FileSendState.FileContinue Then
            ...
            Dim fileMessage As New FileTransferBytesMessage()
            fileMessage.StartByte = totalBytesSent
            fileMessage.EndFile = False
            fileMessage.PacketSize = CHUNK
            ...
            Dim bytes(numBytesToRead - 1) As Byte
            fileToSend.Read(bytes, 0, numBytesToRead)
            totalBytesSent += numBytesToRead
            fileMessage.Bytes = bytes

            If fileMessage.EndFile Then
                fileDuplexService.SendToServiceAsync(New SendToService(fileMessage), FileSendState.FileEnd)
            Else
                fileDuplexService.SendToServiceAsync(New SendToService(fileMessage), FileSendState.FileContinue)
            End If
        End If
    End If
End Sub

The SendToClientReceived event is fired when a message has been sent from the service. In this case, the client will check to see which message was received and process it accordingly. The method below shows that when a FileBeginUpload message is received, the user is prompted to accept or deny the file. If the user does not accept the file, a FileDenyMessage will be sent which will notify the sender to stop sending bytes. If accepted, file bytes are added to a buffer.

private void FileDuplexServiceSendToClientReceived(object sender, SendToClientReceivedEventArgs e)
{
    if (e.Error == null)
    {
        if (e.request.msg is ClientConnectedMessage)
        {
            ClientConnectedMessage msg = (ClientConnectedMessage)e.request.msg;
            AddMsgToListbox(msg.Username + " has just connected.");
            connectedTo = msg.Username;
            UIState = UIState.Chat;
        }

        else if (e.request.msg is HostSessionServerMessage)
        {
            HostSessionServerMessage hssm = e.request.msg as HostSessionServerMessage;
            if (hssm.Failed) {...}
            SessionCreated(hssm);

        }
        else if (e.request.msg is JoinSessionServerMessage)
        {
            JoinSessionServerMessage jssm = e.request.msg as JoinSessionServerMessage;
            if (jssm.Failed) {....}
            SessionJoined(jssm);
        }
        else if (e.request.msg is FileBeginUploadMessage )
        {
            FileBeginUploadMessage fsm = (FileBeginUploadMessage)e.request.msg;

            int sizeInKB = (int)fsm.TotalBytes / 1024;
            totalRevd = 0;
            if (MessageBox.Show(connectedTo + " would like to send you the file: " + fsm.FileName + ", Size: " + sizeInKB + ".  Would you like to receive this file?", "File Upload", MessageBoxButton.OKCancel) == MessageBoxResult.OK)
            {
                bytesReceived = new List<byte>((int)fsm.TotalBytes);
                fileNameReceiving = fsm.FileName;
                ....
            }
            else
            {
                fileDuplexService.SendToServiceAsync(new SendToService(new FileDenyMessage()));
            }
        }
        else if (e.request.msg is FileTransferBytesMessage)
        {
            if (bytesReceived == null)
                return;
            FileTransferBytesMessage fm = (FileTransferBytesMessage)e.request.msg;
            bytesReceived.AddRange(fm.Bytes);
            ....
        }
        else {....}

    }
}

Private Sub FileDuplexServiceSendToClientReceived(ByVal sender As Object, ByVal e As SendToClientReceivedEventArgs)
    If e.Error Is Nothing Then
        If TypeOf e.request.msg Is ClientConnectedMessage Then
            Dim msg As ClientConnectedMessage = CType(e.request.msg, ClientConnectedMessage)
            AddMsgToListbox(msg.Username & " has just connected.")
            connectedTo = msg.Username
            UIState = UIState.Chat

        ElseIf TypeOf e.request.msg Is HostSessionServerMessage Then
            Dim hssm As HostSessionServerMessage = TryCast(e.request.msg, HostSessionServerMessage)
            If hssm.Failed Then ...

            SessionCreated(hssm)

        ElseIf TypeOf e.request.msg Is JoinSessionServerMessage Then
            Dim jssm As JoinSessionServerMessage = TryCast(e.request.msg, JoinSessionServerMessage)
            If jssm.Failed Then ...

            SessionJoined(jssm)
        ElseIf TypeOf e.request.msg Is FileBeginUploadMessage Then
            Dim fsm As FileBeginUploadMessage = CType(e.request.msg, FileBeginUploadMessage)

            Dim sizeInKB As Integer = CInt(Fix(fsm.TotalBytes)) / 1024
            totalRevd = 0
            If MessageBox.Show(connectedTo & " would like to send you the file: " & fsm.FileName & ", Size: " & sizeInKB & " KB.  Would you like to receive this file?", "File Upload", MessageBoxButton.OKCancel) = MessageBoxResult.OK Then
                bytesReceived = New List(Of Byte)(CInt(Fix(fsm.TotalBytes)))
                fileNameReceiving = fsm.FileName
                ...
            Else
                fileDuplexService.SendToServiceAsync(New SendToService(New FileDenyMessage()))
            End If
        ElseIf TypeOf e.request.msg Is FileTransferBytesMessage Then
            If bytesReceived Is Nothing Then
                Return
            End If
            Dim fm As FileTransferBytesMessage = CType(e.request.msg, FileTransferBytesMessage)
            bytesReceived.AddRange(fm.Bytes)
            ...
        ElseIf 
          ...

    End If
End Sub

When the file is complete, the user will be presented with two buttons. One button will allow the user to save, and the other will allow the user to discard/ignore the file. If the user chooses to save, a SaveFileDialog is created, and we use the filename to assign the default extension and filter so that when the user saves the file, no extension needs to be typed in. Once the dialog appears and the user enters the file name, the bytes will be written to disk. Finally we send a message back to the server which will notify the sender that user has done something with the file. During file send operations, the Send File button is disabled, and becomes re-enabled once a file has been received, cancelled, or denied.

private void btnSaveFile_Click(object sender, RoutedEventArgs e)
{
    SaveFileDialog sfd = new SaveFileDialog();
    string extension = GetExtension(fileNameReceiving);
    sfd.DefaultExt = extension;
    sfd.Filter = extension +  " Files|" + extension;

    if (sfd.ShowDialog() == true)
    {
        using (Stream fsx = sfd.OpenFile())
        {
            byte[] fBytes = bytesReceived.ToArray();
            fsx.Write(fBytes, 0, fBytes.Length);
            fsx.Close();
        }

        fileDuplexService.SendToServiceAsync(new SendToService(new FileReceivedMessage()));
        UIState = UIState.Chat;
        btnSendFile.IsEnabled = true;
    }
}

Private Sub btnSaveFile_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
    Dim sfd As New SaveFileDialog()
    Dim extension As String = GetExtension(fileNameReceiving)
    sfd.DefaultExt = extension
    sfd.Filter = extension & " Files|" & extension

    If sfd.ShowDialog() = True Then
        Using fsx As Stream = sfd.OpenFile()
            Dim fBytes() As Byte = bytesReceived.ToArray()
            fsx.Write(fBytes, 0, fBytes.Length)
            fsx.Close()
        End Using

        fileDuplexService.SendToServiceAsync(New SendToService(New FileReceivedMessage()))
        UIState = UIState.Chat
        btnSendFile.IsEnabled = True
    End If
End Sub

Conclusion

Overall, the application does what I set out for it to. It allows a user to send a file to another user and even does basic chat. There is definitely a lot of room for improvement, and some general additions that can make this more robust. Right now we keep a list of connections, but never do basic pinging to see if the clients are still there. The only way to know if a client has disconnected is when a message fails, or when the user decides to hit the disconnect button. Better maintenance of this list is needed. The file bytes are basically being stored in memory, which is why i set a file size limit, but I'm sure with things like Silverlight local storage, we can increase the limit.

Thanks

I would like to thank Brian Peek for taking the time to review my article and test the code.

Additional Notes

The ASP.NET project requires a file called System.ServiceModel.PollingDuplex.dll to be added as a reference. Somewhere between Silverlight 3 Beta and Silverlight 3 RTW, the file was no longer available via the basic add .NET reference link. In order to add the file, I had to browse for it in %Program Files%\Microsoft SDKs\Silverlight\v3.0\Libraries\Server. For 64 bit users, it will be the Program Files (x86) folder.

For ease of use, I used a static port (9797) for this project. When deploying to a server, you must rename all references of http://localhost:9797 in the Silverlight project. This will remain true until the config file is supported.

The user interface uses the Silverlight Toolkit TwilightBlue theme. For more information about this, see http://www.codeplex.com/Silverlight

Blu-ray/DVD Comparison Utility

Giovanni Montrone — Sat, 28 Mar 2009 04:30:00 GMT

In this article, Giovanni Montrone will provide an overview on how to create an image comparison application for DVD and Blu-ray screen captures.
Giovanni Montrone ASPSOFT, Inc. Difficulty: Beginner Time Required: 2-3 hours Cost: Free Software: Visual Web Developer Express SP1 (or Visual Studio 2008 SP1), Silverlight 2 Tools Hardware: None Application: Run the application Source Download: Download the source

Introduction

As a fan of High Definition movies and television, I often find it difficult to explain the benefits of upgrading from DVD to blu-ray to family and friends. Many people believe that DVDs look good enough and/or that you need a really big television to notice the difference, and, even then, feel the improvement is not good enough to justify the upgrade. The best way to convince someone is to show him/her the same movie playing side by side on blu-ray and dvd using the same sized screens. Since it's difficult to do, the next best thing is to look at still images from both the DVD and the blu-ray and compare them. The images should be from the exact same scene. Fortunately there are places on the web such as AVSForum where members take the time to do this. They usually do this to help people determine what kind of an upgrade they can expect when viewing the blu-ray compared to the DVD. Sometimes the differences are easy to see, and other times they are not as clear. I built this comparison tool as a way to see what differences exist, and provided a few ways to make those differences easier to see.

This utility will allow the user to compare two different images using 3 different modes: dual view, swap view, and Rectangle View. Dual view will allow a side by side comparison where you see part of the first image, and the remaining part of the second image. Moving the mouse left or right will show more of one image, and less of the other. The swap mode will allow the user to see one image in its entirety, and then, when placing the mouse over the image, the application will swap the first image with the second one. The last mode will allow the user to specify a region that he or she wishes to compare. They can draw a rectangle using the mouse, and the application will show the first image with a chunk cut out, replacing the rectangle area with the equivalent area on the second image. The image below shows an example of the rectangle view.

Notes

The application is set to handle images that are 1920x1080 in resolution (the standard resolution of blu-ray movies). DVDs have a resolution of 720x480, but are typically up-converted to 1920x1080 in order to do a direct comparison. This upconversion is similar to what happens when you play a DVD on a 1080p high definition television. While it wouldn't be too difficult to handle other image sizes, to keep things simple, the application assumes the user will be providing images at the proper resolution. Using different images with different resolutions will result in incorrect behavior.

At the time of this writing, Silverlight 3 beta has just recently been released, but has not been tested with this application.

Setup

Before beginning, you must have Visual Studio 2008 SP1 or Visual Web Developer Express SP1. Be sure to install Silverlight 2 Tools in order to create and run the project. Once you have that, start a new Silverlight Application and call it BlurayDVDCompare, or whatever you desire. As shown in figure 1, choose the option to host Silverlight with an ASP.NET web application. This will create a web project and a separate Silverlight project.

Creating the UI

Since we will be displaying HD images (1920x1080), our next step is to ensure that the browser adds scrollbars so that the entire Silverlight control can be seen. To do this, we need to open and edit the hosting web page (BlurayDVDCompareTestPage.aspx) and set the Width and Height properties of the Silverlight control to 1920 x 1200 as shown below. The 1200 is extra room for other controls that we will add.

<asp:Silverlight ID="Xaml1" runat="server"
Source="~/ClientBin/BlurayDVDCompare.xap"
MinimumVersion="2.0.31005.0" Width="1920" Height="1200" />

Our UI will be pretty simple. We will have a couple of textboxes which will be used so that a user can specify a URLs to images they wish to compare. We will also add a couple of progress indicators so that we can show progress when the images are being loaded. We will also have three radio buttons to allow the user to select which comparison mode they wish to use.

The main part of our UI, will be the canvas that holds the two images that we are comparing. Each image has a clip region which will be used to display parts of each image or to hide/show an image. For example, in DualView mode, we want to display part of one image, and the remaining part of the second image. If no clip regions were set, the default behavior would force the second image to cover the first. The final thing we add is a border which we will be used to draw a line as a separator between the two images in DualView. In Rectangle view, the border is used to draw the rectangle.

<StackPanel>
    <Canvas x:Name="canvas" Background="White" Width="1920" Height="1080" Margin="0,5,0,0">    
        <Image x:Name="img1" Stretch="None" >        
            <Image.Clip>
                <RectangleGeometry  Rect="0,0,960,1080" x:Name="rcImg1" />
            Image.Clip>
        Image>

        <Image x:Name="img2" Stretch="None" >
            <Image.Clip >
                <RectangleGeometry Rect="960,0,1920,1080" x:Name="rcImg2"  />
            Image.Clip>
        Image>    
            
        <Border x:Name="border" Width="2" Height="1920" Margin="0,0,0,0" BorderBrush="Bisque" BorderThickness="0" />
    Canvas>
StackPanel>

Implementation

Since we want to allow the application to load images from the web, we define the LoadImages() method which accepts two URLs. In order to do this, we create new BitmapImage objects with the given URLs. This will load the images asynchronously and we will assign them as the image Source property for the two UIElements. Once loading has finished, they will automatically appear in the canvas.

private void LoadImages(string s1, string s2)
{
    brLoading.Visibility = Visibility.Visible;
    spLoadingError.Visibility = Visibility.Collapsed;

    if (string.IsNullOrEmpty(s1) || string.IsNullOrEmpty(s2))
    {
        txtLoadingError.Text = "Invalid image location given";
        brLoading.Visibility = Visibility.Collapsed;
        spLoadingError.Visibility = Visibility.Visible;
        return;
    }

    prgLoading1.Value = 0;
    prgLoading2.Value = 0;
    
    _bmi1 = new BitmapImage();
    _bmi2 = new BitmapImage();
    _bmi1.DownloadProgress += new EventHandler(bmi1_DownloadProgress);
    _bmi2.DownloadProgress += new EventHandler(bmi2_DownloadProgress);

    _bmi1.UriSource = new Uri(s1, UriKind.Absolute);
    _bmi2.UriSource = new Uri(s2, UriKind.Absolute);

    img1.Source = _bmi1;
    img2.Source = _bmi2;           
}

Private Sub LoadImages(ByVal s1 As String, ByVal s2 As String)
    brLoading.Visibility = Visibility.Visible
    spLoadingError.Visibility = Visibility.Collapsed

    If String.IsNullOrEmpty(s1) OrElse String.IsNullOrEmpty(s2) Then
        txtLoadingError.Text = "Invalid image location given"
        brLoading.Visibility = Visibility.Collapsed
        spLoadingError.Visibility = Visibility.Visible
        Return
    End If

    prgLoading1.Value = 0
    prgLoading2.Value = 0

    _bmi1 = New BitmapImage()
    _bmi2 = New BitmapImage()
    AddHandler _bmi1.DownloadProgress, AddressOf bmi1_DownloadProgress
    AddHandler _bmi2.DownloadProgress, AddressOf bmi2_DownloadProgress

    _bmi1.UriSource = New Uri(s1, UriKind.Absolute)
    _bmi2.UriSource = New Uri(s2, UriKind.Absolute)

    img1.Source = _bmi1
    img2.Source = _bmi2
End Sub

Now that we have a way to load images, the next step is to handle the different type of comparison modes. We will start with the dual view since that will be our default mode. As mentioned earlier, the dual view basically shows both images side by side in such a way where both images are presented as one. The first image is partially shown, and the second is shown as a continuation of the first. In order to do this, we track the mouse movement when it is inside of the canvas by setting up a MouseMove event handler. Every time the mouse moves, we grab the new x,y coordinates. Since dual view is only concerned with left/right movement, we only pass in the x coordinate.

void canvas_MouseMove(object sender, MouseEventArgs e)
{
    double x = e.GetPosition(canvas).X;
    double y = e.GetPosition(canvas).Y;
    
    if (_comparisonMode == ComparisonMode.DualView)
        DisplayDualView(x);
    else if (_comparisonMode == ComparisonMode.Rectangle)
    {
        // ...
    }
}

Private Sub canvas_MouseMove(ByVal sender As Object, ByVal e As MouseEventArgs)
    Dim x As Double = e.GetPosition(canvas).X
    Dim y As Double = e.GetPosition(canvas).Y

    If _comparisonMode = ComparisonMode.DualView Then
        DisplayDualView(x)
    ElseIf _comparisonMode = ComparisonMode.Rectangle Then            ' .....
    End If
End Sub

private void DisplayDualView(double x)
{
    rcImg1.Rect = new Rect(0, 0, x, IMGHEIGHT);         // Show the first half (left side), up to xCoord
    rcImg2.Rect = new Rect(x, 0, IMGWIDTH, IMGHEIGHT);  // Show the second-half (right side), starting from xCoord

    Canvas.SetLeft(border, x);                          // make the separator start at x
    Canvas.SetTop(border, 0);                           // set the separator to the top
}

Private Sub DisplayDualView(ByVal x As Double)
    rcImg1.Rect = New Rect(0, 0, x, IMGHEIGHT)         ' Show the first half (left side), up to xCoord
    rcImg2.Rect = New Rect(x, 0, IMGWIDTH, IMGHEIGHT)  ' Show the second-half (right side), starting from xCoord

    Canvas.SetLeft(border, x) ' make the separator start at x
    Canvas.SetTop(border, 0)  ' set the separator to the top
End Sub

The DisplayDualView() method sets the image clip region of the first image to be a rectangle starting from pixel 0 to pixel x, then sets the clip region of the second image to be the remaining pixels. It uses our border to represent a break in the two images so that it is clear where our mouse is. Note that the border is defined as having a width of 2 and a height of 1080 in order to display as a single line separating the two images. The border size is defined when the comparison mode is selected.

For the next comparison, we will focus on is the swap view mode. This is the easiest one to implement. In this, we show the first image in its entirety until the user places the mouse inside the canvas. When that happens, the second image is displayed until the user moves the mouse outside of the canvas.

private void DisplaySwapView(bool mouseOver)
{
    if (!mouseOver)
    {
        rcImg1.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);
        rcImg2.Rect = new Rect(0, 0, 0, 0);
    }
    else
    {
        rcImg1.Rect = new Rect(0, 0, 0, 0);
        rcImg2.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);
    }
}

Private Sub DisplaySwapView(ByVal mouseOver As Boolean)
    If (Not mouseOver) Then
        rcImg1.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)
        rcImg2.Rect = New Rect(0, 0, 0, 0)
    Else
        rcImg1.Rect = New Rect(0, 0, 0, 0)
        rcImg2.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)
    End If
End Sub

Our DisplaySwapView() method is very basic in that it basically uses the clip region to show an entire image, or to show none of the image depending on the value of the passed in bool, mouseOver. When mouseOver is false, we show the first image, when true we show the second image. While we could have used the Visibility property to show/hide the images, we use clipping in order to be consistent with our other modes.

The rectangle view is the last and most involved. Since the user will be drawing a rectangle with the mouse, we must keep track of mouse movement, the state of the mouse button, and the coordinates for the rectangle. We also need to display the rectangle as the user is drawing it and update clipped area of the image in real time in. In order to make this easier, we create a class called MouseRectangle will contain the important information about the mouse state and rectangle size and location.

public class MouseRectangle
{
    public bool MouseLeftButtonDown { get; set;}
    private Rect _rtg;

    private double? _startX;
    private double? _startY;

    public bool RectangleIsDrawn { get; set; }
    public Rect Rectangle { get { return _rtg;} }

    public MouseRectangle()
    {
        RectangleIsDrawn = false;
    }

    public void Reset()
    {
        _startX = null;
        _startY = null;
        RectangleIsDrawn = false;
    }

    public void CalculateRectangle(double x, double y)
    {
        if (_startX == null)
            _startX = x;
        if (_startY == null)
            _startY = y;

        // pick the smaller of the two
        double left = Math.Min(_startX.Value, x);
        double top = Math.Min(_startY.Value, y);

        _rtg = new Rect(left, top, Math.Abs(_startX.Value - x), Math.Abs(_startY.Value - y));             
    }

    public bool InBoundsOfRect(double x, double y)
    {
        if (x > _rtg.Left && x < _rtg.Right &&
            y > _rtg.Top && y < _rtg.Bottom)
            return true;
        return false;
    }

}

Public Class MouseRectangle
    Private privateMouseLeftButtonDown As Boolean
    Public Property MouseLeftButtonDown() As Boolean
        Get
            Return privateMouseLeftButtonDown
        End Get
        Set(ByVal value As Boolean)
            privateMouseLeftButtonDown = value
        End Set
    End Property
    Private _rtg As Rect

    Private _startX? As Double
    Private _startY? As Double

    Private privateRectangleIsDrawn As Boolean
    Public Property RectangleIsDrawn() As Boolean
        Get
            Return privateRectangleIsDrawn
        End Get
        Set(ByVal value As Boolean)
            privateRectangleIsDrawn = value
        End Set
    End Property
    Public ReadOnly Property Rectangle() As Rect
        Get
            Return _rtg
        End Get
    End Property

    Public Sub New()
        RectangleIsDrawn = False
    End Sub

    Public Sub Reset()
        _startX = Nothing
        _startY = Nothing
        RectangleIsDrawn = False
    End Sub

    Public Sub CalculateRectangle(ByVal x As Double, ByVal y As Double)
        If Not _startX.HasValue Then
            _startX = x
        End If
        If Not _startY.HasValue Then
            _startY = y
        End If

        ' pick the smaller of the two
        Dim left As Double = Math.Min(_startX.Value, x)
        Dim top As Double = Math.Min(_startY.Value, y)

        _rtg = New Rect(left, top, Math.Abs(_startX.Value - x), Math.Abs(_startY.Value - y))
    End Sub

    Public Function InBoundsOfRect(ByVal x As Double, ByVal y As Double) As Boolean
        If x > _rtg.Left AndAlso x < _rtg.Right AndAlso y > _rtg.Top AndAlso y < _rtg.Bottom Then
            Return True
        End If
        Return False
    End Function

End Class

The MouseLeftButtonDown property keeps track of whether the left button is currently being held down. There is also a Rect (_rtg) object which contains the location and dimension of the rectangle that has been drawn. The _startX and _startY member variables are nullable doubles used to keep track of the initial location where the mouse button was pressed.

Our CalculateRectangle() method is what we use to create the dimensions and location of the rectangle. We start by looking at the inital x,y coordinates, and if they are not set, it means the rectangle hasn't been drawn. In that case, a 0 pixel rectangle will be created. If those values are already set, we create the rectangle based on the x and y values passed in.

The InBoundsOfRect() method is a simple helper function that will tell us whether or not an x,y coordinate is within the bounds of the rectangle.

When in rectangle mode, the rectangle drawing begins when the mouse's left button is pressed down, and when the mouse is de-pressed, the drawing ends, and we consider the rectangle complete.

void canvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    _mouseRectangle.Reset();
    _mouseRectangle.MouseLeftButtonDown = true;
}

void canvas_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    _mouseRectangle.MouseLeftButtonDown = false;
    _mouseRectangle.RectangleIsDrawn = true;
}

Private Sub canvas_MouseLeftButtonDown(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
    _mouseRectangle.Reset()
    _mouseRectangle.MouseLeftButtonDown = True
End Sub

Private Sub canvas_MouseLeftButtonUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
    _mouseRectangle.MouseLeftButtonDown = False
    _mouseRectangle.RectangleIsDrawn = True
End Sub

While in rectangle mode, when the mouse moves over the canvas, there are two different states. If the mouse button is pressed, it means the user is drawing, and our goal is to update the rectangle to match the location where the user's mouse is in relation to the canvas.

...
else if (_comparisonMode == ComparisonMode.Rectangle)
{
    if (_mouseRectangle.MouseLeftButtonDown)
        DrawRectangle(x,y);
    else if (_mouseRectangle.RectangleIsDrawn)
        DisplayRectangleView(x,y);
}
...

...
ElseIf _comparisonMode = ComparisonMode.Rectangle Then
    If _mouseRectangle.MouseLeftButtonDown Then
        DrawRectangle(x,y)
    ElseIf _mouseRectangle.RectangleIsDrawn Then
        DisplayRectangleView(x,y)
    End If
End If
...

The DrawRectangle() method starts out by calculating the rectangle based on the current x,y coordinates. We then set the border to represent our rectangle outline by sitting its location based on the _mouseRectangle's Rectangle property. Finally we draw the first image in its entirety, and the second image will only display the portion of the image based on the rectangle's location and width/height information. This will result in seeing the the first image with the rectangular portion showing the corresponding 2nd image.

private void DrawRectangle(double x, double y)
{
    _mouseRectangle.CalculateRectangle(x,y);

    Canvas.SetLeft(border, _mouseRectangle.Rectangle.Left);
    Canvas.SetTop(border, _mouseRectangle.Rectangle.Top);
    border.Width = _mouseRectangle.Rectangle.Width;
    border.Height = _mouseRectangle.Rectangle.Height;

    rcImg1.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);
    rcImg2.Rect = _mouseRectangle.Rectangle;
}

Private Sub DrawRectangle(ByVal x As Double, ByVal y As Double)
    _mouseRectangle.CalculateRectangle(x, y)

    Canvas.SetLeft(border, _mouseRectangle.Rectangle.Left)
    Canvas.SetTop(border, _mouseRectangle.Rectangle.Top)
    border.Width = _mouseRectangle.Rectangle.Width
    border.Height = _mouseRectangle.Rectangle.Height

    rcImg1.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)
    rcImg2.Rect = _mouseRectangle.Rectangle
End Sub

When the mouse button has been de-pressed, and the rectangle has been completed, we add the ability to do a mouse over effect for the rectangular region. While the mouse is located outside of the drawn rectangle, we leave it as is. If the user moves the mouse within the rectangle, we want them to see what the original looked like, so we display only the first image.

private void DisplayRectangleView(double x, double y)
{
    rcImg1.Rect = new Rect(0, 0, IMGWIDTH, IMGHEIGHT);

    if (_mouseRectangle.InBoundsOfRect(x,y))
        rcImg2.Rect = new Rect(0, 0, 0, 0);
    else
        rcImg2.Rect = _mouseRectangle.Rectangle;

}

Private Sub DisplayRectangleView(ByVal x As Double, ByVal y As Double)
    rcImg1.Rect = New Rect(0, 0, IMGWIDTH, IMGHEIGHT)

    If _mouseRectangle.InBoundsOfRect(x, y) Then
        rcImg2.Rect = New Rect(0, 0, 0, 0)
    Else
        rcImg2.Rect = _mouseRectangle.Rectangle
    End If

End Sub

Conclusion & Future Work

Overall, the blu-ray DVD comparison utility is a pretty straight-forward Silverlight application that you can use to see the differences between two images. These images don't even need to be from blu-ray or DVD sources, but as long as they are the right dimension, a user can use it to see subtle differences between the two by allowing three different comparison modes. For blu-ray purchases when you already own the DVD, I think it helps to see what kind of benefit you will get by moving to blu-ray. It has been my experience that almost every blu-ray offers some type of picture upgrade over its DVD counterpart (and sound upgrade as well). Sometimes the differences are subtle, sometimes they are incredibly better. There are a lot of factors involved, but

Some future work that can be done to this is adding the ability to zoom in and out on the images in order to be able to see differences in a closer view. Soon there will be more movies which will be re-released on blu-ray and you can use the tool to compare the old release to the new one. This will require zooming to see some of the more finer differences. Other work can be done by creating a database to hold links, and have a control that allows a user to navigate to different movies and view different comparisons. I have started doing both of these, but they were not ready for this article.

One definite area that needs work is the UI. I am not good at laying out user interfaces or creating new xaml styles, so I left them default.

What would be really useful is a full motion comparison where you can use similar modes to see how two movies compare while in motion, but the biggest problem would be finding or creating the comparison material. Playback would be limiting as well since it requires higher end CPUs/video cards.

Comparisons

Here are a few URLs you can use to play with the comparison utility:

	URL of Standard Def image (DVD) / HD (Blu-ray)
Prince Caspian	http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/pc_1_sd.png http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/pc_1_hd.png
Prince Caspian	http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/pc_2_sd.png http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/pc_2_hd.png
Iron Man	http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/im_1_sd.png http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/im_1_hd.png
Iron Man	http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/im_2_sd.png http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/im_2_hd.png
Entrapment	http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/Ent_4_SD.png http://ecn.channel9.msdn.com/o9/c4fcontent/migration/9515699/Ent_4_HD.png

Note: Images were copied from the blu-ray threads of A/V Science Forum: www.avsforum.com .

Thanks

I would like to thank Brian Peek for introducing me to Coding4Fun, and taking the time to review my article and test the code.