Add first flight joystick (Logitech Extreme 3D Pro)

src/assets/joystick-profiles.ts

@@ -92,6 +92,11 @@ export const availableGamepadToCockpitMaps: { [key in JoystickModel]: GamepadToC
     axes: [0, 1, 2, 3],
     buttons: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
   },
+  [JoystickModel.LogitechExtreme3DPro]: {
+    name: JoystickModel.XboxController_360,
+    axes: [0, 1, 5, 6, 7, 2, 3, 8, 9, 4],
+    buttons: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
+  },
   [JoystickModel.Unknown]: {
     name: 'Standard gamepad',
     axes: [0, 1, 2, 3, 4, 5, 6, 7],

src/components/joysticks/JoystickPS.vue

@@ -6,6 +6,7 @@
 import { v4 as uuid4 } from 'uuid'
 import { computed, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
+import { JoystickModel } from '@/libs/joystick/manager'
 import type { InputWithPrettyName } from '@/libs/joystick/protocols'
 import { scale } from '@/libs/utils'
 import { type JoystickInput, type ProtocolControllerMapping, JoystickAxis, JoystickButton } from '@/types/joystick'
@@ -14,13 +15,23 @@ import { InputType } from '@/types/joystick'
 const textColor = '#747474'
 
 /**
- * Joystick models
+ * Joystick SVG models
  */
-enum Models {
+enum SVGModel {
   PS4 = 'PS4',
   PS5 = 'PS5',
+  LogitechExtreme3DPro = 'LogitechExtreme3DPro',
 }
 
+const joystickSvgModel = computed(() => {
+  switch (joystickModel.value) {
+    case JoystickModel.LogitechExtreme3DPro:
+      return SVGModel.LogitechExtreme3DPro
+    default:
+      return SVGModel.PS4
+  }
+})
+
 const buttonPath: { [key in JoystickButton]: string } = {
   [JoystickButton.B0]: 'path_b0',
   [JoystickButton.B1]: 'path_b1',
@@ -42,12 +53,24 @@ const buttonPath: { [key in JoystickButton]: string } = {
   [JoystickButton.B17]: 'path_b17',
 }
 
-const axisPath: { [key in JoystickAxis]: string } = {
-  [JoystickAxis.A0]: 'path_b10',
-  [JoystickAxis.A1]: 'path_b10',
-  [JoystickAxis.A2]: 'path_b11',
-  [JoystickAxis.A3]: 'path_b11',
-}
+const axisPath = computed((): { [key in JoystickAxis]: string } => {
+  switch (joystickSvgModel.value) {
+    case SVGModel.LogitechExtreme3DPro:
+      return {
+        [JoystickAxis.A0]: 'path_b14',
+        [JoystickAxis.A1]: 'path_b14',
+        [JoystickAxis.A2]: 'path_b13',
+        [JoystickAxis.A3]: 'path_b12',
+      }
+    default:
+      return {
+        [JoystickAxis.A0]: 'path_b10',
+        [JoystickAxis.A1]: 'path_b10',
+        [JoystickAxis.A2]: 'path_b11',
+        [JoystickAxis.A3]: 'path_b11',
+      }
+  }
+})
 
 /* eslint-disable  */
 const props = defineProps<{
@@ -144,7 +167,7 @@ watch(
 )
 
 const joystick_svg_path = computed(() => {
-  return `/images/${props.model}.svg`
+  return `/images/${joystickSvgModel.value}.svg`
 })
 
 watch(
@@ -173,6 +196,7 @@ watch(
 
 const buttonLabelCorrespondency = toRefs(props).buttonLabelCorrespondency
 const protocolMapping = toRefs(props).protocolMapping
+const joystickModel = toRefs(props).model
 watch([protocolMapping, buttonLabelCorrespondency], () => updateLabelsState())
 
 const updateLabelsState = (): void => {
@@ -238,19 +262,24 @@ function toggleButton(button: JoystickButton, state: boolean): void {
 function setAxes(axes: [JoystickAxis.A0, JoystickAxis.A1] | [JoystickAxis.A2, JoystickAxis.A3], values: [number, number]): void {
   let xValue
   let yValue
-  switch (props.model) {
-    case Models.PS5: {
+  switch (joystickModel.value) {
+    case SVGModel.PS5: {
       xValue = axes[0] == JoystickAxis.A0 ? scale(values[0], -1, 1, -3920.9, -3882.1) : scale(values[0], -1, 1, -4144.8, -4106.1)
       yValue = scale(values[1], -1, 1, -2192.7, -2153.9)
       break
     }
+    case SVGModel.LogitechExtreme3DPro: {
+      xValue = scale(values[0], -1, 1, -15, 15)
+      yValue = scale(values[1], -1, 1, -15, 15)
+      break
+    }
     default: {
       xValue = scale(values[0], -1, 1, -15, 15)
       yValue = scale(values[1], -1, 1, -15, 15)
       break
     }
   }
 
-  svg?.getElementById(axisPath[axes[0]])?.setAttribute('transform', `translate(${xValue} ${yValue})`)
+  svg?.getElementById(axisPath.value[axes[0]])?.setAttribute('transform', `translate(${xValue} ${yValue})`)
 }
 </script>

src/libs/joystick/manager.ts

@@ -22,6 +22,7 @@ export enum JoystickModel {
   XboxController_Bluetooth = 'Xbox controller (bluetooth)',
   XboxController_Wired = 'Xbox controller (wired)',
   XboxController_360 = 'Xbox 360 controller',
+  LogitechExtreme3DPro = 'Logitech Extreme 3D Pro',
   Unknown = 'Unknown Joystick Model',
 }
 
@@ -33,6 +34,7 @@ const JoystickMapVidPid: Map<string, JoystickModel> = new Map([
   ['045e:0b13', JoystickModel.XboxController_Bluetooth],
   ['045e:0b12', JoystickModel.XboxController_Wired],
   ['28de:11ff', JoystickModel.XboxController_360],
+  ['046d:c215', JoystickModel.LogitechExtreme3DPro],
 ])
 
 // Necessary to add functions

src/types/joystick.ts

@@ -108,7 +108,7 @@ export interface ProtocolControllerMapping {
 }
 
 export type CockpitButton = null | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 // eslint-disable-line
-export type CockpitAxis = null | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
+export type CockpitAxis = null | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9
 
 /**
  * This interface defines the mapping for a specific controller from the Gamepad API to Cockpit's standard.