Added UI elements borrowed from DarthAffe

Added a WIP of profile classes
2026-11-11 19:36:28 +00:00 · 2018-01-13 00:06:28 +01:00
1 parent 4f146865a4
commit 6eefa733b4
@@ -36,6 +36,10 @@
                <ResourceDictionary
                    Source="pack://application:,,,/MaterialDesignThemes.MahApps;component/Themes/MaterialDesignTheme.MahApps.Flyout.xaml" />

+                <!-- Artemis -->
+                <ResourceDictionary Source="Styles/Visualizers/RGBSurfaceVisualizer.xaml"></ResourceDictionary>
+                <ResourceDictionary Source="Styles/Visualizers/RGBDeviceVisualizer.xaml"></ResourceDictionary>
+                <ResourceDictionary Source="Styles/Visualizers/LedVisualizer.xaml"></ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>

            <!-- MahApps Brushes -->
@@ -37,7 +37,7 @@
  </PropertyGroup>
  <ItemGroup>
    <Reference Include="Castle.Core, Version=4.0.0.0, Culture=neutral, PublicKeyToken=407dd0808d44fbdc, processorArchitecture=MSIL">
-      <HintPath>..\packages\Castle.Core.4.2.0\lib\net45\Castle.Core.dll</HintPath>
+      <HintPath>..\packages\Castle.Core.4.2.1\lib\net45\Castle.Core.dll</HintPath>
    </Reference>
    <Reference Include="MahApps.Metro, Version=1.5.0.23, Culture=neutral, PublicKeyToken=f4fb5a3c4d1e5b4f, processorArchitecture=MSIL">
      <HintPath>..\packages\MahApps.Metro.1.5.0\lib\net45\MahApps.Metro.dll</HintPath>
@@ -92,6 +92,10 @@
      <SubType>Designer</SubType>
    </ApplicationDefinition>
    <Compile Include="Bootstrapper.cs" />
+    <Compile Include="Controls\Visualizers\LedVisualizer.cs" />
+    <Compile Include="Controls\Visualizers\RGBDeviceVisualizer.cs" />
+    <Compile Include="Controls\Visualizers\RGBSurfaceVisualizer.cs" />
+    <Compile Include="Converters\ColorToSolidColorBrushConverter.cs" />
    <Compile Include="Ninject\UIModule.cs" />
    <Compile Include="Services\Interfaces\IArtemisUIService.cs" />
    <Compile Include="Stylet\ArtemisViewManager.cs" />
@@ -106,6 +110,18 @@
      <SubType>Code</SubType>
    </Compile>
    <Compile Include="ViewModels\SettingsViewModel.cs" />
+    <Page Include="Styles\Visualizers\LedVisualizer.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Styles\Visualizers\RGBDeviceVisualizer.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
+    <Page Include="Styles\Visualizers\RGBSurfaceVisualizer.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
    <Page Include="Views\HomeView.xaml">
      <SubType>Designer</SubType>
      <Generator>MSBuild:Compile</Generator>
@@ -149,6 +165,58 @@
    </None>
  </ItemGroup>
  <ItemGroup>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Brushes\RGB.NET.Brushes.csproj">
+      <Project>{347c5f0f-f490-4dec-9c1c-6e84750d838d}</Project>
+      <Name>RGB.NET.Brushes</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Core\RGB.NET.Core.csproj">
+      <Project>{5a4f9a75-75fe-47cd-90e5-914d5b20d232}</Project>
+      <Name>RGB.NET.Core</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Decorators\RGB.NET.Decorators.csproj">
+      <Project>{7012c431-244a-453f-b7fd-59e030cdbc44}</Project>
+      <Name>RGB.NET.Decorators</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.Asus\RGB.NET.Devices.Asus.csproj">
+      <Project>{4f2f3fbd-a1e4-4968-a2ad-0514959e5e59}</Project>
+      <Name>RGB.NET.Devices.Asus</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.CoolerMaster\RGB.NET.Devices.CoolerMaster.csproj">
+      <Project>{85609427-d433-44e2-a249-ce890b66d845}</Project>
+      <Name>RGB.NET.Devices.CoolerMaster</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.Corsair\RGB.NET.Devices.Corsair.csproj">
+      <Project>{dda8c4c2-8abf-4fa0-9af9-c47ad0bfe47d}</Project>
+      <Name>RGB.NET.Devices.Corsair</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.Logitech\RGB.NET.Devices.Logitech.csproj">
+      <Project>{e7b2f174-fcc6-4fc7-9970-3138b5f4c921}</Project>
+      <Name>RGB.NET.Devices.Logitech</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.Msi\RGB.NET.Devices.Msi.csproj">
+      <Project>{4efd77c7-fdb4-4c6b-970c-0ef66d24be09}</Project>
+      <Name>RGB.NET.Devices.Msi</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.Novation\RGB.NET.Devices.Novation.csproj">
+      <Project>{db2911f6-404c-4bc8-b35f-232a7450755f}</Project>
+      <Name>RGB.NET.Devices.Novation</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Devices.Razer\RGB.NET.Devices.Razer.csproj">
+      <Project>{24ff4acb-d679-4b2d-86d4-50ab6c02d816}</Project>
+      <Name>RGB.NET.Devices.Razer</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Groups\RGB.NET.Groups.csproj">
+      <Project>{2a39f859-aad0-4c16-94f8-78057820b376}</Project>
+      <Name>RGB.NET.Groups</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Input.Corsair\RGB.NET.Input.Corsair.csproj">
+      <Project>{f905c418-76bb-4ba6-88ab-0793bc2681d3}</Project>
+      <Name>RGB.NET.Input.Corsair</Name>
+    </ProjectReference>
+    <ProjectReference Include="..\..\..\RGB.NET\RGB.NET.Input\RGB.NET.Input.csproj">
+      <Project>{e60c3c6f-903f-4d80-99d0-7a1e50af5a9d}</Project>
+      <Name>RGB.NET.Input</Name>
+    </ProjectReference>
    <ProjectReference Include="..\Artemis.Core\Artemis.Core.csproj">
      <Project>{9b811f9b-86b9-4771-87af-72bae7078a36}</Project>
      <Name>Artemis.Core</Name>
@@ -171,17 +239,16 @@
  <ItemGroup>
    <Folder Include="Controls\ColorPicker\" />
    <Folder Include="Controls\GradientPicker\" />
-    <Folder Include="Controls\RgbDevice\" />
  </ItemGroup>
  <ItemGroup>
    <Resource Include="FodyWeavers.xml" />
  </ItemGroup>
  <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
-  <Import Project="..\packages\Fody.2.3.8\build\net452\Fody.targets" Condition="Exists('..\packages\Fody.2.3.8\build\net452\Fody.targets')" />
+  <Import Project="..\packages\Fody.2.3.17\build\net452\Fody.targets" Condition="Exists('..\packages\Fody.2.3.17\build\net452\Fody.targets')" />
  <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
    <PropertyGroup>
      <ErrorText>This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them.  For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}.</ErrorText>
    </PropertyGroup>
-    <Error Condition="!Exists('..\packages\Fody.2.3.8\build\net452\Fody.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Fody.2.3.8\build\net452\Fody.targets'))" />
+    <Error Condition="!Exists('..\packages\Fody.2.3.17\build\net452\Fody.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Fody.2.3.17\build\net452\Fody.targets'))" />
  </Target>
 </Project>
@@ -0,0 +1,36 @@
+using System.Windows;
+using System.Windows.Controls;
+using RGB.NET.Core;
+
+namespace Artemis.UI.Controls.Visualizers
+{
+    /// <inheritdoc />
+    /// <summary>
+    ///     Visualizes a <see cref="T:RGB.NET.Core.Led" /> in an wpf-application.
+    /// </summary>
+    public class LedVisualizer : Control
+    {
+        #region DependencyProperties
+
+        // ReSharper disable InconsistentNaming
+
+        /// <summary>
+        ///     Backing-property for the <see cref="Led" />-property.
+        /// </summary>
+        public static readonly DependencyProperty LedProperty = DependencyProperty.Register(
+            "Led", typeof(Led), typeof(LedVisualizer), new PropertyMetadata(default(Led)));
+
+        /// <summary>
+        ///     Gets or sets the <see cref="RGB.NET.Core.Led" /> to visualize.
+        /// </summary>
+        public Led Led
+        {
+            get => (Led) GetValue(LedProperty);
+            set => SetValue(LedProperty, value);
+        }
+
+        // ReSharper restore InconsistentNaming
+
+        #endregion
+    }
+}
@@ -0,0 +1,78 @@
+using System.Windows;
+using System.Windows.Controls;
+using RGB.NET.Core;
+
+namespace Artemis.UI.Controls.Visualizers
+{
+    /// <inheritdoc />
+    /// <summary>
+    /// Visualizes a <see cref="T:RGB.NET.Core.IRGBDevice" /> in an wpf-application.
+    /// </summary>
+    [TemplatePart(Name = PART_CANVAS, Type = typeof(Canvas))]
+    public class RGBDeviceVisualizer : Control
+    {
+        #region Constants
+
+        private const string PART_CANVAS = "PART_Canvas";
+
+        #endregion
+
+        #region Properties & Fields
+
+        private Canvas _canvas;
+
+        #endregion
+
+        #region DependencyProperties
+
+        // ReSharper disable InconsistentNaming
+
+        /// <summary>
+        /// Backing-property for the <see cref="Device"/>-property.
+        /// </summary>
+        public static readonly DependencyProperty DeviceProperty = DependencyProperty.Register(
+            "Device", typeof(IRGBDevice), typeof(RGBDeviceVisualizer), new PropertyMetadata(default(IRGBDevice), DeviceChanged));
+
+        /// <summary>
+        /// Gets or sets the <see cref="IRGBDevice"/> to visualize.
+        /// </summary>
+        public IRGBDevice Device
+        {
+            get => (IRGBDevice) GetValue(DeviceProperty);
+            set => SetValue(DeviceProperty, value);
+        }
+
+        // ReSharper restore InconsistentNaming
+
+        #endregion
+
+        #region Methods
+
+        /// <inheritdoc />
+        public override void OnApplyTemplate()
+        {
+            _canvas = (Canvas) GetTemplateChild(PART_CANVAS);
+
+            LayoutLeds();
+        }
+
+        private static void DeviceChanged(DependencyObject dependencyObject, DependencyPropertyChangedEventArgs dependencyPropertyChangedEventArgs)
+        {
+            ((RGBDeviceVisualizer) dependencyObject).LayoutLeds();
+        }
+
+        private void LayoutLeds()
+        {
+            if (_canvas == null) return;
+
+            _canvas.Children.Clear();
+
+            if (Device == null) return;
+
+            foreach (Led led in Device)
+                _canvas.Children.Add(new LedVisualizer {Led = led});
+        }
+
+        #endregion
+    }
+}
@@ -0,0 +1,99 @@
+using System.Collections.Generic;
+using System.Windows;
+using System.Windows.Controls;
+using RGB.NET.Core;
+
+namespace Artemis.UI.Controls.Visualizers
+{
+    /// <inheritdoc />
+    /// <summary>
+    /// Visualizes the <see cref="T:RGB.NET.Core.RGBSurface" /> in an wpf-application.
+    /// </summary>
+    [TemplatePart(Name = PART_CANVAS, Type = typeof(Canvas))]
+    public class RGBSurfaceVisualizer : Control
+    {
+        #region Constants
+
+        private const string PART_CANVAS = "PART_Canvas";
+
+        #endregion
+
+        #region Properties & Fields
+
+        private RGBSurface _surface;
+        private Canvas _canvas;
+
+        //TODO DarthAffe 17.06.2017: This is ugly - redesign how device connect/disconnect is generally handled!
+        private readonly List<IRGBDevice> _newDevices = new List<IRGBDevice>();
+
+        #endregion
+
+        #region Constructors
+
+        /// <inheritdoc />
+        /// <summary>
+        /// Initializes a new instance of the <see cref="T:RGB.NET.WPF.Controls.RGBSurfaceVisualizer" /> class.
+        /// </summary>
+        public RGBSurfaceVisualizer()
+        {
+            this.Loaded += OnLoaded;
+            this.Unloaded += OnUnloaded;
+        }
+
+        private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
+        {
+            _surface = RGBSurface.Instance;
+
+            _surface.SurfaceLayoutChanged += RGBSurfaceOnSurfaceLayoutChanged;
+            foreach (IRGBDevice device in _surface.Devices)
+                _newDevices.Add(device);
+
+            UpdateSurface();
+        }
+
+        private void OnUnloaded(object sender, RoutedEventArgs routedEventArgs)
+        {
+            _surface.SurfaceLayoutChanged -= RGBSurfaceOnSurfaceLayoutChanged;
+            _canvas?.Children.Clear();
+            _newDevices.Clear();
+        }
+
+        private void RGBSurfaceOnSurfaceLayoutChanged(SurfaceLayoutChangedEventArgs args)
+        {
+            if (args.DeviceAdded)
+                foreach (IRGBDevice device in args.Devices)
+                    _newDevices.Add(device);
+
+            UpdateSurface();
+        }
+
+        #endregion
+
+        #region Methods
+
+        /// <inheritdoc />
+        public override void OnApplyTemplate()
+        {
+            _canvas?.Children.Clear();
+            _canvas = (Canvas)GetTemplateChild(PART_CANVAS);
+            UpdateSurface();
+        }
+
+        private void UpdateSurface()
+        {
+            if ((_canvas == null) || (_surface == null)) return;
+
+            if (_newDevices.Count > 0)
+            {
+                foreach (IRGBDevice device in _newDevices)
+                    _canvas.Children.Add(new RGBDeviceVisualizer { Device = device });
+                _newDevices.Clear();
+            }
+
+            _canvas.Width = _surface.SurfaceRectangle.Size.Width;
+            _canvas.Height = _surface.SurfaceRectangle.Size.Height;
+        }
+
+        #endregion
+    }
+}
@@ -0,0 +1,31 @@
+using System;
+using System.Globalization;
+using System.Windows.Data;
+using System.Windows.Media;
+
+namespace Artemis.UI.Converters
+{
+    /// <inheritdoc />
+    /// <summary>
+    /// Converts <see cref="T:RGB.NET.Core.Color" /> into <see cref="T:System.Windows.Media.SolidColorBrush" />.
+    /// </summary>
+    [ValueConversion(typeof(RGB.NET.Core.Color), typeof(SolidColorBrush))]
+    public class ColorToSolidColorBrushConverter : IValueConverter
+    {
+        /// <inheritdoc />
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return new SolidColorBrush(!(value is RGB.NET.Core.Color color)
+                ? Color.FromArgb(0, 0, 0, 0)
+                : Color.FromArgb(color.A, color.R, color.G, color.B));
+        }
+
+        /// <inheritdoc />
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            return !(value is SolidColorBrush brush)
+                ? RGB.NET.Core.Color.Transparent
+                : new RGB.NET.Core.Color(brush.Color.A, brush.Color.R, brush.Color.G, brush.Color.B);
+        }
+    }
+}
@@ -0,0 +1,95 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:Artemis.UI.Controls.Visualizers"
+                    xmlns:converters="clr-namespace:Artemis.UI.Converters">
+    
+    <converters:ColorToSolidColorBrushConverter x:Key="ConverterColorToSolidColorBrush" />
+
+    <ControlTemplate x:Key="ControlTemplateLedRectangle" TargetType="{x:Type controls:LedVisualizer}">
+        <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+            <Border.Background>
+                <ImageBrush AlignmentX="Center" AlignmentY="Center"
+                            Stretch="Fill"
+                            ImageSource="{Binding Led.Image, RelativeSource={RelativeSource TemplatedParent}}" />
+            </Border.Background>
+
+            <Rectangle VerticalAlignment="Stretch"
+                       HorizontalAlignment="Stretch"
+                       Opacity="0.5"
+                       Stroke="{TemplateBinding BorderBrush}"
+                       StrokeThickness="1"
+                       Fill="{TemplateBinding Background}" />
+        </Border>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="ControlTemplateLedCircle" TargetType="{x:Type controls:LedVisualizer}">
+        <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+            <Border.Background>
+                <ImageBrush AlignmentX="Center" AlignmentY="Center"
+                            Stretch="Fill"
+                            ImageSource="{Binding Led.Image, RelativeSource={RelativeSource TemplatedParent}}" />
+            </Border.Background>
+
+            <Ellipse VerticalAlignment="Stretch"
+                     HorizontalAlignment="Stretch"
+                     Opacity="0.5"
+                     Stroke="{TemplateBinding BorderBrush}"
+                     StrokeThickness="1"
+                     Fill="{TemplateBinding Background}" />
+        </Border>
+    </ControlTemplate>
+
+    <ControlTemplate x:Key="ControlTemplateLedCustom" TargetType="{x:Type controls:LedVisualizer}">
+        <Border x:Name="Border" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+            <Border.Background>
+                <ImageBrush AlignmentX="Center" AlignmentY="Center"
+                            Stretch="Fill"
+                            ImageSource="{Binding Led.Image, RelativeSource={RelativeSource TemplatedParent}}" />
+            </Border.Background>
+
+            <Path Opacity="0.5"
+                  Clip="{Binding Data, RelativeSource={RelativeSource Self}}"
+                  Stroke="{TemplateBinding BorderBrush}"
+                  StrokeThickness="2" 
+                  Fill="{TemplateBinding Background}">
+                <Path.Data>
+                    <PathGeometry Figures="{Binding Led.ShapeData, RelativeSource={RelativeSource TemplatedParent}}">
+                        <PathGeometry.Transform>
+                            <ScaleTransform ScaleX="{Binding ActualWidth, ElementName=Border}" 
+                                            ScaleY="{Binding ActualHeight, ElementName=Border}" />
+                        </PathGeometry.Transform>
+                    </PathGeometry>
+                </Path.Data>
+            </Path>
+        </Border>
+    </ControlTemplate>
+
+    <Style x:Key="StyleLedVisualizer" TargetType="{x:Type controls:LedVisualizer}">
+        <Setter Property="Width" Value="{Binding Led.LedRectangle.Size.Width, RelativeSource={RelativeSource Self}}" />
+        <Setter Property="Height" Value="{Binding Led.LedRectangle.Size.Height, RelativeSource={RelativeSource Self}}" />
+        <Setter Property="Canvas.Left" Value="{Binding Led.LedRectangle.Location.X, RelativeSource={RelativeSource Self}}" />
+        <Setter Property="Canvas.Top" Value="{Binding Led.LedRectangle.Location.Y, RelativeSource={RelativeSource Self}}" />
+
+        <Setter Property="BorderBrush" Value="#000000" />
+        <Setter Property="Background" Value="{Binding Led.Color, RelativeSource={RelativeSource Self}, 
+                                                      Converter={StaticResource ConverterColorToSolidColorBrush}}" />
+
+        <Setter Property="Template" Value="{StaticResource ControlTemplateLedRectangle}" />
+
+        <Style.Triggers>
+            <Trigger Property="IsMouseOver" Value="True">
+                <Setter Property="BorderBrush" Value="#FFFFFF" />
+            </Trigger>
+
+            <DataTrigger Binding="{Binding Led.Shape, RelativeSource={RelativeSource Self}}" Value="Circle">
+                <Setter Property="Template" Value="{StaticResource ControlTemplateLedCircle}" />
+            </DataTrigger>
+
+            <DataTrigger Binding="{Binding Led.Shape, RelativeSource={RelativeSource Self}}" Value="Custom">
+                <Setter Property="Template" Value="{StaticResource ControlTemplateLedCustom}" />
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+    <Style TargetType="{x:Type controls:LedVisualizer}" BasedOn="{StaticResource StyleLedVisualizer}" />
+    
+</ResourceDictionary>
@@ -0,0 +1,43 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:Artemis.UI.Controls.Visualizers">
+    
+    <Style x:Key="StyleRGBDeviceVisualizer" TargetType="{x:Type controls:RGBDeviceVisualizer}">
+        <Setter Property="Width" Value="{Binding Device.Size.Width, RelativeSource={RelativeSource Self}}" />
+        <Setter Property="Height" Value="{Binding Device.Size.Height, RelativeSource={RelativeSource Self}}" />
+        <Setter Property="Canvas.Left" Value="{Binding Device.Location.X, RelativeSource={RelativeSource Self}}" />
+        <Setter Property="Canvas.Top" Value="{Binding Device.Location.Y, RelativeSource={RelativeSource Self}}" />
+
+        <Setter Property="BorderThickness" Value="2" />
+        <Setter Property="BorderBrush" Value="#202020" />
+        <!--<Setter Property="Background" Value="#3A3A3A" />-->
+        <Setter Property="Background">
+            <Setter.Value>
+                <ImageBrush AlignmentX="Left" AlignmentY="Top"
+                            Stretch="Uniform"
+                            ImageSource="{Binding Device.DeviceInfo.Image, RelativeSource={RelativeSource AncestorType=controls:RGBDeviceVisualizer}}" />
+            </Setter.Value>
+        </Setter>
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type controls:RGBDeviceVisualizer}">
+                    <Grid VerticalAlignment="Stretch"
+                          HorizontalAlignment="Stretch" 
+                          Background="{TemplateBinding Background}">
+                        <Canvas x:Name="PART_Canvas" 
+                                VerticalAlignment="Stretch"
+                                HorizontalAlignment="Stretch" />
+
+                        <Border VerticalAlignment="Stretch"
+                                HorizontalAlignment="Stretch"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}" 
+                                Background="{x:Null}" />
+                    </Grid>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style TargetType="{x:Type controls:RGBDeviceVisualizer}" BasedOn="{StaticResource StyleRGBDeviceVisualizer}" />
+</ResourceDictionary>
@@ -0,0 +1,44 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:visualizers="clr-namespace:Artemis.UI.Controls.Visualizers">
+
+    <Style x:Key="StyleRGBSurfaceVisualizer" TargetType="{x:Type visualizers:RGBSurfaceVisualizer}">
+        <Setter Property="VerticalAlignment"
+                Value="Stretch" />
+        <Setter Property="HorizontalAlignment"
+                Value="Stretch" />
+        <Setter Property="VerticalContentAlignment"
+                Value="Top" />
+        <Setter Property="HorizontalContentAlignment"
+                Value="Left" />
+
+        <Setter Property="Background"
+                Value="{x:Null}" />
+        <Setter Property="BorderThickness"
+                Value="0" />
+        <Setter Property="BorderBrush"
+                Value="{x:Null}" />
+
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type visualizers:RGBSurfaceVisualizer}">
+                    <ScrollViewer VerticalAlignment="{TemplateBinding VerticalAlignment}"
+                                  HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
+                                  VerticalScrollBarVisibility="Auto"
+                                  HorizontalScrollBarVisibility="Auto">
+                        <Border VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
+                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
+                                BorderBrush="{TemplateBinding BorderBrush}"
+                                BorderThickness="{TemplateBinding BorderThickness}"
+                                Background="{TemplateBinding Background}">
+                            <Canvas x:Name="PART_Canvas"
+                                    Background="Transparent" />
+                        </Border>
+                    </ScrollViewer>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+    <Style TargetType="{x:Type visualizers:RGBSurfaceVisualizer}" BasedOn="{StaticResource StyleRGBSurfaceVisualizer}" />
+
+</ResourceDictionary>
@@ -1,10 +1,37 @@
-using Artemis.UI.ViewModels.Interfaces;
+using System.Linq;
+using Artemis.Core.Services.Interfaces;
+using Artemis.UI.ViewModels.Interfaces;
+using RGB.NET.Core;
 using Stylet;

 namespace Artemis.UI.ViewModels
 {
    public class SettingsViewModel : Screen, ISettingsViewModel
    {
+        private readonly IRgbService _rgbService;
+
+        public SettingsViewModel(IRgbService rgbService)
+        {
+            _rgbService = rgbService;
+            _rgbService.FinishedLoadedDevices += (sender, args) => SetTestDevice();
+        }
+
+        protected override void OnActivate()
+        {
+            SetTestDevice();
+            base.OnActivate();
+        }
+
+        private void SetTestDevice()
+        {
+            if (!IsActive)
+                return;
+
+            if (!_rgbService.LoadingDevices)
+                TestDevice = _rgbService.Surface.Devices.FirstOrDefault(d => d.DeviceInfo.DeviceType == RGBDeviceType.Keyboard);
+        }
+
+        public IRGBDevice TestDevice { get; set; }
        public string Title => "Settings";
    }
 }
@@ -4,7 +4,10 @@
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:Artemis.UI.Views"
+             xmlns:visualizers="clr-namespace:Artemis.UI.Controls.Visualizers"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
-    <Grid />
+    <Grid>
+        <visualizers:RGBSurfaceVisualizer></visualizers:RGBSurfaceVisualizer>
+    </Grid>
 </UserControl>
@@ -1,8 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
-
 <packages>
-  <package id="Castle.Core" version="4.2.0" targetFramework="net461" />
-  <package id="Fody" version="2.3.8" targetFramework="net461" developmentDependency="true" />
+  <package id="Castle.Core" version="4.2.1" targetFramework="net461" />
+  <package id="Fody" version="2.3.17" targetFramework="net461" developmentDependency="true" />
  <package id="MahApps.Metro" version="1.5.0" targetFramework="net461" />
  <package id="MaterialDesignColors" version="1.1.3" targetFramework="net461" />
  <package id="MaterialDesignThemes" version="2.3.1.953" targetFramework="net461" />