Blu-ray/DVD Comparison Utility

<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. 

<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>

 

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<DownloadProgressEventArgs>(bmi1_DownloadProgress);
    _bmi2.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(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.

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