Started working on monitoring view..

10 files changed, 520 insertions, 1 deletions

diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Controls/IOMonitorControl.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Controls/IOMonitorControl.xaml
new file mode 100644
index 000000000..c40e69d98
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Controls/IOMonitorControl.xaml
@@ -0,0 +1,115 @@
+<UserControl x:Class="Tango.MachineStudio.Developer.Controls.IOMonitorControl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:local="clr-namespace:Tango.MachineStudio.Developer.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="120" d:DesignWidth="200" Width="200" Height="120" Background="White">
+
+    <UserControl.Resources>
+
+    </UserControl.Resources>
+
+    <Grid Margin="5">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="30"/>
+            <ColumnDefinition Width="1*"/>
+            <ColumnDefinition Width="30"/>
+        </Grid.ColumnDefinitions>
+
+        <Grid Grid.Column="1" Grid.Row="1">
+            <Border BorderThickness="1" BorderBrush="#878787" CornerRadius="5">
+                <Border.Background>
+                    <ImageBrush ImageSource="../Images/black-screen.jpg" />
+                </Border.Background>
+
+                <TextBlock TextAlignment="Center" VerticalAlignment="Center" FontSize="50" Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=Value,FallbackValue='0000'}"></TextBlock>
+            </Border>
+        </Grid>
+
+        <Grid Grid.Row="1">
+            <Border BorderBrush="Gainsboro" BorderThickness="1 1 0 1" Margin="0 10" CornerRadius="5 0 0 5" PreviewMouseDown="OnBackwardPressed" PreviewMouseUp="OnBackwardReleased">
+                <Border.Style>
+                    <Style TargetType="Border">
+                        <Setter Property="Background">
+                            <Setter.Value>
+                                <LinearGradientBrush EndPoint="1,0">
+                                    <GradientStop Color="#515151" Offset="1" />
+                                    <GradientStop Color="#FFEEEEEE" Offset="0"/>
+                                </LinearGradientBrush>
+                            </Setter.Value>
+                        </Setter>
+                        <Style.Triggers>
+                            <EventTrigger RoutedEvent="PreviewMouseDown">
+                                <EventTrigger.Actions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#FFCECECE" Duration="00:00:0.1" />
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </EventTrigger.Actions>
+                            </EventTrigger>
+                            <EventTrigger RoutedEvent="PreviewMouseUp">
+                                <EventTrigger.Actions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#FFEEEEEE" Duration="00:00:0.1" />
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </EventTrigger.Actions>
+                            </EventTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Border.Style>
+
+                <Viewbox Stretch="Fill" Margin="-10 10">
+                    <materialDesign:PackIcon Kind="ChevronLeft" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Height="24" Foreground="#202020" />
+                </Viewbox>
+            </Border>
+        </Grid>
+
+        <Grid Grid.Row="1" Grid.Column="2">
+            <Border BorderBrush="Gainsboro" BorderThickness="0 1 1 1" Margin="0 10" CornerRadius="0 10 10 0" PreviewMouseDown="OnForwardPressed" PreviewMouseUp="OnForwardReleased">
+                <Border.Style>
+                    <Style TargetType="Border">
+                        <Setter Property="Background">
+                            <Setter.Value>
+                                <LinearGradientBrush EndPoint="1,0">
+                                    <GradientStop Color="#515151" Offset="0" />
+                                    <GradientStop Color="#FFEEEEEE" Offset="1"/>
+                                </LinearGradientBrush>
+                            </Setter.Value>
+                        </Setter>
+                        <Style.Triggers>
+                            <EventTrigger RoutedEvent="PreviewMouseDown">
+                                <EventTrigger.Actions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#FFCECECE" Duration="00:00:0.1" />
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </EventTrigger.Actions>
+                            </EventTrigger>
+                            <EventTrigger RoutedEvent="PreviewMouseUp">
+                                <EventTrigger.Actions>
+                                    <BeginStoryboard>
+                                        <Storyboard>
+                                            <ColorAnimation Storyboard.TargetProperty="Background.GradientStops[1].Color" To="#FFEEEEEE" Duration="00:00:0.1" />
+                                        </Storyboard>
+                                    </BeginStoryboard>
+                                </EventTrigger.Actions>
+                            </EventTrigger>
+                        </Style.Triggers>
+                    </Style>
+                </Border.Style>
+
+                <Viewbox Stretch="Fill" Margin="-10 10">
+                    <materialDesign:PackIcon Kind="ChevronRight" HorizontalAlignment="Center" VerticalAlignment="Center" Width="24" Height="24" Foreground="#202020" />
+                </Viewbox>
+            </Border>
+        </Grid>
+
+    </Grid>
+</UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Controls/IOMonitorControl.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Controls/IOMonitorControl.xaml.cs
new file mode 100644
index 000000000..bc408958d
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Controls/IOMonitorControl.xaml.cs
@@ -0,0 +1,109 @@
+using System;
+using System.Collections.Generic;
+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;
+using Tango.Core.Commands;
+
+namespace Tango.MachineStudio.Developer.Controls
+{
+    /// <summary>
+    /// Interaction logic for IOMonitorControl.xaml
+    /// </summary>
+    public partial class IOMonitorControl : UserControl
+    {
+        public ICommand ForwardPressedCommand
+        {
+            get { return (ICommand)GetValue(ForwardPressedCommandProperty); }
+            set { SetValue(ForwardPressedCommandProperty, value); }
+        }
+        public static readonly DependencyProperty ForwardPressedCommandProperty =
+            DependencyProperty.Register("ForwardPressedCommand", typeof(ICommand), typeof(IOMonitorControl), new PropertyMetadata(null));
+
+        public ICommand ForwardReleasedCommand
+        {
+            get { return (ICommand)GetValue(ForwardReleasedCommandProperty); }
+            set { SetValue(ForwardReleasedCommandProperty, value); }
+        }
+        public static readonly DependencyProperty ForwardReleasedCommandProperty =
+            DependencyProperty.Register("ForwardReleasedCommand", typeof(ICommand), typeof(IOMonitorControl), new PropertyMetadata(null));
+
+        public ICommand BackwardPressedCommand
+        {
+            get { return (ICommand)GetValue(BackwardPressedCommandProperty); }
+            set { SetValue(BackwardPressedCommandProperty, value); }
+        }
+        public static readonly DependencyProperty BackwardPressedCommandProperty =
+            DependencyProperty.Register("BackwardPressedCommand", typeof(ICommand), typeof(IOMonitorControl), new PropertyMetadata(null));
+
+        public ICommand BackwardReleasedCommand
+        {
+            get { return (ICommand)GetValue(BackwardReleasedCommandProperty); }
+            set { SetValue(BackwardReleasedCommandProperty, value); }
+        }
+        public static readonly DependencyProperty BackwardReleasedCommandProperty =
+            DependencyProperty.Register("BackwardReleasedCommand", typeof(ICommand), typeof(IOMonitorControl), new PropertyMetadata(null));
+
+        public object CommandParameter
+        {
+            get { return (object)GetValue(CommandParameterProperty); }
+            set { SetValue(CommandParameterProperty, value); }
+        }
+        public static readonly DependencyProperty CommandParameterProperty =
+            DependencyProperty.Register("CommandParameter", typeof(object), typeof(IOMonitorControl), new PropertyMetadata(null));
+
+        public String Value
+        {
+            get { return (String)GetValue(ValueProperty); }
+            set { SetValue(ValueProperty, value); }
+        }
+        public static readonly DependencyProperty ValueProperty =
+            DependencyProperty.Register("Value", typeof(String), typeof(IOMonitorControl), new PropertyMetadata("0000"));
+
+        public IOMonitorControl()
+        {
+            InitializeComponent();
+        }
+
+        private void OnForwardPressed(object sender, MouseButtonEventArgs e)
+        {
+            if (ForwardPressedCommand != null)
+            {
+                ForwardPressedCommand.Execute(CommandParameter);
+            }
+        }
+
+        private void OnForwardReleased(object sender, MouseButtonEventArgs e)
+        {
+            if (ForwardReleasedCommand != null)
+            {
+                ForwardReleasedCommand.Execute(CommandParameter);
+            }
+        }
+
+        private void OnBackwardPressed(object sender, MouseButtonEventArgs e)
+        {
+            if (BackwardPressedCommand != null)
+            {
+                BackwardPressedCommand.Execute(CommandParameter);
+            }
+        }
+
+        private void OnBackwardReleased(object sender, MouseButtonEventArgs e)
+        {
+            if (BackwardReleasedCommand != null)
+            {
+                BackwardReleasedCommand.Execute(CommandParameter);
+            }
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/black-screen.jpg b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/black-screen.jpg
new file mode 100644
index 000000000..7ed5c3eb2
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/black-screen.jpg
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Tango.MachineStudio.Developer.csproj b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Tango.MachineStudio.Developer.csproj
index 4ef73a918..722d8efe6 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Tango.MachineStudio.Developer.csproj
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Tango.MachineStudio.Developer.csproj
@@ -90,6 +90,9 @@
     <Reference Include="PresentationFramework" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="Controls\IOMonitorControl.xaml.cs">
+      <DependentUpon>IOMonitorControl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Converters\BrushStopLabToColorConverter.cs" />
     <Compile Include="Converters\BrushStopCMYKToColorConverter.cs" />
     <Compile Include="Converters\BrushStopToColorConverter.cs" />
@@ -108,7 +111,9 @@
     <Compile Include="DeveloperModule.cs" />
     <Compile Include="ViewModelLocator.cs" />
     <Compile Include="ViewModels\DBViewContextWrapper.cs" />
+    <Compile Include="ViewModels\IOVM.cs" />
     <Compile Include="ViewModels\MainViewVM.cs" />
+    <Compile Include="ViewModels\MonitoringViewVM.cs" />
     <Compile Include="Views\IMainView.cs" />
     <Compile Include="Views\MainView.xaml.cs">
       <DependentUpon>MainView.xaml</DependentUpon>
@@ -116,6 +121,13 @@
     <Compile Include="..\..\..\Versioning\GlobalVersionInfo.cs">
       <Link>GlobalVersionInfo.cs</Link>
     </Compile>
+    <Compile Include="Views\MonitoringView.xaml.cs">
+      <DependentUpon>MonitoringView.xaml</DependentUpon>
+    </Compile>
+    <Page Include="Controls\IOMonitorControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Resources\GraphEx.xaml">
       <Generator>MSBuild:Compile</Generator>
       <SubType>Designer</SubType>
@@ -124,6 +136,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Views\MonitoringView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
   </ItemGroup>
   <ItemGroup>
     <Compile Include="Properties\AssemblyInfo.cs">
@@ -267,5 +283,8 @@
   <ItemGroup>
     <Resource Include="Images\tape.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\black-screen.jpg" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
 </Project>
\ No newline at end of file
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModelLocator.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModelLocator.cs
index 46c7ecf00..200c89e19 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModelLocator.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModelLocator.cs
@@ -21,6 +21,7 @@ namespace Tango.MachineStudio.Developer
 
             SimpleIoc.Default.Register<IMainView>(() => MainView.Self);
             SimpleIoc.Default.Register<MainViewVM>();
+            SimpleIoc.Default.Register<MonitoringViewVM>();
         }
 
         public static MainViewVM MainViewVM
@@ -30,5 +31,13 @@ namespace Tango.MachineStudio.Developer
                 return ServiceLocator.Current.GetInstance<MainViewVM>();
             }
         }
+
+        public static MonitoringViewVM MonitoringViewVM
+        {
+            get
+            {
+                return ServiceLocator.Current.GetInstance<MonitoringViewVM>();
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/IOVM.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/IOVM.cs
new file mode 100644
index 000000000..83eee1333
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/IOVM.cs
@@ -0,0 +1,47 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Tango.Core;
+using Tango.Integration.Observables;
+
+namespace Tango.MachineStudio.Developer.ViewModels
+{
+    public class IOVM : ExtendedObject
+    {
+        private Io _io;
+        public Io IO
+        {
+            get { return _io; }
+            set { _io = value; RaisePropertyChangedAuto(); }
+        }
+
+        private String _name;
+        public String Name
+        {
+            get { return _name; }
+            set { _name = value; }
+        }
+
+        private bool _index;
+        public bool Index
+        {
+            get { return _index; }
+            set { _index = value; }
+        }
+
+        private double _value;
+        public double Value
+        {
+            get { return _value; }
+            set { _value = value; RaisePropertyChanged(nameof(Value)); }
+        }
+
+        public IOVM(Io io, String name)
+        {
+            IO = io;
+            Name = name;
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/MonitoringViewVM.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/MonitoringViewVM.cs
new file mode 100644
index 000000000..8edbd7b83
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/MonitoringViewVM.cs
@@ -0,0 +1,93 @@
+using Google.Protobuf.Collections;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reflection;
+using System.Text;
+using System.Threading.Tasks;
+using Tango.Integration.Observables;
+using Tango.Integration.Services;
+using Tango.MachineStudio.Common.StudioApplication;
+using Tango.PMR.Diagnostics;
+using Tango.SharedUI;
+
+namespace Tango.MachineStudio.Developer.ViewModels
+{
+    public class MonitoringViewVM : ViewModel
+    {
+        private ObservableCollection<IOVM> _availableControllers;
+        public ObservableCollection<IOVM> AvailableControllers
+        {
+            get { return _availableControllers; }
+            set { _availableControllers = value; }
+        }
+
+        private ObservableCollection<IOVM> _controllers;
+        public ObservableCollection<IOVM> Controllers
+        {
+            get { return _controllers; }
+            set { _controllers = value; }
+        }
+
+        private ObservablesEntitiesAdapter _adapter;
+        public ObservablesEntitiesAdapter Adapter
+        {
+            get { return _adapter; }
+            set { _adapter = value; }
+        }
+
+        public IStudioApplicationManager ApplicationManager { get; set; }
+
+        public MonitoringViewVM(IStudioApplicationManager applicationManager)
+        {
+            ApplicationManager = applicationManager;
+            ApplicationManager.ConnectedMachineChanged += ApplicationManager_ConnectedMachineChanged;
+
+            if (!this.DesignMode)
+            {
+                Adapter = ObservablesEntitiesAdapter.Instance;
+                AvailableControllers = Adapter.Ios.Select(x => new IOVM(x, x.Name)).ToObservableCollection();
+            }
+
+            Controllers = new ObservableCollection<IOVM>();
+        }
+
+        private void ApplicationManager_ConnectedMachineChanged(object sender, IExternalBridgeClient machine)
+        {
+            if (machine != null)
+            {
+                machine.DiagnosticsDataAvailable -= Machine_DiagnosticsDataAvailable;
+                machine.DiagnosticsDataAvailable += Machine_DiagnosticsDataAvailable;
+            }
+        }
+
+        private void Machine_DiagnosticsDataAvailable(object sender, PushDiagnosticsResponse data)
+        {
+            foreach (var prop in data.GetType().GetProperties(BindingFlags.Public | BindingFlags.Instance))
+            {
+                IOVM controller = _controllers.SingleOrDefault(x => x.IO.Name == prop.Name);
+
+                if (controller != null)
+                {
+                    if (!controller.IO.MultiChannel)
+                    {
+                        RepeatedField<double> arr = prop.GetValue(data) as RepeatedField<double>;
+                        controller.Value = arr.Last();
+                    }
+                    else
+                    {
+                        //DoubleArray[] arrayOfDoubles = Enumerable.ToArray(prop.GetValue(data) as IEnumerable<DoubleArray>);
+                        //(controller as GraphMultiController).PushData(arrayOfDoubles.Select(x => x.Data.ToList()).ToList());
+                    }
+                }
+            }
+        }
+
+        public void OnDropAvailableIO(IOVM ioVM)
+        {
+            Controllers.Add(ioVM);
+            AvailableControllers.Remove(ioVM);
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml
index cdfef3b0d..1ef6928f5 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml
@@ -1987,7 +1987,8 @@
                                         </Style.Triggers>
                                     </Style>
                                 </Grid.Style>
-                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40">MONITORING</TextBlock>
+
+                                <local:MonitoringView Margin="50 0 0 0" />
                             </Grid>
                         </Grid>
                     </Grid>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MonitoringView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MonitoringView.xaml
new file mode 100644
index 000000000..bd78ef13e
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MonitoringView.xaml
@@ -0,0 +1,76 @@
+<UserControl x:Class="Tango.MachineStudio.Developer.Views.MonitoringView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop"
+             xmlns:vm="clr-namespace:Tango.MachineStudio.Developer.ViewModels"
+             xmlns:controls="clr-namespace:Tango.MachineStudio.Developer.Controls"
+             xmlns:global="clr-namespace:Tango.MachineStudio.Developer"
+             xmlns:observables="clr-namespace:Tango.Integration.Observables;assembly=Tango.Integration"
+             xmlns:local="clr-namespace:Tango.MachineStudio.Developer.Views"
+             mc:Ignorable="d" 
+             d:DesignHeight="600" d:DesignWidth="1280" Background="White" d:DataContext="{d:DesignInstance Type=vm:MonitoringViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MonitoringViewVM}">
+    <Grid>
+        <Grid>
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="1*"/>
+                <ColumnDefinition Width="230"/>
+            </Grid.ColumnDefinitions>
+
+            <Grid dragAndDrop:DragAndDropService.Droppable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}" dragAndDrop:DragAndDropService.Drop="OnDropAvailableIO">
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                    <ItemsControl ItemsSource="{Binding Controllers}">
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate DataType="{x:Type vm:IOVM}">
+                                <Grid Margin="10" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.Droppable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                    <StackPanel>
+                                        <TextBlock Text="{Binding IO.Description}" Width="180" TextAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="10" HorizontalAlignment="Center"></TextBlock>
+                                        <Viewbox Stretch="Fill" Width="180" Height="100">
+                                            <controls:IOMonitorControl Foreground="Gainsboro" FontFamily="{StaticResource digital-7}" Value="{Binding Value,Mode=OneWay}" />
+                                        </Viewbox>
+                                    </StackPanel>
+                                </Grid>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </ScrollViewer>
+            </Grid>
+
+            <Grid Grid.Column="1">
+                <DockPanel>
+                    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
+                        <Image Source="../Images/graphs.png" Width="42"></Image>
+                        <TextBlock VerticalAlignment="Center" Margin="10 0 0 0" Foreground="DimGray" FontSize="16" FontWeight="SemiBold">AVAILABLE IO'S</TextBlock>
+                    </StackPanel>
+
+                    <Grid>
+                        <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                            <ItemsControl ItemsSource="{Binding AvailableControllers}">
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate DataType="{x:Type vm:IOVM}">
+                                        <Grid IsHitTestVisible="True" Background="Transparent" Margin="10" Opacity="0.4" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                            <StackPanel IsHitTestVisible="False">
+                                                <TextBlock Text="{Binding IO.Description}" Width="180" TextAlignment="Center" TextTrimming="CharacterEllipsis" FontSize="10" HorizontalAlignment="Center"></TextBlock>
+                                                <Viewbox Stretch="Fill" Width="180" Height="100" IsHitTestVisible="False">
+                                                    <controls:IOMonitorControl Foreground="Gainsboro" FontFamily="{StaticResource digital-7}" IsHitTestVisible="False" />
+                                                </Viewbox>
+                                            </StackPanel>
+                                        </Grid>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </ScrollViewer>
+                    </Grid>
+                </DockPanel>
+            </Grid>
+        </Grid>
+        <dragAndDrop:DraggingSurface x:Name="draggingSurface" IsHitTestVisible="False" />
+    </Grid>
+</UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MonitoringView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MonitoringView.xaml.cs
new file mode 100644
index 000000000..0d649237e
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MonitoringView.xaml.cs
@@ -0,0 +1,50 @@
+using System;
+using System.Collections.Generic;
+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;
+using Tango.DragAndDrop;
+using Tango.MachineStudio.Developer.ViewModels;
+
+namespace Tango.MachineStudio.Developer.Views
+{
+    /// <summary>
+    /// Interaction logic for MonitoringView.xaml
+    /// </summary>
+    public partial class MonitoringView : UserControl
+    {
+        private MonitoringViewVM _vm;
+
+        public DraggingSurface DraggingSurface
+        {
+            get { return (DraggingSurface)GetValue(DraggingSurfaceProperty); }
+            set { SetValue(DraggingSurfaceProperty, value); }
+        }
+        public static readonly DependencyProperty DraggingSurfaceProperty =
+            DependencyProperty.Register("DraggingSurface", typeof(DraggingSurface), typeof(MonitoringView), new PropertyMetadata(null));
+
+        public MonitoringView()
+        {
+            InitializeComponent();
+            DraggingSurface = draggingSurface;
+            this.Loaded += (x, y) => 
+            {
+                _vm = this.DataContext as MonitoringViewVM;
+            };
+        }
+
+        private void OnDropAvailableIO(object sender, DropEventArgs e)
+        {
+            _vm.OnDropAvailableIO(e.Draggable.DataContext as IOVM);
+        }
+    }
+}