Change Altitude Mini-Widget

src/components/MiniWidgetInstantiator.vue

@@ -2,6 +2,9 @@
   <template v-if="miniWidget.component === MiniWidgetType.RelativeAltitudeIndicator">
     <RelativeAltitudeIndicator :mini-widget="miniWidget" />
   </template>
+  <template v-if="miniWidget.component === MiniWidgetType.ChangeAltitudeCommander">
+    <ChangeAltitudeCommander :mini-widget="miniWidget" />
+  </template>
   <template v-if="miniWidget.component === MiniWidgetType.TakeoffLandCommander">
     <TakeoffLandCommander :mini-widget="miniWidget" />
   </template>
@@ -45,6 +48,7 @@ import { type MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
 import ArmerButton from './mini-widgets/ArmerButton.vue'
 import BaseCommIndicator from './mini-widgets/BaseCommIndicator.vue'
 import BatteryIndicator from './mini-widgets/BatteryIndicator.vue'
+import ChangeAltitudeCommander from './mini-widgets/ChangeAltitudeCommander.vue'
 import DepthIndicator from './mini-widgets/DepthIndicator.vue'
 import JoystickCommIndicator from './mini-widgets/JoystickCommIndicator.vue'
 import MiniVideoRecorder from './mini-widgets/MiniVideoRecorder.vue'

src/components/mini-widgets/ChangeAltitudeCommander.vue

@@ -0,0 +1,18 @@
+<template>
+  <button
+    :class="[
+      'relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9',
+      vehicleStore.flying ? 'bg-slate-800/60 hover:bg-slate-400/60' : 'bg-slate-400/60 cursor-not-allowed',
+    ]"
+    :disabled="!vehicleStore.flying"
+    @click="vehicleStore.changeAlt()"
+  >
+    <span class="inline-block font-extrabold align-middle text-white"> Change Alt </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+
+const vehicleStore = useMainVehicleStore()
+</script>

src/components/mini-widgets/TakeoffLandCommander.vue

@@ -1,10 +1,10 @@
 <template>
   <button
     class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60 hover:bg-slate-400/60"
-    @click="vehicleStore.flying ? vehicleStore.takeoff() : vehicleStore.land()"
+    @click="vehicleStore.flying ? vehicleStore.land() : vehicleStore.takeoff()"
   >
     <span class="inline-block font-extrabold align-middle text-white">
-      {{ vehicleStore.flying === undefined ? '...' : vehicleStore.flying ? 'Takeoff' : 'Land' }}
+      {{ vehicleStore.flying === undefined ? '...' : vehicleStore.flying ? 'Land' : 'Takeoff' }}
     </span>
   </button>
 </template>

src/libs/vehicle/ardupilot/ardupilot.ts

@@ -388,6 +388,44 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     return true
   }
 
+  /**
+   * Helper function for changing the altitude of the vehicle
+   * @param {number} altitude (in meters)
+   */
+  _changeAltitude(altitude: number): void {
+    const gotoMessage: Message.SetPositionTargetLocalNed = {
+      time_boot_ms: 0,
+      type: MAVLinkType.SET_POSITION_TARGET_LOCAL_NED,
+      target_system: 1,
+      target_component: 1,
+      coordinate_frame: { type: MavFrame.MAV_FRAME_LOCAL_OFFSET_NED },
+      type_mask: { bits: 0b0000111111111000 },
+      x: 0,
+      y: 0,
+      z: altitude,
+      vx: 0,
+      vy: 0,
+      vz: 0,
+      afx: 0,
+      afy: 0,
+      afz: 0,
+      yaw: 0,
+      yaw_rate: 0,
+    }
+
+    this.write(gotoMessage)
+  }
+
+  /**
+   * Change altitude
+   * @param {number} altitudeSetpoint
+   * @returns {void}
+   */
+  changeAltitude(altitudeSetpoint: number): void {
+    this._changeAltitude(altitudeSetpoint)
+    return
+  }
+
   /**
    * Helper function for commanding takeoff
    * @param {number} altitude (in meters)
@@ -398,18 +436,18 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Takeoff
-   * @param {number} altitude_septoint
+   * @param {number} altitudeSetpoint
    * @returns {void}
    */
-  takeoff(altitude_septoint: number): void {
+  takeoff(altitudeSetpoint: number): void {
     const guidedMode = this.modesAvailable().get('GUIDED')
     if (guidedMode === undefined) {
       return
     }
 
     this.setMode(guidedMode as Modes)
     this.arm()
-    this._takeoff(altitude_septoint)
+    this._takeoff(altitudeSetpoint)
     this.onTakeoff.emit()
     return
   }
@@ -518,7 +556,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * @returns {boolean}
    */
   flying(): boolean {
-    return !this._flying
+    return this._flying
   }
 
   /**

src/stores/mainVehicle.ts

@@ -182,6 +182,27 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       throw new Error('Takeoff cancelled by the user')
     }
   }
+  /**
+   * Change the altitude of the vehicle.
+   * @returns {Promise<void>} A Promise that resolves when the altitude is changed or rejects if the action is cancelled.
+   */
+  async function changeAlt(): Promise<void> {
+    if (!mainVehicle.value) {
+      throw new Error('No vehicle available to change altitude.')
+    }
+
+    showAltitudeSlider.value = true
+
+    const confirmed = await slideToConfirm('Confirm Altitude Change', 'Alt Change Cmd Confirmed')
+    showAltitudeSlider.value = false
+
+    if (confirmed) {
+      mainVehicle.value.changeAltitude(altitude.rel - altitude_setpoint.value)
+    } else {
+      console.error('Altitude change cancelled by the user')
+      throw new Error('Altitude change cancelled by the user')
+    }
+  }
 
   /**
    * Land the vehicle.
@@ -463,6 +484,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   return {
     arm,
     takeoff,
+    changeAlt,
     land,
     disarm,
     goTo,

src/types/miniWidgets.ts

@@ -6,6 +6,7 @@ export enum MiniWidgetType {
   ArmerButton = 'ArmerButton',
   BaseCommIndicator = 'BaseCommIndicator',
   BatteryIndicator = 'BatteryIndicator',
+  ChangeAltitudeCommander = 'ChangeAltitudeCommander',
   DepthIndicator = 'DepthIndicator',
   RelativeAltitudeIndicator = 'RelativeAltitudeIndicator',
   TakeoffLandCommander = 'TakeoffLandCommander',