Merge branch 'master' of https://twinetfs.visualstudio.com/_git/Tango

12 files changed, 480 insertions, 80 deletions

diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Controls/ColorMatrixControl.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Controls/ColorMatrixControl.cs
new file mode 100644
index 000000000..7ea8681ab
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Controls/ColorMatrixControl.cs
@@ -0,0 +1,55 @@
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Tango.MachineStudio.ColorCapture.Controls
+{
+    public class ColorMatrixControl : Control
+    {
+        public ObservableCollection<Color> Colors
+        {
+            get { return (ObservableCollection<Color>)GetValue(ColorsProperty); }
+            set { SetValue(ColorsProperty, value); }
+        }
+        public static readonly DependencyProperty ColorsProperty =
+            DependencyProperty.Register("Colors", typeof(ObservableCollection<Color>), typeof(ColorMatrixControl), new PropertyMetadata(null));
+
+        public int Columns
+        {
+            get { return (int)GetValue(ColumnsProperty); }
+            set { SetValue(ColumnsProperty, value); }
+        }
+        public static readonly DependencyProperty ColumnsProperty =
+            DependencyProperty.Register("Columns", typeof(int), typeof(ColorMatrixControl), new PropertyMetadata(10));
+
+        public int Rows
+        {
+            get { return (int)GetValue(RowsProperty); }
+            set { SetValue(RowsProperty, value); }
+        }
+        public static readonly DependencyProperty RowsProperty =
+            DependencyProperty.Register("Rows", typeof(int), typeof(ColorMatrixControl), new PropertyMetadata(11));
+
+        public ColorMatrixControl()
+        {
+            Colors = new ObservableCollection<Color>();
+        }
+
+        static ColorMatrixControl()
+        {
+            DefaultStyleKeyProperty.OverrideMetadata(typeof(ColorMatrixControl), new FrameworkPropertyMetadata(typeof(ColorMatrixControl)));
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Controls/IndexedUniformGrid.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Controls/IndexedUniformGrid.cs
new file mode 100644
index 000000000..af34e038d
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Controls/IndexedUniformGrid.cs
@@ -0,0 +1,47 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+
+namespace Tango.MachineStudio.ColorCapture.Controls
+{
+    public class IndexedUniformGrid : Grid
+    {
+        public int Columns
+        {
+            get { return (int)GetValue(ColumnsProperty); }
+            set { SetValue(ColumnsProperty, value); }
+        }
+        public static readonly DependencyProperty ColumnsProperty =
+            DependencyProperty.Register("Columns", typeof(int), typeof(IndexedUniformGrid), new PropertyMetadata(0));
+
+        public int Rows
+        {
+            get { return (int)GetValue(RowsProperty); }
+            set { SetValue(RowsProperty, value); }
+        }
+        public static readonly DependencyProperty RowsProperty =
+            DependencyProperty.Register("Rows", typeof(int), typeof(IndexedUniformGrid), new PropertyMetadata(0));
+
+        public IndexedUniformGrid()
+        {
+            Loaded += IndexedUniformGrid_Loaded;
+        }
+
+        private void IndexedUniformGrid_Loaded(object sender, RoutedEventArgs e)
+        {
+            for (int i = 0; i < Columns; i++)
+            {
+                ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(1, GridUnitType.Star) });
+            }
+
+            for (int i = 0; i < Rows; i++)
+            {
+                RowDefinitions.Add(new RowDefinition() { Height = new GridLength(1, GridUnitType.Star) });
+            }
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Graph/WpfGraphController.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Graph/WpfGraphController.cs
new file mode 100644
index 000000000..dd32cde93
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Graph/WpfGraphController.cs
@@ -0,0 +1,36 @@
+using RealTimeGraphX;
+using RealTimeGraphX.DataPoints;
+using RealTimeGraphX.Renderers;
+using RealTimeGraphX.WPF.DataSeries;
+using RealTimeGraphX.WPF.Painters;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Media;
+
+namespace Tango.MachineStudio.ColorCapture.Graph
+{
+    public class WpfGraphController : GraphControllerBase<WpfDataSeries, DoubleDataPoint, DoubleDataPoint>
+    {
+        public WpfGraphController(int refreshRate = 50)
+        {
+            AddDataSeries(new WpfDataSeries()
+            {
+                 StrokeThickness = 1,
+                 Stroke = Colors.Black,
+            });
+
+            var renderer = new GraphScrollingRenderer<WpfDataSeries, DoubleDataPoint, DoubleDataPoint>()
+            {
+                RefreshRate = TimeSpan.FromMilliseconds(refreshRate)
+            };
+
+            var painter = new WpfScrollingGraphPainter();
+
+            ConnectOutput(renderer);
+            renderer.ConnectOutput(painter);
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/bottomLeft.bmp b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/bottomLeft.bmp
new file mode 100644
index 000000000..13b33704b
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/bottomLeft.bmp
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/bottomRight.bmp b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/bottomRight.bmp
new file mode 100644
index 000000000..d2116fad2
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/bottomRight.bmp
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/topRight.bmp b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/topRight.bmp
new file mode 100644
index 000000000..f008d454d
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/topRight.bmp
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/topleft.bmp b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/topleft.bmp
new file mode 100644
index 000000000..8115cf359
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Images/topleft.bmp
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Tango.MachineStudio.ColorCapture.csproj b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Tango.MachineStudio.ColorCapture.csproj
index 2422cec2a..4d0c0fae5 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Tango.MachineStudio.ColorCapture.csproj
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Tango.MachineStudio.ColorCapture.csproj
@@ -88,6 +88,9 @@
       <Link>GlobalVersionInfo.cs</Link>
     </Compile>
     <Compile Include="ColorLabModule.cs" />
+    <Compile Include="Controls\ColorMatrixControl.cs" />
+    <Compile Include="Controls\IndexedUniformGrid.cs" />
+    <Compile Include="Graph\WpfGraphController.cs" />
     <Compile Include="Properties\AssemblyInfo.cs">
       <SubType>Code</SubType>
     </Compile>
@@ -117,6 +120,18 @@
     </None>
   </ItemGroup>
   <ItemGroup>
+    <ProjectReference Include="..\..\..\SideChains\ColorMine\ColorMine.csproj">
+      <Project>{37e4ceab-b54b-451f-b535-04cf7da9c459}</Project>
+      <Name>ColorMine</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\SideChains\RealTimeGraphX.WPF\RealTimeGraphX.WPF.csproj">
+      <Project>{99d233c5-fee7-418e-9c25-d4584cb52e28}</Project>
+      <Name>RealTimeGraphX.WPF</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\SideChains\RealTimeGraphX\RealTimeGraphX.csproj">
+      <Project>{6d55a3b8-46d3-493a-a143-aebd2b98d683}</Project>
+      <Name>RealTimeGraphX</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\..\Tango.BL\Tango.BL.csproj">
       <Project>{f441feee-322a-4943-b566-110e12fd3b72}</Project>
       <Name>Tango.BL</Name>
@@ -145,6 +160,10 @@
       <Project>{f209fae8-73f9-441b-97f4-0844a0279390}</Project>
       <Name>Tango.TCC.BL</Name>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\TCC\Tango.TCC.OpenCV.DLL\Tango.TCC.OpenCV.DLL.csproj">
+      <Project>{5d0d4053-cab3-4a4a-929e-37a76483bc22}</Project>
+      <Name>Tango.TCC.OpenCV.DLL</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\Tango.MachineStudio.Common\Tango.MachineStudio.Common.csproj">
       <Project>{cb0b0aa2-bb24-4bca-a720-45e397684e12}</Project>
       <Name>Tango.MachineStudio.Common</Name>
@@ -156,5 +175,11 @@
   <ItemGroup>
     <Resource Include="Images\colorcapture_module.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\bottomLeft.bmp" />
+    <Resource Include="Images\bottomRight.bmp" />
+    <Resource Include="Images\topleft.bmp" />
+    <Resource Include="Images\topRight.bmp" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>
\ No newline at end of file
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Themes/Generic.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Themes/Generic.xaml
index 968c541b3..0a2ebbca8 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Themes/Generic.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Themes/Generic.xaml
@@ -1,6 +1,44 @@
-<ResourceDictionary
+<ResourceDictionary
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:controls="clr-namespace:Tango.MachineStudio.ColorCapture.Controls"
     xmlns:local="clr-namespace:Tango.MachineStudio.ColorCapture">
 
+
+    <Style TargetType="{x:Type controls:ColorMatrixControl}">
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:ColorMatrixControl}">
+                    <Border Background="{TemplateBinding Background}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            BorderThickness="{TemplateBinding BorderThickness}">
+                        <Grid>
+                            <ItemsControl ItemsSource="{TemplateBinding Colors}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <UniformGrid Columns="{Binding RelativeSource={RelativeSource AncestorType=controls:ColorMatrixControl},Path=Columns}" Rows="{Binding RelativeSource={RelativeSource AncestorType=controls:ColorMatrixControl},Path=Rows}" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate>
+                                        <Rectangle>
+                                            <Rectangle.Fill>
+                                                <SolidColorBrush Color="{Binding}"></SolidColorBrush>
+                                            </Rectangle.Fill>
+                                        </Rectangle>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                            <controls:IndexedUniformGrid Columns="{TemplateBinding Columns}" Rows="{TemplateBinding Rows}">
+                                <Image Source="Images/topLeft.bmp" Stretch="Fill" Grid.Column="0" Grid.Row="0" />
+                                <Image Source="Images/topRight.bmp" Stretch="Fill" Grid.Column="{TemplateBinding Columns}" Grid.Row="0" />
+                                <Image Source="Images/bottomLeft.bmp" Stretch="Fill" Grid.Column="0" Grid.Row="{TemplateBinding Rows}" />
+                                <Image Source="Images/bottomRight.bmp" Stretch="Fill" Grid.Column="{TemplateBinding Columns}" Grid.Row="{TemplateBinding Rows}" />
+                            </controls:IndexedUniformGrid>
+                        </Grid>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
 </ResourceDictionary>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/ViewModels/MainViewVM.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/ViewModels/MainViewVM.cs
index 298b862fb..f21c403de 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/ViewModels/MainViewVM.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/ViewModels/MainViewVM.cs
@@ -1,14 +1,20 @@
-using System;
+using ColorMine.ColorSpaces;
+using ColorMine.ColorSpaces.Comparisons;
+using System;
 using System.Collections.Generic;
-using System.Drawing;
+using System.Collections.ObjectModel;
+using System.Diagnostics;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
 using System.Windows.Media;
+using System.Windows.Media.Imaging;
 using Tango.Core.Commands;
+using Tango.MachineStudio.ColorCapture.Graph;
 using Tango.MachineStudio.Common;
 using Tango.MachineStudio.Common.Notifications;
 using Tango.MachineStudio.Common.Video;
+using Tango.TCC.BL;
 using Tango.Video.DirectCapture;
 
 namespace Tango.MachineStudio.ColorCapture.ViewModels
@@ -16,6 +22,8 @@ namespace Tango.MachineStudio.ColorCapture.ViewModels
     public class MainViewVM : StudioViewModel
     {
         private INotificationProvider _notification;
+        private CardDetector _cardDetector;
+        private int _sampleCounter;
 
         public IVideoCaptureProvider VideoProvider { get; set; }
 
@@ -32,14 +40,74 @@ namespace Tango.MachineStudio.ColorCapture.ViewModels
             }
         }
 
+        private BitmapSource _detectedSource;
+        public BitmapSource DetectedSource
+        {
+            get { return _detectedSource; }
+            set { _detectedSource = value; RaisePropertyChangedAuto(); }
+        }
+
+        private ObservableCollection<Color> _colors;
+        public ObservableCollection<Color> Colors
+        {
+            get { return _colors; }
+            set { _colors = value; RaisePropertyChangedAuto(); RaisePropertyChangedAuto(); }
+        }
+
+        private Color _processedColor;
+        public Color ProcessedColor
+        {
+            get { return _processedColor; }
+            set { _processedColor = value; RaisePropertyChangedAuto(); }
+        }
+
+        private Color _capturedColor;
+        public Color CapturedColor
+        {
+            get { return _capturedColor; }
+            set { _capturedColor = value; RaisePropertyChangedAuto(); }
+        }
+
+        private double _measureL;
+        public double MeasureL
+        {
+            get { return _measureL; }
+            set { _measureL = value; RaisePropertyChangedAuto(); }
+        }
+
+        private double _measureA;
+        public double MeasureA
+        {
+            get { return _measureA; }
+            set { _measureA = value; RaisePropertyChangedAuto(); }
+        }
+
+        private double _measureB;
+        public double MeasureB
+        {
+            get { return _measureB; }
+            set { _measureB = value; RaisePropertyChangedAuto(); }
+        }
+
+
+        public WpfGraphController CaptureDeltaEController { get; set; }
+
         public RelayCommand ToggleCameraCommand { get; set; }
 
-        public MainViewVM(IVideoCaptureProvider videoProvider, INotificationProvider notificationProvider)
+        public MainViewVM()
+        {
+            _cardDetector = new CardDetector();
+            ToggleCameraCommand = new RelayCommand(ToggleCamera);
+            CaptureDeltaEController = new WpfGraphController();
+            CaptureDeltaEController.Range.AutoY = true;
+            CaptureDeltaEController.Range.MaximumX = 1000;
+        }
+
+        public MainViewVM(IVideoCaptureProvider videoProvider, INotificationProvider notificationProvider) : this()
         {
             _notification = notificationProvider;
             VideoProvider = videoProvider;
             SelectedVideoDevice = videoProvider.AvailableCaptureDevices.FirstOrDefault();
-            ToggleCameraCommand = new RelayCommand(ToggleCamera);
         }
 
         private void ToggleCamera()
@@ -52,6 +120,7 @@ namespace Tango.MachineStudio.ColorCapture.ViewModels
                 }
                 else
                 {
+                    SelectedVideoDevice.Resolution = new Resolution(1280, 720);
                     SelectedVideoDevice.Start();
                 }
             }
@@ -71,11 +140,41 @@ namespace Tango.MachineStudio.ColorCapture.ViewModels
             }
         }
 
-        private void OnVideoFrameReceived(object sender, Video.DirectShow.EventArguments.FrameReceivedEventArgs args)
+        double deltaE = 0;
+        private async void OnVideoFrameReceived(object sender, Video.DirectShow.EventArguments.FrameReceivedEventArgs args)
         {
-            Bitmap bmp = args.BitmapSource.ConvertFormat(PixelFormats.Rgb24).ToGDIBitmap();
+            if (_cardDetector.CanDetect)
+            {
+                var result = await _cardDetector.Detect(args.BitmapSource);
+
+                if (result.IsDetected)
+                {
+                    DetectedSource = result.DetectedBitmap;
+
+                    if (Colors == null)
+                    {
+                        Colors = new ObservableCollection<Color>(Enumerable.Range(0, result.ColorDetectionOutput.ColorMatrix.Count).Select(x => new Color()));
+                    }
+
+                    InvokeUI(() =>
+                    {
+                        for (int i = 0; i < result.ColorDetectionOutput.ColorMatrix.Count; i++)
+                        {
+                            var detectedColor = result.ColorDetectionOutput.ColorMatrix[i];
+                            Colors[i] = Color.FromArgb(255, (byte)detectedColor.R, (byte)detectedColor.G, (byte)detectedColor.B);
+                        }
+
+                        CapturedColor = Color.FromArgb(255, (byte)result.ColorDetectionOutput.RawColor.R, (byte)result.ColorDetectionOutput.RawColor.G, (byte)result.ColorDetectionOutput.RawColor.B);
+                        ProcessedColor = Color.FromArgb(255, (byte)result.ColorDetectionOutput.ProcessedColor.R, (byte)result.ColorDetectionOutput.ProcessedColor.G, (byte)result.ColorDetectionOutput.ProcessedColor.B);
+                    });
+
+                    //calculate delta E.
+                    Lab measureLab = new Lab(MeasureL, MeasureA, MeasureB);
+                    deltaE = measureLab.Compare(new Rgb(ProcessedColor.R, ProcessedColor.G, ProcessedColor.B), new CieDe2000Comparison());
+                }
+            }
 
-            bmp.Dispose();
+            CaptureDeltaEController.PushData(_sampleCounter++, deltaE);
         }
 
         public override void OnApplicationReady()
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml
index cd619d0a0..259e3160e 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml
@@ -6,11 +6,16 @@
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
              xmlns:vm="clr-namespace:Tango.MachineStudio.ColorCapture.ViewModels"
+             xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
+             xmlns:graphX="clr-namespace:RealTimeGraphX.WPF.Surfaces;assembly=RealTimeGraphX.WPF"
+             xmlns:componentsX="clr-namespace:RealTimeGraphX.WPF.Components;assembly=RealTimeGraphX.WPF"
+             xmlns:controls="clr-namespace:Tango.MachineStudio.ColorCapture.Controls"
+             xmlns:realtimeGraphX="clr-namespace:RealTimeGraphX.WPF.Surfaces;assembly=RealTimeGraphX.WPF"
              xmlns:global="clr-namespace:Tango.MachineStudio.ColorCapture"
              xmlns:local="clr-namespace:Tango.MachineStudio.ColorCapture.Views"
              mc:Ignorable="d" 
              d:DesignHeight="1080" d:DesignWidth="1920" Background="Transparent" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">
-    <Grid Background="White">
+    <Grid Margin="20">
         <Grid.RowDefinitions>
             <RowDefinition Height="247*"/>
             <RowDefinition Height="113*"/>
@@ -25,83 +30,170 @@
                 <Grid>
                     <DockPanel>
                         <DockPanel DockPanel.Dock="Bottom" Margin="60 0" TextElement.FontSize="25">
-                            <TextBlock VerticalAlignment="Center">Selected Capture Device</TextBlock>
-                            <ComboBox Foreground="DodgerBlue" Margin="20 0 0 0" ItemsSource="{Binding VideoProvider.AvailableCaptureDevices}" SelectedItem="{Binding SelectedVideoDevice}" DisplayMemberPath="Device"></ComboBox>
+                            <TextBlock VerticalAlignment="Center">Capture Device</TextBlock>
+                            <Button DockPanel.Dock="Right" Command="{Binding ToggleCameraCommand}" CommandParameter="{Binding}" Style="{StaticResource MaterialDesignFloatingActionMiniButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="60" Height="60" Padding="0">
+                                <materialDesign:PackIcon Width="40" Height="40">
+                                    <materialDesign:PackIcon.Style>
+                                        <Style TargetType="materialDesign:PackIcon">
+                                            <Setter Property="Kind" Value="Play"></Setter>
+                                            <Style.Triggers>
+                                                <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="True">
+                                                    <Setter Property="Kind" Value="Stop"></Setter>
+                                                </DataTrigger>
+                                                <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="False">
+                                                    <Setter Property="Kind" Value="Play"></Setter>
+                                                </DataTrigger>
+                                            </Style.Triggers>
+                                        </Style>
+                                    </materialDesign:PackIcon.Style>
+                                </materialDesign:PackIcon>
+                            </Button>
+                            <ComboBox FontWeight="SemiBold" Margin="20 0 20 0" ItemsSource="{Binding VideoProvider.AvailableCaptureDevices}" SelectedItem="{Binding SelectedVideoDevice}" DisplayMemberPath="Device"></ComboBox>
                         </DockPanel>
 
-                        <Viewbox Stretch="Fill">
-                            <Border Width="1280" Height="900">
-                                <Border.Background>
-                                    <ImageBrush ImageSource="../Images/video-frame.png" Stretch="Fill"></ImageBrush>
-                                </Border.Background>
-                                <Grid>
-                                    <Image Source="{Binding SelectedVideoDevice.VideoSource,Mode=OneWay,IsAsync=True}" Stretch="Fill" Margin="86 76 87 133">
-                                        <Image.Style>
-                                            <Style TargetType="Image">
+                        <Border BorderThickness="3" BorderBrush="#202020" Margin="40">
+                            <Image Source="{Binding SelectedVideoDevice.VideoSource,Mode=OneWay,IsAsync=True}" Stretch="Fill">
+                                <Image.Style>
+                                    <Style TargetType="Image">
+                                        <Setter Property="Visibility" Value="Hidden"></Setter>
+                                        <Style.Triggers>
+                                            <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="True">
+                                                <Setter Property="Visibility" Value="Visible"></Setter>
+                                            </DataTrigger>
+                                            <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="False">
                                                 <Setter Property="Visibility" Value="Hidden"></Setter>
-                                                <Style.Triggers>
-                                                    <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="True">
-                                                        <Setter Property="Visibility" Value="Visible"></Setter>
-                                                    </DataTrigger>
-                                                    <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="False">
-                                                        <Setter Property="Visibility" Value="Hidden"></Setter>
-                                                    </DataTrigger>
-                                                </Style.Triggers>
-                                            </Style>
-                                        </Image.Style>
-                                    </Image>
-
-                                    <Grid Background="#83000000" Cursor="Hand" Margin="87 75 86 135">
-                                        <Grid.Style>
-                                            <Style TargetType="Grid">
-                                                <Setter Property="Opacity" Value="0"></Setter>
-                                                <Style.Triggers>
-                                                    <EventTrigger RoutedEvent="MouseEnter">
-                                                        <EventTrigger.Actions>
-                                                            <BeginStoryboard>
-                                                                <Storyboard>
-                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:0.2"></DoubleAnimation>
-                                                                </Storyboard>
-                                                            </BeginStoryboard>
-                                                        </EventTrigger.Actions>
-                                                    </EventTrigger>
-                                                    <EventTrigger RoutedEvent="MouseLeave">
-                                                        <EventTrigger.Actions>
-                                                            <BeginStoryboard>
-                                                                <Storyboard>
-                                                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:0.2"></DoubleAnimation>
-                                                                </Storyboard>
-                                                            </BeginStoryboard>
-                                                        </EventTrigger.Actions>
-                                                    </EventTrigger>
-                                                </Style.Triggers>
-                                            </Style>
-                                        </Grid.Style>
-
-                                        <Button Command="{Binding ToggleCameraCommand}" CommandParameter="{Binding}" Style="{StaticResource MaterialDesignFloatingActionMiniButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="80" Height="80" Padding="0">
-                                            <materialDesign:PackIcon Width="40" Height="40">
-                                                <materialDesign:PackIcon.Style>
-                                                    <Style TargetType="materialDesign:PackIcon">
-                                                        <Setter Property="Kind" Value="Play"></Setter>
-                                                        <Style.Triggers>
-                                                            <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="True">
-                                                                <Setter Property="Kind" Value="Stop"></Setter>
-                                                            </DataTrigger>
-                                                            <DataTrigger Binding="{Binding SelectedVideoDevice.IsStarted}" Value="False">
-                                                                <Setter Property="Kind" Value="Play"></Setter>
-                                                            </DataTrigger>
-                                                        </Style.Triggers>
-                                                    </Style>
-                                                </materialDesign:PackIcon.Style>
-                                            </materialDesign:PackIcon>
-                                        </Button>
-                                    </Grid>
-                                </Grid>
-                            </Border>
-                        </Viewbox>
+                                            </DataTrigger>
+                                        </Style.Triggers>
+                                    </Style>
+                                </Image.Style>
+                            </Image>
+                        </Border>
                     </DockPanel>
                 </Grid>
             </Border>
+
+            <Grid Grid.Column="1">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="180*"/>
+                    <RowDefinition Height="130*"/>
+                </Grid.RowDefinitions>
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="1*"/>
+                        <ColumnDefinition Width="1*"/>
+                    </Grid.ColumnDefinitions>
+
+                    <Border Margin="0 40 0 0" VerticalAlignment="Top" Width="300" Height="310"  BorderThickness="3" BorderBrush="#202020">
+                        <Image Source="{Binding DetectedSource,Mode=OneWay,IsAsync=True}" Stretch="Fill"></Image>
+                    </Border>
+
+                    <Border Margin="0 40 0 0" VerticalAlignment="Top" Width="300" Height="310" BorderThickness="3" BorderBrush="#202020" Grid.Column="1">
+                        <controls:ColorMatrixControl Colors="{Binding Colors,Mode=OneWay}" Columns="10" Rows="11" />
+                    </Border>
+                </Grid>
+
+                <Grid Grid.Row="1">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="1*"/>
+                        <ColumnDefinition Width="1*"/>
+                    </Grid.ColumnDefinitions>
+
+                    <Grid Width="300" Height="190" VerticalAlignment="Top">
+                        <DockPanel>
+                            <TextBlock DockPanel.Dock="Top" FontSize="20">Captured Color</TextBlock>
+                            <DockPanel Margin="0 10 0 0" TextElement.FontSize="20">
+                                <UniformGrid DockPanel.Dock="Right" Rows="3" Margin="10 0 0 0" Width="55">
+                                    <TextBlock><Run Text="R:"></Run> <Run FontWeight="SemiBold" FontStyle="Italic" Text="{Binding CapturedColor.R,Mode=OneWay}"></Run></TextBlock>
+                                    <TextBlock><Run Text="G:"></Run> <Run FontWeight="SemiBold" FontStyle="Italic" Text="{Binding CapturedColor.G,Mode=OneWay}"></Run></TextBlock>
+                                    <TextBlock><Run Text="B:"></Run> <Run FontWeight="SemiBold" FontStyle="Italic" Text="{Binding CapturedColor.B,Mode=OneWay}"></Run></TextBlock>
+                                </UniformGrid>
+                                <Border BorderThickness="1" BorderBrush="#202020">
+                                    <Border.Background>
+                                        <SolidColorBrush Color="{Binding CapturedColor,Mode=OneWay}" />
+                                    </Border.Background>
+                                </Border>
+                            </DockPanel>
+                        </DockPanel>
+                    </Grid>
+
+                    <Grid Width="300" Height="190" VerticalAlignment="Top" Grid.Column="1">
+                        <DockPanel>
+                            <TextBlock DockPanel.Dock="Top" FontSize="20">Processed Color</TextBlock>
+                            <DockPanel Margin="0 10 0 0" TextElement.FontSize="20">
+                                <UniformGrid DockPanel.Dock="Right" Rows="3" Margin="10 0 0 0" Width="55">
+                                    <TextBlock><Run Text="R:"></Run> <Run FontWeight="SemiBold" FontStyle="Italic" Text="{Binding ProcessedColor.R,Mode=OneWay}"></Run></TextBlock>
+                                    <TextBlock><Run Text="G:"></Run> <Run FontWeight="SemiBold" FontStyle="Italic" Text="{Binding ProcessedColor.G,Mode=OneWay}"></Run></TextBlock>
+                                    <TextBlock><Run Text="B:"></Run> <Run FontWeight="SemiBold" FontStyle="Italic" Text="{Binding ProcessedColor.B,Mode=OneWay}"></Run></TextBlock>
+                                </UniformGrid>
+                                <Border BorderThickness="1" BorderBrush="#202020">
+                                    <Border.Background>
+                                        <SolidColorBrush Color="{Binding ProcessedColor,Mode=OneWay}" />
+                                    </Border.Background>
+                                </Border>
+                            </DockPanel>
+                        </DockPanel>
+                    </Grid>
+                </Grid>
+            </Grid>
+        </Grid>
+
+        <Grid Grid.Row="1" Margin="0 10 0 0">
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="1*"/>
+                    <ColumnDefinition Width="1*"/>
+                </Grid.ColumnDefinitions>
+                <DockPanel>
+                    <TextBlock DockPanel.Dock="Top">HISTORY</TextBlock>
+                    <DataGrid Margin="0 10 0 0" Background="Transparent" Grid.ColumnSpan="2">
+                        <DataGrid.Columns>
+                            <DataGridTextColumn Header="TIME" />
+                            <DataGridTextColumn Header="CAPTURED COLOR" />
+                            <DataGridTextColumn Header="PROCESSED COLOR" />
+                        </DataGrid.Columns>
+                    </DataGrid>
+                </DockPanel>
+
+                <DockPanel Grid.Column="1" Margin="75 0 110 0">
+                    <Grid DockPanel.Dock="Top" TextElement.FontSize="20" Margin="0 0 0 10">
+                        <DockPanel>
+                            <TextBlock HorizontalAlignment="Center">Delta E Reference Point</TextBlock>
+                            <StackPanel Orientation="Horizontal" Margin="20 0 0 0">
+                                <TextBlock FontWeight="SemiBold">L:</TextBlock>
+                                <mahapps:NumericUpDown MinWidth="120" HorizontalContentAlignment="Left" Value="{Binding MeasureL,UpdateSourceTrigger=PropertyChanged}" Minimum="0" Maximum="100" Margin="5 0 0 0" HasDecimals="True" HideUpDownButtons="True" Background="Transparent" BorderThickness="1" />
+
+                                <TextBlock Margin="20 0 0 0" FontWeight="SemiBold">A:</TextBlock>
+                                <mahapps:NumericUpDown MinWidth="120" HorizontalContentAlignment="Left" Value="{Binding MeasureA,UpdateSourceTrigger=PropertyChanged}" Minimum="-127" Maximum="128" Margin="5 0 0 0" HasDecimals="True" HideUpDownButtons="True" Background="Transparent" BorderThickness="1" />
+
+                                <TextBlock Margin="20 0 0 0" FontWeight="SemiBold">B:</TextBlock>
+                                <mahapps:NumericUpDown MinWidth="120" HorizontalContentAlignment="Left" Value="{Binding MeasureB,UpdateSourceTrigger=PropertyChanged}" Minimum="-127" Maximum="128" Margin="5 0 0 0" HasDecimals="True" HideUpDownButtons="True" Background="Transparent" BorderThickness="1" />
+                            </StackPanel>
+                        </DockPanel>
+                    </Grid>
+                    <Grid>
+                        <Border Padding="20" BorderThickness="1" BorderBrush="#202020">
+                            <Grid>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="55"/>
+                                    <ColumnDefinition Width="438*"/>
+                                </Grid.ColumnDefinitions>
+
+                                <Border Margin="0 1 0 2">
+                                    <componentsX:GraphAxisControl Orientation="Vertical" FontSize="10" Surface="{Binding ElementName=Graph}" StringFormat="Δ 0.00;-#" />
+                                </Border>
+                                <Border Grid.Column="1" BorderThickness="1" BorderBrush="Silver" Margin="1 0 0 0">
+                                    <Grid>
+
+                                        <componentsX:GraphGridLines Foreground="Silver" />
+
+                                        <graphX:WpfGraphSurface x:Name="Graph"></graphX:WpfGraphSurface>
+                                    </Grid>
+                                </Border>
+                            </Grid>
+                        </Border>
+                    </Grid>
+                </DockPanel>
+            </Grid>
         </Grid>
     </Grid>
 </UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml.cs
index 4f890bfe1..05b5daf7e 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.ColorCapture/Views/MainView.xaml.cs
@@ -12,6 +12,7 @@ using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
+using Tango.MachineStudio.ColorCapture.ViewModels;
 
 namespace Tango.MachineStudio.ColorCapture.Views
 {
@@ -20,9 +21,16 @@ namespace Tango.MachineStudio.ColorCapture.Views
     /// </summary>
     public partial class MainView : UserControl
     {
+        private MainViewVM _vm;
+
         public MainView()
         {
             InitializeComponent();
+            Loaded += (_, __) => 
+            {
+                _vm = DataContext as MainViewVM;
+                _vm.CaptureDeltaEController.Output.Output.ConnectOutput(Graph);
+            };
         }
     }
 }