SmartAquafarm
/
SmartAquaViewer
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

design: Line 그래프 & 설정칸 디자인 적용

Browse Source
prototype
HyungJune Kim 7 months ago
parent 4d4bacd3b7
commit 53b9fd3883
5 changed files with 272 additions and 95 deletions
Show Stats Download Patch File Download Diff File

4
SmartAquaViewer/MainWindow.xaml
Unescape View File

@ -61,7 +61,7 @@
<view:FileListView Grid.Row="1" Grid.RowSpan="2" x:Name="fileListView"/>
<Border Grid.Row="1" Grid.Column="1" Margin="16 12 16 0">
<Border Grid.Row="1" Grid.Column="1" Margin="24 12 24 0">
<UniformGrid Columns="4">
<RadioButton x:Name="rdbtnMonitoing" GroupName="contentSwap" Content="모니터링" Tag="monitoring"
Style="{StaticResource RadioButtonTabStyle}" IsChecked="True" FontSize="30"
@ -85,6 +85,6 @@
</Border>
<ContentControl x:Name="contentControl" Content="{Binding SelectedViewModel}"
Grid.Row="2" Grid.Column="1" Margin="30 16 30 12"/>
Grid.Row="2" Grid.Column="1" Margin="24 16 24 12"/>
</Grid>
</Window>

101
SmartAquaViewer/Resources/Generic.xaml
Unescape View File

@ -281,7 +281,9 @@
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border x:Name="Bd"
Background="{TemplateBinding Background}">
Background="{TemplateBinding Background}"
BorderThickness="0 1 0 0"
BorderBrush="#264A60">
<ContentPresenter
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
@ -482,6 +484,32 @@
</Setter>
</Style>
<Style TargetType="ListBoxItem" x:Key="ListBoxItemStyle" BasedOn="{StaticResource MaterialDesignListBoxItem}">
<Setter Property="Background" Value="#1D3649"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border x:Name="RootBorder"
Background="{TemplateBinding Background}"
CornerRadius="15"
Margin="0 0 4 8">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.6"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SquareCheckToggleButtonStyle" TargetType="ToggleButton">
<!-- 기본 값들 -->
<Setter Property="Background" Value="Transparent"/>
@ -549,4 +577,75 @@
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CircleCheckToggleButtonStyle" TargetType="ToggleButton">
<!-- 기본 값들 -->
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="#999999"/>
<!-- 기본 숫자색: 회색 -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<StackPanel Orientation="Horizontal"
HorizontalAlignment="Left" VerticalAlignment="Center">
<!-- 네모 체크박스 부분 -->
<Border x:Name="CheckBoxBorder"
Width="18"
Height="18"
Background="Transparent"
BorderBrush="#264A60"
BorderThickness="1.5"
CornerRadius="9"
Margin="0 6 8 6">
<!-- 체크 표시 -->
<Path x:Name="CheckMark"
Stroke="White"
StrokeThickness="2"
Data="M3,9 L7,13 L14,4"
Stretch="Uniform"
SnapsToDevicePixels="True"
Visibility="Collapsed"/>
</Border>
<!-- 숫자(컨텐츠) -->
<ContentPresenter x:Name="contentPresenter"
VerticalAlignment="Center"
TextElement.Foreground="{TemplateBinding Foreground}"
TextElement.FontSize="12"
TextElement.FontFamily="{StaticResource SCDream2}"/>
</StackPanel>
<ControlTemplate.Triggers>
<!-- 체크 되었을 때 -->
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="CheckBoxBorder"
Property="Background"
Value="#325C80"/>
<!-- 파란 배경 -->
<Setter TargetName="CheckBoxBorder"
Property="BorderBrush"
Value="#325C80"/>
<Setter TargetName="CheckMark"
Property="Visibility"
Value="Visible"/>
<Setter Property="Foreground" Value="White"/>
<!-- 숫자 흰색 -->
</Trigger>
<!-- 마우스 오버 효과 약간 -->
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="CheckBoxBorder"
Property="BorderBrush"
Value="#3A6C90"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

208
SmartAquaViewer/View/MonitoringView.xaml
Unescape View File

@ -563,13 +563,13 @@
<StackPanel>
<Grid Margin="24 24 24 16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="그래프" VerticalAlignment="Center"
FontSize="18" FontFamily="{StaticResource SCDream4}" Foreground="White"/>
<ComboBox Margin="15 0 0 0" Height="40" Grid.Column="1"
<ComboBox Margin="15 0 0 0" Height="35" Grid.Column="1"
Style="{StaticResource ComboBoxStyle}"
FontFamily="{StaticResource SCDream3}"
ItemsSource="{Binding GraphTypes}"
@ -577,14 +577,14 @@
helper:ComboBoxHelper.SelectFirstOnItemsChange="True"
IsEditable="False" IsTextSearchEnabled="False"/>
</Grid>
<Grid Margin="15 0 15 10">
<Grid Margin="24 0 24 16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="X축" VerticalAlignment="Center"
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
<ComboBox Margin="15 0 0 0" Height="40" Grid.Column="1"
FontSize="18" FontFamily="{StaticResource SCDream4}" Foreground="White"/>
<ComboBox Margin="15 0 0 0" Height="35" Grid.Column="1"
Style="{StaticResource ComboBoxStyle}"
FontFamily="{StaticResource SCDream3}"
ItemsSource="{Binding XFieldCandidates}"
@ -592,38 +592,46 @@
DisplayMemberPath="Display"/>
</Grid>
<StackPanel Margin="15 0" Style="{StaticResource VisibleWhenTank}">
<TextBlock Text="수조 (복수 선택)" VerticalAlignment="Center"
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
<Border CornerRadius="10" Margin="0 5 0 10">
<ListBox ItemsSource="{Binding TankGroups}"
SelectionMode="Extended"
helper:MultiSelectBehavior.SelectedDictionary="{Binding SelectedWaterTanks}"
helper:MultiSelectBehavior.KeyPath="Key"
helper:MultiSelectBehavior.ValuePath="Value"
FontSize="16" FontWeight="Bold"
FontFamily="{StaticResource SCDream5}"
Style="{StaticResource MaterialDesignChoiceChipListBox}"
ItemContainerStyle="{StaticResource TransparentListBoxItemStyle}"
Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Key}"
Focusable="False"
IsChecked="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Style="{StaticResource SquareCheckToggleButtonStyle}"
Margin="0 0 20 0"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</StackPanel>
<Grid Margin="24 0 24 16" Style="{StaticResource VisibleWhenTank}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Center" Padding="0"
Foreground="White">
<Run Text="수조" FontSize="18" FontFamily="{StaticResource SCDream4}"/>
<LineBreak/>
<Run Text="(복수 선택 가능)" FontSize="14" Foreground="#767676"/>
</TextBlock>
<ListBox ItemsSource="{Binding TankGroups}"
Grid.Column="1" Margin="15 0 0 0"
VerticalAlignment="Center"
SelectionMode="Extended"
helper:MultiSelectBehavior.SelectedDictionary="{Binding SelectedWaterTanks}"
helper:MultiSelectBehavior.KeyPath="Key"
helper:MultiSelectBehavior.ValuePath="Value"
FontSize="16" FontWeight="Bold"
FontFamily="{StaticResource SCDream5}"
Style="{StaticResource MaterialDesignChoiceChipListBox}"
ItemContainerStyle="{StaticResource TransparentListBoxItemStyle}"
Background="Transparent">
<ListBox.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Key}"
Focusable="False"
IsChecked="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Style="{StaticResource SquareCheckToggleButtonStyle}"
Margin="0 0 20 0"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
<Grid Margin="15 0">
<Grid Margin="24 0">
<Grid.Resources>
<Style TargetType="FrameworkElement">
<Setter Property="Visibility" Value="Collapsed"/>
@ -670,17 +678,17 @@
<StackPanel Style="{StaticResource VisibleWhenLine}">
<Grid Style="{StaticResource VisibleWhenLine}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="Y축" VerticalAlignment="Center" Style="{StaticResource VisibleWhenLine}"
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
FontSize="18" FontFamily="{StaticResource SCDream4}" Foreground="White"/>
<ComboBox ItemsSource="{Binding YFieldCandidates}"
SelectedItem="{Binding SelectedYField, Mode=TwoWay}"
Grid.Column="1"
FontFamily="{StaticResource SCDream3}"
DisplayMemberPath="Display" Margin="15 0 0 0"
Height="40" Style="{StaticResource ComboBoxStyle}"/>
Height="35" Style="{StaticResource ComboBoxStyle}"/>
</Grid>
</StackPanel>
@ -688,16 +696,16 @@
<StackPanel Style="{StaticResource VisibleWhenStep}">
<Grid Margin="0 5 0 10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Text="필드 종류" VerticalAlignment="Center"
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Center">
FontSize="18" FontFamily="{StaticResource SCDream4}" Foreground="White"/>
<StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Left" Margin="15 0">
<RadioButton x:Name="rbStatus" Content="전원/상태"
FontFamily="{StaticResource SCDream3}"
GroupName="strpPlot" Margin="0 0 30 0"
Foreground="White" FontSize="20"
Foreground="White" FontSize="16"
Style="{StaticResource MaterialDesignUserForegroundRadioButton}"
IsChecked="{Binding SelectedKind, Mode=TwoWay,
Converter={StaticResource EnumEqualsConverter},
@ -705,7 +713,7 @@
<RadioButton x:Name="rbValue" Content="센서 값"
FontFamily="{StaticResource SCDream3}"
GroupName="strpPlot" Grid.Column="1"
Foreground="White" FontSize="20"
Foreground="White" FontSize="16"
Style="{StaticResource MaterialDesignUserForegroundRadioButton}"
IsChecked="{Binding SelectedKind, Mode=TwoWay,
Converter={StaticResource EnumEqualsConverter},
@ -713,21 +721,40 @@
</StackPanel>
</Grid>
<StackPanel Margin="0 5 0 0">
<TextBlock Text="Y축 (복수 선택)" VerticalAlignment="Center"
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
<Grid Margin="0 5 0 0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="110"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock VerticalAlignment="Top" Foreground="White">
<Run Text="Y축" FontSize="18" FontFamily="{StaticResource SCDream4}"/>
<LineBreak/>
<Run Text="(복수 선택 가능)" FontSize="14" Foreground="#767676"/>
</TextBlock>
<!-- SelectedItems 바인딩을 위한 간단 Behavior는 아래 3) 참고 -->
<Border CornerRadius="10" Background="White" Margin="0 5">
<Border CornerRadius="10"
Margin="15 0 0 0" Grid.Column="1">
<ListBox ItemsSource="{Binding YFieldCandidates}"
DisplayMemberPath="Display"
SelectionMode="Extended"
helper:MultiSelectBehavior.SelectedItems="{Binding SelectedYFields, Mode=OneWay}"
Height="Auto" Background="White"
FontSize="14" FontWeight="Bold"
FontFamily="{StaticResource SCDream5}"
Style="{StaticResource MaterialDesignFilterChipListBox}"/>
Style="{StaticResource MaterialDesignFilterChipListBox}"
ItemContainerStyle="{StaticResource ListBoxItemStyle}">
<ListBox.ItemTemplate>
<DataTemplate>
<ToggleButton Content="{Binding Display}"
Focusable="False"
IsChecked="{Binding IsSelected,
RelativeSource={RelativeSource AncestorType=ListBoxItem}}"
Style="{StaticResource CircleCheckToggleButtonStyle}"
Margin="12 0"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Border>
</StackPanel>
</Grid>
</StackPanel>
<!-- SCATTER: 단일 Y + 옵션 -->
@ -741,7 +768,7 @@
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
<ComboBox ItemsSource="{Binding YFieldCandidates}"
SelectedItem="{Binding SelectedYField}"
DisplayMemberPath="Display" Height="40"
DisplayMemberPath="Display" Height="35"
Grid.Column="1" Grid.ColumnSpan="3" Margin="15 0 0 0"
FontFamily="{StaticResource SCDream3}"
Style="{StaticResource ComboBoxStyle}"/>
@ -792,7 +819,7 @@
FontSize="20" FontFamily="{StaticResource SCDream5}" Foreground="White"/>
<ComboBox ItemsSource="{Binding YFieldCandidates}"
SelectedItem="{Binding SelectedYField}"
DisplayMemberPath="Display" Height="40"
DisplayMemberPath="Display" Height="35"
Grid.Column="1" Margin="15 0 0 0"
FontFamily="{StaticResource SCDream3}"
Style="{StaticResource ComboBoxStyle}"/>
@ -819,14 +846,18 @@
</Grid>
</StackPanel>
<StackPanel Orientation="Horizontal" Grid.Row="1" Margin="15 0">
<CheckBox Content="범례 표시" IsChecked="{Binding ShowLegends}"
FontSize="20" FontFamily="{StaticResource SCDream4}" Foreground="White"
Margin="0 0 15 0" VerticalContentAlignment="Center"
<StackPanel Orientation="Horizontal" Grid.Row="1">
<CheckBox IsChecked="{Binding ShowLegends}"
FontSize="16" FontFamily="{StaticResource SCDream4}" Foreground="#264A60"
Margin="24 0 4 0" VerticalContentAlignment="Center"
Style="{StaticResource MaterialDesignUserForegroundCheckBox}"/>
<CheckBox Content="마커 표시" IsChecked="{Binding ShowMarkers}"
FontSize="20" FontFamily="{StaticResource SCDream4}" Foreground="White"
Margin="0 0 15 0" VerticalContentAlignment="Center">
<TextBlock Text="범례" VerticalAlignment="Center" Margin="0 0 12 0"
FontSize="16" FontFamily="{StaticResource SCDream3}"
Foreground="#999999" />
<CheckBox IsChecked="{Binding ShowMarkers}"
FontSize="16" FontFamily="{StaticResource SCDream4}" Foreground="#264A60"
Margin="0 0 4 0" VerticalContentAlignment="Center">
<CheckBox.Style>
<Style TargetType="CheckBox" BasedOn="{StaticResource MaterialDesignUserForegroundCheckBox}">
<Setter Property="Visibility" Value="Collapsed"/>
@ -841,9 +872,27 @@
</Style>
</CheckBox.Style>
</CheckBox>
<TextBlock Text="마커" VerticalAlignment="Center" Margin="0 0 12 0"
FontSize="16" FontFamily="{StaticResource SCDream3}"
Foreground="#999999">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedGraphType}" Value="LINE">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding SelectedGraphType}" Value="STEP">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<CheckBox Content="회귀선" IsChecked="{Binding ShowRegression}"
FontSize="20" FontFamily="{StaticResource SCDream4}" Foreground="White"
Margin="0 0 15 0" VerticalContentAlignment="Center">
FontSize="16" FontFamily="{StaticResource SCDream4}" Foreground="#264A60"
Margin="0 0 4 0" VerticalContentAlignment="Center">
<CheckBox.Style>
<Style TargetType="CheckBox" BasedOn="{StaticResource MaterialDesignUserForegroundCheckBox}">
<Setter Property="Visibility" Value="Collapsed"/>
@ -855,20 +904,37 @@
</Style>
</CheckBox.Style>
</CheckBox>
<TextBlock Text="회귀선" VerticalAlignment="Center" Margin="0 0 12 0"
FontSize="16" FontFamily="{StaticResource SCDream3}"
Foreground="#999999">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedGraphType}" Value="SCATTER">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="15 0" Grid.Row="1" HorizontalAlignment="Right">
<Button Content="그래프 생성" FontFamily="{StaticResource SCDream5}"
Style="{StaticResource MaterialDesignFlatLightBgButton}"
FontWeight="Bold" Command="{Binding DrawGraphCommand}"/>
</StackPanel>
<Button Content="그래프 생성" Grid.Row="1" HorizontalAlignment="Right"
FontFamily="{StaticResource SCDream3}"
Foreground="White" FontSize="16"
Background="#325C80" BorderBrush="Transparent"
Style="{StaticResource MaterialDesignFlatLightBgButton}"
Width="120" Height="38"
Margin="0 0 24 24" Padding="20 0"
Command="{Binding DrawGraphCommand}"/>
</Grid>
</Border>
<Border Grid.Column="1" Margin="0 15 15 15"
Background="#384659" CornerRadius="10">
<Border Grid.Column="1" Margin="0 16 12 16" CornerRadius="5"
Background="#152935" BorderBrush="#325C80" BorderThickness="1">
<control:GraphControl x:Name="graphControl"
Margin="10" DataContext="{Binding GraphControlVM}"
Margin="16 12" DataContext="{Binding GraphControlVM}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Border>
</Grid>

52
SmartAquaViewer/ViewModel/GraphControlViewModel.cs
Unescape View File

@ -21,7 +21,21 @@ namespace SmartAquaViewer.ViewModel
private void InitializeGraph()
{
Model.TextColor = OxyColors.LightGray;
Model.TextColor = OxyColors.White;
Model.PlotAreaBorderColor = OxyColors.White;
Model.PlotAreaBorderThickness = new OxyThickness(1);
Model.Padding = new OxyThickness(0);
}
private void ApplyCommonAxisSettings(Axis axis, string title, AxisPosition position)
{
axis.Position = position;
axis.Title = title;
axis.TitleFontSize = 14;
axis.FontSize = 12;
axis.MajorGridlineStyle = LineStyle.Solid;
axis.MajorGridlineColor = OxyColor.Parse("#767676");
axis.TickStyle = TickStyle.None;
}
public void SetTankLineGraph(
@ -35,30 +49,26 @@ namespace SmartAquaViewer.ViewModel
bool xIsTime = string.Equals(xField!.Name, "RecordedTime", StringComparison.OrdinalIgnoreCase);
Axis xAxis = xIsTime
? new DateTimeAxis
Axis xAxis;
if (xIsTime)
{
xAxis = new DateTimeAxis
{
Position = AxisPosition.Bottom,
Title = xField.Display,
StringFormat = "HH:mm:ss",
IntervalType = DateTimeIntervalType.Minutes,
MajorGridlineStyle = LineStyle.Solid,
MinorGridlineStyle = LineStyle.Dot,
}
: new LinearAxis
{
Position = AxisPosition.Bottom,
Title = xField.Display,
MajorGridlineStyle = LineStyle.Solid,
MinorGridlineStyle = LineStyle.Dot
IntervalType = DateTimeIntervalType.Minutes
};
var yAxis = new LinearAxis
}
else
{
Position = AxisPosition.Left,
Title = yField!.Display,
MajorGridlineStyle = LineStyle.Solid,
MinorGridlineStyle = LineStyle.Dot
};
xAxis = new LinearAxis();
}
ApplyCommonAxisSettings(xAxis, xField.Display, AxisPosition.Bottom);
var yAxis = new LinearAxis();
ApplyCommonAxisSettings(yAxis, yField!.Display, AxisPosition.Left);
yAxis.AxisTitleDistance = 10;
Model.Axes.Add(xAxis);
Model.Axes.Add(yAxis);

2
SmartAquaViewer/ViewModel/MonitoringViewModel.cs
Unescape View File

@ -19,6 +19,8 @@ namespace SmartAquaViewer.ViewModel
public string? Display { get; init; } // UI 표시명 (예: "DO (mg/L)")
public Type? DataType { get; init; } // typeof(double), typeof(DateTime) 등
public StepFieldKind Kind { get; init; }
public override string? ToString() => Display;
}
/// <summary>

Write Preview
Loading…
Cancel
Save