Allow hiding bottom bar momentarily through a Cockpit Action

bluerobotics · Nov 8, 2023 · 36a1a10 · 36a1a10
1 parent 837aee8
commit 36a1a10
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/App.vue b/src/App.vue
@@ -91,7 +91,7 @@
           </div>
           <Transition name="fade">
             <div
-              v-if="widgetStore.currentView.showBottomBarOnBoot"
+              v-if="showBottomBarNow"
               class="z-[60] w-full h-12 bg-slate-600/50 absolute flex bottom-0 backdrop-blur-[2px] justify-between"
             >
               <MiniWidgetContainer
@@ -130,6 +130,7 @@ import {
   onBeforeUnmount,
   // defineAsyncComponent,
   ref,
+  watch,
 } from 'vue'
 import { useRoute } from 'vue-router'
 
@@ -186,6 +187,15 @@ const resetHideMouseTimeout = (): void => {
 }
 
 document.addEventListener('mousemove', resetHideMouseTimeout)
+
+// Control bottom bar momentary hiding
+const showBottomBarNow = ref(widgetStore.currentView.showBottomBarOnBoot)
+watch([() => widgetStore.currentView, () => widgetStore.currentView.showBottomBarOnBoot], () => {
+  showBottomBarNow.value = widgetStore.currentView.showBottomBarOnBoot
+})
+const debouncedToggleBottomBar = useDebounceFn(() => (showBottomBarNow.value = !showBottomBarNow.value), 25)
+const bottomBarToggleCallbackId = registerActionCallback(CockpitAction.TOGGLE_BOTTOM_BAR, debouncedToggleBottomBar)
+onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
 </script>
 
 <style>

diff --git a/src/libs/joystick/protocols.ts b/src/libs/joystick/protocols.ts
@@ -96,6 +96,7 @@ export enum CockpitAction {
   TOGGLE_FULL_SCREEN = 'Toggle full-screen',
   MAVLINK_ARM = 'Mavlink Command - Arm',
   MAVLINK_DISARM = 'Mavlink Command - Disarm',
+  TOGGLE_BOTTOM_BAR = 'Toggle bottom bar',
 }
 
 export type CockpitActionCallback = () => void