Fixed device rotation/scaling in UI

src/Artemis.UI/Artemis.UI.csproj

@@ -150,6 +150,7 @@
     <Compile Include="Converters\NullToImageConverter.cs" />
     <Compile Include="Converters\NullToVisibilityConverter.cs" />
     <Compile Include="Extensions\RgbColorExtensions.cs" />
+    <Compile Include="Extensions\RgbRectangleExtensions.cs" />
     <Compile Include="Ninject\Factories\IModuleViewModelFactory.cs" />
     <Compile Include="Ninject\Factories\IProfileEditorViewModelFactory.cs" />
     <Compile Include="Ninject\UIModule.cs" />
@@ -375,12 +376,12 @@
     <PostBuildEvent>
     </PostBuildEvent>
   </PropertyGroup>
+  <Import Project="..\packages\Fody.6.0.5\build\Fody.targets" Condition="Exists('..\packages\Fody.6.0.5\build\Fody.targets')" />
   <Target Name="EnsureNuGetPackageBuildImports" BeforeTargets="PrepareForBuild">
     <PropertyGroup>
       <ErrorText>This project references NuGet package(s) that are missing on this computer. Use NuGet Package Restore to download them.  For more information, see http://go.microsoft.com/fwlink/?LinkID=322105. The missing file is {0}.</ErrorText>
     </PropertyGroup>
-    <Error Condition="!Exists('..\packages\PropertyChanged.Fody.3.1.3\build\PropertyChanged.Fody.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\PropertyChanged.Fody.3.1.3\build\PropertyChanged.Fody.props'))" />
     <Error Condition="!Exists('..\packages\Fody.6.0.5\build\Fody.targets')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\Fody.6.0.5\build\Fody.targets'))" />
+    <Error Condition="!Exists('..\packages\PropertyChanged.Fody.3.1.3\build\PropertyChanged.Fody.props')" Text="$([System.String]::Format('$(ErrorText)', '..\packages\PropertyChanged.Fody.3.1.3\build\PropertyChanged.Fody.props'))" />
   </Target>
-  <Import Project="..\packages\Fody.6.0.5\build\Fody.targets" Condition="Exists('..\packages\Fody.6.0.5\build\Fody.targets')" />
 </Project>

src/Artemis.UI/Extensions/RgbRectangleExtensions.cs

@@ -0,0 +1,18 @@
+using System.Windows;
+using RGB.NET.Core;
+
+namespace Artemis.UI.Extensions
+{
+    public static class RgbRectangleExtensions
+    {
+        public static Rect ToWindowsRect(this Rectangle rectangle, double scale)
+        {
+            return new Rect(
+                (int) (rectangle.Location.X * scale),
+                (int) (rectangle.Location.Y * scale),
+                (int) (rectangle.Size.Width * scale),
+                (int) (rectangle.Size.Height * scale)
+            );
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileEditorViewModel.cs

@@ -20,7 +20,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
     {
         private readonly IProfileService _profileService;
         private readonly IDialogService _dialogService;
-        private Profile _selectedProfile;
 
         public ProfileEditorViewModel(ProfileModule module, ICollection<ProfileEditorPanelViewModel> viewModels, IProfileService profileService, IDialogService dialogService)
         {
@@ -39,7 +38,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
 
             Items.AddRange(viewModels);
 
-            module.ActiveProfileChanged += ModuleOnActiveProfileChanged;
+            module.ActiveProfileChanged += ModuleOnActiveProfileChanged;            
         }
 
         public ProfileModule Module { get; }
@@ -50,28 +49,24 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
         public ProfileViewModel ProfileViewModel { get; }
 
         public BindableCollection<Profile> Profiles { get; set; }
-
         public Profile SelectedProfile
         {
-            get => _selectedProfile;
-            set
-            {
-                if (_selectedProfile == value)
-                    return;
-
-                var old = _selectedProfile;
-                _selectedProfile = value;
-                ChangeActiveProfile(old);
-            }
+            get => Module.ActiveProfile;
+            set => ChangeSelectedProfile(value);
         }
 
-        private void ChangeActiveProfile(Profile oldProfile)
+        private void ChangeSelectedProfile(Profile profile)
         {
-            Module.ChangeActiveProfile(_selectedProfile);
-            if (_selectedProfile != null)
-                _profileService.UpdateProfile(_selectedProfile, false);
+            if (profile == Module.ActiveProfile)
+                return;
+
+            var oldProfile = Module.ActiveProfile;
+            Module.ChangeActiveProfile(profile);
+
             if (oldProfile != null)
                 _profileService.UpdateProfile(oldProfile, false);
+            if (profile != null)
+                _profileService.UpdateProfile(profile, false);
         }
 
         public bool CanDeleteActiveProfile => SelectedProfile != null && Profiles.Count > 1;
@@ -107,7 +102,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor
             var newActiveProfile = index - 1 > -1 ? Profiles[index - 1] : Profiles[index + 1];
 
             // Activate the new active profile
-            Module.ChangeActiveProfile(newActiveProfile);
+            SelectedProfile = newActiveProfile;
 
             // Remove the old one
             Profiles.Remove(profile);

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileDeviceView.xaml

@@ -13,16 +13,21 @@
         <converters:NullToImageConverter x:Key="NullToImageConverter" />
         <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
     </UserControl.Resources>
-    <Grid>
+
+    <Grid Width="{Binding Device.RgbDevice.ActualSize.Width}" Height="{Binding Device.RgbDevice.ActualSize.Height}">
+        <Grid.LayoutTransform>
+            <RotateTransform Angle="{Binding Device.Rotation}" />
+        </Grid.LayoutTransform>
+
         <!-- Device image with fallback -->
-        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}, Mode=OneWay}" />
+        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" VerticalAlignment="Top" HorizontalAlignment="Left" />
 
         <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
                    Stroke="{DynamicResource ControlBorderBrush}"
                    StrokeThickness="1"
-                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}, Mode=OneWay}" />
+                   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}, Mode=OneWay}"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    TextWrapping="Wrap"
@@ -37,13 +42,13 @@
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemContainerStyle>
                 <Style TargetType="{x:Type ContentPresenter}">
-                    <Setter Property="Canvas.Left" Value="{Binding X, Mode=OneWay}" />
-                    <Setter Property="Canvas.Top" Value="{Binding Y, Mode=OneWay}" />
+                    <Setter Property="Canvas.Left" Value="{Binding X}" />
+                    <Setter Property="Canvas.Top" Value="{Binding Y}" />
                 </Style>
             </ItemsControl.ItemContainerStyle>
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <ContentControl Width="{Binding Width, Mode=OneWay}" Height="{Binding Height, Mode=OneWay}" s:View.Model="{Binding}" />
+                    <ContentControl Width="{Binding Width}" Height="{Binding Height}" s:View.Model="{Binding}" />
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileLedView.xaml

@@ -12,7 +12,7 @@
     <UserControl.Resources>
         <converters:NullToImageConverter x:Key="NullToImageConverter" />
     </UserControl.Resources>
-    <Canvas Width="{Binding Width, Mode=OneWay}" Height="{Binding Height, Mode=OneWay}">
+    <Canvas Width="{Binding Led.ActualSize.Width, Mode=OneWay}" Height="{Binding Led.ActualSize.Height, Mode=OneWay}">
         <Canvas.Background>
             <ImageBrush AlignmentX="Center" AlignmentY="Center" Stretch="Fill"
                         ImageSource="{Binding Led.Image, Converter={StaticResource NullToImageConverter}, Mode=OneWay}" />

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileLedViewModel.cs

@@ -13,10 +13,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
         public ProfileLedViewModel(Led led)
         {
             Led = led;
-            X = Led.Location.X;
-            Y = Led.Location.Y;
-            Width = Led.Size.Width;
-            Height = Led.Size.Height;
+
+            // Don't want ActualLocation here since rotation is done in XAML
+            X = Led.Location.X * Led.Device.Scale.Horizontal;
+            Y = Led.Location.Y * Led.Device.Scale.Vertical;
+            Width = Led.ActualSize.Width;
+            Height = Led.ActualSize.Height;
 
             Execute.OnUIThread(CreateLedGeometry);
         }
@@ -63,17 +65,18 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
 
         private void CreateRectangleGeometry()
         {
-            DisplayGeometry = new RectangleGeometry(new Rect(0.5, 0.5, Led.Size.Width - 1, Led.Size.Height - 1));
+
+            DisplayGeometry = new RectangleGeometry(new Rect(0.5, 0.5, Width - 1, Height - 1));
         }
 
         private void CreateCircleGeometry()
         {
-            DisplayGeometry = new EllipseGeometry(new Rect(0.5, 0.5, Led.Size.Width - 1, Led.Size.Height - 1));
+            DisplayGeometry = new EllipseGeometry(new Rect(0.5, 0.5, Width - 1, Height - 1));
         }
 
         private void CreateKeyCapGeometry()
         {
-            DisplayGeometry = new RectangleGeometry(new Rect(1, 1, Led.Size.Width - 2, Led.Size.Height - 2), 1.6, 1.6);
+            DisplayGeometry = new RectangleGeometry(new Rect(1, 1, Width - 2, Height - 2), 1.6, 1.6);
         }
 
         private void CreateCustomGeometry(double deflateAmount)
@@ -88,7 +91,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
                     {
                         Children = new TransformCollection
                         {
-                            new ScaleTransform(Led.Size.Width - deflateAmount, Led.Size.Height - deflateAmount),
+                            new ScaleTransform(Width - deflateAmount, Height - deflateAmount),
                             new TranslateTransform(deflateAmount / 2, deflateAmount / 2)
                         }
                     }

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileView.xaml

@@ -43,8 +43,7 @@
                   MouseDown="{s:Action EditorGridMouseClick}"
                   MouseMove="{s:Action EditorGridMouseMove}">
         <Grid.Background>
-            <VisualBrush TileMode="Tile" Stretch="Uniform"
-                                 Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
+            <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
                 <VisualBrush.Visual>
                     <Grid Width="20" Height="20">
                         <Grid.RowDefinitions>
@@ -102,9 +101,7 @@
                 </ItemsControl.ItemContainerStyle>
                 <ItemsControl.ItemTemplate>
                     <DataTemplate>
-                        <ContentControl Width="{Binding Device.RgbDevice.Size.Width}"
-                                                Height="{Binding Device.RgbDevice.Size.Height}"
-                                                s:View.Model="{Binding}" />
+                        <ContentControl s:View.Model="{Binding}" />
                     </DataTemplate>
                 </ItemsControl.ItemTemplate>
             </ItemsControl>

src/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorView.xaml

@@ -50,8 +50,7 @@
                   MouseMove="{s:Action EditorGridMouseMove}"
                   Cursor="{Binding Cursor}">
                 <Grid.Background>
-                    <VisualBrush TileMode="Tile" Stretch="Uniform"
-                                 Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
+                    <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
                         <VisualBrush.Visual>
                             <Grid Width="20" Height="20">
                                 <Grid.RowDefinitions>
@@ -91,8 +90,7 @@
                 <Grid Name="EditorDisplayGrid">
                     <Grid.RenderTransform>
                         <TransformGroup>
-                            <ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}"
-                                            ScaleY="{Binding PanZoomViewModel.Zoom}" />
+                            <ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}" ScaleY="{Binding PanZoomViewModel.Zoom}" />
                             <TranslateTransform X="{Binding PanZoomViewModel.PanX}" Y="{Binding PanZoomViewModel.PanY}" />
                         </TransformGroup>
                     </Grid.RenderTransform>
@@ -110,9 +108,7 @@
                         </ItemsControl.ItemContainerStyle>
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <ContentControl Width="{Binding Device.RgbDevice.DeviceRectangle.Size.Width}"
-                                                Height="{Binding Device.RgbDevice.DeviceRectangle.Size.Height}"
-                                                s:View.Model="{Binding}">
+                                <ContentControl s:View.Model="{Binding}">
                                     <ContentControl.ContextMenu>
                                         <ContextMenu>
                                             <MenuItem Header="Bring to Front" Command="{s:Action BringToFront}" CommandParameter="{Binding}">

src/Artemis.UI/Screens/SurfaceEditor/Visualization/SurfaceDeviceView.xaml

@@ -19,47 +19,47 @@
         <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
     </UserControl.Resources>
     <Grid>
-        <!-- Device image with fallback -->
-        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" VerticalAlignment="Top" HorizontalAlignment="Left">
-            <Image.LayoutTransform>
+        <!-- Content -->
+        <Grid Width="{Binding Device.RgbDevice.ActualSize.Width}" Height="{Binding Device.RgbDevice.ActualSize.Height}">
+            <Grid.LayoutTransform>
                 <RotateTransform Angle="{Binding Device.Rotation}" />
-            </Image.LayoutTransform>
-        </Image>
+            </Grid.LayoutTransform>
 
-        <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" />
+            <!-- Device image with fallback -->
+            <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" VerticalAlignment="Top" HorizontalAlignment="Left" />
 
-        <!-- LEDs -->
-        <ItemsControl ItemsSource="{Binding Leds}">
-            <ItemsControl.LayoutTransform>
-                <RotateTransform Angle="{Binding Device.Rotation}" />
-            </ItemsControl.LayoutTransform>
-            <ItemsControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <Canvas />
-                </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.ItemContainerStyle>
-                <Style TargetType="{x:Type ContentPresenter}">
-                    <Setter Property="Canvas.Left" Value="{Binding X}" />
-                    <Setter Property="Canvas.Top" Value="{Binding Y}" />
-                </Style>
-            </ItemsControl.ItemContainerStyle>
-            <ItemsControl.ItemTemplate>
-                <DataTemplate>
-                    <ContentControl Width="{Binding Width}" Height="{Binding Height}" s:View.Model="{Binding}" />
-                </DataTemplate>
-            </ItemsControl.ItemTemplate>
-        </ItemsControl>
+            <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>
+                        <Canvas />
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+                <ItemsControl.ItemContainerStyle>
+                    <Style TargetType="{x:Type ContentPresenter}">
+                        <Setter Property="Canvas.Left" Value="{Binding X}" />
+                        <Setter Property="Canvas.Top" Value="{Binding Y}" />
+                    </Style>
+                </ItemsControl.ItemContainerStyle>
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate>
+                        <ContentControl s:View.Model="{Binding}" />
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+        </Grid>
+        
         <!-- Selection rectangle -->
         <Rectangle Width="Auto" Height="Auto" StrokeThickness="2">
             <Rectangle.Stroke>

src/Artemis.UI/Screens/SurfaceEditor/Visualization/SurfaceDeviceViewModel.cs

@@ -1,7 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.ComponentModel;
-using System.Diagnostics;
 using System.Windows;
 using System.Windows.Input;
 using Artemis.Core.Models.Surface;
@@ -35,7 +33,7 @@ namespace Artemis.UI.Screens.SurfaceEditor.Visualization
 
         public Rect DeviceRectangle => Device.RgbDevice == null
             ? new Rect()
-            : new Rect(Device.X, Device.Y, Device.RgbDevice.Size.Width, Device.RgbDevice.Size.Height);
+            : new Rect(Device.X, Device.Y, Device.RgbDevice.DeviceRectangle.Size.Width, Device.RgbDevice.DeviceRectangle.Size.Height);
 
         public void StartMouseDrag(Point mouseStartPosition)
         {

src/Artemis.UI/Screens/SurfaceEditor/Visualization/SurfaceLedViewModel.cs

@@ -1,4 +1,5 @@
-using RGB.NET.Core;
+using System.ComponentModel;
+using RGB.NET.Core;
 using Stylet;
 
 namespace Artemis.UI.Screens.SurfaceEditor.Visualization
@@ -9,6 +10,8 @@ namespace Artemis.UI.Screens.SurfaceEditor.Visualization
         {
             Led = led;
             ApplyLedToViewModel();
+
+            Led.PropertyChanged += OnLedOnPropertyChanged;
         }
 
         public Led Led { get; set; }
@@ -18,12 +21,18 @@ namespace Artemis.UI.Screens.SurfaceEditor.Visualization
         public double Width { get; set; }
         public double Height { get; set; }
 
+        private void OnLedOnPropertyChanged(object sender, PropertyChangedEventArgs args)
+        {
+            if (args.PropertyName == "Location" || args.PropertyName == "ActualSize") ApplyLedToViewModel();
+        }
+
         public void ApplyLedToViewModel()
         {
-            X = Led.Location.X;
-            Y = Led.Location.Y;
-            Width = Led.Size.Width;
-            Height = Led.Size.Height;
+            // Don't want ActualLocation here since rotation is done in XAML
+            X = Led.Location.X * Led.Device.Scale.Horizontal;
+            Y = Led.Location.Y * Led.Device.Scale.Vertical;
+            Width = Led.ActualSize.Width;
+            Height = Led.ActualSize.Height;
         }
     }
 }