Device properties - Implemented first tab

src/Artemis.UI.Avalonia.Shared/Controls/DeviceVisualizer.cs

@@ -57,14 +57,14 @@ namespace Artemis.UI.Avalonia.Shared.Controls
             {
                 // Scale the visualization in the desired bounding box
                 if (Bounds.Width > 0 && Bounds.Height > 0)
-                    boundsPush = drawingContext.PushPostTransform(Matrix.CreateScale(scale, scale));
+                    boundsPush = drawingContext.PushPreTransform(Matrix.CreateScale(scale, scale));
 
                 // Apply device rotation
-                using DrawingContext.PushedState translationPush = drawingContext.PushPostTransform(Matrix.CreateTranslation(0 - _deviceBounds.Left, 0 - _deviceBounds.Top));
+                using DrawingContext.PushedState translationPush = drawingContext.PushPreTransform(Matrix.CreateTranslation(0 - _deviceBounds.Left, 0 - _deviceBounds.Top));
-                using DrawingContext.PushedState rotationPush = drawingContext.PushPostTransform(Matrix.CreateRotation(Device.Rotation));
+                using DrawingContext.PushedState rotationPush = drawingContext.PushPreTransform(Matrix.CreateRotation(Matrix.ToRadians(Device.Rotation)));
 
                 // Apply device scale
-                using DrawingContext.PushedState scalePush = drawingContext.PushPostTransform(Matrix.CreateScale(Device.Scale, Device.Scale));
+                using DrawingContext.PushedState scalePush = drawingContext.PushPreTransform(Matrix.CreateScale(Device.Scale, Device.Scale));
 
                 // Render device and LED images 
                 if (_deviceImage != null)

src/Artemis.UI.Avalonia.Shared/Converters/ColorToSKColorConverter.cs

@@ -0,0 +1,38 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using FluentAvalonia.UI.Media;
+using SkiaSharp;
+
+namespace Artemis.UI.Avalonia.Shared.Converters
+{
+    /// <summary>
+    ///     Converts <see cref="T:Avalonia.Media.Color" /> into <see cref="T:SkiaSharp.SKColor" />.
+    /// </summary>
+    public class ColorToSKColorConverter : IValueConverter
+    {
+        /// <inheritdoc />
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is Color avaloniaColor)
+                return new SKColor(avaloniaColor.R, avaloniaColor.G, avaloniaColor.B, avaloniaColor.A);
+            if (value is Color2 fluentAvaloniaColor)
+                return new SKColor(fluentAvaloniaColor.R, fluentAvaloniaColor.G, fluentAvaloniaColor.B, fluentAvaloniaColor.A);
+
+            return SKColor.Empty;
+        }
+
+        /// <inheritdoc />
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            Color result = new(0, 0, 0, 0);
+            if (value is SKColor skColor)
+                result = new Color(skColor.Alpha, skColor.Red, skColor.Green, skColor.Blue);
+
+            if (targetType == typeof(Color2))
+                return (Color2) result;
+            return result;
+        }
+    }
+}

src/Artemis.UI.Avalonia.Shared/Converters/SKColorToColorConverter.cs

@@ -0,0 +1,38 @@
+using System;
+using System.Globalization;
+using Avalonia.Data.Converters;
+using Avalonia.Media;
+using FluentAvalonia.UI.Media;
+using SkiaSharp;
+
+namespace Artemis.UI.Avalonia.Shared.Converters
+{
+    /// <summary>
+    ///     Converts <see cref="T:SkiaSharp.SKColor" /> into <see cref="T:Avalonia.Media.Color" />.
+    /// </summary>
+    public class SKColorToColorConverter : IValueConverter
+    {
+        /// <inheritdoc />
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            Color result = new(0, 0, 0, 0);
+            if (value is SKColor skColor)
+                result = new Color(skColor.Alpha, skColor.Red, skColor.Green, skColor.Blue);
+
+            if (targetType == typeof(Color2))
+                return (Color2) result;
+            return result;
+        }
+
+        /// <inheritdoc />
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            if (value is Color avaloniaColor)
+                return new SKColor(avaloniaColor.R, avaloniaColor.G, avaloniaColor.B, avaloniaColor.A);
+            if (value is Color2 fluentAvaloniaColor)
+                return new SKColor(fluentAvaloniaColor.R, fluentAvaloniaColor.G, fluentAvaloniaColor.B, fluentAvaloniaColor.A);
+
+            return SKColor.Empty;
+        }
+    }
+}

src/Artemis.UI.Avalonia.Shared/Services/Builders/NotificationBuilder.cs

@@ -10,7 +10,7 @@ namespace Artemis.UI.Avalonia.Shared.Services.Builders
     {
         private readonly InfoBar _infoBar;
         private readonly Window _parent;
-        private TimeSpan _timeout = TimeSpan.FromSeconds(3);
+        private TimeSpan _timeout = TimeSpan.FromSeconds(5);
 
         public NotificationBuilder(Window parent)
         {

src/Artemis.UI.Avalonia.Shared/Styles/InfoBar.axaml

@@ -10,10 +10,19 @@
 
     <!-- Add Styles Here -->
     <Style Selector="controls|InfoBar.notification-info-bar">
+        <Setter Property="Opacity" Value="0" />
         <Setter Property="MaxWidth" Value="600" />
         <Setter Property="Margin" Value="15"/>
-        <Setter Property="Background" Value="#75000000"/>
+        <Setter Property="Background" Value="#25a3a3a3"/>
         <Setter Property="VerticalAlignment" Value="Bottom" />
         <Setter Property="HorizontalAlignment" Value="Right" />
+        <Setter Property="Transitions">
+            <Transitions>
+                <DoubleTransition Property="Opacity" Duration="0:0:0.2"/>
+            </Transitions>
+        </Setter>
+    </Style>
+    <Style Selector="controls|InfoBar.notification-info-bar[IsOpen=True]">
+        <Setter Property="Opacity" Value="1" />
     </Style>
 </Styles>

src/Artemis.UI.Avalonia/Ninject/Factories/IVMFactory.cs

@@ -1,4 +1,5 @@
-using Artemis.Core;
+using System.Collections.ObjectModel;
+using Artemis.Core;
 using Artemis.UI.Avalonia.Screens.Device.ViewModels;
 using Artemis.UI.Avalonia.Screens.Root.ViewModels;
 using Artemis.UI.Avalonia.Screens.SurfaceEditor.ViewModels;
@@ -13,6 +14,10 @@ namespace Artemis.UI.Avalonia.Ninject.Factories
     public interface IDeviceVmFactory : IVmFactory
     {
         DevicePropertiesViewModel DevicePropertiesViewModel(ArtemisDevice device);
+        DevicePropertiesTabViewModel DevicePropertiesTabViewModel(ArtemisDevice device);
+        DeviceInfoTabViewModel DeviceInfoTabViewModel(ArtemisDevice device);
+        DeviceLedsTabViewModel DeviceLedsTabViewModel(ArtemisDevice device, ObservableCollection<ArtemisLed> selectedLeds);
+        InputMappingsTabViewModel InputMappingsTabViewModel(ArtemisDevice device, ObservableCollection<ArtemisLed> selectedLeds);
     }
 
     public interface ISidebarVmFactory : IVmFactory

src/Artemis.UI.Avalonia/Screens/Device/ViewModels/DeviceInfoTabViewModel.cs

@@ -10,7 +10,7 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
         public DeviceInfoTabViewModel(ArtemisDevice device)
         {
             Device = device;
-            DisplayName = "INFO";
+            DisplayName = "Info";
 
             DefaultLayoutPath = Device.DeviceProvider.LoadLayout(Device).FilePath;
         }

src/Artemis.UI.Avalonia/Screens/Device/ViewModels/DeviceLedsTabViewModel.cs

@@ -11,17 +11,17 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
 {
     public class DeviceLedsTabViewModel : ActivatableViewModelBase
     {
-        private readonly DevicePropertiesViewModel _devicePropertiesViewModel;
+        private readonly ObservableCollection<ArtemisLed> _selectedLeds;
 
-        public DeviceLedsTabViewModel(ArtemisDevice device, DevicePropertiesViewModel devicePropertiesViewModel)
+        public DeviceLedsTabViewModel(ArtemisDevice device, ObservableCollection<ArtemisLed> selectedLeds)
         {
-            _devicePropertiesViewModel = devicePropertiesViewModel;
+            _selectedLeds = selectedLeds;
 
             Device = device;
-            DisplayName = "LEDS";
+            DisplayName = "LEDs";
-            LedViewModels = new ObservableCollection<DeviceLedsTabLedViewModel>(Device.Leds.Select(l => new DeviceLedsTabLedViewModel(l, _devicePropertiesViewModel.SelectedLeds)));
+            LedViewModels = new ObservableCollection<DeviceLedsTabLedViewModel>(Device.Leds.Select(l => new DeviceLedsTabLedViewModel(l, _selectedLeds)));
 
-            this.WhenActivated(disposables => _devicePropertiesViewModel.SelectedLeds.ToObservableChangeSet().Subscribe(_ => UpdateSelectedLeds()).DisposeWith(disposables));
+            this.WhenActivated(disposables => _selectedLeds.ToObservableChangeSet().Subscribe(_ => UpdateSelectedLeds()).DisposeWith(disposables));
         }
 
         public ArtemisDevice Device { get; }

src/Artemis.UI.Avalonia/Screens/Device/ViewModels/DevicePropertiesTabViewModel.cs

@@ -1,11 +1,11 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.ComponentModel;
 using System.Threading.Tasks;
 using Artemis.Core;
 using Artemis.Core.Services;
 using Artemis.UI.Avalonia.Shared.Services.Builders;
 using Artemis.UI.Avalonia.Shared.Services.Interfaces;
-using FluentAvalonia.UI.Controls;
 using ReactiveUI;
 using SkiaSharp;
 
@@ -18,9 +18,9 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
         private readonly float _initialBlueScale;
         private readonly float _initialGreenScale;
         private readonly float _initialRedScale;
+        private readonly INotificationService _notificationService;
         private readonly IRgbService _rgbService;
         private readonly IWindowService _windowService;
-        private readonly INotificationService _notificationService;
         private float _blueScale;
         private SKColor _currentColor;
         private bool _displayOnDevices;
@@ -31,6 +31,12 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
         private int _x;
         private int _y;
 
+#pragma warning disable CS8618 // Design-time constructor
+        public DevicePropertiesTabViewModel()
+        {
+        }
+#pragma warning restore CS8618
+
         public DevicePropertiesTabViewModel(ArtemisDevice device, ICoreService coreService, IRgbService rgbService, IWindowService windowService, INotificationService notificationService)
         {
             _coreService = coreService;
@@ -40,7 +46,7 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
             _categories = new List<DeviceCategory>(device.Categories);
 
             Device = device;
-            DisplayName = "PROPERTIES";
+            DisplayName = "Properties";
 
             X = (int) Device.X;
             Y = (int) Device.Y;
@@ -55,6 +61,11 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
             _initialRedScale = Device.RedScale;
             _initialGreenScale = Device.GreenScale;
             _initialBlueScale = Device.BlueScale;
+
+            this.WhenAnyValue(x => x.RedScale, x => x.GreenScale, x => x.BlueScale).Subscribe(_ => ApplyScaling());
+
+            Device.PropertyChanged += DeviceOnPropertyChanged;
+            _coreService.FrameRendering += OnFrameRendering;
         }
 
         public ArtemisDevice Device { get; }
@@ -223,16 +234,16 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
             Device.BlueScale = _initialBlueScale;
         }
 
-        protected void OnActivate()
+        /// <inheritdoc />
+        protected override void Dispose(bool disposing)
         {
-            _coreService.FrameRendering += OnFrameRendering;
+            if (disposing)
-            Device.PropertyChanged += DeviceOnPropertyChanged;
+            {
-        }
+                _coreService.FrameRendering -= OnFrameRendering;
+                Device.PropertyChanged -= DeviceOnPropertyChanged;
+            }
 
-        protected void OnDeactivate()
+            base.Dispose(disposing);
-        {
-            _coreService.FrameRendering -= OnFrameRendering;
-            Device.PropertyChanged -= DeviceOnPropertyChanged;
         }
 
         private bool GetCategory(DeviceCategory category)
@@ -250,21 +261,19 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
             this.RaisePropertyChanged($"Has{category}Category");
         }
 
-        private void DeviceOnPropertyChanged(object sender, PropertyChangedEventArgs e)
+        private void OnFrameRendering(object? sender, FrameRenderingEventArgs e)
-        {
-            if (e.PropertyName == nameof(Device.CustomLayoutPath) || e.PropertyName == nameof(Device.DisableDefaultLayout)) Task.Run(() => _rgbService.ApplyBestDeviceLayout(Device));
-        }
-
-        private void OnFrameRendering(object sender, FrameRenderingEventArgs e)
         {
             if (!_displayOnDevices)
                 return;
 
-            using SKPaint overlayPaint = new()
+            using SKPaint overlayPaint = new() {Color = CurrentColor};
-            {
-                Color = CurrentColor
-            };
             e.Canvas.DrawRect(0, 0, e.Canvas.LocalClipBounds.Width, e.Canvas.LocalClipBounds.Height, overlayPaint);
         }
+
+        private void DeviceOnPropertyChanged(object? sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == nameof(Device.CustomLayoutPath) || e.PropertyName == nameof(Device.DisableDefaultLayout))
+                Task.Run(() => _rgbService.ApplyBestDeviceLayout(Device));
+        }
     }
 }

src/Artemis.UI.Avalonia/Screens/Device/ViewModels/DevicePropertiesViewModel.cs

@@ -1,16 +1,28 @@
 using System.Collections.ObjectModel;
 using Artemis.Core;
+using Artemis.UI.Avalonia.Ninject.Factories;
+using RGB.NET.Core;
+using ArtemisLed = Artemis.Core.ArtemisLed;
 
 namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
 {
     public class DevicePropertiesViewModel : ActivatableViewModelBase
     {
-        public DevicePropertiesViewModel(ArtemisDevice device)
+        public DevicePropertiesViewModel(ArtemisDevice device, IDeviceVmFactory deviceVmFactory)
         {
             Device = device;
+            SelectedLeds = new ObservableCollection<ArtemisLed>();
+            Tabs = new ObservableCollection<ActivatableViewModelBase>();
+
+            Tabs.Add(deviceVmFactory.DevicePropertiesTabViewModel(device));
+            Tabs.Add(deviceVmFactory.DeviceInfoTabViewModel(device));
+            if (Device .DeviceType == RGBDeviceType.Keyboard)
+                Tabs.Add(deviceVmFactory.InputMappingsTabViewModel(device, SelectedLeds));
+            Tabs.Add(deviceVmFactory.DeviceLedsTabViewModel(device, SelectedLeds));
         }
 
         public ArtemisDevice Device { get; }
-        public ObservableCollection<ArtemisLed> SelectedLeds { get; } = new();
+        public ObservableCollection<ArtemisLed> SelectedLeds { get; }
+        public ObservableCollection<ActivatableViewModelBase> Tabs { get; }
     }
 }

src/Artemis.UI.Avalonia/Screens/Device/ViewModels/InputMappingsTabViewModel.cs

@@ -14,17 +14,20 @@ namespace Artemis.UI.Avalonia.Screens.Device.ViewModels
     {
         private readonly IRgbService _rgbService;
         private readonly IInputService _inputService;
+        private readonly ObservableCollection<ArtemisLed> _selectedLeds;
         private ArtemisLed _selectedLed;
 
-        public InputMappingsTabViewModel(ArtemisDevice device, IRgbService rgbService, IInputService inputService)
+        public InputMappingsTabViewModel(ArtemisDevice device, ObservableCollection<ArtemisLed> selectedLeds, IRgbService rgbService, IInputService inputService)
         {
             if (device.DeviceType != RGBDeviceType.Keyboard)
                 throw new ArtemisUIException("The input mappings tab only supports keyboards");
+
             _rgbService = rgbService;
             _inputService = inputService;
+            _selectedLeds = selectedLeds;
 
             Device = device;
-            DisplayName = "INPUT MAPPINGS";
+            DisplayName = "Input Mappings";
             InputMappings = new ObservableCollection<(ArtemisLed, ArtemisLed)>();
         }
 

src/Artemis.UI.Avalonia/Screens/Device/Views/DeviceInfoTabView.axaml

@@ -0,0 +1,8 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Avalonia.Screens.Device.Views.DeviceInfoTabView">
+  Welcome to Avalonia!
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Device/Views/DeviceInfoTabView.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Avalonia.Screens.Device.Views
+{
+    public partial class DeviceInfoTabView : UserControl
+    {
+        public DeviceInfoTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Device/Views/DeviceLedsTabView.axaml

@@ -0,0 +1,8 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Avalonia.Screens.Device.Views.DeviceLedsTabView">
+  Welcome to Avalonia!
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Device/Views/DeviceLedsTabView.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Avalonia.Screens.Device.Views
+{
+    public partial class DeviceLedsTabView : UserControl
+    {
+        public DeviceLedsTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Device/Views/DevicePropertiesTabView.axaml

@@ -0,0 +1,197 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             xmlns:viewModels="clr-namespace:Artemis.UI.Avalonia.Screens.Device.ViewModels"
+             xmlns:converters="clr-namespace:Artemis.UI.Avalonia.Shared.Converters;assembly=Artemis.UI.Avalonia.Shared"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="1200"
+             x:Class="Artemis.UI.Avalonia.Screens.Device.Views.DevicePropertiesTabView">
+    <UserControl.Resources>
+        <converters:SKColorToColorConverter x:Key="SKColorToColorConverter" />
+    </UserControl.Resources>
+    <Design.DataContext>
+        <viewModels:DevicePropertiesTabViewModel />
+    </Design.DataContext>
+
+    <!-- Body -->
+    <Grid RowDefinitions="*,Auto">
+        <StackPanel Grid.Row="0">
+            <!-- Layout -->
+            <TextBlock Classes="h4">
+                Categories
+            </TextBlock>
+            <TextBlock TextWrapping="Wrap">
+                Artemis uses categories to determine where the layers of imported profiles are applied to.
+            </TextBlock>
+            <TextBlock TextWrapping="Wrap">
+                You can hover over a category for a more detailed description.
+            </TextBlock>
+            <StackPanel Orientation="Horizontal">
+                <CheckBox IsChecked="{Binding HasDeskCategory}"
+                          ToolTip.Tip="A device acting as desk ornamentation such as a LED strip"
+                          Content="Desk" />
+                <CheckBox IsChecked="{Binding HasMonitorCategory}"
+                          ToolTip.Tip="A device attached to the monitor such as ambilight LEDs"
+                          Content="Monitor" />
+                <CheckBox ToolTip.Tip="A device inside your computer case"
+                          IsChecked="{Binding HasCaseCategory}"
+                          Content="Case" />
+                <CheckBox IsChecked="{Binding HasRoomCategory}"
+                          ToolTip.Tip="A device elsewhere in the room"
+                          Content="Room" />
+                <CheckBox IsChecked="{Binding HasPeripheralsCategory}"
+                          ToolTip.Tip="A peripheral such as a mouse or keyboard"
+                          Content="Peripheral" />
+            </StackPanel>
+
+            <Grid Margin="0 25" ColumnDefinitions="*,40,*">
+                <Grid Grid.Column="0" ColumnDefinitions="*,Auto,Auto" RowDefinitions="*,*,*,*,*">
+                    <TextBlock Grid.Row="0" Grid.ColumnSpan="3" Classes="h4">
+                        Surface properties
+                    </TextBlock>
+
+                    <TextBlock Grid.Row="1" Grid.Column="0" VerticalAlignment="Center">X-coordinate</TextBlock>
+                    <NumericUpDown Grid.Row="1"
+                                   Grid.Column="1"
+                                   Margin="10 0"
+                                   VerticalAlignment="Center"
+                                   Value="{Binding X}" />
+                    <TextBlock Grid.Row="1" Grid.Column="2" VerticalAlignment="Center">mm</TextBlock>
+
+                    <TextBlock Grid.Row="2" Grid.Column="0" VerticalAlignment="Center">Y-coordinate</TextBlock>
+                    <NumericUpDown Grid.Row="2"
+                                   Grid.Column="1"
+                                   Margin="10 0"
+                                   VerticalAlignment="Center"
+                                   Value="{Binding Y}" />
+                    <TextBlock Grid.Row="2" Grid.Column="2" VerticalAlignment="Center">mm</TextBlock>
+
+                    <TextBlock Grid.Row="3" Grid.Column="0" VerticalAlignment="Center">Scale</TextBlock>
+                    <NumericUpDown Grid.Row="3"
+                                   Grid.Column="1"
+                                   Margin="10 0"
+                                   VerticalAlignment="Center"
+                                   Value="{Binding Scale}" />
+                    <TextBlock Grid.Row="3" Grid.Column="2" VerticalAlignment="Center">times</TextBlock>
+
+                    <TextBlock Grid.Row="4" Grid.Column="0" VerticalAlignment="Center">Rotation</TextBlock>
+                    <NumericUpDown Grid.Row="4"
+                                   Grid.Column="1"
+                                   Margin="10 0"
+                                   VerticalAlignment="Center"
+                                   Value="{Binding Rotation}" />
+                    <TextBlock Grid.Row="4" Grid.Column="2" VerticalAlignment="Center">deg</TextBlock>
+
+                </Grid>
+
+                <Rectangle Grid.Column="1" VerticalAlignment="Stretch" Width="1" Fill="{DynamicResource ButtonBorderBrush}" Margin="0 0 0 5" />
+
+                <StackPanel Grid.Column="2">
+                    <TextBlock Classes="h4">
+                        Color calibration
+                    </TextBlock>
+
+                    <TextBlock TextWrapping="Wrap">
+                        Use the sliders below to adjust the colors of your device so that it matches your other devices.
+                    </TextBlock>
+
+                    <Grid ColumnDefinitions="Auto,*,Auto" RowDefinitions="*,*,*,*">
+                        <Label Grid.Row="0" Grid.Column="0" Content="R" VerticalAlignment="Center" />
+                        <Slider Grid.Row="0" Grid.Column="1" Minimum="0" Maximum="200" Value="{Binding RedScale}" Margin="10 0" VerticalAlignment="Center" />
+                        <NumericUpDown Grid.Row="0"
+                                       Grid.Column="2"
+                                       VerticalAlignment="Center"
+                                       Width="65"
+                                       Value="{Binding RedScale}"
+                                       ShowButtonSpinner="False"
+                                       FormatString="{}{0:0.0}"
+                                       Minimum="0"
+                                       Maximum="200"
+                                       ClipValueToMinMax="True" />
+
+                        <Label Grid.Row="1" Grid.Column="0" Content="G" VerticalAlignment="Center" />
+                        <Slider Grid.Row="1" Grid.Column="1" Minimum="0" Maximum="200" Value="{Binding GreenScale}" Margin="10 0" VerticalAlignment="Center" />
+                        <NumericUpDown Grid.Row="1"
+                                       Grid.Column="2"
+                                       VerticalAlignment="Center"
+                                       Width="65"
+                                       Value="{Binding GreenScale}"
+                                       ShowButtonSpinner="False"
+                                       FormatString="{}{0:0.0}"
+                                       Minimum="0"
+                                       Maximum="200"
+                                       ClipValueToMinMax="True" />
+
+                        <Label Grid.Row="2" Grid.Column="0" Content="B" VerticalAlignment="Center" />
+                        <Slider Grid.Row="2" Grid.Column="1" Minimum="0" Maximum="200" Value="{Binding BlueScale}" Margin="10 0" Ticks="100" VerticalAlignment="Center" />
+                        <NumericUpDown Grid.Row="2"
+                                       Grid.Column="2"
+                                       VerticalAlignment="Center"
+                                       Width="65"
+                                       Value="{Binding BlueScale}"
+                                       ShowButtonSpinner="False"
+                                       FormatString="{}{0:0.0}"
+                                       Minimum="0"
+                                       Maximum="200"
+                                       ClipValueToMinMax="True" />
+
+                        <CheckBox Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" IsChecked="{Binding DisplayOnDevices}" Content="Show preview" VerticalAlignment="Center" />
+                        <controls:ColorPickerButton Grid.Row="3" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right" Color="{Binding CurrentColor, Converter={StaticResource SKColorToColorConverter}}" />
+                    </Grid>
+                </StackPanel>
+            </Grid>
+
+            <!-- Layout -->
+            <TextBlock Classes="h4">
+                Layout
+            </TextBlock>
+            <TextBlock TextWrapping="Wrap">
+                The device layout is used to determine the position of LEDs and to create the visual representation of the device you see on the left side of this window.
+            </TextBlock>
+
+            <CheckBox Margin="0 0 0 5" IsChecked="{Binding Device.DisableDefaultLayout}">
+                <CheckBox.Content>
+                    <StackPanel Orientation="Horizontal">
+                        <TextBlock>Don't load default layout</TextBlock>
+                        <avalonia:MaterialIcon Kind="HelpCircle"
+                                               Margin="5 0"
+                                               ToolTip.Tip="With this enabled Artemis will not load a layout for this device unless you specifically provide one." />
+                    </StackPanel>
+                </CheckBox.Content>
+            </CheckBox>
+
+            <Grid>
+                <TextBox Text="{Binding Device.CustomLayoutPath}"
+                         Watermark="Custom layout path"
+                         UseFloatingWatermark="True"
+                         IsReadOnly="True"
+                         PointerReleased="InputElement_OnPointerReleased"
+                         Padding="10 5 36 6"/>
+                <Button Classes="AppBarButton" HorizontalAlignment="Right" Command="{Binding ClearCustomLayout}" Padding="6" Margin="5 0">
+                    <avalonia:MaterialIcon Kind="CloseCircle" />
+                </Button>
+            </Grid>
+
+            <controls:HyperlinkButton NavigateUri="https://wiki.artemis-rgb.com/en/guides/developer/layouts" Margin="0 20" HorizontalAlignment="Right">
+                Learn more about layouts on the wiki
+            </controls:HyperlinkButton>
+        </StackPanel>
+
+        <!-- Buttons -->
+        <Grid Grid.Row="1" ColumnDefinitions="Auto,*">
+            <Button Grid.Column="0"
+                    Classes="AppBarButton"
+                    Command="{Binding SelectPhysicalLayout}"
+                    ToolTip.Tip="Restart device setup, allowing you to select a new physical and logical layout">
+                Restart setup
+            </Button>
+
+            <StackPanel Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
+                <Button Classes="AppBarButton" IsCancel="True" Command="{Binding Reset}" Margin="0 0 5 0">Reset</Button>
+                <Button IsDefault="True" Command="{Binding Apply}">Apply</Button>
+            </StackPanel>
+        </Grid>
+    </Grid>
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Device/Views/DevicePropertiesTabView.axaml.cs

@@ -0,0 +1,28 @@
+using System.Threading.Tasks;
+using Artemis.UI.Avalonia.Screens.Device.ViewModels;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Markup.Xaml;
+using Avalonia.ReactiveUI;
+
+namespace Artemis.UI.Avalonia.Screens.Device.Views
+{
+    public partial class DevicePropertiesTabView : ReactiveUserControl<DevicePropertiesTabViewModel>
+    {
+        public DevicePropertiesTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+
+        private void InputElement_OnPointerReleased(object? sender, PointerReleasedEventArgs e)
+        {
+            ViewModel?.BrowseCustomLayout();
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Device/Views/DevicePropertiesView.axaml

@@ -6,13 +6,12 @@
         mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800"
         x:Class="Artemis.UI.Avalonia.Screens.Device.Views.DevicePropertiesView"
         Title="Artemis | Device Properties"
-        Width="1200"
+        Width="1250"
-        Height="800"
+        Height="900"
-        ExtendClientAreaToDecorationsHint="True">
+        ExtendClientAreaToDecorationsHint="True"
-    <Grid ColumnDefinitions="*,0,*">
+        Padding="0 32 0 0">
-
+    <Grid ColumnDefinitions="*,0,1.5*" >
-
+        <Grid Grid.Column="0" Name="DeviceDisplayGrid" >
-            <Grid Grid.Column="0" Name="DeviceDisplayGrid">
                 <Grid.Background>
                     <VisualBrush TileMode="Tile" Stretch="Uniform" DestinationRect="0,0,25,25">
                         <VisualBrush.Visual>
@@ -33,7 +32,11 @@
                                            ShowColors="True"
                                            Margin="20" />
 
-                <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="15" IsVisible="{Binding Device.Layout.RgbLayout.Author}">
+                <StackPanel Orientation="Horizontal" 
+                            VerticalAlignment="Bottom" 
+                            HorizontalAlignment="Left" 
+                            Margin="15" 
+                            IsVisible="{Binding Device.Layout.RgbLayout.Author, Converter={x:Static StringConverters.IsNotNullOrEmpty}}">
                     <TextBlock Classes="h5" Text="Device layout by " />
                     <TextBlock Classes="h5" FontWeight="Bold" Text="{Binding Device.Layout.RgbLayout.Author}" />
                 </StackPanel>
@@ -43,7 +46,7 @@
         <GridSplitter Grid.Column="1" Width="15" Margin="-15 0 0 0" Background="Transparent" HorizontalAlignment="Stretch"/>
 
         <Border Grid.Column="2" Classes="card" CornerRadius="10 0 0 0">
-            <TabControl Margin="12" Items="{Binding Tabs}">
+            <TabControl Items="{Binding Tabs}">
                 <TabControl.ItemTemplate>
                     <DataTemplate>
                         <TextBlock Text="{Binding DisplayName}" />
@@ -51,8 +54,8 @@
                 </TabControl.ItemTemplate>
                 <TabControl.ContentTemplate>
                     <DataTemplate>
-                        <ScrollViewer HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Auto">
+                        <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
-                            <ContentControl Content="{Binding}" />
+                            <ContentControl Content="{Binding}" Margin="0 10 0 0"/>
                         </ScrollViewer>
                     </DataTemplate>
                 </TabControl.ContentTemplate>

src/Artemis.UI.Avalonia/Screens/Device/Views/InputMappingsTabView.axaml

@@ -0,0 +1,8 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Avalonia.Screens.Device.Views.InputMappingsTabView">
+  Welcome to Avalonia!
+</UserControl>

src/Artemis.UI.Avalonia/Screens/Device/Views/InputMappingsTabView.axaml.cs

@@ -0,0 +1,19 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Avalonia.Screens.Device.Views
+{
+    public partial class InputMappingsTabView : UserControl
+    {
+        public InputMappingsTabView()
+        {
+            InitializeComponent();
+        }
+
+        private void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/Artemis.UI.Avalonia/Screens/Workshop/ViewModels/WorkshopViewModel.cs

@@ -1,12 +1,27 @@
-using ReactiveUI;
+using System.Reactive;
+using Artemis.UI.Avalonia.Shared.Services.Builders;
+using Artemis.UI.Avalonia.Shared.Services.Interfaces;
+using ReactiveUI;
 
 namespace Artemis.UI.Avalonia.Screens.Workshop.ViewModels
 {
     public class WorkshopViewModel : MainScreenViewModel
     {
-        public WorkshopViewModel(IScreen hostScreen) : base(hostScreen, "workshop")
+        private readonly INotificationService _notificationService;
+
+        public WorkshopViewModel(IScreen hostScreen, INotificationService notificationService) : base(hostScreen, "workshop")
         {
+            _notificationService = notificationService;
+
             DisplayName = "Workshop";
+            ShowNotification = ReactiveCommand.Create<NotificationSeverity>(ExecuteShowNotification);
+        }
+
+        public ReactiveCommand<NotificationSeverity, Unit> ShowNotification { get; set; }
+
+        private void ExecuteShowNotification(NotificationSeverity severity)
+        {
+            _notificationService.CreateNotification().WithTitle("Test title").WithMessage("Test message").WithSeverity(severity).Show();
         }
     }
 }

src/Artemis.UI.Avalonia/Screens/Workshop/Views/WorkshopView.axaml

@@ -2,7 +2,28 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:builders="clr-namespace:Artemis.UI.Avalonia.Shared.Services.Builders;assembly=Artemis.UI.Avalonia.Shared"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Avalonia.Screens.Workshop.Views.WorkshopView">
-    Workshop!! :3
+	<StackPanel Margin="12">
+		<TextBlock>Workshop!! :3</TextBlock>
+		<Border Classes="card" Margin="0 12">
+			<StackPanel>
+                <TextBlock Classes="h4">Notification tests</TextBlock>
+                <Button Margin="0 5" Command="{Binding ShowNotification}" CommandParameter="{x:Static builders:NotificationSeverity.Informational}">
+                    Notification test (default)
+                </Button>
+                <Button Margin="0 5" Command="{Binding ShowNotification}" CommandParameter="{x:Static builders:NotificationSeverity.Warning}">
+                    Notification test (warning)
+                </Button>
+                <Button Margin="0 5" Command="{Binding ShowNotification}" CommandParameter="{x:Static builders:NotificationSeverity.Error}">
+                    Notification test (error)
+                </Button>
+                <Button Margin="0 5" Command="{Binding ShowNotification}" CommandParameter="{x:Static builders:NotificationSeverity.Success}">
+                    Notification test (success)
+                </Button>
+			</StackPanel>
+        </Border>
+    </StackPanel>
+    
 </UserControl>

src/Artemis.UI.Avalonia/Styles/TextBlock.axaml

@@ -17,21 +17,27 @@
     <!-- Add Styles Here -->
     <Style Selector="TextBlock.h1">
         <Setter Property="FontSize" Value="64" />
+        <Setter Property="Margin" Value="0 0 0 10" />
     </Style>
     <Style Selector="TextBlock.h2">
         <Setter Property="FontSize" Value="48" />
+        <Setter Property="Margin" Value="0 0 0 10" />
     </Style>
     <Style Selector="TextBlock.h3">
         <Setter Property="FontSize" Value="32" />
+        <Setter Property="Margin" Value="0 0 0 10" />
     </Style>
     <Style Selector="TextBlock.h4">
         <Setter Property="FontSize" Value="24" />
+        <Setter Property="Margin" Value="0 0 0 10" />
     </Style>
     <Style Selector="TextBlock.h5">
         <Setter Property="FontSize" Value="18" />
+        <Setter Property="Margin" Value="0 0 0 5" />
     </Style>
     <Style Selector="TextBlock.h6">
         <Setter Property="FontSize" Value="14" />
+        <Setter Property="Margin" Value="0 0 0 2" />
     </Style>
     <Style Selector="TextBlock.subtitle">
 		<Setter Property="Foreground" Value="{DynamicResource TextFillColorTertiaryBrush}" />