1
0
mirror of https://github.com/Artemis-RGB/Artemis synced 2025-12-13 05:48:35 +00:00
Artemis/src/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorView.xaml
Robert c401bc6525 Surface editor - Show LED colors in editor
Surface editor - Link to FAQ for missing layouts
2020-12-14 20:00:48 +01:00

286 lines
17 KiB
XML

<UserControl
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:s="https://github.com/canton7/Stylet"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:Converters="clr-namespace:Artemis.UI.Converters"
xmlns:models="clr-namespace:Artemis.Core;assembly=Artemis.Core"
x:Class="Artemis.UI.Screens.SurfaceEditor.SurfaceEditorView"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
<ResourceDictionary
Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
</ResourceDictionary.MergedDictionaries>
<Converters:InverseBooleanConverter x:Key="InverseBooleanConverter" />
</ResourceDictionary>
</UserControl.Resources>
<Grid Margin="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" MinWidth="100" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="{Binding SurfaceListWidth.Value, Mode=TwoWay}" MinWidth="100" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<materialDesign:PackIcon Grid.Column="0" Grid.RowSpan="2" Kind="AboutOutline" />
<TextBlock Grid.Row="0" Grid.Column="1">
The surface is a digital representation of your LED setup. Set this up accurately and effects will seamlessly move from one
device to the other.
</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1">
Are devices showing up as gray blocks and/or are LEDs in wrong place and not sure why?
<Run Text="Check out the" FontWeight="Bold" />
<Hyperlink Style="{StaticResource ArtemisHyperlink}"
RequestNavigate="{s:Action OpenHyperlink}"
FontWeight="Bold"
NavigateUri="https://wiki.artemis-rgb.com/faq#q-my-device-is-missing-an-image-and-the-leds-are-in-the-wrong-place-whats-wrong">
FAQ
</Hyperlink>
<Run Text="more info." FontWeight="Bold" />
</TextBlock>
</Grid>
<Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 10" />
</StackPanel>
<materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="1" Grid.Column="0"
VerticalAlignment="Stretch" Margin="0,0,5,0">
<Grid ClipToBounds="True"
Focusable="True"
FocusVisualStyle="{StaticResource FocusVisual}"
KeyUp="{s:Action EditorGridKeyUp}"
KeyDown="{s:Action EditorGridKeyDown}"
MouseWheel="{s:Action EditorGridMouseWheel}"
MouseUp="{s:Action EditorGridMouseClick}"
MouseDown="{s:Action EditorGridMouseClick}"
MouseMove="{s:Action EditorGridMouseMove}"
Cursor="{Binding Cursor}">
<Grid.Background>
<VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
<VisualBrush.Visual>
<Grid Width="25" Height="25">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0" Fill="Black" Opacity="0.15" />
<Rectangle Grid.Row="0" Grid.Column="1" />
<Rectangle Grid.Row="1" Grid.Column="0" />
<Rectangle Grid.Row="1" Grid.Column="1" Fill="Black" Opacity="0.15" />
</Grid>
</VisualBrush.Visual>
</VisualBrush>
</Grid.Background>
<Grid.Triggers>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="MultiSelectionPath" Storyboard.TargetProperty="Opacity">
<DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
<BeginStoryboard>
<Storyboard Storyboard.TargetName="MultiSelectionPath" Storyboard.TargetProperty="Opacity">
<DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Grid x:Name="EditorDisplayGrid">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}" ScaleY="{Binding PanZoomViewModel.Zoom}" />
<TranslateTransform X="{Binding PanZoomViewModel.PanX}" Y="{Binding PanZoomViewModel.PanY}" />
</TransformGroup>
</Grid.RenderTransform>
<ItemsControl ItemsSource="{Binding Devices}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style TargetType="{x:Type ContentPresenter}">
<Setter Property="Canvas.Left" Value="{Binding Device.X}" />
<Setter Property="Canvas.Top" Value="{Binding Device.Y}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ContentControl s:View.Model="{Binding}">
<ContentControl.ContextMenu>
<ContextMenu>
<MenuItem Header="Identify" Command="{s:Action IdentifyDevice}" CommandParameter="{Binding}">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="AlarmLight" />
</MenuItem.Icon>
</MenuItem>
<Separator />
<MenuItem Header="Bring to Front" Command="{s:Action BringToFront}" CommandParameter="{Binding}">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="ArrangeBringToFront" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Bring Forward" Command="{s:Action BringForward}" CommandParameter="{Binding}">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="ArrangeBringForward" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Send to Back" Command="{s:Action SendToBack}" CommandParameter="{Binding}">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="ArrangeSendToBack" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="Send Backward" Command="{s:Action SendBackward}" CommandParameter="{Binding}">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="ArrangeSendBackward" />
</MenuItem.Icon>
</MenuItem>
<Separator />
<!-- Stylet can't disable it for us here, do it ourselves -->
<MenuItem Header="Identify input"
Command="{s:Action DetectInput}"
CommandParameter="{Binding}"
IsEnabled="{Binding CanDetectInput}"
ToolTip="Teach Artemis which keypresses and/or button presses belong to this device">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="GestureDoubleTap" />
</MenuItem.Icon>
</MenuItem>
<MenuItem Header="View properties" Command="{s:Action ViewProperties}" CommandParameter="{Binding}">
<MenuItem.Icon>
<materialDesign:PackIcon Kind="Gear" />
</MenuItem.Icon>
</MenuItem>
</ContextMenu>
</ContentControl.ContextMenu>
</ContentControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
<!-- Multi-selection rectangle -->
<Path Data="{Binding SelectionRectangle}" Opacity="0"
Stroke="{DynamicResource PrimaryHueLightBrush}"
StrokeThickness="1"
x:Name="MultiSelectionPath"
IsHitTestVisible="False">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
</Path.Fill>
</Path>
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0, 0, 15, 15">
<Button Command="{s:Action AutoArrange}"
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
HorizontalAlignment="Right"
ToolTip="Apply auto-arrange"
VerticalAlignment="Bottom">
<materialDesign:PackIcon Kind="Wand" Height="24" Width="24" />
</Button>
<StackPanel Orientation="Vertical">
<Slider Margin="0,0,14,0"
Orientation="Vertical"
Minimum="10"
Maximum="400"
Height="100"
FocusVisualStyle="{x:Null}"
Value="{Binding PanZoomViewModel.ZoomPercentage}"
Style="{StaticResource MaterialDesignDiscreteSlider}" />
<Button Command="{s:Action ResetZoomAndPan}"
Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
HorizontalAlignment="Right"
ToolTip="Reset zoom &amp; position">
<materialDesign:PackIcon Kind="ImageFilterCenterFocus" Height="24" Width="24" />
</Button>
</StackPanel>
</StackPanel>
</Grid>
</materialDesign:Card>
<GridSplitter Grid.Column="1" Grid.Row="1" Width="5" HorizontalAlignment="Stretch" Cursor="SizeWE" />
<materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="1" Grid.Column="2" VerticalAlignment="Stretch" Margin="5,0,0,0">
<materialDesign:DialogHost Identifier="SurfaceListDialogHost" DialogTheme="Inherit" CloseOnClickAway="True">
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListBox Grid.Row="0" HorizontalContentAlignment="Stretch" ItemsSource="{Binding SurfaceConfigurations}" SelectedItem="{Binding SelectedSurface}">
<ListBox.Resources>
<DataTemplate DataType="{x:Type models:ArtemisSurface}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" ToolTip="{Binding Name}"
HorizontalAlignment="Left" VerticalAlignment="Center" />
<Button Grid.Column="1"
Command="{s:Action DeleteSurfaceConfiguration}"
CommandParameter="{Binding}"
IsEnabled="{Binding IsActive, Converter={StaticResource InverseBooleanConverter}}"
Style="{StaticResource MaterialDesignIconForegroundButton}"
ToolTip="Delete layout configuration"
HorizontalAlignment="Right">
<materialDesign:PackIcon Kind="Trashcan" />
</Button>
</Grid>
</DataTemplate>
</ListBox.Resources>
</ListBox>
<Button Grid.Row="0"
Style="{StaticResource MaterialDesignFloatingActionButton}"
Command="{s:Action AddSurfaceConfiguration}"
Margin="0 0 10 10"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
ToolTip="Add a new surface layout">
<materialDesign:PackIcon Kind="Add" Height="24" Width="24" />
</Button>
</Grid>
</materialDesign:DialogHost>
</materialDesign:Card>
<TextBlock Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Style="{StaticResource MaterialDesignCaptionTextBlock}" Margin="0,5,0,0">
<InlineUIContainer>
<materialDesign:PackIcon Kind="Keyboard" Margin="0 0 0 -3" />
</InlineUIContainer>
<Run Text="Hold " /><Run FontWeight="Bold" Text="shift" />
<Run Text="or click and drag to select multiple devices at once. To move around the surface hold down" />
<Run FontWeight="Bold" Text="ctrl" />
<Run Text="and drag." />
</TextBlock>
</Grid>
</UserControl>