Implemented devices and LEDs in profile editor

2025-12-13 05:48:35 +00:00 · 2019-11-12 20:20:05 +01:00 · 2019-11-12 20:20:05 +01:00 · 11c9a8a822
commit 11c9a8a822
parent 44152f8e2a
13 changed files with 402 additions and 49 deletions
--- a/src/Artemis.UI/Artemis.UI.csproj
+++ b/src/Artemis.UI/Artemis.UI.csproj
@ -166,7 +166,8 @@
    <Compile Include="Converters\NullToVisibilityConverter.cs" />
    <Compile Include="Extensions\RgbColorExtensions.cs" />
    <Compile Include="Extensions\RgbRectangleExtensions.cs" />
-    <Compile Include="Ninject\Factories\ModuleViewModelFactory.cs" />
+    <Compile Include="Ninject\Factories\IModuleViewModelFactory.cs" />
+    <Compile Include="Ninject\Factories\IProfileEditorViewModelFactory.cs" />
    <Compile Include="Ninject\UIModule.cs" />
    <Compile Include="Properties\Resources.Designer.cs">
      <AutoGen>True</AutoGen>
--- a/src/Artemis.UI/Ninject/Factories/IModuleViewModelFactory.cs
+++ b/src/Artemis.UI/Ninject/Factories/IModuleViewModelFactory.cs
--- a/src/Artemis.UI/Ninject/Factories/IProfileEditorViewModelFactory.cs
+++ b/src/Artemis.UI/Ninject/Factories/IProfileEditorViewModelFactory.cs
@ -0,0 +1,10 @@
+using Artemis.Core.Plugins.Abstract;
+using Artemis.UI.ViewModels.Controls.ProfileEditor;
+
+namespace Artemis.UI.Ninject.Factories
+{
+    public interface IProfileEditorViewModelFactory
+    {
+        ProfileEditorViewModel CreateModuleViewModel(Module module);
+    }
+}
--- a/src/Artemis.UI/Ninject/UiModule.cs
+++ b/src/Artemis.UI/Ninject/UiModule.cs
@ -36,7 +36,8 @@ namespace Artemis.UI.Ninject

            // Bind the module VM
            Bind<IModuleViewModelFactory>().ToFactory();
-
+            Bind<IProfileEditorViewModelFactory>().ToFactory();
+            
            // Bind all UI services as singletons
            Kernel.Bind(x =>
            {
--- a/src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileDeviceViewModel.cs
+++ b/src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileDeviceViewModel.cs
@ -1,5 +1,6 @@
 using System.Collections.Generic;
-using RGB.NET.Core;
+using System.Windows;
+using Artemis.Core.Models.Surface;
 using Stylet;

 namespace Artemis.UI.ViewModels.Controls.ProfileEditor
@ -8,18 +9,44 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor
    {
        private readonly List<ProfileLedViewModel> _leds;

-        public ProfileDeviceViewModel(IRGBDevice device)
+        public ProfileDeviceViewModel(Device device)
        {
            Device = device;
            _leds = new List<ProfileLedViewModel>();

-            foreach (var led in Device)
-                _leds.Add(new ProfileLedViewModel(led));
+            if (Device.RgbDevice != null)
+            {
+                foreach (var led in Device.RgbDevice)
+                    _leds.Add(new ProfileLedViewModel(led));
+            }
+        }
+
+        public Device Device { get; set; }
+
+        public double X
+        {
+            get => Device.X;
+            set => Device.X = value;
+        }
+
+        public double Y
+        {
+            get => Device.Y;
+            set => Device.Y = value;
+        }
+
+        public int ZIndex
+        {
+            get => Device.ZIndex;
+            set => Device.ZIndex = value;
        }

-        public IRGBDevice Device { get; }
        public IReadOnlyCollection<ProfileLedViewModel> Leds => _leds.AsReadOnly();

+        public Rect DeviceRectangle => Device.RgbDevice == null
+            ? new Rect()
+            : new Rect(X, Y, Device.RgbDevice.Size.Width, Device.RgbDevice.Size.Height);
+
        public void Update()
        {
            foreach (var ledViewModel in _leds)
--- a/src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileEditorViewModel.cs
+++ b/src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileEditorViewModel.cs
@ -1,16 +1,170 @@
-using System;
-using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Linq;
-using System.Text;
-using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Input;
+using System.Windows.Media;
+using Artemis.Core.Events;
+using Artemis.Core.Models.Surface;
 using Artemis.Core.Plugins.Abstract;
+using Artemis.Core.Services.Interfaces;
+using Artemis.Core.Services.Storage;
+using Artemis.UI.ViewModels.Screens;
+using Artemis.UI.ViewModels.Utilities;
+using Stylet;

 namespace Artemis.UI.ViewModels.Controls.ProfileEditor
 {
-   public class ProfileEditorViewModel : ModuleViewModel
+    public class ProfileEditorViewModel : ModuleViewModel
    {
-        public ProfileEditorViewModel(Module module) : base(module, "Profile Editor")
+        public ProfileEditorViewModel(Module module, ISurfaceService surfaceService, ICoreService coreService) : base(module, "Profile Editor")
        {
+            surfaceService.ActiveSurfaceConfigurationChanged += OnActiveSurfaceConfigurationChanged;
+            coreService.FrameRendered += CoreServiceOnFrameRendered;
+            Devices = new ObservableCollection<ProfileDeviceViewModel>();
+            Execute.OnUIThread(() =>
+            {
+                SelectionRectangle = new RectangleGeometry();
+                PanZoomViewModel = new PanZoomViewModel();
+            });
+
+            ApplySurfaceConfiguration(surfaceService.ActiveSurface);
        }
+        
+        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 CoreServiceOnFrameRendered(object sender, FrameRenderedEventArgs e)
+        {
+            foreach (var profileDeviceViewModel in Devices)
+                profileDeviceViewModel.Update();
+        }
+
+        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)
+                    Execute.OnUIThread(() => Devices.Add(new ProfileDeviceViewModel(surfaceDeviceConfiguration)));
+                // Update existing devices
+                else
+                    viewModel.Device = surfaceDeviceConfiguration;
+            }
+        }
+
+        #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())
+            {
+                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
+            }
+        }
+
+        #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
    }
-}
+}
--- a/src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileLedViewModel.cs
+++ b/src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileLedViewModel.cs
@ -13,7 +13,7 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor
        public ProfileLedViewModel(Led led)
        {
            Led = led;
-            
+
            Execute.OnUIThread(CreateLedGeometry);
            Update();
        }
@ -92,13 +92,9 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor

        public void Update()
        {
-            if (ColorsEnabled)
-            {
-                if (Led.Id == LedId.Keyboard_Y)
-                    Console.WriteLine();
-                var newColor = Led.Color.ToMediaColor();
-                SetColor(newColor);
-            }
+            var newColor = Led.Color.ToMediaColor();
+            if (!DisplayColor.Equals(newColor))
+                DisplayColor = newColor;

            if (Math.Abs(Led.LedRectangle.X - X) > 0.1)
                X = Led.LedRectangle.X;
@ -112,11 +108,5 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor
            if (Math.Abs(Led.LedRectangle.Height - Height) > 0.1)
                Height = Led.LedRectangle.Height;
        }
-
-        public void SetColor(Color color)
-        {
-            if (!DisplayColor.Equals(color))
-                DisplayColor = color;
-        }
    }
 }
--- a/src/Artemis.UI/ViewModels/Controls/SurfaceEditor/SurfaceDeviceViewModel.cs
+++ b/src/Artemis.UI/ViewModels/Controls/SurfaceEditor/SurfaceDeviceViewModel.cs
@ -3,17 +3,15 @@ using System.Collections.Generic;
 using System.Windows;
 using System.Windows.Input;
 using Artemis.Core.Models.Surface;
-using RGB.NET.Core;
 using Stylet;
-using Point = System.Windows.Point;

 namespace Artemis.UI.ViewModels.Controls.SurfaceEditor
 {
    public class SurfaceDeviceViewModel : PropertyChangedBase
    {
+        private readonly List<SurfaceLedViewModel> _leds;
        private double _dragOffsetX;
        private double _dragOffsetY;
-        private readonly List<SurfaceLedViewModel> _leds;

        public SurfaceDeviceViewModel(Device device)
        {
--- a/src/Artemis.UI/ViewModels/Screens/ModuleRootViewModel.cs
+++ b/src/Artemis.UI/ViewModels/Screens/ModuleRootViewModel.cs
@ -1,4 +1,5 @@
 using Artemis.Core.Plugins.Abstract;
+using Artemis.UI.Ninject.Factories;
 using Artemis.UI.ViewModels.Controls.ProfileEditor;
 using Stylet;

@ -6,10 +7,10 @@ namespace Artemis.UI.ViewModels.Screens
 {
    public class ModuleRootViewModel : Screen
    {
-        public ModuleRootViewModel(Module module)
+        public ModuleRootViewModel(Module module, IProfileEditorViewModelFactory profileEditorViewModelFactory)
        {
            Module = module;
-            ModuleViewModels = new BindableCollection<ModuleViewModel> {new ProfileEditorViewModel(Module)};
+            ModuleViewModels = new BindableCollection<ModuleViewModel> {profileEditorViewModelFactory.CreateModuleViewModel(Module)};
            ModuleViewModels.AddRange(Module.GetViewModels());
        }

--- a/src/Artemis.UI/ViewModels/Screens/SurfaceEditorViewModel.cs
+++ b/src/Artemis.UI/ViewModels/Screens/SurfaceEditorViewModel.cs
@ -1,5 +1,4 @@
 using System;
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using System.Threading.Tasks;
@ -33,10 +32,11 @@ namespace Artemis.UI.ViewModels.Screens
            _dialogService = dialogService;
        }

-        public RectangleGeometry SelectionRectangle { get; set; }
        public ObservableCollection<SurfaceDeviceViewModel> Devices { get; set; }
        public ObservableCollection<Surface> SurfaceConfigurations { get; set; }
-
+        public RectangleGeometry SelectionRectangle { get; set; }
+        public PanZoomViewModel PanZoomViewModel { get; set; }
+        
        public Surface SelectedSurface
        {
            get => _selectedSurface;
@ -47,7 +47,6 @@ namespace Artemis.UI.ViewModels.Screens
            }
        }

-        public PanZoomViewModel PanZoomViewModel { get; set; }
        public string Title => "Surface Editor";

        public Surface CreateSurfaceConfiguration(string name)
@ -189,7 +188,7 @@ namespace Artemis.UI.ViewModels.Screens

        #endregion

-        #region RgbDevice selection
+        #region Selection

        private MouseDragStatus _mouseDragStatus;
        private Point _mouseDragStartPoint;
--- a/src/Artemis.UI/Views/Controls/ProfileEditor/ProfileDeviceView.xaml
+++ b/src/Artemis.UI/Views/Controls/ProfileEditor/ProfileDeviceView.xaml
@ -1,23 +1,34 @@
-<UserControl
+<UserControl x:Class="Artemis.UI.Views.Controls.ProfileEditor.ProfileDeviceView"
             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.ViewModels.Controls.ProfileEditor"
-             xmlns:Converters="clr-namespace:Artemis.UI.Converters" x:Class="Artemis.UI.Views.Controls.ProfileEditor.ProfileDeviceView"
+             xmlns:converters="clr-namespace:Artemis.UI.Converters"
             mc:Ignorable="d"
             d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileDeviceViewModel}}"
-             d:DesignHeight="450" d:DesignWidth="800"
-             Cursor="{Binding Cursor}"
-             MouseEnter="{s:Action MouseEnter}"
-             MouseLeave="{s:Action MouseLeave}">
+             d:DesignHeight="450" d:DesignWidth="800">
    <UserControl.Resources>
-        <Converters:NullToImageConverter x:Key="NullToImageConverter"/>
+        <converters:NullToImageConverter x:Key="NullToImageConverter"/>
+        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
    </UserControl.Resources>
    <Grid>
-        <Image Source="{Binding Device.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />
+        <!-- Device image with fallback -->
+        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />
+
+        <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
+                   Stroke="{DynamicResource ControlBorderBrush}"
+                   StrokeThickness="1"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}" />
+        <TextBlock Text="{Binding Device.RgbDevice.DeviceInfo.DeviceName}"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   TextWrapping="Wrap"
+                   TextAlignment="Center" />
+
+        <!-- LEDs -->
        <ItemsControl ItemsSource="{Binding Leds}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
--- a/src/Artemis.UI/Views/Controls/ProfileEditor/ProfileEditorView.xaml
+++ b/src/Artemis.UI/Views/Controls/ProfileEditor/ProfileEditorView.xaml
@ -5,10 +5,168 @@
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Artemis.UI.Views.Controls.ProfileEditor"
             xmlns:profileEditor="clr-namespace:Artemis.UI.ViewModels.Controls.ProfileEditor"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:models="clr-namespace:Artemis.Core.Models.Surface;assembly=Artemis.Core"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800"
             d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileEditorViewModel}}">
-    <Grid>
-            
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary
+                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
+                <ResourceDictionary
+                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid Margin="16">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="300" />
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
+
+        <TextBlock Grid.Row="0" Grid.Column="0" Style="{StaticResource MaterialDesignDisplay1TextBlock}">Profile editor</TextBlock>
+        <TextBlock Grid.Row="1" Grid.Column="0" Style="{StaticResource MaterialDesignCaptionTextBlock}"
+                   Margin="0,0,0,5">
+            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>
+
+        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="2" Grid.Column="0"
+                             VerticalAlignment="Stretch" Margin="0,0,5,0">
+            <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}"> 
+                                 </ContentControl> 
+                             </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>
+            </Grid>
+        </materialDesign:Card>
+
+        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="2" Grid.Column="1" VerticalAlignment="Stretch" Margin="5,0,0,0">
+            <materialDesign:DialogHost Identifier="SurfaceListDialogHost" CloseOnClickAway="True" UseLayoutRounding="True">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                </Grid>
+            </materialDesign:DialogHost>
+        </materialDesign:Card>
+
+        <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
+                   Style="{StaticResource MaterialDesignCaptionTextBlock}" Margin="0,5,0,0">
+            <Run Text="Hold" />
+            <Run FontWeight="Bold" Text="shift" />
+            <Run Text="or click and drag to select multiple LEDs at once. To move around the surface hold down" />
+            <Run FontWeight="Bold" Text="ctrl" />
+            <Run Text="and drag." />
+        </TextBlock>
    </Grid>
 </UserControl>
--- a/src/Artemis.UI/Views/Controls/SurfaceEditor/SurfaceDeviceView.xaml
+++ b/src/Artemis.UI/Views/Controls/SurfaceEditor/SurfaceDeviceView.xaml
@ -19,6 +19,7 @@
        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
    </UserControl.Resources>
    <Grid>
+        <!-- Device image with fallback -->
        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />

        <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
@ -32,6 +33,7 @@
                   TextWrapping="Wrap"
                   TextAlignment="Center" />

+        <!-- LEDs -->
        <ItemsControl ItemsSource="{Binding Leds}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
@ -51,6 +53,7 @@
            </ItemsControl.ItemTemplate>
        </ItemsControl>

+        <!-- Selection rectangle -->
        <Rectangle Width="Auto" Height="Auto" StrokeThickness="2">
            <Rectangle.Stroke>
                <SolidColorBrush Color="{StaticResource IdealForegroundColor}" />