Started work on profiles

2026-11-12 11:56:30 +00:00 · 2019-11-18 17:33:20 +01:00
1 parent 36f3ec3071
commit bb56a45a7f
@@ -6,7 +6,7 @@ using System.Threading.Tasks;

 namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
 {
-    class DisplayConditionsViewModel
+    public class DisplayConditionsViewModel : ProfileEditorPanelViewModel
    {
    }
 }
@@ -6,7 +6,7 @@ using System.Threading.Tasks;

 namespace Artemis.UI.Screens.Module.ProfileEditor.ElementProperties
 {
-    class ElementPropertiesViewModel
+    public class ElementPropertiesViewModel : ProfileEditorPanelViewModel
    {
    }
 }
@@ -6,7 +6,7 @@ using System.Threading.Tasks;

 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerElements
 {
-    public class LayerElementsViewModel
+    public class LayerElementsViewModel : ProfileEditorPanelViewModel
    {
    }
 }
@@ -6,7 +6,7 @@ using System.Threading.Tasks;

 namespace Artemis.UI.Screens.Module.ProfileEditor.Layers
 {
-    public class LayersViewModel
+    public class LayersViewModel : ProfileEditorPanelViewModel
    {
    }
 }
@@ -0,0 +1,8 @@
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor
+{
+    public class ProfileEditorPanelViewModel : Screen
+    {
+    }
+}
@@ -17,31 +17,6 @@
                <ResourceDictionary
                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
            </ResourceDictionary.MergedDictionaries>
-
-            <Style TargetType="Grid" x:Key="InitializingFade">
-                <Style.Triggers>
-                    <DataTrigger Binding="{Binding IsInitializing}" Value="False">
-                        <DataTrigger.EnterActions>
-                            <BeginStoryboard>
-                                <Storyboard>
-                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.5">
-                                        <DoubleAnimation.EasingFunction>
-                                            <QuadraticEase EasingMode="EaseInOut" />
-                                        </DoubleAnimation.EasingFunction>
-                                    </DoubleAnimation>
-                                </Storyboard>
-                            </BeginStoryboard>
-                        </DataTrigger.EnterActions>
-                        <DataTrigger.ExitActions>
-                            <BeginStoryboard>
-                                <Storyboard>
-                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" />
-                                </Storyboard>
-                            </BeginStoryboard>
-                        </DataTrigger.ExitActions>
-                    </DataTrigger>
-                </Style.Triggers>
-            </Style>
        </ResourceDictionary>
    </UserControl.Resources>

@@ -58,129 +33,52 @@
            <RowDefinition Height="200" />
        </Grid.RowDefinitions>

-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
+        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
            <TextBlock>
                <materialDesign:PackIcon Kind="AboutOutline" Margin="0 0 0 -3" />  The profile defines what colors the LEDs will have. Multiple groups of LEDs are defined into layers. On these layers you can apply effects.
            </TextBlock>
-            <Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 10" />
+            <Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 9 0 8" />
        </StackPanel>
+        <Grid Grid.Row="0" Grid.Column="2">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <ComboBox Name="LocaleCombo" 
+                      Height="26"
+                      VerticalAlignment="Top" 
+                      ItemsSource="{Binding Profiles}" 
+                      SelectedItem="{Binding SelectedProfile}" 
+                      DisplayMemberPath="Name">
+                <ComboBox.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <VirtualizingStackPanel />
+                    </ItemsPanelTemplate>
+                </ComboBox.ItemsPanel>
+            </ComboBox>
+            <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}" 
+                    Margin="10 0" 
+                    Grid.Column="1" 
+                    Width="26" 
+                    Height="26" 
+                    VerticalAlignment="Top"
+                    Command="{s:Action AddProfile}">
+                <materialDesign:PackIcon Kind="Add" Height="14" Width="14" />
+            </Button>
+            <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" 
+                    Grid.Column="2"
+                    Width="26" 
+                    Height="26" 
+                    VerticalAlignment="Top"
+                    Command="{s:Action DeleteActiveProfile}">
+                <materialDesign:PackIcon Kind="TrashCanOutline" Height="14" Width="14" />
+            </Button>
+        </Grid>

        <!-- Design area -->
        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">
-            <Grid ClipToBounds="True"
-                  KeyUp="{s:Action EditorGridKeyUp}"
-                  KeyDown="{s:Action EditorGridKeyDown}"
-                  MouseWheel="{s:Action EditorGridMouseWheel}"
-                  MouseUp="{s:Action EditorGridMouseClick}"
-                  MouseDown="{s:Action EditorGridMouseClick}"
-                  MouseMove="{s:Action EditorGridMouseMove}">
-                <Grid.Background>
-                    <VisualBrush TileMode="Tile" Stretch="Uniform"
-                                 Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
-                        <VisualBrush.Visual>
-                            <Grid Width="20" Height="20">
-                                <Grid.RowDefinitions>
-                                    <RowDefinition />
-                                    <RowDefinition />
-                                </Grid.RowDefinitions>
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition />
-                                    <ColumnDefinition />
-                                </Grid.ColumnDefinitions>
-                                <Rectangle Grid.Row="0" Grid.Column="0" Fill="LightGray" />
-                                <Rectangle Grid.Row="0" Grid.Column="1" />
-                                <Rectangle Grid.Row="1" Grid.Column="0" />
-                                <Rectangle Grid.Row="1" Grid.Column="1" Fill="LightGray" />
-                            </Grid>
-                        </VisualBrush.Visual>
-                    </VisualBrush>
-                </Grid.Background>
-
-                <Grid.Triggers>
-                    <EventTrigger RoutedEvent="Grid.MouseLeftButtonDown">
-                        <BeginStoryboard>
-                            <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
-                                <DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
-                            </Storyboard>
-                        </BeginStoryboard>
-                    </EventTrigger>
-                    <EventTrigger RoutedEvent="Grid.MouseLeftButtonUp">
-                        <BeginStoryboard>
-                            <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
-                                <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
-                            </Storyboard>
-                        </BeginStoryboard>
-                    </EventTrigger>
-                </Grid.Triggers>
-
-                <Grid 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="ContentPresenter">
-                                <Setter Property="Canvas.Left" Value="{Binding X}" />
-                                <Setter Property="Canvas.Top" Value="{Binding Y}" />
-                            </Style>
-                        </ItemsControl.ItemContainerStyle>
-                        <ItemsControl.ItemTemplate>
-                            <DataTemplate>
-                                <ContentControl Width="{Binding Device.RgbDevice.Size.Width}"
-                                                Height="{Binding Device.RgbDevice.Size.Height}"
-                                                s:View.Model="{Binding}" />
-                            </DataTemplate>
-                        </ItemsControl.ItemTemplate>
-                    </ItemsControl>
-                </Grid>
-
-                <!-- Multi-selection rectangle -->
-                <Path Data="{Binding SelectionRectangle}" Opacity="0"
-                      Stroke="{DynamicResource PrimaryHueLightBrush}"
-                      StrokeThickness="1"
-                      Name="MultiSelectionPath"
-                      IsHitTestVisible="False">
-                    <Path.Fill>
-                        <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
-                    </Path.Fill>
-                </Path>
-
-                <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
-                            Margin="0, 0, 15, 15">
-                    <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>
-
-                <!-- Loading indicator -->
-                <Grid Background="{StaticResource MaterialDesignPaper}" Style="{StaticResource InitializingFade}">
-                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
-                        <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
-                            Initializing LED visualization...
-                        </TextBlock>
-                        <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" IsIndeterminate="True" />
-                    </StackPanel>
-                </Grid>
-            </Grid>
+            <ContentControl s:View.Model="{Binding ProfileViewModel}" />
        </materialDesign:Card>

        <GridSplitter Grid.Row="1" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ShowsPreview="True" Cursor="SizeWE" Margin="5 0" />
@@ -194,13 +92,13 @@
            </Grid.RowDefinitions>

            <materialDesign:Card Grid.Row="0" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Right top</TextBlock>
+                <ContentControl s:View.Model="{Binding LayersViewModel}" />
            </materialDesign:Card>

            <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ShowsPreview="True" Cursor="SizeNS" Margin="0 5" />

            <materialDesign:Card Grid.Row="2" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Right bottom</TextBlock>
+                <ContentControl s:View.Model="{Binding DisplayConditionsViewModel}" />
            </materialDesign:Card>
        </Grid>

@@ -214,13 +112,13 @@
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <materialDesign:Card Grid.Column="0" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Bottom left</TextBlock>
+                <ContentControl s:View.Model="{Binding LayerElementsViewModel}" />
            </materialDesign:Card>

            <GridSplitter Grid.Column="1" Width="5" Margin="5 0" HorizontalAlignment="Stretch" ShowsPreview="True" Cursor="SizeWE" />

            <materialDesign:Card Grid.Column="2" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Bottom right</TextBlock>
+                <ContentControl s:View.Model="{Binding ElementPropertiesViewModel}" />
            </materialDesign:Card>
        </Grid>
    </Grid>
@@ -1,220 +1,81 @@
 using System;
-using System.Collections.ObjectModel;
+using System.Collections.Generic;
 using System.Linq;
-using System.Windows;
-using System.Windows.Input;
-using System.Windows.Media;
-using Artemis.Core.Events;
-using Artemis.Core.Models.Surface;
+using System.Threading.Tasks;
+using Artemis.Core.Models.Profile;
 using Artemis.Core.Plugins.Abstract;
-using Artemis.Core.Services;
-using Artemis.Core.Services.Storage;
+using Artemis.Core.Services.Storage.Interfaces;
+using Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions;
+using Artemis.UI.Screens.Module.ProfileEditor.ElementProperties;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerElements;
+using Artemis.UI.Screens.Module.ProfileEditor.Layers;
 using Artemis.UI.Screens.Module.ProfileEditor.Visualization;
-using Artemis.UI.Screens.Shared;
-using Artemis.UI.Screens.SurfaceEditor;
-using RGB.NET.Core;
 using Stylet;
-using Point = System.Windows.Point;

 namespace Artemis.UI.Screens.Module.ProfileEditor
 {
-    public class ProfileEditorViewModel : ModuleViewModel
+    public class ProfileEditorViewModel : Conductor<ProfileEditorPanelViewModel>.Collection.AllActive
    {
-        private readonly TimerUpdateTrigger _updateTrigger;
+        private readonly IProfileService _profileService;

-        public ProfileEditorViewModel(Core.Plugins.Abstract.Module module, ISurfaceService surfaceService, ISettingsService settingsService) : base(module, "Profile Editor")
+        public ProfileEditorViewModel(ProfileModule module, ICollection<ProfileEditorPanelViewModel> viewModels, IProfileService profileService)
        {
-            surfaceService.ActiveSurfaceConfigurationChanged += OnActiveSurfaceConfigurationChanged;
-            Devices = new ObservableCollection<ProfileDeviceViewModel>();
-            Execute.OnUIThread(() =>
-            {
-                SelectionRectangle = new RectangleGeometry();
-                PanZoomViewModel = new PanZoomViewModel();
-            });
+            _profileService = profileService;

-            ApplySurfaceConfiguration(surfaceService.ActiveSurface);
+            DisplayName = "Profile editor";
+            Module = module;

-            // Borrow RGB.NET's update trigger but limit the FPS
-            var targetFpsSetting = settingsService.GetSetting("TargetFrameRate", 25);
-            var editorTargetFpsSetting = settingsService.GetSetting("EditorTargetFrameRate", 15);
-            var targetFps = Math.Min(targetFpsSetting.Value, editorTargetFpsSetting.Value);
-            _updateTrigger = new TimerUpdateTrigger {UpdateFrequency = 1.0 / targetFps};
-            _updateTrigger.Update += UpdateLeds;
+            DisplayConditionsViewModel = (DisplayConditionsViewModel) viewModels.First(vm => vm is DisplayConditionsViewModel);
+            ElementPropertiesViewModel = (ElementPropertiesViewModel) viewModels.First(vm => vm is ElementPropertiesViewModel);
+            LayerElementsViewModel = (LayerElementsViewModel) viewModels.First(vm => vm is LayerElementsViewModel);
+            LayersViewModel = (LayersViewModel) viewModels.First(vm => vm is LayersViewModel);
+            ProfileViewModel = (ProfileViewModel) viewModels.First(vm => vm is ProfileViewModel);
+
+            Items.AddRange(viewModels);
+
+            module.ActiveProfileChanged += ModuleOnActiveProfileChanged;
        }

-        public ObservableCollection<ProfileDeviceViewModel> Devices { get; set; }
-        public bool IsInitializing { get; private set; }
-        public RectangleGeometry SelectionRectangle { get; set; }
-        public PanZoomViewModel PanZoomViewModel { get; set; }
+        public Core.Plugins.Abstract.Module Module { get; }
+        public DisplayConditionsViewModel DisplayConditionsViewModel { get; }
+        public ElementPropertiesViewModel ElementPropertiesViewModel { get; }
+        public LayerElementsViewModel LayerElementsViewModel { get; }
+        public LayersViewModel LayersViewModel { get; }
+        public ProfileViewModel ProfileViewModel { get; }

-        private void OnActiveSurfaceConfigurationChanged(object sender, SurfaceConfigurationEventArgs e)
+        public BindableCollection<Profile> Profiles { get; set; }
+        public Profile SelectedProfile { get; set; }
+        public bool CanDeleteActiveProfile => SelectedProfile != null;
+
+        public async Task AddProfile()
        {
-            ApplySurfaceConfiguration(e.Surface);
        }

-        private void UpdateLeds(object sender, CustomUpdateData customUpdateData)
+        public async Task DeleteActiveProfile()
        {
-            if (IsInitializing)
-                IsInitializing = Devices.Any(d => !d.AddedLeds);
-
-            foreach (var profileDeviceViewModel in Devices)
-                profileDeviceViewModel.Update();
        }

-        private void ApplySurfaceConfiguration(Surface surface)
+        private void ModuleOnActiveProfileChanged(object sender, EventArgs e)
        {
-            // Make sure all devices have an up-to-date VM
-            foreach (var surfaceDeviceConfiguration in surface.Devices)
-            {
-                // Create VMs for missing devices
-                var viewModel = Devices.FirstOrDefault(vm => vm.Device.RgbDevice == surfaceDeviceConfiguration.RgbDevice);
-                if (viewModel == null)
-                {
-                    // Create outside the UI thread to avoid slowdowns as much as possible
-                    var profileDeviceViewModel = new ProfileDeviceViewModel(surfaceDeviceConfiguration);
-                    Execute.OnUIThread(() =>
-                    {
-                        // Gotta call IsInitializing on the UI thread or its never gets picked up
-                        IsInitializing = true;
-                        lock (Devices)
-                        {
-                            Devices.Add(profileDeviceViewModel);
-                        }
-                    });
-                }
-                // Update existing devices
-                else
-                    viewModel.Device = surfaceDeviceConfiguration;
-            }
-
-            // Sort the devices by ZIndex
-            Execute.OnUIThread(() =>
-            {
-                lock (Devices)
-                {
-                    foreach (var device in Devices.OrderBy(d => d.ZIndex).ToList())
-                        Devices.Move(Devices.IndexOf(device), device.ZIndex - 1);
-                }
-            });
+            SelectedProfile = ((ProfileModule) Module).ActiveProfile;
        }

        protected override void OnActivate()
        {
-            _updateTrigger.Start();
+            Task.Run(LoadProfilesAsync);
            base.OnActivate();
        }

-        protected override void OnDeactivate()
+        private async Task LoadProfilesAsync()
        {
-            _updateTrigger.Stop();
-            base.OnDeactivate();
-        }
+            var profiles = await _profileService.GetProfiles((ProfileModule) Module);
+            Profiles.Clear();
+            Profiles.AddRange(profiles);

-        #region Selection
-
-        private MouseDragStatus _mouseDragStatus;
-        private Point _mouseDragStartPoint;
-
-        // ReSharper disable once UnusedMember.Global - Called from view
-        public void EditorGridMouseClick(object sender, MouseEventArgs e)
-        {
-            if (IsPanKeyDown())
-                return;
-
-            var position = e.GetPosition((IInputElement) sender);
-            var relative = PanZoomViewModel.GetRelativeMousePosition(sender, e);
-            if (e.LeftButton == MouseButtonState.Pressed)
-                StartMouseDrag(position, relative);
-            else
-                StopMouseDrag(position);
-        }
-
-        // ReSharper disable once UnusedMember.Global - Called from view
-        public void EditorGridMouseMove(object sender, MouseEventArgs e)
-        {
-            // If holding down Ctrl, pan instead of move/select
-            if (IsPanKeyDown())
+            if (!profiles.Any())
            {
-                Pan(sender, e);
-                return;
-            }
-
-            var position = e.GetPosition((IInputElement) sender);
-            if (_mouseDragStatus == MouseDragStatus.Selecting)
-                UpdateSelection(position);
-        }
-
-        private void StartMouseDrag(Point position, Point relative)
-        {
-            _mouseDragStatus = MouseDragStatus.Selecting;
-            _mouseDragStartPoint = position;
-
-            // Any time dragging starts, start with a new rect
-            SelectionRectangle.Rect = new Rect();
-        }
-
-        private void StopMouseDrag(Point position)
-        {
-            var selectedRect = new Rect(_mouseDragStartPoint, position);
-            // TODO: Select LEDs
-
-            Mouse.OverrideCursor = null;
-            _mouseDragStatus = MouseDragStatus.None;
-        }
-
-        private void UpdateSelection(Point position)
-        {
-            if (IsPanKeyDown())
-                return;
-
-            lock (Devices)
-            {
-                var selectedRect = new Rect(_mouseDragStartPoint, position);
-                SelectionRectangle.Rect = selectedRect;
-
-                // TODO: Highlight LEDs
+                var profile = new Profile();
            }
        }
-
-        #endregion
-
-        #region Panning and zooming
-
-        public void EditorGridMouseWheel(object sender, MouseWheelEventArgs e)
-        {
-            PanZoomViewModel.ProcessMouseScroll(sender, e);
-        }
-
-        public void EditorGridKeyDown(object sender, KeyEventArgs e)
-        {
-            if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsDown)
-                Mouse.OverrideCursor = Cursors.ScrollAll;
-        }
-
-        public void EditorGridKeyUp(object sender, KeyEventArgs e)
-        {
-            if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsUp)
-                Mouse.OverrideCursor = null;
-        }
-
-        public void Pan(object sender, MouseEventArgs e)
-        {
-            PanZoomViewModel.ProcessMouseMove(sender, e);
-
-            // Empty the selection rect since it's shown while mouse is down
-            SelectionRectangle.Rect = Rect.Empty;
-        }
-
-        public void ResetZoomAndPan()
-        {
-            PanZoomViewModel.Reset();
-        }
-
-        private bool IsPanKeyDown()
-        {
-            return Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl);
-        }
-
-        #endregion
    }
 }
@@ -0,0 +1,152 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileView"
+             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:profileEditor="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileViewModel}}">
+    <UserControl.Resources>
+        <Style TargetType="Grid" x:Key="InitializingFade">
+            <Style.Triggers>
+                <DataTrigger Binding="{Binding IsInitializing}" Value="False">
+                    <DataTrigger.EnterActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.5">
+                                    <DoubleAnimation.EasingFunction>
+                                        <QuadraticEase EasingMode="EaseInOut" />
+                                    </DoubleAnimation.EasingFunction>
+                                </DoubleAnimation>
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.EnterActions>
+                    <DataTrigger.ExitActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.ExitActions>
+                </DataTrigger>
+            </Style.Triggers>
+        </Style>
+    </UserControl.Resources>
+    <Grid ClipToBounds="True"
+                  KeyUp="{s:Action EditorGridKeyUp}"
+                  KeyDown="{s:Action EditorGridKeyDown}"
+                  MouseWheel="{s:Action EditorGridMouseWheel}"
+                  MouseUp="{s:Action EditorGridMouseClick}"
+                  MouseDown="{s:Action EditorGridMouseClick}"
+                  MouseMove="{s:Action EditorGridMouseMove}">
+        <Grid.Background>
+            <VisualBrush TileMode="Tile" Stretch="Uniform"
+                                 Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
+                <VisualBrush.Visual>
+                    <Grid Width="20" Height="20">
+                        <Grid.RowDefinitions>
+                            <RowDefinition />
+                            <RowDefinition />
+                        </Grid.RowDefinitions>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition />
+                            <ColumnDefinition />
+                        </Grid.ColumnDefinitions>
+                        <Rectangle Grid.Row="0" Grid.Column="0" Fill="LightGray" />
+                        <Rectangle Grid.Row="0" Grid.Column="1" />
+                        <Rectangle Grid.Row="1" Grid.Column="0" />
+                        <Rectangle Grid.Row="1" Grid.Column="1" Fill="LightGray" />
+                    </Grid>
+                </VisualBrush.Visual>
+            </VisualBrush>
+        </Grid.Background>
+
+        <Grid.Triggers>
+            <EventTrigger RoutedEvent="Grid.MouseLeftButtonDown">
+                <BeginStoryboard>
+                    <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
+                        <DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="Grid.MouseLeftButtonUp">
+                <BeginStoryboard>
+                    <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
+                        <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+        </Grid.Triggers>
+
+        <Grid 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="ContentPresenter">
+                        <Setter Property="Canvas.Left" Value="{Binding X}" />
+                        <Setter Property="Canvas.Top" Value="{Binding Y}" />
+                    </Style>
+                </ItemsControl.ItemContainerStyle>
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <ContentControl Width="{Binding Device.RgbDevice.Size.Width}"
+                                                Height="{Binding Device.RgbDevice.Size.Height}"
+                                                s:View.Model="{Binding}" />
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+        </Grid>
+
+        <!-- Multi-selection rectangle -->
+        <Path Data="{Binding SelectionRectangle}" Opacity="0"
+                      Stroke="{DynamicResource PrimaryHueLightBrush}"
+                      StrokeThickness="1"
+                      Name="MultiSelectionPath"
+                      IsHitTestVisible="False">
+            <Path.Fill>
+                <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
+            </Path.Fill>
+        </Path>
+
+        <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
+                            Margin="0, 0, 15, 15">
+            <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>
+
+        <!-- Loading indicator -->
+        <Grid Background="{StaticResource MaterialDesignPaper}" Style="{StaticResource InitializingFade}">
+            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+                <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
+                            Initializing LED visualization...
+                </TextBlock>
+                <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" IsIndeterminate="True" />
+            </StackPanel>
+        </Grid>
+    </Grid>
+</UserControl>
@@ -0,0 +1,220 @@
+using System;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Windows;
+using System.Windows.Input;
+using System.Windows.Media;
+using Artemis.Core.Events;
+using Artemis.Core.Models.Surface;
+using Artemis.Core.Services;
+using Artemis.Core.Services.Storage;
+using Artemis.Core.Services.Storage.Interfaces;
+using Artemis.UI.Screens.Shared;
+using Artemis.UI.Screens.SurfaceEditor;
+using RGB.NET.Core;
+using Stylet;
+using Point = System.Windows.Point;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
+{
+    public class ProfileViewModel : ProfileEditorPanelViewModel
+    {
+        private readonly TimerUpdateTrigger _updateTrigger;
+
+        public ProfileViewModel(ISurfaceService surfaceService, ISettingsService settingsService)
+        {
+            Devices = new ObservableCollection<ProfileDeviceViewModel>();
+            Execute.OnUIThread(() =>
+            {
+                SelectionRectangle = new RectangleGeometry();
+                PanZoomViewModel = new PanZoomViewModel();
+            });
+
+            ApplySurfaceConfiguration(surfaceService.ActiveSurface);
+
+            // Borrow RGB.NET's update trigger but limit the FPS
+            var targetFpsSetting = settingsService.GetSetting("TargetFrameRate", 25);
+            var editorTargetFpsSetting = settingsService.GetSetting("EditorTargetFrameRate", 15);
+            var targetFps = Math.Min(targetFpsSetting.Value, editorTargetFpsSetting.Value);
+            _updateTrigger = new TimerUpdateTrigger {UpdateFrequency = 1.0 / targetFps};
+            _updateTrigger.Update += UpdateLeds;
+
+            surfaceService.ActiveSurfaceConfigurationChanged += OnActiveSurfaceConfigurationChanged;
+        }
+
+        public bool IsInitializing { get; private set; }
+        public ObservableCollection<ProfileDeviceViewModel> Devices { get; set; }
+        public RectangleGeometry SelectionRectangle { get; set; }
+        public PanZoomViewModel PanZoomViewModel { get; set; }
+
+        private void OnActiveSurfaceConfigurationChanged(object sender, SurfaceConfigurationEventArgs e)
+        {
+            ApplySurfaceConfiguration(e.Surface);
+        }
+
+        private void ApplySurfaceConfiguration(Surface surface)
+        {
+            // Make sure all devices have an up-to-date VM
+            foreach (var surfaceDeviceConfiguration in surface.Devices)
+            {
+                // Create VMs for missing devices
+                var viewModel = Devices.FirstOrDefault(vm => vm.Device.RgbDevice == surfaceDeviceConfiguration.RgbDevice);
+                if (viewModel == null)
+                {
+                    // Create outside the UI thread to avoid slowdowns as much as possible
+                    var profileDeviceViewModel = new ProfileDeviceViewModel(surfaceDeviceConfiguration);
+                    Execute.OnUIThread(() =>
+                    {
+                        // Gotta call IsInitializing on the UI thread or its never gets picked up
+                        IsInitializing = true;
+                        lock (Devices)
+                        {
+                            Devices.Add(profileDeviceViewModel);
+                        }
+                    });
+                }
+                // Update existing devices
+                else
+                    viewModel.Device = surfaceDeviceConfiguration;
+            }
+
+            // Sort the devices by ZIndex
+            Execute.OnUIThread(() =>
+            {
+                lock (Devices)
+                {
+                    foreach (var device in Devices.OrderBy(d => d.ZIndex).ToList())
+                        Devices.Move(Devices.IndexOf(device), device.ZIndex - 1);
+                }
+            });
+        }
+
+        private void UpdateLeds(object sender, CustomUpdateData customUpdateData)
+        {
+            if (IsInitializing)
+                IsInitializing = Devices.Any(d => !d.AddedLeds);
+
+            foreach (var profileDeviceViewModel in Devices)
+                profileDeviceViewModel.Update();
+        }
+
+        protected override void OnActivate()
+        {
+            _updateTrigger.Start();
+            base.OnActivate();
+        }
+
+        protected override void OnDeactivate()
+        {
+            _updateTrigger.Stop();
+            base.OnDeactivate();
+        }
+
+        #region Selection
+
+        private MouseDragStatus _mouseDragStatus;
+        private System.Windows.Point _mouseDragStartPoint;
+
+        // ReSharper disable once UnusedMember.Global - Called from view
+        public void EditorGridMouseClick(object sender, MouseEventArgs e)
+        {
+            if (IsPanKeyDown())
+                return;
+
+            var position = e.GetPosition((IInputElement)sender);
+            var relative = PanZoomViewModel.GetRelativeMousePosition(sender, e);
+            if (e.LeftButton == MouseButtonState.Pressed)
+                StartMouseDrag(position, relative);
+            else
+                StopMouseDrag(position);
+        }
+
+        // ReSharper disable once UnusedMember.Global - Called from view
+        public void EditorGridMouseMove(object sender, MouseEventArgs e)
+        {
+            // If holding down Ctrl, pan instead of move/select
+            if (IsPanKeyDown())
+            {
+                Pan(sender, e);
+                return;
+            }
+
+            var position = e.GetPosition((IInputElement)sender);
+            if (_mouseDragStatus == MouseDragStatus.Selecting)
+                UpdateSelection(position);
+        }
+
+        private void StartMouseDrag(System.Windows.Point position, System.Windows.Point relative)
+        {
+            _mouseDragStatus = MouseDragStatus.Selecting;
+            _mouseDragStartPoint = position;
+
+            // Any time dragging starts, start with a new rect
+            SelectionRectangle.Rect = new Rect();
+        }
+
+        private void StopMouseDrag(System.Windows.Point position)
+        {
+            var selectedRect = new Rect(_mouseDragStartPoint, position);
+            // TODO: Select LEDs
+
+            Mouse.OverrideCursor = null;
+            _mouseDragStatus = MouseDragStatus.None;
+        }
+
+        private void UpdateSelection(Point position)
+        {
+            if (IsPanKeyDown())
+                return;
+
+            lock (Devices)
+            {
+                var selectedRect = new Rect(_mouseDragStartPoint, position);
+                SelectionRectangle.Rect = selectedRect;
+
+                // TODO: Highlight LEDs
+            }
+        }
+
+        #endregion
+
+        #region Panning and zooming
+
+        public void EditorGridMouseWheel(object sender, MouseWheelEventArgs e)
+        {
+            PanZoomViewModel.ProcessMouseScroll(sender, e);
+        }
+
+        public void EditorGridKeyDown(object sender, KeyEventArgs e)
+        {
+            if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsDown)
+                Mouse.OverrideCursor = Cursors.ScrollAll;
+        }
+
+        public void EditorGridKeyUp(object sender, KeyEventArgs e)
+        {
+            if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsUp)
+                Mouse.OverrideCursor = null;
+        }
+
+        public void Pan(object sender, MouseEventArgs e)
+        {
+            PanZoomViewModel.ProcessMouseMove(sender, e);
+
+            // Empty the selection rect since it's shown while mouse is down
+            SelectionRectangle.Rect = Rect.Empty;
+        }
+
+        public void ResetZoomAndPan()
+        {
+            PanZoomViewModel.Reset();
+        }
+
+        private bool IsPanKeyDown()
+        {
+            return Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl);
+        }
+
+        #endregion
+    }
+}