From 307cbc71bc5e4c79f9309acec0ae0d8a173a735f Mon Sep 17 00:00:00 2001
From: Roy Ben-Shabat <Roy@Twine-s.com>
Date: Tue, 6 Feb 2018 14:57:41 +0200
Subject: Added Data Recording Design.

---
 .../Views/MainView.xaml                            | 196 ++++++++++++---------
 1 file changed, 117 insertions(+), 79 deletions(-)

(limited to 'Software/Visual_Studio/MachineStudio/Modules/Tango.MachineStudio.Developer/Views/MainView.xaml')

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 f716b6228..e953ddbcb 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
@@ -54,6 +54,7 @@
         <localConverters:ObjectsNotEqualToBooleanConveter x:Key="ObjectsNotEqualToBooleanConveter" />
         <localConverters:JobProgressToPositionConverter x:Key="JobProgressToPositionConverter" />
         <localConverters:BrushStopToOffsetValueConverter x:Key="BrushStopToOffsetValueConverter" />
+        <converters:StringEllipsisConverter x:Key="StringEllipsisConverter" />
 
         <SolidColorBrush x:Key="SideBarBackground" Color="White">
 
@@ -824,7 +825,7 @@
                                                         <ItemsControl.ItemsPanel>
                                                             <ItemsPanelTemplate>
                                                                 <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
-                                                                    
+
                                                                 </StackPanel>
                                                             </ItemsPanelTemplate>
                                                         </ItemsControl.ItemsPanel>
@@ -983,10 +984,10 @@
                                                     <ListBox.ItemTemplate>
                                                         <DataTemplate>
                                                             <DockPanel>
-                                                            <StackPanel Orientation="Horizontal" Margin="0 5 0 0" DockPanel.Dock="Left">
-                                                                <Image Source="../Images/segment-single.png" Width="24"></Image>
-                                                                <TextBlock Margin="5 0 0 0" Text="{Binding Name}" FontSize="12" FontWeight="SemiBold" VerticalAlignment="Center"></TextBlock>
-                                                            </StackPanel>
+                                                                <StackPanel Orientation="Horizontal" Margin="0 5 0 0" DockPanel.Dock="Left">
+                                                                    <Image Source="../Images/segment-single.png" Width="24"></Image>
+                                                                    <TextBlock Margin="5 0 0 0" Text="{Binding Name}" FontSize="12" FontWeight="SemiBold" VerticalAlignment="Center"></TextBlock>
+                                                                </StackPanel>
 
                                                                 <ItemsControl ItemsSource="{Binding BrushStops}" HorizontalAlignment="Right" Margin="0 5 0 0">
                                                                     <ItemsControl.ItemsPanel>
@@ -1589,87 +1590,124 @@
                                     </Grid.Style>
 
                                     <Grid Margin="5 0 0 0">
-                                        <DockPanel x:Name="dockCameras" VerticalAlignment="Top" Height="850" Width="330" HorizontalAlignment="Right">
+                                        <DockPanel x:Name="dockCameras">
                                             <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>
 
-                                            <ItemsControl ItemsSource="{Binding CaptureDevices}">
-                                                <ItemsControl.ItemsPanel>
-                                                    <ItemsPanelTemplate>
-                                                        <UniformGrid Rows="3" />
-                                                    </ItemsPanelTemplate>
-                                                </ItemsControl.ItemsPanel>
+                                            <Grid DockPanel.Dock="Bottom" Height="120" Width="300">
+                                                <Border Background="#5DFFFFFF" CornerRadius="10" Padding="5" Margin="0 0 0 10" BorderThickness="1" BorderBrush="Gainsboro">
+                                                <DockPanel>
+                                                    <StackPanel Orientation="Horizontal" DockPanel.Dock="Top">
+                                                        <Image Source="../Images/tape.png" Width="25"></Image>
+                                                        <TextBlock VerticalAlignment="Center" Margin="10 0 0 0" Foreground="DimGray" FontSize="16" FontWeight="SemiBold">DATA RECORDER/PLAYER</TextBlock>
+                                                    </StackPanel>
+                                                    <Grid>
+                                                        <DockPanel>
+                                                            <DockPanel DockPanel.Dock="Top">
+                                                                <StackPanel Orientation="Horizontal" DockPanel.Dock="Left" Height="50" VerticalAlignment="Bottom" Margin="0 0 0 5">
+                                                                        <Button Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="28" Height="28" Background="Transparent" ToolTip="Load Data File">
+                                                                            <materialDesign:PackIcon Width="20" Height="20" Kind="Eject" Foreground="{StaticResource AccentColorBrush}" />
+                                                                    </Button>
+                                                                        <Button Margin="5 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="35" Height="35" Background="Transparent">
+                                                                            <materialDesign:PackIcon Width="20" Height="20" Kind="Play" Foreground="{StaticResource AccentColorBrush}" />
+                                                                    </Button>
+                                                                        <Button Margin="5 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Padding="0" Width="28" Height="28" Background="Transparent">
+                                                                            <materialDesign:PackIcon Width="20" Height="20" Kind="Stop" Foreground="{StaticResource AccentColorBrush}" />
+                                                                    </Button>
+                                                                    <Button Margin="5 0 0 0" Style="{StaticResource MaterialDesignFloatingActionButton}" Foreground="#FF7A7A" BorderBrush="#FF8585" Padding="0" Width="20" Height="20" Background="Transparent" ToolTip="Start Recording">
+                                                                        <materialDesign:PackIcon Width="10" Height="10" Kind="Record" />
+                                                                    </Button>
+                                                                </StackPanel>
+                                                                <Grid>
+                                                                    <TextBlock Text="00:00:00 / 00:00:00" Margin="0 -5 0 0" VerticalAlignment="Center" HorizontalAlignment="Right" Foreground="#FF8585" FontSize="20" FontFamily="{StaticResource digital-7}"></TextBlock>
+                                                                </Grid>
+                                                            </DockPanel>
+                                                            <Slider></Slider>
+                                                        </DockPanel>
+                                                    </Grid>
+                                                </DockPanel>
+                                                </Border>
+                                            </Grid>
 
-                                                <ItemsControl.ItemTemplate>
-                                                    <DataTemplate DataType="{x:Type video:CaptureDevice}">
-                                                        <Border RenderOptions.BitmapScalingMode="Fant">
-                                                            <Border.Background>
-                                                                <ImageBrush ImageSource="../Images/video-frame.png" Stretch="Fill"></ImageBrush>
-                                                            </Border.Background>
-
-                                                            <Grid>
-                                                                <Border Margin="22 24 23 42">
-                                                                    <Grid>
-                                                                        <Image Source="{Binding VideoSource,Mode=OneWay,IsAsync=True}" Stretch="Fill" Visibility="{Binding IsStarted,Converter={StaticResource BooleanToVisibilityConverter}}"></Image>
-
-                                                                        <Grid Background="#83000000" Cursor="Hand">
-                                                                            <Grid.Style>
-                                                                                <Style TargetType="Grid">
-                                                                                    <Setter Property="Opacity" Value="0"></Setter>
-                                                                                    <Style.Triggers>
-                                                                                        <EventTrigger RoutedEvent="MouseEnter">
-                                                                                            <EventTrigger.Actions>
-                                                                                                <BeginStoryboard>
-                                                                                                    <Storyboard>
-                                                                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:0.2"></DoubleAnimation>
-                                                                                                    </Storyboard>
-                                                                                                </BeginStoryboard>
-                                                                                            </EventTrigger.Actions>
-                                                                                        </EventTrigger>
-                                                                                        <EventTrigger RoutedEvent="MouseLeave">
-                                                                                            <EventTrigger.Actions>
-                                                                                                <BeginStoryboard>
-                                                                                                    <Storyboard>
-                                                                                                        <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:0.2"></DoubleAnimation>
-                                                                                                    </Storyboard>
-                                                                                                </BeginStoryboard>
-                                                                                            </EventTrigger.Actions>
-                                                                                        </EventTrigger>
-                                                                                    </Style.Triggers>
-                                                                                </Style>
-                                                                            </Grid.Style>
-
-                                                                            <Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.ToggleCameraCommand}" CommandParameter="{Binding}" Style="{StaticResource MaterialDesignFloatingActionMiniButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="60" Height="60" Padding="0">
-                                                                                <materialDesign:PackIcon Width="40" Height="40">
-                                                                                    <materialDesign:PackIcon.Style>
-                                                                                        <Style TargetType="materialDesign:PackIcon">
-                                                                                            <Setter Property="Kind" Value="Play"></Setter>
-                                                                                            <Style.Triggers>
-                                                                                                <DataTrigger Binding="{Binding IsStarted}" Value="True">
-                                                                                                    <Setter Property="Kind" Value="Stop"></Setter>
-                                                                                                </DataTrigger>
-                                                                                                <DataTrigger Binding="{Binding IsStarted}" Value="False">
-                                                                                                    <Setter Property="Kind" Value="Play"></Setter>
-                                                                                                </DataTrigger>
-                                                                                            </Style.Triggers>
-                                                                                        </Style>
-                                                                                    </materialDesign:PackIcon.Style>
-                                                                                </materialDesign:PackIcon>
-                                                                            </Button>
-                                                                        </Grid>
-                                                                    </Grid>
-                                                                </Border>
+                                            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Margin="0 0 0 10">
+                                                <ItemsControl x:Name="listCameras" ItemsSource="{Binding CaptureDevices}" Height="790" Width="320">
+                                                    <ItemsControl.ItemsPanel>
+                                                        <ItemsPanelTemplate>
+                                                            <UniformGrid Rows="3" />
+                                                        </ItemsPanelTemplate>
+                                                    </ItemsControl.ItemsPanel>
 
-                                                                <Label Margin="22 23 0 0" Style="{StaticResource graphLabel}">
-                                                                    <TextBlock VerticalAlignment="Center" FontSize="10" Margin="0 0 30 0" Text="{Binding Device.Name,FallbackValue='No Camera',TargetNullValue='No Camera'}"></TextBlock>
-                                                                </Label>
-                                                            </Grid>
-                                                        </Border>
-                                                    </DataTemplate>
-                                                </ItemsControl.ItemTemplate>
-                                            </ItemsControl>
+                                                    <ItemsControl.ItemTemplate>
+                                                        <DataTemplate DataType="{x:Type video:CaptureDevice}">
+                                                            <Border RenderOptions.BitmapScalingMode="Fant">
+                                                                <Border.Background>
+                                                                    <ImageBrush ImageSource="../Images/video-frame.png" Stretch="Fill"></ImageBrush>
+                                                                </Border.Background>
+
+                                                                <Grid>
+                                                                    <Border Margin="22 24 23 42">
+                                                                        <Grid>
+                                                                            <Border IsHitTestVisible="False" VerticalAlignment="Center" Padding="10" HorizontalAlignment="Center" Background="#20808080" CornerRadius="5">
+                                                                                <TextBlock FontSize="11" Text="{Binding Device.Name,Converter={StaticResource StringEllipsisConverter},ConverterParameter=30,FallbackValue='No Camera',TargetNullValue='No Camera'}"></TextBlock>
+                                                                            </Border>
+
+                                                                            <Image Source="{Binding VideoSource,Mode=OneWay,IsAsync=True}" Stretch="Fill" Visibility="{Binding IsStarted,Converter={StaticResource BooleanToVisibilityConverter}}"></Image>
+
+                                                                            <Grid Background="#83000000" Cursor="Hand">
+                                                                                <Grid.Style>
+                                                                                    <Style TargetType="Grid">
+                                                                                        <Setter Property="Opacity" Value="0"></Setter>
+                                                                                        <Style.Triggers>
+                                                                                            <EventTrigger RoutedEvent="MouseEnter">
+                                                                                                <EventTrigger.Actions>
+                                                                                                    <BeginStoryboard>
+                                                                                                        <Storyboard>
+                                                                                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:0.2"></DoubleAnimation>
+                                                                                                        </Storyboard>
+                                                                                                    </BeginStoryboard>
+                                                                                                </EventTrigger.Actions>
+                                                                                            </EventTrigger>
+                                                                                            <EventTrigger RoutedEvent="MouseLeave">
+                                                                                                <EventTrigger.Actions>
+                                                                                                    <BeginStoryboard>
+                                                                                                        <Storyboard>
+                                                                                                            <DoubleAnimation Storyboard.TargetProperty="Opacity" To="0" Duration="00:00:0.2"></DoubleAnimation>
+                                                                                                        </Storyboard>
+                                                                                                    </BeginStoryboard>
+                                                                                                </EventTrigger.Actions>
+                                                                                            </EventTrigger>
+                                                                                        </Style.Triggers>
+                                                                                    </Style>
+                                                                                </Grid.Style>
+
+                                                                                <Button Command="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext.ToggleCameraCommand}" CommandParameter="{Binding}" Style="{StaticResource MaterialDesignFloatingActionMiniButton}" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Width="60" Height="60" Padding="0">
+                                                                                    <materialDesign:PackIcon Width="40" Height="40">
+                                                                                        <materialDesign:PackIcon.Style>
+                                                                                            <Style TargetType="materialDesign:PackIcon">
+                                                                                                <Setter Property="Kind" Value="Play"></Setter>
+                                                                                                <Style.Triggers>
+                                                                                                    <DataTrigger Binding="{Binding IsStarted}" Value="True">
+                                                                                                        <Setter Property="Kind" Value="Stop"></Setter>
+                                                                                                    </DataTrigger>
+                                                                                                    <DataTrigger Binding="{Binding IsStarted}" Value="False">
+                                                                                                        <Setter Property="Kind" Value="Play"></Setter>
+                                                                                                    </DataTrigger>
+                                                                                                </Style.Triggers>
+                                                                                            </Style>
+                                                                                        </materialDesign:PackIcon.Style>
+                                                                                    </materialDesign:PackIcon>
+                                                                                </Button>
+                                                                            </Grid>
+                                                                        </Grid>
+                                                                    </Border>
+                                                                </Grid>
+                                                            </Border>
+                                                        </DataTemplate>
+                                                    </ItemsControl.ItemTemplate>
+                                                </ItemsControl>
+                                            </ScrollViewer>
                                         </DockPanel>
                                     </Grid>
 
-- 
cgit v1.3.1