Progress on Machine Designer.

18 files changed, 342 insertions, 135 deletions

diff --git a/Software/DB/Tango.mdf b/Software/DB/Tango.mdf
index 041bdac8b..7da2350e4 100644
--- a/Software/DB/Tango.mdf
+++ b/Software/DB/Tango.mdf
diff --git a/Software/DB/Tango_log.ldf b/Software/DB/Tango_log.ldf
index c64f7bf70..0bb6209b4 100644
--- a/Software/DB/Tango_log.ldf
+++ b/Software/DB/Tango_log.ldf
diff --git a/Software/Graphics/cartridge.png b/Software/Graphics/cartridge.png
new file mode 100644
index 000000000..e3a9116fa
--- /dev/null
+++ b/Software/Graphics/cartridge.png
diff --git a/Software/Graphics/injection.png b/Software/Graphics/injection.png
new file mode 100644
index 000000000..af1b3d575
--- /dev/null
+++ b/Software/Graphics/injection.png
diff --git a/Software/Graphics/liquid.png b/Software/Graphics/liquid.png
new file mode 100644
index 000000000..7c5a4bceb
--- /dev/null
+++ b/Software/Graphics/liquid.png
diff --git a/Software/Graphics/tank.png b/Software/Graphics/tank.png
new file mode 100644
index 000000000..59440e1e5
--- /dev/null
+++ b/Software/Graphics/tank.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/cartridge.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/cartridge.png
new file mode 100644
index 000000000..e3a9116fa
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/cartridge.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/injection.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/injection.png
new file mode 100644
index 000000000..af1b3d575
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/injection.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/liquid.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/liquid.png
new file mode 100644
index 000000000..7c5a4bceb
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/liquid.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/tank.png b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/tank.png
new file mode 100644
index 000000000..59440e1e5
--- /dev/null
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Images/tank.png
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Tango.MachineStudio.MachineDesigner.csproj b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Tango.MachineStudio.MachineDesigner.csproj
index 41157a0be..fbec9280e 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Tango.MachineStudio.MachineDesigner.csproj
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Tango.MachineStudio.MachineDesigner.csproj
@@ -127,6 +127,10 @@
       <Project>{0ecd6da8-7aa6-48d9-8b65-279d176ad9af}</Project>
       <Name>Tango.DAL.Observables</Name>
     </ProjectReference>
+    <ProjectReference Include="..\..\..\Tango.DAL.Remote\Tango.DAL.Remote.csproj">
+      <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>
@@ -173,5 +177,11 @@
   <ItemGroup>
     <Resource Include="Images\ti-tm4c129x.png" />
   </ItemGroup>
+  <ItemGroup>
+    <Resource Include="Images\cartridge.png" />
+    <Resource Include="Images\injection.png" />
+    <Resource Include="Images\liquid.png" />
+    <Resource Include="Images\tank.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.MachineDesigner/ViewModels/MainViewVM.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/ViewModels/MainViewVM.cs
index 120ae7972..dbba1962e 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/ViewModels/MainViewVM.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/ViewModels/MainViewVM.cs
@@ -3,13 +3,18 @@ using System.Collections.Generic;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using Tango.Core.Commands;
 using Tango.DAL.Observables;
+using Tango.MachineStudio.Common.Notifications;
 using Tango.SharedUI;
 
 namespace Tango.MachineStudio.MachineDesigner.ViewModels
 {
     public class MainViewVM : ViewModel
     {
+        private bool _isSaving;
+        private INotificationProvider _notification;
+
         private ObservablesEntitiesAdapter _adapter;
         /// <summary>
         /// Gets or sets the db adapter.
@@ -40,14 +45,74 @@ namespace Tango.MachineStudio.MachineDesigner.ViewModels
             set { _configuration = value; RaisePropertyChangedAuto(); }
         }
 
+        public RelayCommand SaveCommand { get; set; }
+
         /// <summary>
         /// Initializes a new instance of the <see cref="MainViewVM"/> class.
         /// </summary>
-        public MainViewVM()
+        public MainViewVM(INotificationProvider notification)
         {
+            _notification = notification;
+
             Adapter = ObservablesEntitiesAdapter.Instance;
-            Machine = Adapter.Machines.First();
-            Configuration = Machine.Configuration;
+            Configuration = new Configuration();
+            Configuration.Name = "Config 2";
+
+
+            for (int i = 0; i < 8; i++)
+            {
+                Configuration.IdsPacks.Add(new IdsPack() { Name = "IDS PACK " + i });
+            }
+
+            SaveCommand = new RelayCommand(Save, (x) => !_isSaving);
+        }
+
+        public void DropCartridgeType(CartridgeType cartridgeType, IdsPack idsPack)
+        {
+            idsPack.CartridgeTypes = cartridgeType;
+            idsPack.CartridgeTypeGuid = cartridgeType.Guid;
+        }
+
+        public void DropDispenser(Dispenser dispenser, IdsPack idsPack)
+        {
+            idsPack.Dispenser = dispenser;
+            idsPack.DispenserGuid = dispenser.Guid;
+        }
+
+        public void DropMidTankType(MidTankType midTankType, IdsPack idsPack)
+        {
+            idsPack.MidTankTypes = midTankType;
+            idsPack.MidTankTypeGuid = midTankType.Guid;
+        }
+
+        public void DropLiquidType(LiquidType liquidType, IdsPack idsPack)
+        {
+            idsPack.LiquidTypes = liquidType;
+            idsPack.LiquidTypeGuid = liquidType.Guid;
+        }
+
+        private async void Save()
+        {
+            _isSaving = true;
+            InvalidateRelayCommands();
+
+            try
+            {
+                using (_notification.PushTaskItem("Saving Configuration..."))
+                {
+                    await Configuration.SaveAsync();
+                    Configuration = Adapter.Configurations.SingleOrDefault(x => x.Guid == Configuration.Guid);
+                }
+            }
+            catch (Exception ex)
+            {
+                _notification.ShowError("An error occurred while trying to save the configuration" + Environment.NewLine + ex.Message);
+            }
+            finally
+            {
+                _isSaving = false;
+                InvalidateRelayCommands();
+            }
         }
     }
 }
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml
index cc0b43e48..1542adf49 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml
@@ -5,9 +5,51 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:dragAndDrop="clr-namespace:Tango.DragAndDrop;assembly=Tango.DragAndDrop"
              xmlns:global="clr-namespace:Tango.MachineStudio.MachineDesigner"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:sharedConverters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
+             xmlns:vm="clr-namespace:Tango.MachineStudio.MachineDesigner.ViewModels"
              xmlns:local="clr-namespace:Tango.MachineStudio.MachineDesigner.Views"
              mc:Ignorable="d" 
-             d:DesignHeight="720" d:DesignWidth="1280" Background="White" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">
+             d:DesignHeight="720" d:DesignWidth="1280" Background="White" d:DataContext="{d:DesignInstance Type=vm:MainViewVM, IsDesignTimeCreatable=False}" DataContext="{x:Static global:ViewModelLocator.MainViewVM}">
+
+    <UserControl.Resources>
+        <sharedConverters:ColorToIntegerConverter x:Key="ColorToIntegerConverter" />
+
+        <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.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>
+    </UserControl.Resources>
+
     <Grid>
         <Grid>
             <Grid.ColumnDefinitions>
@@ -25,137 +67,51 @@
                         </Image>
 
                         <Canvas>
-                            <Grid Canvas.Top="410" Canvas.Left="420"  HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="310" Height="90">
-                                <UniformGrid Columns="8">
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="4 25 4 1">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="#FF00E8FF"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="4 25 4 1">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="#FFD900FF"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="4 25 4 1">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="#FFFAFF00"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="4 25 4 1">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="Black"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="4 25 4 1">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="White"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant" Margin="2"></Image>
-                                    <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant" Margin="2"></Image>
-                                    <Image Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant" Margin="2"></Image>
-                                </UniformGrid>
-                                <Rectangle VerticalAlignment="Bottom" Stroke="#202020" StrokeThickness="1">
+                            <Grid Width="310" Height="195" Canvas.Top="314" Canvas.Left="420">
+                                <ItemsControl ItemsSource="{Binding Configuration.IdsPacks}">
+                                    <ItemsControl.ItemsPanel>
+                                        <ItemsPanelTemplate>
+                                            <UniformGrid Columns="8"></UniformGrid>
+                                        </ItemsPanelTemplate>
+                                    </ItemsControl.ItemsPanel>
+                                    <ItemsControl.ItemTemplate>
+                                        <DataTemplate>
+                                            <UniformGrid Columns="1" Rows="2">
+                                                <Grid Margin="2" Style="{StaticResource draggableGrid}" dragAndDrop:DragAndDropService.Drop="OnDroppedDispenser">
+                                                    <Image IsHitTestVisible="False" Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                    <Rectangle IsHitTestVisible="False" Margin="14 25 13 34">
+                                                        <Rectangle.Fill>
+                                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
+                                                                <GradientStop Offset="0" Color="Transparent" />
+                                                                <GradientStop Offset="1" Color="{Binding LiquidTypes.Color,Converter={StaticResource ColorToIntegerConverter}}"/>
+                                                            </LinearGradientBrush>
+                                                        </Rectangle.Fill>
+                                                    </Rectangle>
+                                                </Grid>
+
+                                                <Grid Margin="2" Style="{StaticResource draggableGrid}">
+                                                    <Image IsHitTestVisible="False" Source="../Images/mid-tank.png" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                    <Rectangle IsHitTestVisible="False" Margin="4 25 4 1">
+                                                        <Rectangle.Fill>
+                                                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
+                                                                <GradientStop Offset="0" Color="Transparent" />
+                                                                <GradientStop Offset="1" Color="{Binding LiquidTypes.Color,Converter={StaticResource ColorToIntegerConverter}}"/>
+                                                            </LinearGradientBrush>
+                                                        </Rectangle.Fill>
+                                                    </Rectangle>
+                                                </Grid>
+                                            </UniformGrid>
+                                        </DataTemplate>
+                                    </ItemsControl.ItemTemplate>
+                                </ItemsControl>
+
+                                <Rectangle VerticalAlignment="Bottom" Stroke="DimGray" StrokeThickness="1">
                                     <Rectangle.Effect>
-                                        <DropShadowEffect></DropShadowEffect>
+                                        <DropShadowEffect ShadowDepth="1" Opacity="1" Color="Black" />
                                     </Rectangle.Effect>
                                 </Rectangle>
                             </Grid>
 
-                            <Grid Width="310" Height="90" Canvas.Top="314" Canvas.Left="420">
-                                <UniformGrid Columns="8">
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="14 25 13 34">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="#FF00E8FF"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="14 25 13 34">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="#FFA800FF"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="14 25 13 34">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="#FFE9FF00"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                        <Rectangle Margin="14 25 13 34">
-                                            <Rectangle.Fill>
-                                                <LinearGradientBrush StartPoint="0,0" EndPoint="0,0.8" Opacity="0.8">
-                                                    <GradientStop Offset="0" Color="Transparent" />
-                                                    <GradientStop Offset="1" Color="Black"/>
-                                                </LinearGradientBrush>
-                                            </Rectangle.Fill>
-                                        </Rectangle>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                    </Grid>
-                                    <Grid Margin="2">
-                                        <Image Source="../Images/dispenser.png" RenderOptions.BitmapScalingMode="Fant"></Image>
-                                    </Grid>
-                                </UniformGrid>
-                            </Grid>
-
                             <Grid Width="100" Height="100" Canvas.Left="70" Canvas.Top="331">
                                 <Image Source="../Images/ti-tm4c129x.png" RenderOptions.BitmapScalingMode="Fant"></Image>
                             </Grid>
@@ -188,11 +144,136 @@
                 </Viewbox>
             </Grid>
 
-            <Grid Grid.Column="1" Background="#F6F6F6">
+            <Grid Grid.Column="1">
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="1*"/>
+                    <RowDefinition Height="60"/>
+                </Grid.RowDefinitions>
+                <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+                    <Grid>
+                        <materialDesign:Card Margin="10,10,10,0" Background="{DynamicResource MaterialDesignBackground}">
+                            <StackPanel>
+                                <Expander HorizontalAlignment="Stretch" Header="Dispensers" IsExpanded="True">
+                                    <ListBox ItemsSource="{Binding Adapter.DispensersViewSource}" HorizontalContentAlignment="Stretch">
+                                        <ListBox.ItemContainerStyle>
+                                            <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="Padding" Value="1"></Setter>
+                                            </Style>
+                                        </ListBox.ItemContainerStyle>
+                                        <ListBox.ItemTemplate>
+                                            <DataTemplate>
+                                                <Grid Background="Transparent" IsHitTestVisible="True" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                                    <StackPanel Orientation="Horizontal" Margin="2 5">
+                                                        <Image IsHitTestVisible="False" Width="24" Height="24" Source="../Images/injection.png" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                        <StackPanel Margin="5 0 0 0" IsHitTestVisible="False">
+                                                            <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run Text="{Binding DispenserTypes.Name}"></Run></TextBlock>
+                                                            <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray" Margin="0 2 0 0"><Run Text="{Binding SerialNumber}"></Run></TextBlock>
+                                                        </StackPanel>
+                                                    </StackPanel>
+
+                                                    <Rectangle Margin="0 10 0 0" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeThickness="1"></Rectangle>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </ListBox.ItemTemplate>
+                                    </ListBox>
+                                </Expander>
+                                <Border Height="1" HorizontalAlignment="Stretch" Background="{DynamicResource MaterialDesignDivider}" SnapsToDevicePixels="True" />
+                                <Expander IsExpanded="True" HorizontalAlignment="Stretch" Header="Cartridge Types">
+                                    <ListBox ItemsSource="{Binding Adapter.CartridgeTypesViewSource}" HorizontalContentAlignment="Stretch">
+                                        <ListBox.ItemContainerStyle>
+                                            <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="Padding" Value="1"></Setter>
+                                            </Style>
+                                        </ListBox.ItemContainerStyle>
+                                        <ListBox.ItemTemplate>
+                                            <DataTemplate>
+                                                <Grid Background="Transparent" IsHitTestVisible="True" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                                    <StackPanel Orientation="Horizontal" Margin="2 5">
+                                                        <Image IsHitTestVisible="False" Width="24" Height="24" Source="../Images/cartridge.png" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                        <StackPanel Margin="5 0 0 0" IsHitTestVisible="False">
+                                                            <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run Text="{Binding Name}"></Run></TextBlock>
+                                                        </StackPanel>
+                                                    </StackPanel>
+
+                                                    <Rectangle Margin="0 10 0 0" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeThickness="1"></Rectangle>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </ListBox.ItemTemplate>
+                                    </ListBox>
+                                </Expander>
+                                <Border Height="1" HorizontalAlignment="Stretch" Background="{DynamicResource MaterialDesignDivider}" SnapsToDevicePixels="True" />
+                                <Expander IsExpanded="True" HorizontalAlignment="Stretch" Header="Mid Tank Types">
+                                    <ListBox ItemsSource="{Binding Adapter.MidTankTypesViewSource}" HorizontalContentAlignment="Stretch">
+                                        <ListBox.ItemContainerStyle>
+                                            <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="Padding" Value="1"></Setter>
+                                            </Style>
+                                        </ListBox.ItemContainerStyle>
+                                        <ListBox.ItemTemplate>
+                                            <DataTemplate>
+                                                <Grid Background="Transparent" IsHitTestVisible="True" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                                    <StackPanel Orientation="Horizontal" Margin="2 5">
+                                                        <Image IsHitTestVisible="False" Width="24" Height="24" Source="../Images/tank.png" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                        <StackPanel Margin="5 0 0 0" IsHitTestVisible="False">
+                                                            <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run Text="{Binding Name}"></Run></TextBlock>
+                                                        </StackPanel>
+                                                    </StackPanel>
 
+                                                    <Rectangle Margin="0 10 0 0" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeThickness="1"></Rectangle>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </ListBox.ItemTemplate>
+                                    </ListBox>
+                                </Expander>
+                                <Border Height="1" HorizontalAlignment="Stretch" Background="{DynamicResource MaterialDesignDivider}" SnapsToDevicePixels="True" />
+                                <Expander IsExpanded="True" HorizontalAlignment="Stretch" Header="Liquid Types">
+                                    <ListBox ItemsSource="{Binding Adapter.LiquidTypesViewSource}" HorizontalContentAlignment="Stretch">
+                                        <ListBox.ItemContainerStyle>
+                                            <Style TargetType="ListBoxItem" BasedOn="{StaticResource {x:Type ListBoxItem}}">
+                                                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="VerticalContentAlignment" Value="Stretch"></Setter>
+                                                <Setter Property="Padding" Value="1"></Setter>
+                                            </Style>
+                                        </ListBox.ItemContainerStyle>
+                                        <ListBox.ItemTemplate>
+                                            <DataTemplate>
+                                                <Grid Background="Transparent" IsHitTestVisible="True" dragAndDrop:DragAndDropService.DraggableBorderBrush="{StaticResource AccentColorBrush}" dragAndDrop:DragAndDropService.Draggable="True" dragAndDrop:DragAndDropService.DraggingSurface="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DraggingSurface}">
+                                                    <StackPanel Orientation="Horizontal" Margin="2 5">
+                                                        <Image IsHitTestVisible="False" Width="24" Height="24" Source="../Images/liquid.png" Stretch="Fill" RenderOptions.BitmapScalingMode="Fant"></Image>
+                                                        <StackPanel Margin="5 0 0 0" IsHitTestVisible="False">
+                                                            <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run Text="{Binding Name}"></Run></TextBlock>
+                                                            <TextBlock IsHitTestVisible="False" FontSize="10" Foreground="DimGray"><Run>v</Run><Run Text="{Binding Version}"></Run></TextBlock>
+                                                            <Rectangle Height="5" Width="170">
+                                                                <Rectangle.Fill>
+                                                                    <SolidColorBrush Color="{Binding Color,Converter={StaticResource ColorToIntegerConverter}}"></SolidColorBrush>
+                                                                </Rectangle.Fill>
+                                                            </Rectangle>
+                                                        </StackPanel>
+                                                    </StackPanel>
+
+                                                    <Rectangle Margin="0 10 0 0" VerticalAlignment="Bottom" Stroke="Gainsboro" StrokeThickness="1"></Rectangle>
+                                                </Grid>
+                                            </DataTemplate>
+                                        </ListBox.ItemTemplate>
+                                    </ListBox>
+                                </Expander>
+                            </StackPanel>
+                        </materialDesign:Card>
+                    </Grid>
+                </ScrollViewer>
+
+                <Grid Grid.Row="1" Margin="10">
+                    <Button Height="40" Command="{Binding SaveCommand}">SAVE</Button>
+                </Grid>
             </Grid>
         </Grid>
-         
+
         <dragAndDrop:DraggingSurface x:Name="dragSufrace" />
     </Grid>
 </UserControl>
diff --git a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml.cs b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml.cs
index bcf52aff0..97412178e 100644
--- a/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/Views/MainView.xaml.cs
+++ b/Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.MachineDesigner/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.MachineDesigner.ViewModels;
 
 namespace Tango.MachineStudio.MachineDesigner.Views
 {
@@ -20,9 +23,41 @@ namespace Tango.MachineStudio.MachineDesigner.Views
     /// </summary>
     public partial class MainView : UserControl
     {
+        private MainViewVM _vm;
+
         public MainView()
         {
             InitializeComponent();
+            DraggingSurface = dragSufrace;
+            this.Loaded += (x, y) => _vm = DataContext as MainViewVM;
+        }
+
+        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));
+
+        private void OnDroppedDispenser(object sender, DropEventArgs e)
+        {
+            if (e.Draggable.DataContext is Dispenser)
+            {
+                _vm.DropDispenser(e.Draggable.DataContext as Dispenser, e.Droppable.DataContext as IdsPack);
+            }
+            else if (e.Draggable.DataContext is LiquidType)
+            {
+                _vm.DropLiquidType(e.Draggable.DataContext as LiquidType, e.Droppable.DataContext as IdsPack);
+            }
+            else if (e.Draggable.DataContext is CartridgeType)
+            {
+                _vm.DropCartridgeType(e.Draggable.DataContext as CartridgeType, e.Droppable.DataContext as IdsPack);
+            }
+            else if (e.Draggable.DataContext is MidTankType)
+            {
+                _vm.DropMidTankType(e.Draggable.DataContext as MidTankType, e.Droppable.DataContext as IdsPack);
+            }
         }
     }
 }
diff --git a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.UI/Modules/DefaultStudioModuleLoader.cs b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.UI/Modules/DefaultStudioModuleLoader.cs
index 9a8a6bc96..473e66d38 100644
--- a/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.UI/Modules/DefaultStudioModuleLoader.cs
+++ b/Software/Visual_Studio/MachineStudio/Tango.MachineStudio.UI/Modules/DefaultStudioModuleLoader.cs
@@ -10,6 +10,8 @@ using Tango.Core;
 using Tango.MachineStudio.Common;
 using Tango.MachineStudio.Common.Authentication;
 using Tango.MachineStudio.Common.Modules;
+using Tango.MachineStudio.DB;
+using Tango.MachineStudio.MachineDesigner;
 using Tango.MachineStudio.Stubs;
 
 namespace Tango.MachineStudio.UI.Modules
@@ -52,6 +54,8 @@ namespace Tango.MachineStudio.UI.Modules
             {
                 //Preloaded
                 AllModules.Add(new StubsModule());
+                AllModules.Add(new DBModule());
+                AllModules.Add(new MachineDesignerModule());
                 //Preloaded
 
                 AllModules.Clear();
diff --git a/Software/Visual_Studio/Tango.DAL.Observables/Enumerations/MidTankTypes.cs b/Software/Visual_Studio/Tango.DAL.Observables/Enumerations/MidTankTypes.cs
index 754ffcf99..a2515c714 100644
--- a/Software/Visual_Studio/Tango.DAL.Observables/Enumerations/MidTankTypes.cs
+++ b/Software/Visual_Studio/Tango.DAL.Observables/Enumerations/MidTankTypes.cs
@@ -8,5 +8,12 @@ namespace Tango.DAL.Observables
 {
     public enum MidTankTypes
     {
+
+        /// <summary>
+        /// (2 Liter Tank)
+        /// </summary>
+        [Description("2 Liter Tank")]
+        2LiterTank = 1,
+
     }
 }
diff --git a/Software/Visual_Studio/Tango.DAL.Observables/ObservableEntity.cs b/Software/Visual_Studio/Tango.DAL.Observables/ObservableEntity.cs
index 56455246f..4ae7c6835 100644
--- a/Software/Visual_Studio/Tango.DAL.Observables/ObservableEntity.cs
+++ b/Software/Visual_Studio/Tango.DAL.Observables/ObservableEntity.cs
@@ -13,6 +13,7 @@ using Tango.Core;
 using Tango.DAL.Remote.DB;
 using Tango.DAL.Remote;
 using Tango.Settings;
+using Tango.Core.Helpers;
 
 namespace Tango.DAL.Observables
 {
@@ -48,7 +49,8 @@ namespace Tango.DAL.Observables
                 if (prop.PropertyType.IsGenericType)
                 {
                     object observableCollection = observable.GetType().GetProperty(name).GetValue(observable);
-                    observableCollection.GetType().GetMethod("Clear").Invoke(observableCollection, new object[] { });
+
+                    ThreadsHelper.InvokeUINow(() => observableCollection.GetType().GetMethod("Clear").Invoke(observableCollection, new object[] { }));
 
                     Type genericType = observable.GetType().GetProperty(name).PropertyType.GenericTypeArguments.Single();
 
@@ -60,13 +62,13 @@ namespace Tango.DAL.Observables
 
                         if (loadedEntity != null)
                         {
-                            observableCollection.GetType().GetMethod("Add").Invoke(observableCollection, new object[] { loadedEntity });
+                            ThreadsHelper.InvokeUINow(() => observableCollection.GetType().GetMethod("Add").Invoke(observableCollection, new object[] { loadedEntity }));
                         }
                         else
                         {
                             IObservableEntity newObservable = Activator.CreateInstance(genericType, new object[] { item }) as IObservableEntity;
                             LoadedObjectsService.Add(guid, newObservable);
-                            observableCollection.GetType().GetMethod("Add").Invoke(observableCollection, new object[] { newObservable });
+                            ThreadsHelper.InvokeUINow(() => observableCollection.GetType().GetMethod("Add").Invoke(observableCollection, new object[] { newObservable }));
                         }
                     }
                 }
diff --git a/Software/Visual_Studio/Tango.DAL.Observables/ObservablesEntitiesAdapter.cs b/Software/Visual_Studio/Tango.DAL.Observables/ObservablesEntitiesAdapter.cs
index 93838895b..228c8c7ac 100644
--- a/Software/Visual_Studio/Tango.DAL.Observables/ObservablesEntitiesAdapter.cs
+++ b/Software/Visual_Studio/Tango.DAL.Observables/ObservablesEntitiesAdapter.cs
@@ -15,6 +15,8 @@ namespace Tango.DAL.Observables
 {
     public partial class ObservablesEntitiesAdapter : ExtendedObject
     {
+        public event Action Initialized;
+
         private static ObservablesEntitiesAdapter _instance;
 
         public static ObservablesEntitiesAdapter Instance
@@ -44,6 +46,7 @@ namespace Tango.DAL.Observables
         public void Initialize()
         {
             Invalidate();
+            Initialized?.Invoke();
         }
 
         public void SaveChanges()