altitude-slider: added altitude slider component

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/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/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'
@@ -168,7 +169,12 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
     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 {