Nodes - Tweak pin collection visuals

Nodes - Added counter node that counts from 0.0 to 1.0
Nodes - Added color ramp node
Gradient picker - Remove tilt from preview

src/Artemis.UI.Shared/Controls/GradientPicker/GradientPickerButton.cs

@@ -80,7 +80,7 @@ public class GradientPickerButton : TemplatedControl
     /// <summary>
     ///     Gets the linear gradient brush representing the color gradient.
     /// </summary>
-    public LinearGradientBrush LinearGradientBrush { get; } = new();
+    public LinearGradientBrush LinearGradientBrush { get; } = new() {StartPoint = RelativePoint.TopLeft, EndPoint = new RelativePoint(1, 0, RelativeUnit.Relative)};
 
     /// <summary>
     ///     Raised when the flyout opens.

src/Artemis.UI/Screens/VisualScripting/CableView.axaml

@@ -7,6 +7,7 @@
              xmlns:skiaSharp="clr-namespace:SkiaSharp;assembly=SkiaSharp"
              xmlns:shared="clr-namespace:Artemis.UI.Shared.Converters;assembly=Artemis.UI.Shared"
              xmlns:system="clr-namespace:System;assembly=System.Runtime"
+             xmlns:core="clr-namespace:Artemis.Core;assembly=Artemis.Core"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.VisualScripting.CableView"
              x:DataType="visualScripting:CableViewModel"
@@ -55,7 +56,8 @@
                             <TextBlock x:Name="HexDisplay"
                                        Text="{CompiledBinding Converter={StaticResource SKColorToStringConverter}}"
                                        VerticalAlignment="Center"
-                                       HorizontalAlignment="Stretch" />
+                                       HorizontalAlignment="Stretch" 
+                                       FontFamily="Consolas"/>
                             <Border Margin="5 0 0 0"
                                     VerticalAlignment="Bottom"
                                     HorizontalAlignment="Right"
@@ -74,8 +76,11 @@
                             </Border>
                         </StackPanel>
                     </DataTemplate>
+                    <DataTemplate DataType="core:Numeric">
+                        <TextBlock Text="{Binding}" FontFamily="Consolas"/>
+                    </DataTemplate>
                     <DataTemplate>
-                        <TextBlock Text="{Binding}" />
+                        <TextBlock Text="{Binding}" FontFamily="Consolas"/>
                     </DataTemplate>
                 </ContentControl.DataTemplates>
             </ContentControl>

src/Artemis.UI/Screens/VisualScripting/Pins/InputPinCollectionView.axaml

@@ -19,6 +19,7 @@
                     <StackPanel Orientation="Horizontal">
                         <ContentControl Content="{CompiledBinding}"></ContentControl>
 						<Button Classes="icon-button icon-button-small"
+                                Margin="2 2 0 0"
                                 ToolTip.Tip="Remove pin"
                                 Command="{CompiledBinding RemovePin}"
                                 CommandParameter="{CompiledBinding Pin}">

src/Artemis.UI/Screens/VisualScripting/Pins/OutputPinCollectionView.axaml

@@ -19,6 +19,7 @@
                 <DataTemplate DataType="pins:PinViewModel">
                     <StackPanel Orientation="Horizontal">
 						<Button Classes="icon-button icon-button-small"
+                                Margin="0 2 2 0"
                                 ToolTip.Tip="Remove pin"
                                 Command="{CompiledBinding RemovePin}"
                                 CommandParameter="{CompiledBinding Pin}">

src/Artemis.VisualScripting/Nodes/Color/RampSKColorNode.cs

@@ -0,0 +1,37 @@
+using Artemis.Core;
+using Artemis.VisualScripting.Nodes.Color.Screens;
+using SkiaSharp;
+
+namespace Artemis.VisualScripting.Nodes.Color;
+
+[Node("Color Ramp", "Maps values to colors with the use of a gradient.", "Color", InputType = typeof(Numeric), OutputType = typeof(SKColor))]
+public class RampSKColorNode : Node<ColorGradient, RampSKColorNodeCustomViewModel>
+{
+    #region Constructors
+
+    public RampSKColorNode()
+        : base("Color Ramp", "Maps values to colors with the use of a gradient.")
+    {
+        Input = CreateInputPin<Numeric>();
+        Output = CreateOutputPin<SKColor>();
+        Storage = ColorGradient.GetUnicornBarf();
+    }
+
+    #endregion
+
+    #region Methods
+
+    public override void Evaluate()
+    {
+        Output.Value = Storage?.GetColor(Input.Value) ?? SKColor.Empty;
+    }
+
+    #endregion
+
+    #region Properties & Fields
+
+    public InputPin<Numeric> Input { get; }
+    public OutputPin<SKColor> Output { get; }
+
+    #endregion
+}

src/Artemis.VisualScripting/Nodes/Color/Screens/RampSKColorNodeCustomView.axaml

@@ -0,0 +1,16 @@
+<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:screens="clr-namespace:Artemis.VisualScripting.Nodes.Color.Screens"
+             xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.Controls.GradientPicker;assembly=Artemis.UI.Shared"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.VisualScripting.Nodes.Color.Screens.RampSKColorNodeCustomView"
+             x:DataType="screens:RampSKColorNodeCustomViewModel">
+    <gradientPicker:GradientPickerButton Width="110"
+                                         Classes="condensed"
+                                         ColorGradient="{CompiledBinding Gradient}"
+                                         VerticalAlignment="Center" 
+                                         FlyoutOpened="GradientPickerButton_OnFlyoutOpened"
+                                         FlyoutClosed="GradientPickerButton_OnFlyoutClosed"/>
+</UserControl>

src/Artemis.VisualScripting/Nodes/Color/Screens/RampSKColorNodeCustomView.axaml.cs

@@ -0,0 +1,29 @@
+using Artemis.UI.Shared.Controls.GradientPicker;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.ReactiveUI;
+
+namespace Artemis.VisualScripting.Nodes.Color.Screens;
+
+public partial class RampSKColorNodeCustomView : ReactiveUserControl<RampSKColorNodeCustomViewModel>
+{
+    public RampSKColorNodeCustomView()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    private void GradientPickerButton_OnFlyoutOpened(GradientPickerButton sender, EventArgs args)
+    {
+    }
+
+    private void GradientPickerButton_OnFlyoutClosed(GradientPickerButton sender, EventArgs args)
+    {
+        ViewModel?.StoreGradient();
+    }
+}

src/Artemis.VisualScripting/Nodes/Color/Screens/RampSKColorNodeCustomViewModel.cs

@@ -0,0 +1,28 @@
+using Artemis.Core;
+using Artemis.UI.Shared.Services.NodeEditor;
+using Artemis.UI.Shared.Services.NodeEditor.Commands;
+using Artemis.UI.Shared.VisualScripting;
+
+namespace Artemis.VisualScripting.Nodes.Color.Screens;
+
+public class RampSKColorNodeCustomViewModel : CustomNodeViewModel
+{
+    private readonly RampSKColorNode _node;
+    private readonly INodeEditorService _nodeEditorService;
+
+    /// <inheritdoc />
+    public RampSKColorNodeCustomViewModel(RampSKColorNode node, INodeScript script, INodeEditorService nodeEditorService) : base(node, script)
+    {
+        _node = node;
+        _nodeEditorService = nodeEditorService;
+
+        Gradient = _node.Storage ?? new ColorGradient();
+    }
+
+    public ColorGradient Gradient { get; }
+
+    public void StoreGradient()
+    {
+        _nodeEditorService.ExecuteCommand(Script, new UpdateStorage<ColorGradient>(_node, Gradient));
+    }
+}

src/Artemis.VisualScripting/Nodes/Mathematics/CounterNode.cs

@@ -0,0 +1,32 @@
+using Artemis.Core;
+
+namespace Artemis.VisualScripting.Nodes.Mathematics;
+
+[Node("Counter", "Counts from 0.0 to 1.0 at a configurable rate.", "Mathematics", InputType = typeof(Numeric), OutputType = typeof(Numeric))]
+public class CounterNode : Node
+{
+    private DateTime _lastEvaluate = DateTime.MinValue;
+    private float _progress;
+
+    public CounterNode()
+        : base("Counter", "Counts from 0.0 to 1.0 at a configurable rate.")
+    {
+        Time = CreateInputPin<Numeric>("Time (ms)");
+        Output = CreateOutputPin<Numeric>();
+    }
+
+    public override void Evaluate()
+    {
+        DateTime now = DateTime.Now;
+        TimeSpan delta = now - _lastEvaluate;
+
+        if (Time.Value != 0)
+            _progress = (float) (_progress + delta.TotalMilliseconds / Time.Value) % 1.0f;
+
+        Output.Value = new Numeric(MathF.Round(_progress, 4, MidpointRounding.AwayFromZero));
+        _lastEvaluate = now;
+    }
+
+    public InputPin<Numeric> Time { get; set; }
+    public OutputPin<Numeric> Output { get; set; }
+}

src/Artemis.VisualScripting/Nodes/Mathematics/MathExpressionNode.cs

@@ -44,7 +44,7 @@ public class MathExpressionNode : Node<string, MathExpressionNodeCustomViewModel
         try
         {
             if (Storage != null)
-                Output.Value = new Numeric(_evaluator.CalcNumber(Storage, _variables));
+                Output.Value = new Numeric(Math.Round(_evaluator.CalcNumber(Storage, _variables), 4, MidpointRounding.AwayFromZero));
         }
         catch
         {