Surface editor - Show LED colors in editor

Surface editor - Link to FAQ for missing layouts

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

@@ -34,12 +34,32 @@
         </Grid.RowDefinitions>
 
         <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
-            <TextBlock>
+            <Grid>
-                <InlineUIContainer>
+                <Grid.ColumnDefinitions>
-                    <materialDesign:PackIcon Kind="AboutOutline" Margin="0 0 0 -3" />
+                    <ColumnDefinition Width="25" />
-                </InlineUIContainer>
+                    <ColumnDefinition />
-                <Run Text=" The surface is a digital representation of your LED setup. Set this up accurately and effects will seamlessly move from one device to the other." />
+                </Grid.ColumnDefinitions>
-            </TextBlock>
+                <Grid.RowDefinitions>
+                    <RowDefinition />
+                    <RowDefinition />
+                </Grid.RowDefinitions>
+                <materialDesign:PackIcon Grid.Column="0" Grid.RowSpan="2" Kind="AboutOutline" />
+                <TextBlock Grid.Row="0" Grid.Column="1">
+                    The surface is a digital representation of your LED setup. Set this up accurately and effects will seamlessly move from one
+                    device to the other.
+                </TextBlock>
+                <TextBlock Grid.Row="1" Grid.Column="1">
+                    Are devices showing up as gray blocks and/or are LEDs in wrong place and not sure why?
+                    <Run Text="Check out the" FontWeight="Bold" />
+                    <Hyperlink Style="{StaticResource ArtemisHyperlink}"
+                               RequestNavigate="{s:Action OpenHyperlink}"
+                               FontWeight="Bold"
+                               NavigateUri="https://wiki.artemis-rgb.com/faq#q-my-device-is-missing-an-image-and-the-leds-are-in-the-wrong-place-whats-wrong">
+                        FAQ
+                    </Hyperlink>
+                    <Run Text="more info." FontWeight="Bold" />
+                </TextBlock>
+            </Grid>
             <Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 10" />
         </StackPanel>
 
@@ -145,8 +165,8 @@
                                             </MenuItem>
                                             <Separator />
                                             <!-- Stylet can't disable it for us here, do it ourselves -->
-                                            <MenuItem Header="Identify input" 
+                                            <MenuItem Header="Identify input"
-                                                      Command="{s:Action DetectInput}" 
+                                                      Command="{s:Action DetectInput}"
                                                       CommandParameter="{Binding}"
                                                       IsEnabled="{Binding CanDetectInput}"
                                                       ToolTip="Teach Artemis which keypresses and/or button presses belong to this device">
@@ -203,7 +223,7 @@
                         </Button>
                     </StackPanel>
                 </StackPanel>
-                
+
             </Grid>
         </materialDesign:Card>
 
@@ -257,8 +277,9 @@
             <InlineUIContainer>
                 <materialDesign:PackIcon Kind="Keyboard" Margin="0 0 0 -3" />
             </InlineUIContainer>
-            <Run Text=" " /><Run Text="Hold" /><Run Text=" " /><Run FontWeight="Bold" Text="shift" /><Run Text=" " />
+            <Run Text="Hold " /><Run FontWeight="Bold" Text="shift" />
-            <Run Text="or click and drag to select multiple devices at once. To move around the surface hold down" /><Run Text=" " /><Run FontWeight="Bold" Text="ctrl" /><Run Text=" " />
+            <Run Text="or click and drag to select multiple devices at once. To move around the surface hold down" />
+            <Run FontWeight="Bold" Text="ctrl" />
             <Run Text="and drag." />
         </TextBlock>
     </Grid>

src/Artemis.UI/Screens/SurfaceEditor/SurfaceEditorViewModel.cs

@@ -7,6 +7,7 @@ using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
+using System.Windows.Navigation;
 using Artemis.Core;
 using Artemis.Core.Services;
 using Artemis.UI.Screens.Shared;
@@ -114,6 +115,11 @@ namespace Artemis.UI.Screens.SurfaceEditor
             return config;
         }
 
+        public void OpenHyperlink(object sender, RequestNavigateEventArgs e)
+        {
+            Core.Utilities.OpenUrl(e.Uri.AbsoluteUri);
+        }
+
         public async Task AutoArrange()
         {
             bool confirmed = await _dialogService.ShowConfirmDialog("Auto-arrange layout", "Are you sure you want to auto-arrange your layout? Your current settings will be overwritten.");

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

@@ -20,7 +20,7 @@
     <Grid>
         <!-- Content -->
         <Grid>
-            <shared:DeviceVisualizer Device="{Binding Device}" VerticalAlignment="Top" HorizontalAlignment="Left" />
+            <shared:DeviceVisualizer Device="{Binding Device}" ShowColors="True" VerticalAlignment="Top" HorizontalAlignment="Left" />
 
             <Rectangle Fill="{DynamicResource MaterialDesignCardBackground}"
                        Stroke="{DynamicResource MaterialDesignTextBoxBorder}"