WIP Touch Joystick Control

Author: JTiefnig

AttitudeIndicator/MainWindow.xaml

@@ -95,7 +95,15 @@
           </ToggleButton.ToolTip>
           <fa:ImageAwesome Icon="MoonOutline" Height="20"/>
         </ToggleButton>
-        
+        <ComboBox Width="120" Margin="3" DockPanel.Dock="Left"
+                  SelectedItem="{Binding SelectedMode}" 
+                  ItemsSource="{Binding ModeList}">
+          <ComboBox.ItemTemplate>
+            <DataTemplate>
+              <TextBlock Text="{Binding Name}"/>
+            </DataTemplate>
+          </ComboBox.ItemTemplate>
+        </ComboBox>
       </DockPanel>
 
 
@@ -152,9 +160,11 @@
      <local:TouchJoyStick DockPanel.Dock="Left" 
                           HorizontalAlignment="Left" 
                           VerticalAlignment="Bottom" 
+                          Visibility="{Binding JoyStickVisibility}"
                           Foreground="{DynamicResource ThemeForeground}"
-                          CommandX="{Binding Rotator.JogX}"
-                          CommandY="{Binding Rotator.JogY}"/>
+                          Command="{Binding Rotator}"
+                          Margin="-40"
+                          />
 
   </Grid>
 </Window>

AttitudeIndicator/TouchJoyStick.xaml

@@ -5,44 +5,76 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:AttitudeIndicator"
              MinHeight="320"
-             MinWidth="320"
+             MinWidth="420"
              mc:Ignorable="d">
   <Grid Background="Transparent">
     <Grid.Resources>
       <GridLength x:Key="BoundingSize">60</GridLength>
     </Grid.Resources>
+    
     <Grid.RowDefinitions>
       <RowDefinition Height="{Binding Source={StaticResource BoundingSize}}" />
       <RowDefinition Height="*" />
       <RowDefinition Height="{Binding Source={StaticResource BoundingSize}}" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
       <ColumnDefinition Width="{Binding Source={StaticResource BoundingSize}}" />
-      <ColumnDefinition Width="*" />
+      <ColumnDefinition Width="1*" />
+      <ColumnDefinition Width="2*" />
       <ColumnDefinition Width="{Binding Source={StaticResource BoundingSize}}" />
     </Grid.ColumnDefinitions>
 
+    <!--Just a test -->
+    <!--<Canvas Grid.ColumnSpan="2" Grid.RowSpan="2">
+      <Path Stroke="{Binding Foreground, RelativeSource={RelativeSource AncestorType=UserControl}}" 
+          
+          StrokeThickness="3"
+          Data="M 10,100 A 90,90 90 0 1 100,10 A 90,90 90 0 1 100,10 ">
+      </Path>
+    </Canvas>-->
+
+
     <Border
-      x:Name="BasicRect"
+      x:Name="ZBasicRect"
       Grid.Row="1"
       Grid.Column="1"
-      CornerRadius="25"
-      
+      Margin="15 0 15 0"
+      CornerRadius="30"
       BorderBrush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=UserControl}}"
-      
       BorderThickness="3" />
 
     <Border
-      x:Name="Slider"
+      x:Name="ZSlider"
       Grid.Row="1"
       Grid.Column="1"
+
+      Height="80"
+      Margin="19 4 19 4"
+      Background="LightGray"
+      BorderBrush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=UserControl}}"
+      BorderThickness="2"
+      CornerRadius="30"
+      />
+
+    <Border
+      x:Name="XYBasicRect"
+      Grid.Row="1"
+      Grid.Column="2"
+      CornerRadius="30"
+      BorderBrush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=UserControl}}"
+      BorderThickness="3" />
+
+    <Border
+      x:Name="XYSlider"
+      Grid.Row="1"
+      Grid.Column="2"
       Width="80"
       Height="80"
       Margin="4"
       Background="LightGray"
       BorderBrush="{Binding Foreground, RelativeSource={RelativeSource AncestorType=UserControl}}"
       BorderThickness="2"
-      CornerRadius="25"
+      CornerRadius="30"
       >
 
       <!--CornerRadius="{Binding ActualHeight, RelativeSource={RelativeSource Self}}">-->

AttitudeIndicator/TouchJoyStick.xaml.cs

@@ -11,6 +11,7 @@
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Media.Imaging;
+using System.Windows.Media.Media3D;
 using System.Windows.Navigation;
 using System.Windows.Shapes;
 
@@ -21,24 +22,43 @@ namespace AttitudeIndicator
     /// </summary>
     public partial class TouchJoyStick : UserControl
     {
+
+
+        private enum InputState { None, DragXY, DragZ}
+
+
         public TouchJoyStick()
         {
             InitializeComponent();
 
-            BasicRect.Background= NormalBackgroundBrush;
+            // For XY Slider:
 
-            this.Slider.TouchDown += new EventHandler<TouchEventArgs>(TouchableThing_TouchDown);
+            XYBasicRect.Background= NormalBackgroundBrush;
 
-            this.Slider.MouseDown += SliderMouseDown;
-            this.BasicRect.MouseDown += SliderMouseDown;
-            this.MouseMove += SliderMouseMove;
+            this.XYSlider.TouchDown += new EventHandler<TouchEventArgs>(TouchableThing_TouchDown);
+
+            this.XYSlider.MouseDown += ( s,  e) => { mousedodou };
+
+            this.XYBasicRect.MouseDown += SliderMouseDown;
+
+            // For Z Slider:
+
+            ZBasicRect.Background = NormalBackgroundBrush;
 
+            this.ZSlider.TouchDown += new EventHandler<TouchEventArgs>(TouchableThing_TouchDown);
+            this.ZSlider.MouseDown += SliderMouseDown;
+            this.ZBasicRect.MouseDown += SliderMouseDown;
+
+
+
+            //Both 
+            this.MouseMove += SliderMouseMove;
             this.MouseLeave += SliderMouseLeave;
             this.MouseUp += SliderMouseLeave;
-
             this.TouchMove += new EventHandler<TouchEventArgs>(TouchableThing_TouchMove);
-
             this.TouchLeave += new EventHandler<TouchEventArgs>(TouchableThing_TouchLeave);
+
+
         }
 
         ColorAnimation fadein => new ColorAnimation(NormalBackGroundColor, TouchDownBackGroundColor, new Duration(TimeSpan.FromMilliseconds(300)));
@@ -62,61 +82,70 @@ protected override void OnRender(DrawingContext drawingContext)
 
         private void UIElementTransformer()
         {
-            var translx = XDeflection * 0.49 * (this.BasicRect.ActualWidth - this.Slider.ActualWidth);
-            var transly = YDeflection * 0.49 * (this.BasicRect.ActualHeight - this.Slider.ActualHeight);
+            var translx = XDeflection * 0.49 * (this.XYBasicRect.ActualWidth - this.XYSlider.ActualWidth);
+            var transly = YDeflection * 0.49 * (this.XYBasicRect.ActualHeight - this.XYSlider.ActualHeight);
+            this.XYSlider.RenderTransform = new TranslateTransform(translx, transly);
+
+            var translz = ZDeflection * 0.49 * (this.ZBasicRect.ActualHeight - this.ZSlider.ActualHeight);
+            this.ZSlider.RenderTransform = new TranslateTransform(0.0, translz);
+        }
 
-            TranslateTransform transform = new TranslateTransform(translx, transly);
 
-            this.Slider.RenderTransform = transform;
+        private void StartAnimation(InputState from, InputState to)
+        {
+            if(to == InputState.DragXY)
+                ((SolidColorBrush)XYBasicRect.Background).BeginAnimation(SolidColorBrush.ColorProperty, fadein);
+            if (to == InputState.DragZ)
+                ((SolidColorBrush)ZBasicRect.Background).BeginAnimation(SolidColorBrush.ColorProperty, fadein);
+
+            if(from == InputState.DragXY)
+                ((SolidColorBrush)XYBasicRect.Background).BeginAnimation(SolidColorBrush.ColorProperty, fadeout);
+            if (from == InputState.DragZ)
+                ((SolidColorBrush)ZBasicRect.Background).BeginAnimation(SolidColorBrush.ColorProperty, fadeout);
         }
 
 
-        private bool isDragging_;
-        private bool isDragging
+        private InputState _dragstate = InputState.None;
+
+        private InputState DragState
         {
-            get => isDragging_;
+            get => _dragstate;
             set
             {
-                if (value == isDragging_)
+                if (value == _dragstate)
                     return;
-                isDragging_ = value;
 
-                if (value)
-                {
-                    ((SolidColorBrush)BasicRect.Background).BeginAnimation(SolidColorBrush.ColorProperty,
-                    fadein);
-                }
-                else
-                {
-                    ((SolidColorBrush)BasicRect.Background).BeginAnimation(SolidColorBrush.ColorProperty,
-                    fadeout);
-                    XDeflection = 0;
-                    YDeflection = 0;
-                }
+                StartAnimation(_dragstate, value);
+
+                _dragstate = value;
 
             }
         }
 
+
+
+
         private void TouchableThing_TouchDown(object sender, TouchEventArgs e)
         {
-            isDragging = true;
 
         }
 
 
         private void SliderMouseDown(object sender, MouseEventArgs e)
         {
-            isDragging = true;
 
-            var myPoint = (e as MouseEventArgs).GetPosition(this.BasicRect);
+            var obj = (sender as Control);
+
+
+            var myPoint = (e as MouseEventArgs).GetPosition(this.XYBasicRect);
 
             CalcDeflectionFromPoint(myPoint);
 
         }
 
         private void SliderMouseMove(object sender, MouseEventArgs e)
         {
-            if (!isDragging)
+            if()
                 return;
 
             var myPoint = (e as MouseEventArgs).GetPosition(this.BasicRect);
@@ -214,18 +243,42 @@ public double YDeflection
         }
 
 
+        /// <summary>
+        /// Deflection in the second direction 
+        /// </summary>
+        public static readonly DependencyProperty ZDeflectionProperty =
+        DependencyProperty.Register(nameof(ZDeflection),
+        typeof(double),
+        typeof(TouchJoyStick),
+        new FrameworkPropertyMetadata(0d, new PropertyChangedCallback(DeflectionChanged)));
+
+        public double ZDeflection
+        {
+            get => (double)GetValue(ZDeflectionProperty);
+            set
+            {
+                double deflection;
+                if (value > 1)
+                    deflection = 1;
+                else if (value < -1)
+                    deflection = -1;
+                else
+                    deflection = value;
+
+                SetValue(ZDeflectionProperty, deflection);
+            }
+        }
+
+
         public static void DeflectionChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var obj = (d as TouchJoyStick);
             obj.UIElementTransformer();
 
-            obj.Command?.Execute(new Point(obj.XDeflection, obj.YDeflection));
-
-            obj.CommandX?.Execute(obj.XDeflection);
-            obj.CommandY?.Execute(obj.YDeflection);
-            // do nothing for now
+            obj.Command?.Execute(new Vector3D(obj.XDeflection, obj.YDeflection, obj.ZDeflection));
         }
 
+
         public static readonly DependencyProperty CommandProperty =
         DependencyProperty.Register(
             "Command",
@@ -240,39 +293,6 @@ public ICommand Command
         }
 
 
-        //obj.Command?.Execute(obj.Deflection);
-
-
-
-        public static readonly DependencyProperty CommandXProperty =
-        DependencyProperty.Register(
-            nameof(CommandX),
-            typeof(ICommand),
-            typeof(TouchJoyStick),
-            new UIPropertyMetadata(null));
-
-        public ICommand CommandX
-        {
-            get { return (ICommand)GetValue(CommandXProperty); }
-            set { SetValue(CommandXProperty, value); }
-        }
-
-
-        public static readonly DependencyProperty CommandYProperty =
-            DependencyProperty.Register(
-                nameof(CommandY),
-                typeof(ICommand),
-                typeof(TouchJoyStick),
-                new UIPropertyMetadata(null));
-
-        public ICommand CommandY
-        {
-            get { return (ICommand)GetValue(CommandYProperty); }
-            set { SetValue(CommandYProperty, value); }
-        }
-
-
-
         #endregion DependencyProperty
     }
 }