Added Graphs Drag & Drop to Developer Module.

15 files changed, 897 insertions, 39 deletions

diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/camera.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/camera.png
new file mode 100644
index 000000000..526573632
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/camera.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/graphs.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/graphs.png
new file mode 100644
index 000000000..6a211693d
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/graphs.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/line_graph.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/line_graph.png
new file mode 100644
index 000000000..7e21f4e97
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/line_graph.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/no-signal.jpg b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/no-signal.jpg
new file mode 100644
index 000000000..e8b1313c9
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Images/no-signal.jpg
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Resources/GraphEx.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Resources/GraphEx.xaml
new file mode 100644
index 000000000..a44a8191c
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Resources/GraphEx.xaml
@@ -0,0 +1,126 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:sys="clr-namespace:System;assembly=mscorlib"
+                    xmlns:local="clr-namespace:Tango.MachineStudio.Developer.Resources">
+
+    <FontFamily x:Key="FontName">Segoe UI</FontFamily>
+    <FontFamily x:Key="NotesFont">Lucida Console</FontFamily>
+
+    <sys:Double x:Key="ExtraExtraLargeFontSize">28</sys:Double>
+    <sys:Double x:Key="ExtraLargeFontSize">26</sys:Double>
+    <sys:Double x:Key="LargeFontSize">20</sys:Double>
+    <sys:Double x:Key="MediumFontSize">16</sys:Double>
+    <sys:Double x:Key="SmallFontSize">14</sys:Double>
+    <sys:Double x:Key="MiniFontSize">12</sys:Double>
+    <sys:Double x:Key="TinyFontSize">9</sys:Double>
+
+    <!--Colors-->
+    <Color x:Key="borderColor">Silver</Color>
+    <Color x:Key="graphGridLinesColor">#FFE9E9E9</Color>
+    <Color x:Key="graphsMarkerColor">Gray</Color>
+    <Color x:Key="materialColor">#03A9F4</Color>
+    
+
+    <!--Brushes-->
+    <SolidColorBrush x:Key="borderBrush" Color="{StaticResource borderColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="graphGridLinesBrush" Color="{StaticResource graphGridLinesColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="BlackBrush" Color="#545454"></SolidColorBrush>
+
+    <SolidColorBrush x:Key="graphGridLinesLightBrush" Color="{StaticResource graphGridLinesColor}"></SolidColorBrush>
+    <SolidColorBrush x:Key="graphGridLinesDarkBrush" Color="#FF2E2E2E"></SolidColorBrush>
+
+    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphBackgroundLight">
+        <GradientStop Color="White"/>
+        <GradientStop Color="#FFE9E9E9" Offset="1"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphBackgroundDark">
+        <GradientStop Color="Black"/>
+        <GradientStop Color="#FF333333" Offset="1"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphBackground">
+        <GradientStop Color="White"/>
+        <GradientStop Color="#FFE9E9E9" Offset="1"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphLabelBackground" Opacity="0.7">
+        <GradientStop Color="White"/>
+        <GradientStop Color="#FFD9D9D9" Offset="1"/>
+    </LinearGradientBrush>
+
+    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphLegendBackground" Opacity="0.7">
+        <GradientStop Color="#FFE9E9E9"/>
+        <GradientStop Color="#FFBDBDBD" Offset="1"/>
+    </LinearGradientBrush>
+
+    <SolidColorBrush Color="#FFF1F1F1" x:Key="topBarBackgroundBrush"></SolidColorBrush>
+
+    <!--Navigation Link Button-->
+    <Style x:Key="LinkButton" TargetType="Button">
+        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="False"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="Button">
+                    <TextBlock FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}">
+                <ContentPresenter /></TextBlock>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+        <Setter Property="Foreground" Value="{StaticResource BlackBrush}" />
+        <Style.Triggers>
+            <Trigger Property="IsEnabled" Value="False">
+                <Setter Property="Opacity" Value="0.5"></Setter>
+            </Trigger>
+            <Trigger Property="IsMouseOver" Value="true">
+                <Setter Property="Foreground" Value="{StaticResource AccentColorBrush}" />
+            </Trigger>
+            <EventTrigger RoutedEvent="TouchUp">
+                <BeginStoryboard>
+                    <Storyboard>
+                        <ColorAnimation Storyboard.TargetProperty="Foreground.Color" Duration="0" To="{StaticResource BlackColor}"></ColorAnimation>
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+        </Style.Triggers>
+    </Style>
+    <!--Navigation Link Button-->
+
+
+    <!--Graph Label-->
+    <Style x:Key="graphLabel" TargetType="Label">
+        <Style.Setters>
+            <Setter Property="IsHitTestVisible" Value="False"></Setter>
+            <Setter Property="Margin" Value="-1 -1 0 0"></Setter>
+            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+            <Setter Property="VerticalAlignment" Value="Top"></Setter>
+            <Setter Property="Padding" Value="0"></Setter>
+            <Setter Property="ContentTemplate">
+                <Setter.Value>
+                    <DataTemplate>
+                        <Border Width="Auto" Padding="0 0 20 0" Height="25" BorderBrush="{StaticResource AccentColorBrush}" BorderThickness="1" CornerRadius="0 0 30 0" Background="{StaticResource graphLabelBackground}" >
+                            <TextBlock Margin="5 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{StaticResource TinyFontSize}" Text="{Binding}"></TextBlock>
+                        </Border>
+                    </DataTemplate>
+                </Setter.Value>
+            </Setter>
+        </Style.Setters>
+    </Style>
+    <!--Graph Label-->
+
+
+    <!--Graph Ticks Template-->
+    <DataTemplate x:Key="graphTicksTemplate">
+        <Ellipse Width="3" Height="3" Margin="0 0 0 0" Fill="{StaticResource AccentColorBrush}"></Ellipse>
+    </DataTemplate>
+    <!--Graph Ticks Template-->
+
+    <DataTemplate x:Key="graphTooltipTemplate">
+        <Border CornerRadius="5" BorderThickness="1" BorderBrush="White" Padding="8" MinWidth="50" Margin="20 0 20 0">
+            <Border.Background>
+                <SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
+            </Border.Background>
+            <TextBlock Foreground="White" FontSize="10" HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding StringFormat='0.000'}"></TextBlock>
+        </Border>
+    </DataTemplate>
+</ResourceDictionary>
\ No newline at end of file
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 f5da6fca4..276dd6c54 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
@@ -82,6 +82,10 @@
     <Compile Include="..\..\..\Versioning\GlobalVersionInfo.cs">
       <Link>GlobalVersionInfo.cs</Link>
     </Compile>
+    <Page Include="Resources\GraphEx.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\MainView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -113,6 +117,10 @@
     </None>
   </ItemGroup>
   <ItemGroup>
+    <ProjectReference Include="..\..\..\SideChains\RealTimeGraphEx\RealTimeGraphEx.csproj">
+      <Project>{b9ae25d6-be35-492f-9079-21a7f3e6f7cc}</Project>
+      <Name>RealTimeGraphEx</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\..\Tango.Core\Tango.Core.csproj">
       <Project>{a34ee0f0-649d-41c8-8489-b6f1cc6924ee}</Project>
       <Name>Tango.Core</Name>
@@ -125,6 +133,10 @@
       <Project>{38197109-8610-4d3f-92b9-16d48df94d7c}</Project>
       <Name>Tango.DAL.Remote</Name>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\Tango.DragAndDrop\Tango.DragAndDrop.csproj">
+      <Project>{b112d89a-a106-41ae-a0c1-4abc84c477f5}</Project>
+      <Name>Tango.DragAndDrop</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\..\Tango.SharedUI\Tango.SharedUI.csproj">
       <Project>{8491d07b-c1f6-4b62-a412-41b9fd2d6538}</Project>
       <Name>Tango.SharedUI</Name>
@@ -161,5 +173,17 @@
   <ItemGroup>
     <Resource Include="Images\machine-trans.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\graphs.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\line_graph.png" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\no-signal.jpg" />
+  </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\camera.png" />
+  </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/ViewModels/MainViewVM.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/MainViewVM.cs
index 2013de3c8..590474f9d 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/MainViewVM.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/ViewModels/MainViewVM.cs
@@ -7,22 +7,37 @@ using System.Text;
 using System.Threading.Tasks;
 using Tango.Core.Commands;
 using Tango.DAL.Observables;
+using Tango.MachineStudio.Common.Controls;
 using Tango.MachineStudio.Common.Notifications;
 using Tango.MachineStudio.Common.StudioApplication;
 using Tango.SharedUI;
 
 namespace Tango.MachineStudio.Developer.ViewModels
 {
+    /// <summary>
+    /// Represents the developer module main view, view model.
+    /// </summary>
+    /// <seealso cref="Tango.SharedUI.ViewModel" />
     public class MainViewVM : ViewModel
     {
         private INotificationProvider _notification;
 
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the application manager.
+        /// </summary>
         public IStudioApplicationManager ApplicationManager { get; set; }
 
+        /// <summary>
+        /// Gets or sets observable entites database the adapter.
+        /// </summary>
         public ObservablesEntitiesAdapter Adapter { get; set; }
 
         private Machine _selectedMachine;
-
+        /// <summary>
+        /// Gets or sets the selected machine.
+        /// </summary>
         public Machine SelectedMachine
         {
             get { return _selectedMachine; }
@@ -30,7 +45,9 @@ namespace Tango.MachineStudio.Developer.ViewModels
         }
 
         private List<LiquidTypesRml> _liquidTypesRmls;
-
+        /// <summary>
+        /// Gets or sets the liquid types RMLS.
+        /// </summary>
         public List<LiquidTypesRml> LiquidTypesRmls
         {
             get { return _liquidTypesRmls; }
@@ -38,48 +55,49 @@ namespace Tango.MachineStudio.Developer.ViewModels
         }
 
         private ProcessParametersTablesGroup _rmlProcessParametersTablesGroup;
-
+        /// <summary>
+        /// Gets or sets the RML process parameters table group (cloned).
+        /// </summary>
         public ProcessParametersTablesGroup RmlProcessParametersTableGroup
         {
             get { return _rmlProcessParametersTablesGroup; }
             set { _rmlProcessParametersTablesGroup = value; RaisePropertyChangedAuto(); }
         }
 
-        private ProcessParametersTablesGroup _selectedGroupHistory;
-
-        public ProcessParametersTablesGroup SelectedGroupHistory
-        {
-            get { return _selectedGroupHistory; }
-            set { _selectedGroupHistory = value; RaisePropertyChangedAuto(); OnSelectedGroupHistoryChanged(); }
-        }
-
-        private void OnSelectedGroupHistoryChanged()
-        {
-            if (SelectedGroupHistory != null)
-            {
-                RmlProcessParametersTableGroup = SelectedGroupHistory.CloneGroup();
-            }
-        }
-
         private ObservableCollection<ProcessParametersTablesGroup> _groupsHistory;
-
+        /// <summary>
+        /// Gets or sets the RML process parameters groups history.
+        /// </summary>
         public ObservableCollection<ProcessParametersTablesGroup> GroupsHistory
         {
             get { return _groupsHistory; }
             set { _groupsHistory = value; RaisePropertyChangedAuto(); }
         }
 
-        private Job _selectedJob;
+        private ProcessParametersTablesGroup _selectedGroupHistory;
+        /// <summary>
+        /// Gets or sets the selected process parameters tables group history.
+        /// </summary>
+        public ProcessParametersTablesGroup SelectedGroupHistory
+        {
+            get { return _selectedGroupHistory; }
+            set { _selectedGroupHistory = value; RaisePropertyChangedAuto(); OnSelectedGroupHistoryChanged(); }
+        }
 
+        private Job _selectedJob;
+        /// <summary>
+        /// Gets or sets the selected machine job.
+        /// </summary>
         public Job SelectedJob
         {
             get { return _selectedJob; }
             set { _selectedJob = value; RaisePropertyChangedAuto(); }
         }
 
-
         private Rml _selectedRML;
-
+        /// <summary>
+        /// Gets or sets the selected RML.
+        /// </summary>
         public Rml SelectedRML
         {
             get { return _selectedRML; }
@@ -87,43 +105,131 @@ namespace Tango.MachineStudio.Developer.ViewModels
         }
 
         private bool _isSideBarOpened;
-
+        /// <summary>
+        /// Gets or sets a value indicating whether the configuration panels are opened.
+        /// </summary>
         public bool IsSideBarOpened
         {
             get { return _isSideBarOpened; }
             set { _isSideBarOpened = value; RaisePropertyChangedAuto(); }
         }
 
+        private ObservableCollection<Sensor> _availableSensors;
+        /// <summary>
+        /// Gets or sets the available sensors.
+        /// </summary>
+        public ObservableCollection<Sensor> AvailableSensors
+        {
+            get { return _availableSensors; }
+            set { _availableSensors = value; RaisePropertyChangedAuto(); }
+        }
 
+        private ObservableCollection<RealTimeGraphControl> _graphs;
+        /// <summary>
+        /// Gets or sets the collection of displayed graph controls.
+        /// </summary>
+        public ObservableCollection<RealTimeGraphControl> Graphs
+        {
+            get { return _graphs; }
+            set { _graphs = value; RaisePropertyChangedAuto(); }
+        }
+
+        #endregion
+
+        #region Commands
+
+        /// <summary>
+        /// Gets or sets the edit machine command.
+        /// </summary>
         public RelayCommand EditMachineCommand { get; set; }
 
+        /// <summary>
+        /// Gets or sets the edit RML command.
+        /// </summary>
         public RelayCommand EditRMLCommand { get; set; }
 
+        /// <summary>
+        /// Gets or sets the toggle side bar command.
+        /// </summary>
         public RelayCommand ToggleSideBarCommand { get; set; }
 
+        /// <summary>
+        /// Gets or sets the save process parameters command.
+        /// </summary>
         public RelayCommand SaveProcessParametersCommand { get; set; }
 
+        /// <summary>
+        /// Gets or sets the save liquid factors command.
+        /// </summary>
         public RelayCommand SaveLiquidFactorsCommand { get; set; }
 
+        #endregion
+
+        #region Constructors
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="MainViewVM"/> class.
+        /// </summary>
         public MainViewVM()
         {
             IsSideBarOpened = true;
+
+            if (!this.DesignMode)
+            {
+                Adapter = ObservablesEntitiesAdapter.Instance;
+                AvailableSensors = Adapter.Sensors.ToObservableCollection();
+            }
+
+            Graphs = new ObservableCollection<RealTimeGraphControl>();
         }
 
+        /// <summary>
+        /// Initializes a new instance of the <see cref="MainViewVM"/> class.
+        /// </summary>
+        /// <param name="applicationManager">The application manager.</param>
+        /// <param name="notificationProvider">The notification provider.</param>
         [PreferredConstructor]
-        public MainViewVM(IStudioApplicationManager applicationManager, INotificationProvider notificationProvider)
+        public MainViewVM(IStudioApplicationManager applicationManager, INotificationProvider notificationProvider) : this()
         {
             _notification = notificationProvider;
-            Adapter = ObservablesEntitiesAdapter.Instance;
             EditMachineCommand = new RelayCommand(EditMachine, (x) => SelectedMachine != null);
             ApplicationManager = applicationManager;
             EditRMLCommand = new RelayCommand(EditRML, (x) => SelectedRML != null);
             ToggleSideBarCommand = new RelayCommand(() => IsSideBarOpened = !IsSideBarOpened);
             SaveProcessParametersCommand = new RelayCommand(SaveProcessParameters);
             SaveLiquidFactorsCommand = new RelayCommand(SaveLiquidFactors);
-            IsSideBarOpened = true;
         }
 
+        #endregion
+
+        #region Virtual Methods
+
+        /// <summary>
+        /// Called when the selected group history has been changed
+        /// </summary>
+        protected virtual void OnSelectedGroupHistoryChanged()
+        {
+            if (SelectedGroupHistory != null)
+            {
+                RmlProcessParametersTableGroup = SelectedGroupHistory.CloneGroup();
+            }
+        }
+
+        /// <summary>
+        /// Called when the machine has been changed
+        /// </summary>
+        protected virtual void OnMachineChanged()
+        {
+            InvalidateLiquidFactorsAndProcessTables();
+        }
+
+        #endregion
+
+        #region Private Methods
+
+        /// <summary>
+        /// Saves the liquid factors.
+        /// </summary>
         private async void SaveLiquidFactors()
         {
             if (SelectedRML != null)
@@ -141,21 +247,25 @@ namespace Tango.MachineStudio.Developer.ViewModels
             }
         }
 
+        /// <summary>
+        /// Navigates to the DB Module in order to edit the selected RML.
+        /// </summary>
         private void EditRML()
         {
             ApplicationManager.RequestModule("Data Base", SelectedRML);
         }
 
+        /// <summary>
+        /// Navigates to the Machine Designer Module in order to edit the selected machine.
+        /// </summary>
         private void EditMachine()
         {
             ApplicationManager.RequestModule("Machine Designer", SelectedMachine);
         }
 
-        private void OnMachineChanged()
-        {
-            InvalidateLiquidFactorsAndProcessTables();
-        }
-
+        /// <summary>
+        /// Saves the process parameters group.
+        /// </summary>
         private async void SaveProcessParameters()
         {
             var response = _notification.ShowTextInput("Enter Group Name", "Group Name");
@@ -196,6 +306,9 @@ namespace Tango.MachineStudio.Developer.ViewModels
             }
         }
 
+        /// <summary>
+        /// Invalidates the liquid factors and process parameters tables.
+        /// </summary>
         private void InvalidateLiquidFactorsAndProcessTables()
         {
             if (SelectedRML != null && SelectedMachine != null)
@@ -212,5 +325,49 @@ namespace Tango.MachineStudio.Developer.ViewModels
                 GroupsHistory = SelectedRML.ProcessParametersTablesGroups.OrderByDescending(x => x.SaveDate).OrderBy(x => !x.Active).ToObservableCollection();
             }
         }
+
+        #endregion
+
+        #region Public Events
+
+        /// <summary>
+        /// Add sensor graph from available sensors to displayed graphs.
+        /// </summary>
+        /// <param name="sensor">The sensor.</param>
+        public void OnDropAvailableSensor(Sensor sensor)
+        {
+            if (Graphs.Count < 8)
+            {
+                RealTimeGraphControl graphControl = new RealTimeGraphControl();
+                graphControl.Tag = sensor;
+                graphControl.SensorName = sensor.Description;
+                graphControl.SensorUnits = sensor.Units;
+                graphControl.Graph.Minimum = sensor.Min;
+                graphControl.Graph.Maximum = sensor.Max;
+                graphControl.Graph.MaxPoints = Common.Helpers.GraphsHelper.GetMaxPoints(sensor.PointsPerFrame);
+                graphControl.GraphRemoveButtonPressed += (sender, __) =>
+                {
+                    RemoveGraph(sender as RealTimeGraphControl);
+                };
+                Graphs.Add(graphControl);
+                AvailableSensors.Remove(sensor);
+            }
+            else
+            {
+                _notification.ShowInfo("The maximum number of real-time graphs is eight. Please remove a graph to add another.");
+            }
+        }
+
+        /// <summary>
+        /// Removes the graph.
+        /// </summary>
+        /// <param name="graph">The graph.</param>
+        public void RemoveGraph(RealTimeGraphControl graph)
+        {
+            Graphs.Remove(graph);
+            AvailableSensors.Insert(0, graph.Tag as Sensor);
+        }
+
+        #endregion
     }
 }
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 7d98fe2d7..40babfc74 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
@@ -5,6 +5,7 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
              xmlns:global="clr-namespace:Tango.MachineStudio.Developer"
+             xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop"
              xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
              xmlns:db="clr-namespace:Tango.MachineStudio.DB.Views.DBViews;assembly=Tango.MachineStudio.DB"
              xmlns:commonControls="clr-namespace:Tango.MachineStudio.Common.Controls;assembly=Tango.MachineStudio.Common"
@@ -31,6 +32,51 @@
         <SolidColorBrush x:Key="SideBarBackground" Color="#F9F9F9">
 
         </SolidColorBrush>
+
+        <Style x:Key="droppableGrid" TargetType="Grid">
+            <Setter Property="RenderTransform">
+                <Setter.Value>
+                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
+            <Setter Property="Background" Value="Transparent"></Setter>
+            <Setter Property="dragAndDrop:DragAndDropService.Droppable" Value="True"></Setter>
+            <Setter Property="dragAndDrop:DragAndDropService.DraggingSurface" Value="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}"></Setter>
+            <Style.Triggers>
+                <Trigger Property="dragAndDrop:DragAndDropService.IsDraggableOver" Value="True">
+                    <Setter Property="Opacity" Value="0.5"></Setter>
+                    <Trigger.EnterActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation To="0.95" Duration="00:00:0.2" Storyboard.TargetProperty="RenderTransform.ScaleX"></DoubleAnimation>
+                                <DoubleAnimation To="0.95" Duration="00:00:0.2" Storyboard.TargetProperty="RenderTransform.ScaleY"></DoubleAnimation>
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </Trigger.EnterActions>
+                    <Trigger.ExitActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation To="1" Duration="00:00:0.2" Storyboard.TargetProperty="RenderTransform.ScaleX"></DoubleAnimation>
+                                <DoubleAnimation To="1" Duration="00:00:0.2" Storyboard.TargetProperty="RenderTransform.ScaleY"></DoubleAnimation>
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </Trigger.ExitActions>
+                </Trigger>
+            </Style.Triggers>
+        </Style>
+
+        <Style x:Key="draggableGrid" TargetType="Grid">
+            <Setter Property="RenderTransform">
+                <Setter.Value>
+                    <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
+                </Setter.Value>
+            </Setter>
+            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"></Setter>
+            <Setter Property="Background" Value="Transparent"></Setter>
+            <Setter Property="dragAndDrop:DragAndDropService.Draggable" Value="True"></Setter>
+            <Setter Property="dragAndDrop:DragAndDropService.DraggingSurface" Value="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}"></Setter>
+        </Style>
     </UserControl.Resources>
 
     <Grid>
@@ -291,7 +337,7 @@
                     <Grid>
                         <Grid.RowDefinitions>
                             <RowDefinition Height="234*"/>
-                            <RowDefinition Height="131*"/>
+                            <RowDefinition Height="161*"/>
                         </Grid.RowDefinitions>
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="173*"/>
@@ -331,9 +377,9 @@
                             </DockPanel>
                         </Grid>
 
-                        <Grid Grid.Column="1" Margin="10">
+                        <Grid Grid.Column="1" Margin="10 10 10 0">
                             <Grid.ColumnDefinitions>
-                                <ColumnDefinition Width="1*"/>
+                                <ColumnDefinition/>
                                 <ColumnDefinition Width="Auto"/>
                             </Grid.ColumnDefinitions>
                             <Grid>
@@ -402,7 +448,7 @@
                                 </StackPanel>
                             </Grid>
 
-                            <Grid Grid.Column="1" Background="{StaticResource SideBarBackground}" Margin="10 0 0 0" Width="400">
+                            <Grid Grid.Column="1" Margin="10 0 0 0" Width="340">
                                 <Grid.Style>
                                     <Style TargetType="Grid">
                                         <Setter Property="LayoutTransform">
@@ -431,14 +477,133 @@
                                     </Style>
                                 </Grid.Style>
 
-                                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">CAMERAS</TextBlock>
+                                <Grid Margin="5 0 0 0">
+                                    <DockPanel>
+                                        <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
+                                            <Image Source="../Images/camera.png" Width="42"></Image>
+                                            <TextBlock VerticalAlignment="Center" Margin="10 0 0 0" Foreground="DimGray" FontSize="16" FontWeight="SemiBold">USB CAMERAS</TextBlock>
+                                        </StackPanel>
+                                        <UniformGrid Rows="3">
+                                            <Border BorderBrush="Gray" BorderThickness="1" Margin="0 0 0 5" CornerRadius="5">
+                                                <Border.Background>
+                                                    <ImageBrush ImageSource="../Images/no-signal.jpg" Stretch="Fill"></ImageBrush>
+                                                </Border.Background>
+
+                                                <Grid>
+                                                    <Label Style="{StaticResource graphLabel}">
+                                                        <TextBlock VerticalAlignment="Center" FontSize="10" Margin="0 0 30 0">CAMERA 1</TextBlock>
+                                                    </Label>
+                                                </Grid>
+                                            </Border>
+                                            <Border BorderBrush="Gray" BorderThickness="1" Margin="0 0 0 5" CornerRadius="5">
+                                                <Border.Background>
+                                                    <ImageBrush ImageSource="../Images/no-signal.jpg" Stretch="Fill"></ImageBrush>
+                                                </Border.Background>
+
+                                                <Grid>
+                                                    <Label Style="{StaticResource graphLabel}">
+                                                        <TextBlock VerticalAlignment="Center" FontSize="10" Margin="0 0 30 0">CAMERA 2</TextBlock>
+                                                    </Label>
+                                                </Grid>
+                                            </Border>
+                                            <Border BorderBrush="Gray" BorderThickness="1" Margin="0 0 0 5" CornerRadius="5">
+                                                <Border.Background>
+                                                    <ImageBrush ImageSource="../Images/no-signal.jpg" Stretch="Fill"></ImageBrush>
+                                                </Border.Background>
+
+                                                <Grid>
+                                                    <Label Style="{StaticResource graphLabel}">
+                                                        <TextBlock VerticalAlignment="Center" FontSize="10" Margin="0 0 30 0">CAMERA 3</TextBlock>
+                                                    </Label>
+                                                </Grid>
+                                            </Border>
+                                        </UniformGrid>
+                                    </DockPanel>
+                                </Grid>
+
                             </Grid>
                         </Grid>
 
-                  
+                        <Grid Grid.Row="1" Grid.ColumnSpan="2" Background="{StaticResource SideBarBackground}">
+                            <Grid Margin="10 70 10 10">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="1*"/>
+                                    <ColumnDefinition Width="350"/>
+                                </Grid.ColumnDefinitions>
+
+                                <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 GRAPHS</TextBlock>
+                                        </StackPanel>
+                                        <ScrollViewer Margin="0 5 0 0" VerticalScrollBarVisibility="Auto">
+                                            <ItemsControl Margin="0 0 5 0" ItemsSource="{Binding AvailableSensors}">
+                                                <ItemsControl.ItemsPanel>
+                                                    <ItemsPanelTemplate>
+                                                        <UniformGrid Columns="2" IsItemsHost="True"></UniformGrid>
+                                                    </ItemsPanelTemplate>
+                                                </ItemsControl.ItemsPanel>
+                                                <ItemsControl.ItemTemplate>
+                                                    <DataTemplate DataType="{x:Type observables:Sensor}">
+                                                        <Border dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}" Margin="5" CornerRadius="3" Height="120" BorderThickness="1" BorderBrush="Silver" ClipToBounds="True">
+                                                            <Border.Background>
+                                                                <ImageBrush ImageSource="../Images/line_graph.png" Stretch="Fill"></ImageBrush>
+                                                            </Border.Background>
+                                                            <Grid>
+                                                                <Label HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource graphLabel}">
+                                                                    <TextBlock Foreground="DimGray" VerticalAlignment="Center" Text="{Binding Description}"></TextBlock>
+                                                                </Label>
+                                                            </Grid>
+                                                        </Border>
+                                                    </DataTemplate>
+                                                </ItemsControl.ItemTemplate>
+                                            </ItemsControl>
+                                        </ScrollViewer>
+                                    </DockPanel>
+                                </Grid>
+
+                                <Grid>
+                                    <Grid Margin="0 0 10 0" Style="{StaticResource droppableGrid}" dragAndDrop:DragAndDropService.Drop="OnDropAvailableSensor">
+                                        <Border>
+                                            <ItemsControl ItemsSource="{Binding Graphs}">
+                                                <ItemsControl.ItemsPanel>
+                                                    <ItemsPanelTemplate>
+                                                        <UniformGrid Columns="4" Rows="2" IsItemsHost="True"></UniformGrid>
+                                                    </ItemsPanelTemplate>
+                                                </ItemsControl.ItemsPanel>
+                                            </ItemsControl>
+                                        </Border>
+                                        <Grid>
+                                            <Grid.Style>
+                                                <Style TargetType="Grid">
+                                                    <Setter Property="Visibility" Value="Collapsed"></Setter>
+                                                    <Style.Triggers>
+                                                        <DataTrigger Binding="{Binding Graphs.Count}" Value="0">
+                                                            <Setter Property="Visibility" Value="Visible"></Setter>
+                                                        </DataTrigger>
+                                                    </Style.Triggers>
+                                                </Style>
+                                            </Grid.Style>
+                                            <TextBlock Foreground="Silver" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="30">DRAG &amp; DROP GRAPHS</TextBlock>
+                                        </Grid>
+                                    </Grid>
+                                </Grid>
+                            </Grid>
 
-                        <Grid Grid.Row="1" Grid.ColumnSpan="2">
+                            <Border VerticalAlignment="Top" Height="50" CornerRadius="0 0 50 50">
+                                <Border.Effect>
+                                    <DropShadowEffect BlurRadius="30" ShadowDepth="20" Opacity="0.2" />
+                                </Border.Effect>
+                                <Border.Background>
+                                    <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
+                                        <GradientStop Color="White" Offset="0" />
+                                        <GradientStop Color="#FFE6E6E6" Offset="1"/>
 
+                                    </LinearGradientBrush>
+                                </Border.Background>
+                            </Border>
+                            <dragAndDrop:DraggingSurface x:Name="draggingSurface" />
                         </Grid>
                     </Grid>
                 </Grid>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml.cs
index 6ebfd9832..9eeff4975 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml.cs
@@ -12,6 +12,9 @@ using System.Windows.Media;
 using System.Windows.Media.Imaging;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
+using Tango.DAL.Observables;
+using Tango.DragAndDrop;
+using Tango.MachineStudio.Developer.ViewModels;
 
 namespace Tango.MachineStudio.Developer.Views
 {
@@ -20,9 +23,33 @@ namespace Tango.MachineStudio.Developer.Views
     /// </summary>
     public partial class MainView : UserControl
     {
+        private MainViewVM _vm;
+
+        public DraggingSurface DraggingSurface
+        {
+            get { return (DraggingSurface)GetValue(DraggingSurfaceProperty); }
+            set { SetValue(DraggingSurfaceProperty, value); }
+        }
+        public static readonly DependencyProperty DraggingSurfaceProperty =
+            DependencyProperty.Register("DraggingSurface", typeof(DraggingSurface), typeof(MainView), new PropertyMetadata(null));
+
         public MainView()
         {
             InitializeComponent();
+
+            DraggingSurface = draggingSurface;
+            this.Loaded += (x, y) =>
+            {
+                _vm = DataContext as MainViewVM;
+            };
+        }
+
+        private void OnDropAvailableSensor(object sender, DropEventArgs e)
+        {
+            if (e.Draggable.DataContext is Sensor)
+            {
+                _vm.OnDropAvailableSensor(e.Draggable.DataContext as Sensor);
+            }
         }
     }
 }
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Controls/RealTimeGraphControl.xaml b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Controls/RealTimeGraphControl.xaml
new file mode 100644
index 000000000..687bc6030
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Controls/RealTimeGraphControl.xaml
@@ -0,0 +1,90 @@
+<UserControl x:Class="Tango.MachineStudio.Common.Controls.RealTimeGraphControl"
+             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:graphEx="clr-namespace:RealTimeGraphEx.FastGraphs;assembly=RealTimeGraphEx"
+             xmlns:components="clr-namespace:RealTimeGraphEx.Components;assembly=RealTimeGraphEx"
+             xmlns:converters="clr-namespace:Tango.MachineStudio.Common.Converters"
+             xmlns:local="clr-namespace:Tango.MachineStudio.Common.Controls"
+             mc:Ignorable="d" 
+             d:DesignHeight="150" d:DesignWidth="300">
+
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <!--RealTimeGraphEx-->
+                <ResourceDictionary Source="pack://application:,,,/RealTimeGraphEx;component/Resources/Resources.xaml"></ResourceDictionary>
+                <ResourceDictionary Source="../Resources/MaterialDesign.xaml"></ResourceDictionary>
+
+                <ResourceDictionary>
+                    <Style TargetType="ContentControl" x:Key="graphContent">
+                        <Style.Setters>
+                            <Setter Property="ContentTemplate">
+                                <Setter.Value>
+                                    <DataTemplate>
+                                        <Grid MouseEnter="Graph_MouseEnter" MouseLeave="Graph_MouseLeave" ClipToBounds="True">
+                                            <ContentControl Content="{Binding}"></ContentControl>
+                                            <Grid Opacity="0.8" HorizontalAlignment="Stretch" VerticalAlignment="Top" ClipToBounds="True" Height="35" Margin="0 -35 0 0">
+                                                <StackPanel Orientation="Horizontal" Margin="5" HorizontalAlignment="Right" VerticalAlignment="Top">
+                                                    <Button Margin="0 0 5 0" Click="OnGraphFullScreen" ToolTip="Full Screen" Width="24" Height="24" BorderBrush="Transparent" Background="{StaticResource AccentColorBrush}" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" >
+                                                        <materialDesign:PackIcon Kind="Fullscreen" HorizontalAlignment="Right" Width="20" Height="20" Foreground="{StaticResource WhiteBrush}" />
+                                                    </Button>
+                                                    <Button Click="OnGraphRemove" ToolTip="Remove" Width="24" Height="24" BorderBrush="Transparent" Background="#FF7777" Style="{StaticResource MaterialDesignFloatingActionAccentButton}" >
+                                                        <materialDesign:PackIcon Kind="CloseCircle" HorizontalAlignment="Right" Width="20" Height="20" Foreground="{StaticResource WhiteBrush}" />
+                                                    </Button>
+                                                </StackPanel>
+                                            </Grid>
+                                        </Grid>
+                                    </DataTemplate>
+                                </Setter.Value>
+                            </Setter>
+                        </Style.Setters>
+                    </Style>
+                </ResourceDictionary>
+
+                <ResourceDictionary>
+                    <converters:SecondsToGraphPointsConverter x:Key="secondsToPoints"></converters:SecondsToGraphPointsConverter>
+                </ResourceDictionary>
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+
+    <Grid>
+        <!--Temperature-->
+        <ContentControl Style="{StaticResource graphContent}" Margin="0 0 5 5" MinHeight="5">
+            <Grid>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="40"/>
+                    <ColumnDefinition Width="438*"/>
+                </Grid.ColumnDefinitions>
+
+                <Border BorderBrush="{StaticResource AccentColorBrush}" BorderThickness="1 1 0 1">
+                    <StackPanel Orientation="Horizontal">
+                        <components:YAxisScroll Interval="6" Graph="{Binding ElementName=Graph}" Width="35" Foreground="{StaticResource MaterialDesignLightForeground}" VerticalOffset="-5" FontSize="8" StringFormat="#0.0"></components:YAxisScroll>
+                        <components:YAxisTicks SmallTickTemplate="{StaticResource graphTicksTemplate}" Width="5" SmallTicks="6" Foreground="{StaticResource MaterialDesignLightForeground}" BigTicks="10" Graph="{Binding ElementName=Graph}"></components:YAxisTicks>
+                    </StackPanel>
+                </Border>
+                <Border Grid.Column="1" BorderThickness="1" BorderBrush="{StaticResource borderBrush}" Background="{DynamicResource graphBackground}" Margin="5 0 0 0">
+                    <graphEx:RealTimeGraphExLineErase x:Name="Graph" x:FieldModifier="public" Antialiased="True" RefreshRate="30" MarkerColor="{StaticResource graphsMarkerColor}" FillGraph="False" Stroke="DodgerBlue">
+                        <graphEx:RealTimeGraphExLineErase.Components>
+                            <components:MouseValueToolTip ToolTipTemplate="{StaticResource graphTooltipTemplate}" />
+                            <components:GridLines Rows="4" Columns="6" GridBrush="{DynamicResource graphGridLinesBrush}"></components:GridLines>
+                        </graphEx:RealTimeGraphExLineErase.Components>
+                        <graphEx:RealTimeGraphExLineErase.InnerContent>
+                            <Grid>
+                                <Label Style="{StaticResource graphLabel}">
+                                    <StackPanel Orientation="Horizontal">
+                                        <TextBlock VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl,AncestorLevel=2},Path=SensorName,FallbackValue='Dispenser Motor'}"></TextBlock>
+                                        <TextBlock Foreground="Gray" Margin="10 0 0 0" FontFamily="Sylfaen Regular" VerticalAlignment="Center" Text="{Binding RelativeSource={RelativeSource AncestorType=UserControl,AncestorLevel=2},Path=SensorUnits,FallbackValue='(hz)'}"></TextBlock>
+                                    </StackPanel>
+                                </Label>
+                            </Grid>
+                        </graphEx:RealTimeGraphExLineErase.InnerContent>
+                    </graphEx:RealTimeGraphExLineErase>
+                </Border>
+            </Grid>
+        </ContentControl>
+    </Grid>
+</UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Controls/RealTimeGraphControl.xaml.cs b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Controls/RealTimeGraphControl.xaml.cs
new file mode 100644
index 000000000..6396ab91a
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Controls/RealTimeGraphControl.xaml.cs
@@ -0,0 +1,94 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel;
+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.Animation;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Tango.MachineStudio.Common.Controls
+{
+    /// <summary>
+    /// Interaction logic for RealTimeGraphControl.xaml
+    /// </summary>
+    public partial class RealTimeGraphControl : UserControl
+    {
+        #region Properties
+
+        /// <summary>
+        /// Gets or sets the name of the sensor.
+        /// </summary>
+        public String SensorName
+        {
+            get { return (String)GetValue(SensorNameProperty); }
+            set { SetValue(SensorNameProperty, value); }
+        }
+        public static readonly DependencyProperty SensorNameProperty =
+            DependencyProperty.Register("SensorName", typeof(String), typeof(RealTimeGraphControl), new PropertyMetadata(null));
+
+        /// <summary>
+        /// Gets or sets the sensor units.
+        /// </summary>
+        public String SensorUnits
+        {
+            get { return (String)GetValue(SensorUnitsProperty); }
+            set { SetValue(SensorUnitsProperty, value); }
+        }
+        public static readonly DependencyProperty SensorUnitsProperty =
+            DependencyProperty.Register("SensorUnits", typeof(String), typeof(RealTimeGraphControl), new PropertyMetadata(null));
+
+
+        #endregion
+
+        #region Events
+
+        public event EventHandler GraphRemoveButtonPressed;
+        public event EventHandler GraphFullScreenButtonPressed;
+
+        #endregion
+
+        public RealTimeGraphControl()
+        {
+            InitializeComponent();
+        }
+
+        private void OnGraphFullScreen(object sender, RoutedEventArgs e)
+        {
+            GraphFullScreenButtonPressed?.Invoke(this, new EventArgs());
+        }
+
+        private void Graph_MouseEnter(object sender, MouseEventArgs e)
+        {
+            Grid mainGrid = sender as Grid;
+            var headerGrid = mainGrid.Children.OfType<Grid>().ToList().First();
+            ThicknessAnimation ani = new ThicknessAnimation();
+            ani.To = new Thickness(0, 0, 0, 0);
+            ani.Duration = TimeSpan.FromSeconds(0.2);
+            headerGrid.BeginAnimation(Grid.MarginProperty, ani);
+        }
+
+        private void Graph_MouseLeave(object sender, MouseEventArgs e)
+        {
+            Grid mainGrid = sender as Grid;
+            var headerGrid = mainGrid.Children.OfType<Grid>().ToList().First();
+            ThicknessAnimation ani = new ThicknessAnimation();
+            ani.To = new Thickness(0, -35, 0, 0);
+            ani.Duration = TimeSpan.FromSeconds(0.2);
+            headerGrid.BeginAnimation(Grid.MarginProperty, ani);
+        }
+
+        private void OnGraphRemove(object sender, RoutedEventArgs e)
+        {
+            GraphRemoveButtonPressed?.Invoke(this, new EventArgs());
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Converters/SecondsToGraphPointsConverter.cs b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Converters/SecondsToGraphPointsConverter.cs
new file mode 100644
index 000000000..17df7b9d5
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Converters/SecondsToGraphPointsConverter.cs
@@ -0,0 +1,27 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows.Data;
+
+namespace Tango.MachineStudio.Common.Converters
+{
+    /// <summary>
+    /// Converts number of seconds to graph FIFO capacity.
+    /// </summary>
+    /// <seealso cref="System.Windows.Data.IValueConverter" />
+    public class SecondsToGraphPointsConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            double arrLength = double.Parse(parameter.ToString());
+            return Helpers.GraphsHelper.GetMaxPoints(arrLength);
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            return value;
+        }
+    }
+}
\ No newline at end of file
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Helpers/GraphsHelper.cs b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Helpers/GraphsHelper.cs
new file mode 100644
index 000000000..53e832eb5
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Helpers/GraphsHelper.cs
@@ -0,0 +1,34 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using Tango.Settings;
+
+namespace Tango.MachineStudio.Common.Helpers
+{
+    /// <summary>
+    /// Contains RealTimeGraphEx helper methods.
+    /// </summary>
+    public static class GraphsHelper
+    {
+        /// <summary>
+        /// Gets the maximum points graph points by correlating between seconds duration from settings and expected graph points per frame.
+        /// </summary>
+        /// <param name="pointsPerFrame">Length of graph points per frame.</param>
+        /// <returns></returns>
+        public static int GetMaxPoints(double pointsPerFrame)
+        {
+            try
+            {
+                double seconds = SettingsManager.Default.MachineStudio.TechnicianModule.GraphsDuration;
+                double pullRate = SettingsManager.Default.MachineStudio.TechnicianModule.GraphsPullingInterval;
+                return (int)(((pullRate * pointsPerFrame * 10 * seconds) * (10 / pullRate)) * 0.65);
+            }
+            catch (Exception)
+            {
+                return 300;
+            }
+        }
+    }
+}
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Resources/MaterialDesign.xaml b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Resources/MaterialDesign.xaml
index 58bb9ef34..cc18c31c5 100644
--- a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Resources/MaterialDesign.xaml
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Resources/MaterialDesign.xaml
@@ -2,6 +2,7 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                      xmlns:converters="clr-namespace:MaterialDesignThemes.Wpf.Converters;assembly=MaterialDesignThemes.Wpf"
                     xmlns:editors="clr-namespace:Tango.AutoComplete.Editors;assembly=Tango.AutoComplete"
+                     xmlns:sys="clr-namespace:System;assembly=mscorlib"
                     xmlns:local="clr-namespace:Tango.MachineStudio.Common.Resources">
     <ResourceDictionary.MergedDictionaries>
         <!-- MahApps.Metro resource dictionaries. Make sure that all file names are Case Sensitive! -->
@@ -172,6 +173,102 @@
                     </Setter.Value>
                 </Setter>
             </Style>
+
+            
+            <!--Extensions-->
+
+            <FontFamily x:Key="FontName">Segoe UI</FontFamily>
+            <FontFamily x:Key="NotesFont">Lucida Console</FontFamily>
+
+            <sys:Double x:Key="ExtraExtraLargeFontSize">28</sys:Double>
+            <sys:Double x:Key="ExtraLargeFontSize">26</sys:Double>
+            <sys:Double x:Key="LargeFontSize">20</sys:Double>
+            <sys:Double x:Key="MediumFontSize">16</sys:Double>
+            <sys:Double x:Key="SmallFontSize">14</sys:Double>
+            <sys:Double x:Key="MiniFontSize">12</sys:Double>
+            <sys:Double x:Key="TinyFontSize">9</sys:Double>
+
+            <!--Colors-->
+            <Color x:Key="borderColor">Silver</Color>
+            <Color x:Key="graphGridLinesColor">#FFE9E9E9</Color>
+            <Color x:Key="graphsMarkerColor">Gray</Color>
+            <Color x:Key="materialColor">#03A9F4</Color>
+
+            <!--Brushes-->
+            <SolidColorBrush x:Key="borderBrush" Color="{StaticResource borderColor}"></SolidColorBrush>
+            <SolidColorBrush x:Key="graphGridLinesBrush" Color="{StaticResource graphGridLinesColor}"></SolidColorBrush>
+            <SolidColorBrush x:Key="BlackBrush" Color="#545454"></SolidColorBrush>
+
+            <SolidColorBrush x:Key="graphGridLinesLightBrush" Color="{StaticResource graphGridLinesColor}"></SolidColorBrush>
+            <SolidColorBrush x:Key="graphGridLinesDarkBrush" Color="#FF2E2E2E"></SolidColorBrush>
+
+            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphBackgroundLight">
+                <GradientStop Color="White"/>
+                <GradientStop Color="#FFE9E9E9" Offset="1"/>
+            </LinearGradientBrush>
+
+            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphBackgroundDark">
+                <GradientStop Color="Black"/>
+                <GradientStop Color="#FF333333" Offset="1"/>
+            </LinearGradientBrush>
+
+            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphBackground">
+                <GradientStop Color="White"/>
+                <GradientStop Color="#FFE9E9E9" Offset="1"/>
+            </LinearGradientBrush>
+
+            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphLabelBackground" Opacity="0.7">
+                <GradientStop Color="White"/>
+                <GradientStop Color="#FFD9D9D9" Offset="1"/>
+            </LinearGradientBrush>
+
+            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"  x:Key="graphLegendBackground" Opacity="0.7">
+                <GradientStop Color="#FFE9E9E9"/>
+                <GradientStop Color="#FFBDBDBD" Offset="1"/>
+            </LinearGradientBrush>
+
+            <SolidColorBrush Color="#FFF1F1F1" x:Key="topBarBackgroundBrush"></SolidColorBrush>
+            <!--Brushes-->
+
+            <!--Graph Label-->
+            <Style x:Key="graphLabel" TargetType="Label">
+                <Style.Setters>
+                    <Setter Property="IsHitTestVisible" Value="False"></Setter>
+                    <Setter Property="Margin" Value="-1 -1 0 0"></Setter>
+                    <Setter Property="HorizontalAlignment" Value="Left"></Setter>
+                    <Setter Property="VerticalAlignment" Value="Top"></Setter>
+                    <Setter Property="Padding" Value="0"></Setter>
+                    <Setter Property="ContentTemplate">
+                        <Setter.Value>
+                            <DataTemplate>
+                                <Border Width="Auto" Padding="0 0 20 0" Height="25" BorderBrush="{StaticResource AccentColorBrush}" BorderThickness="1" CornerRadius="0 0 30 0" Background="{StaticResource graphLabelBackground}" >
+                                    <Label Margin="5 0 0 0" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="{StaticResource TinyFontSize}" Content="{Binding}"></Label>
+                                </Border>
+                            </DataTemplate>
+                        </Setter.Value>
+                    </Setter>
+                </Style.Setters>
+            </Style>
+            <!--Graph Label-->
+
+
+            <!--Graph Ticks Template-->
+            <DataTemplate x:Key="graphTicksTemplate">
+                <Ellipse Width="3" Height="3" Margin="0 0 0 0" Fill="{StaticResource AccentColorBrush}"></Ellipse>
+            </DataTemplate>
+            <!--Graph Ticks Template-->
+
+            <DataTemplate x:Key="graphTooltipTemplate">
+                <Border CornerRadius="5" BorderThickness="1" BorderBrush="White" Padding="8" MinWidth="50" Margin="20 0 20 0">
+                    <Border.Background>
+                        <SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
+                    </Border.Background>
+                    <TextBlock Foreground="White" FontSize="10" HorizontalAlignment="Center" TextAlignment="Center" Text="{Binding StringFormat='0.000'}"></TextBlock>
+                </Border>
+            </DataTemplate>
+
+            <!--Extensions-->
+
         </ResourceDictionary>
 
     </ResourceDictionary.MergedDictionaries>
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Tango.MachineStudio.Common.csproj b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Tango.MachineStudio.Common.csproj
index e16703cfa..b89ec2e09 100644
--- a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Tango.MachineStudio.Common.csproj
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.Common/Tango.MachineStudio.Common.csproj
@@ -71,7 +71,12 @@
     <Reference Include="PresentationFramework" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="Controls\RealTimeGraphControl.xaml.cs">
+      <DependentUpon>RealTimeGraphControl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="Controls\TableGrid.cs" />
+    <Compile Include="Converters\SecondsToGraphPointsConverter.cs" />
+    <Compile Include="Helpers\GraphsHelper.cs" />
     <Compile Include="Notifications\DialogViewVM.cs" />
     <Compile Include="StudioApplication\IModuleRequestListener.cs" />
     <Compile Include="StudioApplication\IStudioApplicationManager.cs" />
@@ -98,6 +103,10 @@
     <Compile Include="Navigation\INavigationManager.cs" />
     <Compile Include="Navigation\NavigationView.cs" />
     <Compile Include="Notifications\INotificationProvider.cs" />
+    <Page Include="Controls\RealTimeGraphControl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Resources\MaterialDesign.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -129,6 +138,10 @@
     </None>
   </ItemGroup>
   <ItemGroup>
+    <ProjectReference Include="..\..\SideChains\RealTimeGraphEx\RealTimeGraphEx.csproj">
+      <Project>{b9ae25d6-be35-492f-9079-21a7f3e6f7cc}</Project>
+      <Name>RealTimeGraphEx</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\SideChains\Tango.AutoComplete\Tango.AutoComplete.csproj">
       <Project>{bb2abb74-ba58-4812-83aa-ec8171f42df4}</Project>
       <Name>Tango.AutoComplete</Name>
@@ -149,6 +162,10 @@
       <Project>{4206ac58-3b57-4699-8835-90bf6db01a61}</Project>
       <Name>Tango.Integration</Name>
     </ProjectReference>
+    <ProjectReference Include="..\..\Tango.Settings\Tango.Settings.csproj">
+      <Project>{d8f1ad85-526a-4f50-b6dc-d437af63d8d8}</Project>
+      <Name>Tango.Settings</Name>
+    </ProjectReference>
     <ProjectReference Include="..\..\Tango.SharedUI\Tango.SharedUI.csproj">
       <Project>{8491d07b-c1f6-4b62-a412-41b9fd2d6538}</Project>
       <Name>Tango.SharedUI</Name>