WIP - Testing

src/views/ConfigurationJoystickView.vue

@@ -215,7 +215,7 @@
                 <p v-if="showButtonRemappingText" class="font-medium text-slate-400">{{ buttonRemappingText }}</p>
               </Transition>
               <Transition>
-                <v-progress-linear v-if="remappingInput" v-model="remapTimeProgress" />
+                <v-progress-linear class="font-medium text-slate-400" v-if="remappingInput" v-model="remapTimeProgress" />
               </Transition>
             </div>
             <div class="flex flex-col items-center justify-between w-full my-2">
@@ -250,6 +250,14 @@
             <div class="w-[90%] h-[2px] my-5 bg-slate-900/20" />
             <p class="flex items-center justify-center w-full text-xl font-bold text-slate-600">Axis mapping</p>
           </template>
+          <div class="flex flex-col items-center justify-between my-2">
+            <Transition>
+              <p v-if="showAxisRemappingText" class="font-medium text-slate-400">{{ axisRemappingText }}</p>
+            </Transition>
+            <Transition>
+              <v-progress-linear v-if="remappingAxisInput" v-model="remapAxisTimeProgress" />
+            </Transition>
+          </div>
           <div v-for="input in currentAxisInputs" :key="input.id" class="flex items-center justify-between p-2">
             <v-icon class="mr-3">
               {{
@@ -286,6 +294,13 @@
               variant="solo"
               hide-details
             />
+            <v-btn
+              class="w-40 ml-2"
+              :disabled="remappingAxisInput !== false"
+              @click="remapAxisInput(currentJoystick as Joystick, input)"
+            >
+              {{ remappingAxisInput && remappingAxisInput === input.id ? 'Remapping' : 'Click to remap' }}
+            </v-btn>
           </div>
         </div>
       </v-card>
@@ -348,16 +363,23 @@ const currentJoystick = ref<Joystick>()
 const currentButtonInputs = ref<JoystickButtonInput[]>([])
 const currentAxisInputs = ref<JoystickAxisInput[]>([])
 const remappingInput = ref(false)
+const remappingAxisInput = ref<false | JoystickAxis>(false)
 const remapTimeProgress = ref()
+const remapAxisTimeProgress = ref()
 const showButtonRemappingText = ref(false)
+const showAxisRemappingText = ref(false)
 const buttonFunctionAssignmentFeedback = ref('')
 const showButtonFunctionAssignmentFeedback = ref(false)
 const justRemappedInput = ref<boolean>()
+const justRemappedAxisInput = ref<boolean>()
 const inputClickedDialog = ref(false)
 const currentModifierKey: Ref<ProtocolAction> = ref(modifierKeyActions.regular)
 const availableModifierKeys: ProtocolAction[] = Object.values(modifierKeyActions)
 const showJoystickLayout = ref(true)
-watch(inputClickedDialog, () => (justRemappedInput.value = undefined))
+watch(inputClickedDialog, () => {
+  justRemappedInput.value = undefined
+  justRemappedAxisInput.value = undefined
+})
 
 const setCurrentInputs = (joystick: Joystick, inputs: JoystickInput[]): void => {
   currentJoystick.value = joystick
@@ -423,6 +445,54 @@ const remapInput = async (joystick: Joystick, input: JoystickInput): Promise<voi
   justRemappedInput.value = false
 }
 
+/**
+ * Remaps the input of a given joystick axis. The function waits for a full range move of some axis and then
+ * updates the mapping to associate the joystick axis input with the moved axis. If no axis is moved
+ * within a specified waiting time, the remapping is considered unsuccessful.
+ * @param {Joystick} joystick - The joystick object that needs input remapping.
+ * @param {JoystickInput} input - The joystick input that is to be remapped.
+ * @returns {Promise<void>} A promise that resolves once the remapping process is complete.
+ */
+const remapAxisInput = async (joystick: Joystick, input: JoystickInput): Promise<void> => {
+  // Initialize the remapping state
+  justRemappedAxisInput.value = undefined
+
+  let millisPassed = 0
+  const waitingTime = 5000
+  remappingAxisInput.value = input.id as JoystickAxis
+  remapAxisTimeProgress.value = 0
+  showAxisRemappingText.value = true
+
+  const lastAxisValues = joystick.gamepad.axes
+  const totalAxisDiff = new Array(joystick.gamepad.axes.length).fill(0)
+
+  // Wait for a button press or until the waiting time expires
+  while (millisPassed < waitingTime && !totalAxisDiff.some((ax) => ax > 3.5)) {
+    const currentAxisValues = joystick.gamepad.axes
+    for (let i = 0; i < currentAxisValues.length; i++) {
+      totalAxisDiff[i] += Math.abs(currentAxisValues[i] - lastAxisValues[i])
+    }
+
+    await new Promise((r) => setTimeout(r, 100))
+    millisPassed += 100
+    remapAxisTimeProgress.value = 100 * (millisPassed / waitingTime)
+  }
+
+  // End the remapping process
+  remappingAxisInput.value = false
+
+  setTimeout(() => (showAxisRemappingText.value = false), 5000)
+
+  // If a button was pressed, update the mapping of that joystick model in the controller store and return
+  if (totalAxisDiff.some((ax) => ax > 3.5)) {
+    justRemappedAxisInput.value = true
+    controllerStore.cockpitStdMappings[joystick.model].axes[input.id] = totalAxisDiff.findIndex((ax) => ax > 3.5) as JoystickAxis
+    return
+  }
+  // If remapping was unsuccessful, indicate it, so we can warn the user
+  justRemappedAxisInput.value = false
+}
+
 const currentButtonActions = computed(
   () => controllerStore.protocolMapping.buttonsCorrespondencies[currentModifierKey.value.id as CockpitModifierKeyOption]
 )
@@ -485,6 +555,16 @@ const buttonRemappingText = computed(() => {
     : 'No input detected.'
 })
 
+const axisRemappingText = computed(() => {
+  return remappingAxisInput.value
+    ? 'Make a full range move on the axis you want to use for this input.'
+    : justRemappedAxisInput.value === undefined
+    ? ''
+    : justRemappedAxisInput.value
+    ? 'Axis input remapped.'
+    : 'No axis detected.'
+})
+
 const buttonActionsToShow = computed(() =>
   controllerStore.availableButtonActions.filter((a) => JSON.stringify(a) !== JSON.stringify(modifierKeyActions.regular))
 )