Setup wizard - Added and auto-show on home open

UI - Slightly darkened W11 effect
2026-11-12 11:56:30 +00:00 · 2022-07-29 22:01:36 +02:00
1 parent 5c1da6d2c4
commit 1210dc3f63
@@ -0,0 +1,26 @@
+<Window xmlns="https://github.com/avaloniaui"
+        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+        xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+        xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
+        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+        x:Class="Artemis.UI.Screens.StartupWizard.StartupWizardView"
+        x:DataType="startupWizard:StartupWizardViewModel"
+        Icon="/Assets/Images/Logo/application.ico"
+        Title="Artemis | Startup wizard"
+        Width="1000"
+        Height="735"
+        WindowStartupLocation="CenterOwner">
+    <Grid Margin="15" RowDefinitions="*,Auto" ColumnDefinitions="Auto,*">
+        <controls:Frame Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Name="Frame" />
+
+        <Button Grid.Row="1" Grid.Column="0" Command="{CompiledBinding SkipOrFinishWizard}" IsVisible="{CompiledBinding !ShowFinish}">Skip &amp; close</Button>
+        <StackPanel Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Orientation="Horizontal" Spacing="5" Margin="0 15 0 0">
+            <Button Command="{CompiledBinding GoBack}" IsVisible="{CompiledBinding ShowGoBack}">Back</Button>
+            <Button Command="{CompiledBinding Continue}" IsVisible="{CompiledBinding ShowContinue}" Width="80">Continue</Button>
+            <Button Command="{CompiledBinding SkipOrFinishWizard}" IsVisible="{CompiledBinding ShowFinish}" Width="80">Finish</Button>
+        </StackPanel>
+    </Grid>
+
+</Window>
@@ -0,0 +1,48 @@
+using System;
+using System.Reactive.Disposables;
+using Artemis.UI.Screens.StartupWizard.Steps;
+using Artemis.UI.Shared;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using FluentAvalonia.UI.Controls;
+using FluentAvalonia.UI.Navigation;
+using ReactiveUI;
+
+namespace Artemis.UI.Screens.StartupWizard;
+
+public class StartupWizardView : ReactiveCoreWindow<StartupWizardViewModel>
+{
+    private readonly Frame _frame;
+
+    public StartupWizardView()
+    {
+        InitializeComponent();
+#if DEBUG
+        this.AttachDevTools();
+#endif
+
+        _frame = this.Get<Frame>("Frame");
+
+        this.WhenActivated(d => ViewModel.WhenAnyValue(vm => vm.CurrentStep).Subscribe(ApplyCurrentStep).DisposeWith(d));
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    private void ApplyCurrentStep(int step)
+    {
+        if (step == 1)
+            _frame.NavigateToType(typeof(WelcomeStep), null, new FrameNavigationOptions());
+        else if (step == 2)
+            _frame.NavigateToType(typeof(DevicesStep), null, new FrameNavigationOptions());
+        else if (step == 3)
+            _frame.NavigateToType(typeof(LayoutStep), null, new FrameNavigationOptions());
+        else if (step == 4)
+            _frame.NavigateToType(typeof(SettingsStep), null, new FrameNavigationOptions());
+        else if (step == 5)
+            _frame.NavigateToType(typeof(FinishStep), null, new FrameNavigationOptions());
+    }
+}
@@ -0,0 +1,126 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Reactive;
+using System.Reflection;
+using Artemis.Core;
+using Artemis.Core.DeviceProviders;
+using Artemis.Core.Services;
+using Artemis.UI.Ninject.Factories;
+using Artemis.UI.Screens.Plugins;
+using Artemis.UI.Shared;
+using ReactiveUI;
+
+namespace Artemis.UI.Screens.StartupWizard;
+
+public class StartupWizardViewModel : DialogViewModelBase<bool>
+{
+    private readonly IRgbService _rgbService;
+    private readonly ISettingsService _settingsService;
+    private int _currentStep;
+    private bool _showContinue;
+    private bool _showGoBack;
+    private bool _showFinish;
+
+    public StartupWizardViewModel(ISettingsService settingsService, IRgbService rgbService, IPluginManagementService pluginManagementService, ISettingsVmFactory settingsVmFactory)
+    {
+        _settingsService = settingsService;
+        _rgbService = rgbService;
+
+        Continue = ReactiveCommand.Create(ExecuteContinue);
+        GoBack = ReactiveCommand.Create(ExecuteGoBack);
+        SkipOrFinishWizard = ReactiveCommand.Create(ExecuteSkipOrFinishWizard);
+        SelectLayout = ReactiveCommand.Create<string>(ExecuteSelectLayout);
+
+        AssemblyInformationalVersionAttribute? versionAttribute = typeof(StartupWizardViewModel).Assembly.GetCustomAttribute<AssemblyInformationalVersionAttribute>();
+        Version = $"Version {versionAttribute?.InformationalVersion} build {Constants.BuildInfo.BuildNumberDisplay}";
+
+        // Take all compatible plugins that have an always-enabled device provider
+        DeviceProviders = new ObservableCollection<PluginViewModel>(pluginManagementService.GetAllPlugins()
+            .Where(p => p.Info.IsCompatible && p.Features.Any(f => f.AlwaysEnabled && f.FeatureType.IsAssignableTo(typeof(DeviceProvider))))
+            .OrderBy(p => p.Info.Name)
+            .Select(p => settingsVmFactory.PluginViewModel(p, null)));
+
+        CurrentStep = 1;
+        SetupButtons();
+    }
+
+    
+    public ReactiveCommand<Unit, Unit> Continue { get; }
+    public ReactiveCommand<Unit, Unit> GoBack { get; }
+    public ReactiveCommand<Unit, Unit> SkipOrFinishWizard { get; }
+    public ReactiveCommand<string, Unit> SelectLayout { get; }
+
+    public string Version { get; }
+    public ObservableCollection<PluginViewModel> DeviceProviders { get; }
+    
+    public PluginSetting<bool> UIAutoRun => _settingsService.GetSetting("UI.AutoRun", false);
+    public PluginSetting<int> UIAutoRunDelay => _settingsService.GetSetting("UI.AutoRunDelay", 15);
+    public PluginSetting<bool> UIShowOnStartup => _settingsService.GetSetting("UI.ShowOnStartup", true);
+    public PluginSetting<bool> UICheckForUpdates => _settingsService.GetSetting("UI.CheckForUpdates", true);
+
+    public int CurrentStep
+    {
+        get => _currentStep;
+        set => RaiseAndSetIfChanged(ref _currentStep, value);
+    }
+
+    public bool ShowContinue
+    {
+        get => _showContinue;
+        set => RaiseAndSetIfChanged(ref _showContinue, value);
+    }
+
+    public bool ShowGoBack
+    {
+        get => _showGoBack;
+        set => RaiseAndSetIfChanged(ref _showGoBack, value);
+    }
+
+    public bool ShowFinish
+    {
+        get => _showFinish;
+        set => RaiseAndSetIfChanged(ref _showFinish, value);
+    }
+
+    private void ExecuteGoBack()
+    {
+        if (CurrentStep > 1)
+            CurrentStep--;
+
+        SetupButtons();
+    }
+
+    private void ExecuteContinue()
+    {
+        if (CurrentStep < 5)
+            CurrentStep++;
+
+        SetupButtons();
+    }
+
+    private void SetupButtons()
+    {
+        ShowContinue = CurrentStep != 3 && CurrentStep < 5;
+        ShowGoBack = CurrentStep > 1;
+        ShowFinish = CurrentStep == 5;
+    }
+
+    private void ExecuteSkipOrFinishWizard()
+    {
+        PluginSetting<bool> setting = _settingsService.GetSetting("UI.SetupWizardCompleted", false);
+        setting.Value = true;
+        setting.Save();
+
+        Close(true);
+    }
+
+
+    private void ExecuteSelectLayout(string layout)
+    {
+        // TODO: Implement the layout
+        _rgbService.AutoArrangeDevices();
+
+        ExecuteContinue();
+    }
+}
@@ -0,0 +1,44 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Screens.StartupWizard.Steps.DevicesStep"
+             x:DataType="startupWizard:StartupWizardViewModel">
+    <Border Classes="card">
+        <Grid RowDefinitions="Auto,*,Auto,Auto">
+            <StackPanel Grid.Row="0">
+                <TextBlock TextWrapping="Wrap">
+                    Devices are supported through the use of device providers.
+                </TextBlock>
+                <TextBlock TextWrapping="Wrap">
+                    In the list below you can enable device providers for each brand you own by checking "Enable feature".
+                </TextBlock>
+            </StackPanel>
+
+            <ScrollViewer Grid.Row="1" Margin="0 15">
+                <ItemsControl Items="{CompiledBinding DeviceProviders}" Margin="-4 0 8 0">
+                    <ItemsControl.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <UniformGrid Columns="2" />
+                        </ItemsPanelTemplate>
+                    </ItemsControl.ItemsPanel>
+
+                    <ItemsControl.ItemTemplate>
+                        <DataTemplate>
+                            <Border Classes="card-condensed" Margin="4">
+                                <ContentControl Content="{Binding}"></ContentControl>
+                            </Border>
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </ScrollViewer>
+
+
+            <TextBlock Grid.Row="2" Foreground="#FFB9A40A" TextWrapping="Wrap">
+                Note: To avoid possible instability it's recommended to disable the device providers of brands you don't own.
+            </TextBlock>
+        </Grid>
+    </Border>
+</UserControl>
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Screens.StartupWizard.Steps;
+
+public partial class DevicesStep : UserControl
+{
+    public DevicesStep()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
@@ -0,0 +1,52 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
+             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Screens.StartupWizard.Steps.FinishStep"
+             x:DataType="startupWizard:StartupWizardViewModel">
+    <Border Classes="card" VerticalAlignment="Top">
+        <StackPanel>
+            <TextBlock Classes="h4">All finished!</TextBlock>
+
+            <TextBlock TextWrapping="Wrap">
+                You are now ready to start using Artemis, enjoy! 😁
+            </TextBlock>
+            <TextBlock TextWrapping="Wrap">
+                To learn more about Artemis and how to use it you may find these resources useful:
+            </TextBlock>
+
+            <Grid ColumnDefinitions="Auto,*" Margin="0 15 0 0">
+                <Grid.Styles>
+                    <Style Selector="TextBlock.link-name">
+                        <Setter Property="Margin" Value="0 7 15 6" />
+                        <Setter Property="FontWeight" Value="600" />
+                    </Style>
+                </Grid.Styles>
+
+                <StackPanel Grid.Row="0" Grid.Column="0">
+                    <TextBlock Classes="link-name">Artemis wiki</TextBlock>
+                    <TextBlock Classes="link-name">Getting started guide</TextBlock>
+                    <TextBlock Classes="link-name">GitHub</TextBlock>
+                    <TextBlock Classes="link-name">Discord</TextBlock>
+                </StackPanel>
+                <StackPanel Grid.Column="1">
+                    <controls:HyperlinkButton NavigateUri="https://wiki.artemis-rgb.com/">
+                        https://wiki.artemis-rgb.com/
+                    </controls:HyperlinkButton>
+                    <controls:HyperlinkButton NavigateUri="https://wiki.artemis-rgb.com/en/guides/user/introduction">
+                        https://wiki.artemis-rgb.com/en/guides/user/introduction
+                    </controls:HyperlinkButton>
+                    <controls:HyperlinkButton NavigateUri="https://github.com/Artemis-RGB/Artemis">
+                        https://github.com/Artemis-RGB/Artemis
+                    </controls:HyperlinkButton>
+                    <controls:HyperlinkButton NavigateUri="https://discord.gg/S3MVaC9">
+                        https://discord.gg/S3MVaC9
+                    </controls:HyperlinkButton>
+                </StackPanel>
+            </Grid>
+        </StackPanel>
+    </Border>
+</UserControl>
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Screens.StartupWizard.Steps;
+
+public partial class FinishStep : UserControl
+{
+    public FinishStep()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
@@ -0,0 +1,63 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Screens.StartupWizard.Steps.LayoutStep"
+             x:DataType="startupWizard:StartupWizardViewModel">
+
+    <Grid RowDefinitions="Auto,*,Auto,Auto" ColumnDefinitions="*,*">
+        <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Classes="card">
+            <StackPanel>
+                <TextBlock TextWrapping="Wrap">
+                    Artemis uses "spatial awareness" to create realistic effects across multiple devices.
+                </TextBlock>
+                <TextBlock TextWrapping="Wrap">
+                    In order to do this correctly, we need to know where your devices are located on your desk. Select one of the two presets below, after the setup wizard finishes you can tweak this in detail in the surface editor.
+                </TextBlock>
+            </StackPanel>
+        </Border>
+        
+        <Button Grid.Row="1"
+                Grid.Column="0"
+                Command="{CompiledBinding SelectLayout}"
+                CommandParameter="left"
+                HorizontalAlignment="Right"
+                Margin="0 0 10 0"
+                Width="280"
+                Height="280"
+                IsEnabled="False">
+            <StackPanel>
+                <avalonia:MaterialIcon Kind="HandLeft" Width="150" Height="150" HorizontalAlignment="Center" />
+                <TextBlock TextAlignment="Center" Classes="h4" Margin="0 10 0 0">
+                    Left-handed preset (NYI)
+                </TextBlock>
+                <TextBlock TextAlignment="Center" Classes="subtitle" TextWrapping="Wrap">
+                    A preset with the mouse on the left side of the keyboard
+                </TextBlock>
+            </StackPanel>
+        </Button>
+
+        <Button Grid.Row="1"
+                Grid.Column="1"
+                Command="{CompiledBinding SelectLayout}"
+                CommandParameter="right"
+                HorizontalAlignment="Left"
+                Margin="10 0 0 0"
+                Width="280"
+                Height="280">
+            <StackPanel>
+                <avalonia:MaterialIcon Kind="HandRight" Width="150" Height="150" HorizontalAlignment="Center" />
+                <TextBlock TextAlignment="Center" Classes="h4" Margin="0 10 0 0">
+                    Right-handed preset
+                </TextBlock>
+                <TextBlock TextAlignment="Center" Classes="subtitle" TextWrapping="Wrap">
+                    A preset with the mouse on the right side of the keyboard
+                </TextBlock>
+            </StackPanel>
+        </Button>
+    </Grid>
+
+</UserControl>
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Screens.StartupWizard.Steps;
+
+public partial class LayoutStep : UserControl
+{
+    public LayoutStep()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
@@ -0,0 +1,74 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Screens.StartupWizard.Steps.SettingsStep"
+             x:DataType="startupWizard:StartupWizardViewModel">
+    <Border Classes="card" VerticalAlignment="Top">
+        <StackPanel>
+            <TextBlock>
+                Artemis comes with a variety of settings you can change to tweak everything to your liking.
+            </TextBlock>
+            <TextBlock>
+                Below you can find a few relevant settings, many more can be changed later on the settings page.
+            </TextBlock>
+
+            <Border Classes="card" Margin="0 15 0 0">
+                <StackPanel>
+                    <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
+                        <StackPanel Grid.Column="0">
+                            <TextBlock>Auto-run on startup</TextBlock>
+                        </StackPanel>
+                        <ToggleSwitch Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" IsChecked="{CompiledBinding UIAutoRun.Value}" MinWidth="0" Margin="0 -10" />
+                    </Grid>
+                    <Separator Classes="card-separator" />
+
+                    <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
+                        <StackPanel Grid.Column="0">
+                            <TextBlock>Hide window on auto-run</TextBlock>
+                        </StackPanel>
+                        <StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
+                            <ToggleSwitch IsChecked="{CompiledBinding !UIShowOnStartup.Value}" IsEnabled="{CompiledBinding UIAutoRun.Value}" MinWidth="0" Margin="0 -10" />
+                        </StackPanel>
+                    </Grid>
+                    <Separator Classes="card-separator" />
+
+                    <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
+                        <StackPanel Grid.Column="0">
+                            <TextBlock>Startup delay</TextBlock>
+                            <TextBlock Classes="subtitle" TextWrapping="Wrap">
+                                Set the amount of seconds to wait before auto-running Artemis.
+                            </TextBlock>
+                            <TextBlock Classes="subtitle" TextWrapping="Wrap">
+                                If some devices don't work because Artemis starts before the manufacturer's software, try increasing this value.
+                            </TextBlock>
+                        </StackPanel>
+                        <StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" Orientation="Horizontal">
+                            <TextBox Text="{CompiledBinding UIAutoRunDelay.Value}" IsEnabled="{CompiledBinding UIAutoRun.Value}" Width="120" />
+                            <TextBlock VerticalAlignment="Center" TextAlignment="Right" Width="30">sec</TextBlock>
+                        </StackPanel>
+                    </Grid>
+                    <Separator Classes="card-separator" />
+
+                    <Grid RowDefinitions="*,*" ColumnDefinitions="*,Auto">
+                        <StackPanel Grid.Column="0">
+                            <TextBlock>
+                                Check for updates
+                            </TextBlock>
+                            <TextBlock Classes="subtitle" TextWrapping="Wrap">
+                                If enabled, we'll check for updates on startup and periodically while running.
+                            </TextBlock>
+                        </StackPanel>
+                        <StackPanel Grid.Row="0" Grid.Column="1" VerticalAlignment="Center">
+                            <ToggleSwitch IsChecked="{CompiledBinding UICheckForUpdates.Value}" MinWidth="0" />
+                        </StackPanel>
+                    </Grid>
+                </StackPanel>
+            </Border>
+        </StackPanel>
+
+
+    </Border>
+</UserControl>
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Screens.StartupWizard.Steps;
+
+public partial class SettingsStep : UserControl
+{
+    public SettingsStep()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
@@ -0,0 +1,61 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:startupWizard="clr-namespace:Artemis.UI.Screens.StartupWizard"
+             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Screens.StartupWizard.Steps.WelcomeStep"
+             x:DataType="startupWizard:StartupWizardViewModel">
+    <StackPanel>
+        <Grid RowDefinitions="*,*" ColumnDefinitions="Auto,*,Auto">
+            <Image Grid.Column="0" Grid.RowSpan="2" Width="65" Height="65" VerticalAlignment="Center" Source="/Assets/Images/Logo/bow.png" Margin="0 0 20 0" />
+            <TextBlock Grid.Row="0" Grid.Column="1" FontSize="36" VerticalAlignment="Bottom">
+                Artemis 2
+            </TextBlock>
+
+            <StackPanel Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Bottom" Orientation="Horizontal">
+                <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View website" NavigateUri="https://artemis-rgb.com">
+                    <avalonia:MaterialIcon Kind="Web" />
+                </controls:HyperlinkButton>
+                <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View GitHub repository" NavigateUri="https://github.com/Artemis-RGB/Artemis">
+                    <avalonia:MaterialIcon Kind="Github" />
+                </controls:HyperlinkButton>
+                <controls:HyperlinkButton Classes="icon-button" ToolTip.Tip="View Wiki" NavigateUri="https://wiki.artemis-rgb.com">
+                    <avalonia:MaterialIcon Kind="BookOpenOutline" />
+                </controls:HyperlinkButton>
+            </StackPanel>
+
+            <TextBlock Grid.Row="1"
+                       Grid.Column="1"
+                       VerticalAlignment="Top"
+                       Foreground="{DynamicResource MaterialDesignBodyLight}"
+                       Text="{Binding Version}" />
+
+            <controls:HyperlinkButton Grid.Row="1"
+                                      Grid.Column="2"
+                                      VerticalAlignment="Top"
+                                      NavigateUri="https://github.com/Artemis-RGB/Artemis/blob/master/LICENSE">
+                PolyForm Noncommercial License 1.0.0
+            </controls:HyperlinkButton>
+        </Grid>
+
+        <Border Classes="card">
+            <StackPanel>
+                <TextBlock Classes="h4">Welcome to the Artemis startup wizard!</TextBlock>
+
+                <TextBlock TextWrapping="Wrap">
+                    In this wizard we'll walk you through the initial configuration of Artemis.
+                </TextBlock>
+                <TextBlock TextWrapping="Wrap">
+                    Before you can start you need to tell Artemis which devices you want to use and where they are placed on your desk.
+                </TextBlock>
+                <TextBlock Classes="subtitle" TextWrapping="Wrap" Margin="0 15 0 0">
+                    PS: You can also skip the wizard and set things up yourself.
+                </TextBlock>
+            </StackPanel>
+        </Border>
+    </StackPanel>
+
+</UserControl>
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Artemis.UI.Screens.StartupWizard.Steps;
+
+public partial class WelcomeStep : UserControl
+{
+    public WelcomeStep()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}