takeoff land widget implemented

src/components/MiniWidgetInstantiator.vue

@@ -50,8 +50,8 @@ import JoystickCommIndicator from './mini-widgets/JoystickCommIndicator.vue'
 import MiniVideoRecorder from './mini-widgets/MiniVideoRecorder.vue'
 import ModeSelector from './mini-widgets/ModeSelector.vue'
 import RelativeAltitudeIndicator from './mini-widgets/RelativeAltitudeIndicator.vue'
-import TakeoffLandCommander from './mini-widgets/TakeoffLandCommander.vue'
 import SatelliteIndicator from './mini-widgets/SatelliteIndicator.vue'
+import TakeoffLandCommander from './mini-widgets/TakeoffLandCommander.vue'
 import VeryGenericIndicator from './mini-widgets/VeryGenericIndicator.vue'
 import ViewSelector from './mini-widgets/ViewSelector.vue'
 

src/components/mini-widgets/TakeoffLandCommander.vue

@@ -1,28 +1,16 @@
 <template>
-    <button
-      class="relative flex items-center justify-center w-32 p-1 rounded-md shadow-inner h-9 bg-slate-800/60"
-      @click="vehicleStore.takeoff()"
-    >
-      <div
-        class="absolute top-auto flex items-center px-1 rounded-[4px] shadow hover:bg-slate-400/60 transition-all w-[70%] h-[80%]"
-        :class="{
-          'bg-slate-900/60 text-slate-50 justify-end left-[26%]': vehicleStore.isReady,
-          'justify-start bg-slate-800/60 text-slate-400 left-[4%]': !vehicleStore.isReady
-        }"
-      >
-        <span class="inline-block font-extrabold align-middle">
-          Takeoff
-          <!-- {{ vehicleStore.isReady === undefined ? '...' : vehicleStore.isReady ? 'Ready' : 'Not Ready' }} -->
-        </span>
-      </div>
-    </button>
-  </template>
-
-  <script setup lang="ts">
-  import { useMainVehicleStore } from '@/stores/mainVehicle'
-  
-  const vehicleStore = useMainVehicleStore()
-  
-  // You can define additional logic or computed properties here if needed
-  </script>
-
+  <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.showTakeoff ? vehicleStore.takeoff() : vehicleStore.land()"
+  >
+    <span class="inline-block font-extrabold align-middle text-white">
+      {{ vehicleStore.showTakeoff === undefined ? '...' : vehicleStore.showTakeoff ? 'Takeoff' : 'Land' }}
+    </span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+
+const vehicleStore = useMainVehicleStore()
+</script>

src/libs/vehicle/ardupilot/ardupilot.ts

@@ -35,7 +35,6 @@ import {
   Attitude,
   Battery,
   Coordinates,
-  CommandAck,
   FixTypeGPS,
   Parameter,
   PowerSupply,
@@ -80,6 +79,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
   _messages: MAVLinkMessageDictionary = new Map()
 
   onMAVLinkMessage = new SignalTyped()
+  _flying = false
 
   /**
    * Function for subclass inheritance
@@ -244,13 +244,6 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     this.onMAVLinkMessage.emit_value(mavlink_message.message.type, mavlink_message)
 
     switch (mavlink_message.message.type) {
-      case MAVLinkType.COMMAND_ACK: {
-        const command_ack = mavlink_message.message as Message.CommandAck
-        this._last_ack.command = command_ack.command
-        this._last_ack.result = command_ack.result
-        console.log(command_ack)
-      }
-
       case MAVLinkType.AHRS2: {
         const ahrsMessage = mavlink_message.message as Message.Ahrs2
         this._altitude.msl = ahrsMessage.altitude
@@ -307,6 +300,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
         this._isArmed = Boolean(heartbeat.base_mode.bits & MavModeFlag.MAV_MODE_FLAG_SAFETY_ARMED)
         this.onArm.emit()
+        this._flying = heartbeat.system_status.type === MavState.MAV_STATE_ACTIVE
+        this.onTakeoff.emit()
         break
       }
       case MAVLinkType.SYS_STATUS: {
@@ -397,6 +392,7 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
 
   /**
    * Helper function for commanding takeoff
+   * @param {number} altitude
    */
   async _takeoff(altitude: number): Promise<void> {
     this.sendCommandLong(MavCmd.MAV_CMD_NAV_TAKEOFF, 0, 0, 0, 0, 0, 0, altitude)
@@ -405,22 +401,22 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     let timeoutReachedCount = false
     const initTimeCount = new Date().getTime()
     while (!timeoutReachedCount) {
-
       const lastAckMessage = this._messages.get(MAVLinkType.COMMAND_ACK)
-      if (lastAckMessage !== undefined ) {
-        // && lastAckMessage.command == MavCmd.MAV_CMD_NAV_TAKEOFF
+      if (lastAckMessage !== undefined) {
         console.log(lastAckMessage.command)
         console.log(lastAckMessage.result)
         if (lastAckMessage.result == MavResult.MAV_RESULT_ACCEPTED) {
-          break
+          console.log('MAV accepted command takeoff')
+          // emit takeoff event
+          this.onTakeoff.emit()
+          return
         } else {
           throw Error('MAV rejected command')
         }
       }
 
       await new Promise((r) => setTimeout(r, 100))
       timeoutReachedCount = new Date().getTime() - initTimeCount > 10000
-
     }
     if (timeoutReachedCount) {
       throw Error('MAV did not acknowledge command ')
@@ -432,11 +428,21 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
    * @returns {boolean}
    */
   takeoff(): boolean {
+    this.setMode(this.modesAvailable().get('GUIDED') as Modes)
     this.arm()
     this._takeoff(10)
+    this.onTakeoff.emit()
     return true
   }
 
+  /**
+   * Land
+   * @returns {boolean}
+   */
+  land(): boolean {
+    this.setMode(this.modesAvailable().get('LAND') as Modes)
+    return true
+  }
 
   /**
    * Return vehicle altitude-related data
@@ -495,6 +501,14 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
     return this._isArmed
   }
 
+  /**
+   * Check if the UI should show the takeoff button
+   * @returns {boolean}
+   */
+  showTakeoff(): boolean {
+    return !this._flying
+  }
+
   /**
    * Return vehicle position information
    * @returns {Coordinates}

src/libs/vehicle/types.ts

@@ -149,11 +149,6 @@ export class Parameter {
   name: string
 }
 
-export class CommandAck { 
-  command: number
-  result: number
-}
-
 /**
  * Velocity related data
  */

src/libs/vehicle/vehicle.ts

@@ -82,6 +82,7 @@ export abstract class AbstractVehicle<Modes> {
   onParameter = new Signal<Parameter>()
   onStatusGPS = new Signal<StatusGPS>()
   onStatusText = new Signal<StatusText>()
+  onTakeoff = new Signal<boolean>()
   onVelocity = new Signal<Velocity>()
 
   /**
@@ -117,6 +118,7 @@ export abstract class AbstractVehicle<Modes> {
     this.onParameter.register_caller(() => this.lastParameter())
     this.onStatusText.register_caller(() => this.statusText())
     this.onStatusGPS.register_caller(() => this.statusGPS())
+    this.onTakeoff.register_caller(() => this.showTakeoff())
     this.onVelocity.register_caller(() => this.velocity())
   }
 
@@ -184,4 +186,5 @@ export abstract class AbstractVehicle<Modes> {
   abstract statusText(): StatusText
   abstract statusGPS(): StatusGPS
   abstract setMode(mode: Modes): void
+  abstract showTakeoff(): boolean
 }

src/stores/mainVehicle.ts

@@ -121,7 +121,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   const currentParameters = reactive({})
   const mainVehicle = ref<ArduPilot | undefined>(undefined)
   const isArmed = ref<boolean | undefined>(undefined)
-  const isReady = ref<boolean | undefined>(undefined)
+  const showTakeoff = ref<boolean | undefined>(undefined)
   const icon = ref<string | undefined>(undefined)
   const configurationPages = ref<PageDescription[]>([])
   const timeNow = useTimestamp({ interval: 100 })
@@ -154,13 +154,20 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   function disarm(): void {
     mainVehicle.value?.disarm()
   }
-  /** 
+  /**
    * Takeoff the vehicle
    */
   function takeoff(): void {
     mainVehicle.value?.takeoff()
   }
 
+  /**
+   * Land the vehicle
+   */
+  function land(): void {
+    mainVehicle.value?.land()
+  }
+
   /**
    * Configure the vehicle somehow
    * @param { VehicleConfigurationSettings } settings Configuration data
@@ -276,6 +283,9 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     mainVehicle.value.onArm.add((armed: boolean) => {
       isArmed.value = armed
     })
+    mainVehicle.value.onTakeoff.add((show: boolean) => {
+      showTakeoff.value = show
+    })
     mainVehicle.value.onCpuLoad.add((newCpuLoad: number) => {
       cpuLoad.value = newCpuLoad
     })
@@ -462,6 +472,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   return {
     arm,
     takeoff,
+    land,
     disarm,
     modesAvailable,
     setFlightMode,
@@ -489,7 +500,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     mode,
     modes,
     isArmed,
-    isReady,
+    showTakeoff,
     isVehicleOnline,
     icon,
     parametersTable,