Adding Slider to Adjust Altitude

package.json

@@ -53,6 +53,7 @@
     "vue-router": "^4.0.14",
     "vue-slide-unlock": "^0.4.8",
     "vue-virtual-scroller": "^2.0.0-beta.8",
+    "vue3-slider": "^1.9.0",
     "vuetify": "3.4.7",
     "webfontloader": "^1.0.0",
     "webrtc-adapter": "^8.2.0"

src/App.vue

@@ -101,6 +101,7 @@
               {{ format(timeNow, 'E LLL do HH:mm') }}
             </div>
           </div>
+          <AltitudeSlider />
           <Transition name="fade">
             <div v-if="showBottomBarNow" class="bottom-container">
               <SlideToConfirm />
@@ -155,6 +156,7 @@ import {
 } from '@/libs/joystick/protocols/cockpit-actions'
 import { useMissionStore } from '@/stores/mission'
 
+import AltitudeSlider from './components/AltitudeSlider.vue'
 import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'

src/components/AltitudeSlider.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="showAltitudeSlider" class="slider-div">
+    <slider
+      v-model="altitude_setpoint"
+      orientation="vertical"
+      width="100%"
+      height="20"
+      color="rgb(59 130 246)"
+      track-color="rgb(59 130 246 / 0.5)"
+      always-show-handle="true"
+      step="0.1"
+    />
+    <div class="slider-value"><span>Alt (Rel)</span></div>
+    <div class="slider-value">{{ formattedValue }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import slider from 'vue3-slider'
+
+import { altitude_setpoint, showAltitudeSlider } from '@/libs/altitude-slider'
+
+const formattedValue = computed(() => altitude_setpoint.value.toFixed(1))
+</script>
+<style scoped>
+.slider-value {
+  white-space: nowrap;
+  text-align: center;
+  font-size: 0.8rem;
+}
+.slider-div {
+  position: fixed;
+  right: 2%;
+  top: 25%;
+  bottom: 0;
+  width: 25px;
+  height: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  z-index: 100;
+}
+</style>

src/components/SlideToConfirm.vue

@@ -9,8 +9,8 @@
         :noanimate="false"
         :width="400"
         :height="50"
-        text="slide to confirm"
-        success-text="action confirmed"
+        :text="sliderText"
+        :success-text="confirmationSliderText"
         name="slideunlock"
         class="slide-unlock"
         @completed="onSlideConfirmed()"
@@ -25,12 +25,16 @@
 <script setup lang="ts">
 import SlideUnlock from 'vue-slide-unlock'
 
-import { confirmed, showSlideToConfirm } from '@/libs/slide-to-confirm'
+import { confirmationSliderText, confirmed, showSlideToConfirm, sliderText } from '@/libs/slide-to-confirm'
 
 const onSlideConfirmed = (): void => {
-  showSlideToConfirm.value = false
   confirmed.value = true
-  console.log('Slide confirmed!')
+
+  // show success message for 1.5 second
+  setTimeout(() => {
+    showSlideToConfirm.value = false
+    console.log('Slide confirmed!')
+  }, 1500)
 }
 
 const cancelAction = (): void => {

src/libs/altitude-slider.ts

@@ -0,0 +1,11 @@
+import { ref, watch } from 'vue'
+
+export const showAltitudeSlider = ref(false)
+export const altitude_setpoint = ref(0)
+
+/**
+ * Watches the altitude value for changes and updates the altitude accordingly.
+ */
+watch(altitude_setpoint, (newValue, oldValue) => {
+  console.log(`Altitude changed from ${oldValue} to ${newValue}`)
+})

src/libs/slide-to-confirm.ts

@@ -1,34 +1,31 @@
-import { ref, watch } from 'vue' // Adjust this import based on your Vue version
+import { ref, watch } from 'vue'
 
-// Reactive variables (if they are not provided from outside)
 export const showSlideToConfirm = ref(false)
+export const sliderText = ref('Slide to Confirm')
+export const confirmationSliderText = ref('Action Confirm')
 export const confirmed = ref(false)
 
 /**
- * Calls the provided action function if the user confirms through the slide-to-confirm component.
- * @param {() => void} actionFunc - A function representing the action to be confirmed.
- * @returns {Promise<void>} A Promise that resolves if the action is successfully executed or rejects in case of cancellation or errors.
+ * Waits for user confirmation through the slide-to-confirm component.
+ * @param {string} text - The custom text to display on the slider.
+ * @param {string} confirmationText - The custom text to display on the confirmation slider after the user slides to confirm.
+ * @returns {Promise<boolean>} - A promise that resolves with true when the action is confirmed and false when the user cancels the action.
  */
-export function slideToConfirm(actionFunc: () => void): Promise<void> {
-  console.log('slideToConfirm')
-  return new Promise((resolve, reject) => {
-    // Show slide to confirm component
+export function slideToConfirm(text: string, confirmationText: string): Promise<boolean> {
+  console.log('slideToConfirm with text:', text)
+  return new Promise((resolve) => {
+    sliderText.value = text
+    confirmationSliderText.value = confirmationText
     showSlideToConfirm.value = true
 
-    // Watch for changes on confirmed and showSlideToConfirm variables
     const stopWatching = watch([confirmed, showSlideToConfirm], ([newConfirmed, newShowSlideToConfirm]) => {
       if (newConfirmed) {
         stopWatching()
         confirmed.value = false
-        try {
-          actionFunc()
-          resolve()
-        } catch (error) {
-          reject(error)
-        }
+        resolve(true)
       } else if (!newShowSlideToConfirm) {
         stopWatching()
-        reject(new Error('User cancelled the action'))
+        resolve(false)
       }
     })
   })

src/libs/vehicle/ardupilot/ardupilot.ts

@@ -398,17 +398,18 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Takeoff
+   * @param {number} altitude_septoint
    * @returns {void}
    */
-  takeoff(): void {
+  takeoff(altitude_septoint: number): void {
     const guidedMode = this.modesAvailable().get('GUIDED')
     if (guidedMode === undefined) {
       return
     }
 
     this.setMode(guidedMode as Modes)
     this.arm()
-    this._takeoff(10)
+    this._takeoff(altitude_septoint)
     this.onTakeoff.emit()
     return
   }

src/stores/mainVehicle.ts

@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
 import { computed, reactive, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
+import { altitude_setpoint, showAltitudeSlider } from '@/libs/altitude-slider'
 import * as Connection from '@/libs/connection/connection'
 import { ConnectionManager } from '@/libs/connection/connection-manager'
 import type { Package } from '@/libs/connection/m2r/messages/mavlink2rest'
@@ -125,67 +126,94 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   })
 
   /**
-   * Arm the vehicle
-   * @returns { void } A Promise that resolves when arming is successful or rejects if an error occurs or the action is cancelled.
+   * Arm the vehicle.
+   * Awaits user confirmation before arming the vehicle. Resolves when arming is successful or rejects if the action is cancelled.
+   * @returns {Promise<void>}
    */
-  function arm(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+  async function arm(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to arm.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Arm', 'Arm Command Confirmed')
+    if (confirmed) {
       mainVehicle.value.arm()
-    })
+    } else {
+      throw new Error('Arming cancelled by the user')
+    }
   }
 
   /**
-   * Disarm the vehicle
-   * @returns { void } A Promise that resolves when disarming is successful or rejects if an error occurs or the action is cancelled.
+   * Disarm the vehicle.
+   * Awaits user confirmation before disarming the vehicle. Resolves when disarming is successful or rejects if the action is cancelled.
+   * @returns {Promise<void>}
    */
-  function disarm(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+  async function disarm(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to disarm.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Disarm', 'Disarm Command Confirmed')
+    if (confirmed) {
       mainVehicle.value.disarm()
-    })
+    } else {
+      throw new Error('Disarming cancelled by the user')
+    }
   }
+
   /**
    * Initiates the takeoff process, requiring user confirmation.
-   * @returns { void } A Promise that resolves when the takeoff is successful or rejects if an error occurs or the action is cancelled.
+   * @returns {Promise<void>} A Promise that resolves when the takeoff is successful or rejects if an error occurs or the action is cancelled.
    */
-  function takeoff(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
-      mainVehicle.value.takeoff()
-    })
+  async function takeoff(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available for takeoff')
+    }
+
+    showAltitudeSlider.value = true
+
+    const confirmed = await slideToConfirm('Confirm Takeoff', 'Takeoff Command Confirmed')
+    showAltitudeSlider.value = false
+
+    if (confirmed) {
+      mainVehicle.value.takeoff(altitude_setpoint.value)
+    } else {
+      console.error('Takeoff cancelled by the user')
+      throw new Error('Takeoff cancelled by the user')
+    }
   }
+
   /**
-   * Land the vehicle
-   * @returns { void } A Promise that resolves when landing is successful or rejects if an error occurs or the action is cancelled.
+   * Land the vehicle.
+   * @returns {Promise<void>} A Promise that resolves when landing is successful or rejects if the action is cancelled.
    */
-  function land(): Promise<void> {
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+  async function land(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to land.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Landing', 'Landing Command Confirmed')
+    if (confirmed) {
       mainVehicle.value.land()
-    })
+    } else {
+      console.error('Landing cancelled by the user')
+      throw new Error('Landing cancelled by the user')
+    }
   }
 
   /**
-   * Go to a given position
-   * @param { number } hold Time to hold position in seconds
-   * @param { number } acceptanceRadius Radius in meters to consider the waypoint reached
-   * @param { number } passRadius Radius in meters to pass the waypoint
-   * @param { number } yaw Yaw angle in degrees
-   * @param { number } latitude Latitude in degrees
-   * @param { number } longitude Longitude in degrees
-   * @param { number } alt Altitude in meters
-   * @returns { void } A Promise that resolves when the vehicle reaches the waypoint or rejects if an error occurs or the action is cancelled.
+   * Go to a given position.
+   * Awaits user confirmation before moving the vehicle to a specified waypoint. Resolves when the vehicle reaches the waypoint or rejects if the action is cancelled.
+   * @param {number} hold Time to hold position in seconds.
+   * @param {number} acceptanceRadius Radius in meters to consider the waypoint reached.
+   * @param {number} passRadius Radius in meters to pass the waypoint.
+   * @param {number} yaw Yaw angle in degrees.
+   * @param {number} latitude Latitude in degrees.
+   * @param {number} longitude Longitude in degrees.
+   * @param {number} alt Altitude in meters.
+   * @returns {Promise<void>}
    */
-  function goTo(
+  async function goTo(
     hold: number,
     acceptanceRadius: number,
     passRadius: number,
@@ -194,17 +222,20 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     longitude: number,
     alt: number
   ): Promise<void> {
-    const waypoint = new Coordinates()
-    waypoint.latitude = latitude
-    waypoint.altitude = alt
-    waypoint.longitude = longitude
-
-    return slideToConfirm(() => {
-      if (!mainVehicle.value) {
-        throw new Error('action rejected or failed')
-      }
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to execute go to command.')
+    }
+
+    const confirmed = await slideToConfirm('Confirm Go To Position', 'Go To Position Command Confirmed')
+    if (confirmed) {
+      const waypoint = new Coordinates()
+      waypoint.latitude = latitude
+      waypoint.altitude = alt
+      waypoint.longitude = longitude
       mainVehicle.value.goTo(hold, acceptanceRadius, passRadius, yaw, waypoint)
-    })
+    } else {
+      throw new Error('Go to position cancelled by the user')
+    }
   }
 
   /**