From 622499731014b29e204ce48b8e7319d771a89881 Mon Sep 17 00:00:00 2001
From: Eric <eric.emj.johnson@gmail.com>
Date: Sun, 19 Nov 2023 14:12:37 -0800
Subject: [PATCH 1/3] added relative altitude mini widget

---
 src/assets/altitude-icon.svg                  |  3 +++
 src/components/MiniWidgetInstantiator.vue     |  4 +++
 .../RelativeAltitudeIndicator.vue             | 26 +++++++++++++++++++
 src/libs/vehicle/ardupilot/ardupilot.ts       |  4 ++-
 src/libs/vehicle/types.ts                     |  2 +-
 src/types/miniWidgets.ts                      |  1 +
 6 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/altitude-icon.svg
 create mode 100644 src/components/mini-widgets/RelativeAltitudeIndicator.vue

diff --git a/src/assets/altitude-icon.svg b/src/assets/altitude-icon.svg
new file mode 100644
index 000000000..769f4f7ae
--- /dev/null
+++ b/src/assets/altitude-icon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-up" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
index abb89e896..67ec25e87 100644
--- a/src/components/MiniWidgetInstantiator.vue
+++ b/src/components/MiniWidgetInstantiator.vue
@@ -1,4 +1,7 @@
 <template>
+  <template v-if="miniWidget.component === MiniWidgetType.AltitudeIndicator">
+    <AltitudeIndicator :mini-widget="miniWidget" />
+  </template>
   <template v-if="miniWidget.component === MiniWidgetType.ArmerButton">
     <ArmerButton :options="miniWidget" />
   </template>
@@ -36,6 +39,7 @@ import { toRefs } from 'vue'
 
 import { type MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
 
+import AltitudeIndicator from './mini-widgets/RelativeAltitudeIndicator.vue'
 import ArmerButton from './mini-widgets/ArmerButton.vue'
 import BaseCommIndicator from './mini-widgets/BaseCommIndicator.vue'
 import BatteryIndicator from './mini-widgets/BatteryIndicator.vue'
diff --git a/src/components/mini-widgets/RelativeAltitudeIndicator.vue b/src/components/mini-widgets/RelativeAltitudeIndicator.vue
new file mode 100644
index 000000000..852ebe248
--- /dev/null
+++ b/src/components/mini-widgets/RelativeAltitudeIndicator.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="flex items-center w-fit min-w-[8rem] max-w-[9rem] h-12 p-1 text-white justify-center">
+        <img src="@/assets/altitude-icon.svg" class="h-full" :draggable="false" />
+        <div class="flex flex-col items-start justify-center ml-1 min-w-[4rem] max-w-[6rem] select-none">
+            <div>
+                <span class="font-mono text-xl font-semibold leading-6 w-fit">{{ round(altitude, 2).toFixed(2) }}</span>
+                <span class="text-xl font-semibold leading-6 w-fit"> m</span>
+            </div>
+            <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">Alt (Rel)</span>
+        </div>
+    </div>
+</template>
+  
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+import { round } from '@/libs/utils'
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+
+const store = useMainVehicleStore()
+
+const altitude = ref(0)
+watch(store.altitude, () => (altitude.value = store.altitude.rel))
+
+</script>
+  
\ No newline at end of file
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 9e1f3e7f8..38e509685 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -54,7 +54,7 @@ export type ArduPilot = ArduPilotVehicle<any>
  * Generic ArduPilot vehicle
  */
 export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Modes> {
-  _altitude = new Altitude({ msl: 0 })
+  _altitude = new Altitude({ msl: 0, rel: 0})
   _attitude = new Attitude({ roll: 0, pitch: 0, yaw: 0 })
   _communicationDropRate = 0
   _communicationErrors = 0
@@ -269,6 +269,8 @@ export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Mo
         this._velocity.ground = Math.sqrt(this._velocity.x ** 2 + this._velocity.y ** 2)
         this._velocity.overall = Math.sqrt(this._velocity.x ** 2 + this._velocity.y ** 2 + this._velocity.z ** 2)
         this.onVelocity.emit()
+        this._altitude.rel = position.relative_alt / 1000 // (mm to meters)
+        this.onAltitude.emit()
         break
       }
       case MAVLinkType.GPS_RAW_INT: {
diff --git a/src/libs/vehicle/types.ts b/src/libs/vehicle/types.ts
index f243e9ced..d34de2485 100644
--- a/src/libs/vehicle/types.ts
+++ b/src/libs/vehicle/types.ts
@@ -122,7 +122,7 @@ export class Attitude {
  */
 export class Altitude {
   msl: number // Mean Sea Level, in meters
-
+  rel: number // Relative altitude, in meters
   /**
    * Create object
    * @param {Partial<Altitude>} init
diff --git a/src/types/miniWidgets.ts b/src/types/miniWidgets.ts
index 0f3cb78f9..3743f5e70 100644
--- a/src/types/miniWidgets.ts
+++ b/src/types/miniWidgets.ts
@@ -3,6 +3,7 @@
  * The enum value is equal to the component's filename, without the '.vue' extension
  */
 export enum MiniWidgetType {
+  AltitudeIndicator = 'AltitudeIndicator',
   ArmerButton = 'ArmerButton',
   BaseCommIndicator = 'BaseCommIndicator',
   BatteryIndicator = 'BatteryIndicator',

From be3f5dc3d17e1f6a6087e052210773dd9a74abfa Mon Sep 17 00:00:00 2001
From: Eric <eric.emj.johnson@gmail.com>
Date: Sun, 19 Nov 2023 14:37:53 -0800
Subject: [PATCH 2/3] linting and naming improvement

---
 src/components/MiniWidgetInstantiator.vue     |  6 ++---
 .../RelativeAltitudeIndicator.vue             | 22 +++++++++----------
 src/libs/vehicle/ardupilot/ardupilot.ts       |  2 +-
 3 files changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/MiniWidgetInstantiator.vue b/src/components/MiniWidgetInstantiator.vue
index 67ec25e87..09b62aff3 100644
--- a/src/components/MiniWidgetInstantiator.vue
+++ b/src/components/MiniWidgetInstantiator.vue
@@ -1,6 +1,6 @@
 <template>
-  <template v-if="miniWidget.component === MiniWidgetType.AltitudeIndicator">
-    <AltitudeIndicator :mini-widget="miniWidget" />
+  <template v-if="miniWidget.component === MiniWidgetType.RelativeAltitudeIndicator">
+    <RelativeAltitudeIndicator :mini-widget="miniWidget" />
   </template>
   <template v-if="miniWidget.component === MiniWidgetType.ArmerButton">
     <ArmerButton :options="miniWidget" />
@@ -39,7 +39,6 @@ import { toRefs } from 'vue'
 
 import { type MiniWidget, MiniWidgetType } from '@/types/miniWidgets'
 
-import AltitudeIndicator from './mini-widgets/RelativeAltitudeIndicator.vue'
 import ArmerButton from './mini-widgets/ArmerButton.vue'
 import BaseCommIndicator from './mini-widgets/BaseCommIndicator.vue'
 import BatteryIndicator from './mini-widgets/BatteryIndicator.vue'
@@ -47,6 +46,7 @@ import DepthIndicator from './mini-widgets/DepthIndicator.vue'
 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 SatelliteIndicator from './mini-widgets/SatelliteIndicator.vue'
 import VeryGenericIndicator from './mini-widgets/VeryGenericIndicator.vue'
 import ViewSelector from './mini-widgets/ViewSelector.vue'
diff --git a/src/components/mini-widgets/RelativeAltitudeIndicator.vue b/src/components/mini-widgets/RelativeAltitudeIndicator.vue
index 852ebe248..f006fd321 100644
--- a/src/components/mini-widgets/RelativeAltitudeIndicator.vue
+++ b/src/components/mini-widgets/RelativeAltitudeIndicator.vue
@@ -1,16 +1,16 @@
 <template>
-    <div class="flex items-center w-fit min-w-[8rem] max-w-[9rem] h-12 p-1 text-white justify-center">
-        <img src="@/assets/altitude-icon.svg" class="h-full" :draggable="false" />
-        <div class="flex flex-col items-start justify-center ml-1 min-w-[4rem] max-w-[6rem] select-none">
-            <div>
-                <span class="font-mono text-xl font-semibold leading-6 w-fit">{{ round(altitude, 2).toFixed(2) }}</span>
-                <span class="text-xl font-semibold leading-6 w-fit"> m</span>
-            </div>
-            <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">Alt (Rel)</span>
-        </div>
+  <div class="flex items-center w-fit min-w-[8rem] max-w-[9rem] h-12 p-1 text-white justify-center">
+    <img src="@/assets/altitude-icon.svg" class="h-full" :draggable="false" />
+    <div class="flex flex-col items-start justify-center ml-1 min-w-[4rem] max-w-[6rem] select-none">
+      <div>
+        <span class="font-mono text-xl font-semibold leading-6 w-fit">{{ round(altitude, 2).toFixed(2) }}</span>
+        <span class="text-xl font-semibold leading-6 w-fit"> m</span>
+      </div>
+      <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">Alt (Rel)</span>
     </div>
+  </div>
 </template>
-  
+
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
@@ -21,6 +21,4 @@ const store = useMainVehicleStore()
 
 const altitude = ref(0)
 watch(store.altitude, () => (altitude.value = store.altitude.rel))
-
 </script>
-  
\ No newline at end of file
diff --git a/src/libs/vehicle/ardupilot/ardupilot.ts b/src/libs/vehicle/ardupilot/ardupilot.ts
index 38e509685..febc9006d 100644
--- a/src/libs/vehicle/ardupilot/ardupilot.ts
+++ b/src/libs/vehicle/ardupilot/ardupilot.ts
@@ -54,7 +54,7 @@ export type ArduPilot = ArduPilotVehicle<any>
  * Generic ArduPilot vehicle
  */
 export abstract class ArduPilotVehicle<Modes> extends Vehicle.AbstractVehicle<Modes> {
-  _altitude = new Altitude({ msl: 0, rel: 0})
+  _altitude = new Altitude({ msl: 0, rel: 0 })
   _attitude = new Attitude({ roll: 0, pitch: 0, yaw: 0 })
   _communicationDropRate = 0
   _communicationErrors = 0

From 5a2c11a5794caa9106648b1af378cc6ae4b2190c Mon Sep 17 00:00:00 2001
From: Eric <eric.emj.johnson@gmail.com>
Date: Sun, 19 Nov 2023 14:43:40 -0800
Subject: [PATCH 3/3] forgot to update MiniWidgetType Enum

---
 src/types/miniWidgets.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/miniWidgets.ts b/src/types/miniWidgets.ts
index 3743f5e70..c5710d868 100644
--- a/src/types/miniWidgets.ts
+++ b/src/types/miniWidgets.ts
@@ -3,11 +3,11 @@
  * The enum value is equal to the component's filename, without the '.vue' extension
  */
 export enum MiniWidgetType {
-  AltitudeIndicator = 'AltitudeIndicator',
   ArmerButton = 'ArmerButton',
   BaseCommIndicator = 'BaseCommIndicator',
   BatteryIndicator = 'BatteryIndicator',
   DepthIndicator = 'DepthIndicator',
+  RelativeAltitudeIndicator = 'RelativeAltitudeIndicator',
   VeryGenericIndicator = 'VeryGenericIndicator',
   JoystickCommIndicator = 'JoystickCommIndicator',
   MiniVideoRecorder = 'MiniVideoRecorder',