ui: Allow hiding the top-bar momentarily

bluerobotics · Aug 8, 2024 · 02fc2cc · 02fc2cc
1 parent 0401e75
commit 02fc2cc
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -596,8 +596,9 @@ const resetHideMouseTimeout = (): void => {
 
 document.addEventListener('mousemove', resetHideMouseTimeout)
 
-// Control bottom bar momentary hiding
+// Control top/bottom bar momentary hiding
 const showBottomBarNow = ref(widgetStore.currentView.showBottomBarOnBoot)
+const showTopBarNow = ref(true)
 watch([() => widgetStore.currentView, () => widgetStore.currentView.showBottomBarOnBoot], () => {
   showBottomBarNow.value = widgetStore.currentView.showBottomBarOnBoot
 })
@@ -606,7 +607,12 @@ const bottomBarToggleCallbackId = registerActionCallback(
   availableCockpitActions.toggle_bottom_bar,
   debouncedToggleBottomBar
 )
-onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
+const debouncedToggleTopBar = useDebounceFn(() => (showTopBarNow.value = !showTopBarNow.value), 25)
+const topBarToggleCallbackId = registerActionCallback(availableCockpitActions.toggle_top_bar, debouncedToggleTopBar)
+onBeforeUnmount(() => {
+  unregisterActionCallback(bottomBarToggleCallbackId)
+  unregisterActionCallback(topBarToggleCallbackId)
+})
 
 // Start datalogging
 datalogger.startLogging()

diff --git a/src/assets/joystick-profiles.ts b/src/assets/joystick-profiles.ts
@@ -73,7 +73,7 @@ export const cockpitStandardToProtocols: JoystickProtocolActionsMapping[] = [
         [JoystickButton.B13]: { action: availableMavlinkManualControlButtonFunctions['Trim pitch dec'] },
         [JoystickButton.B14]: { action: availableMavlinkManualControlButtonFunctions['Trim roll dec'] },
         [JoystickButton.B15]: { action: availableMavlinkManualControlButtonFunctions['Trim roll inc'] },
-        [JoystickButton.B16]: { action: otherAvailableActions.no_function },
+        [JoystickButton.B16]: { action: availableCockpitActions.toggle_top_bar },
         [JoystickButton.B17]: { action: otherAvailableActions.no_function },
       },
     },
@@ -104,7 +104,7 @@ export const cockpitStandardToProtocols: JoystickProtocolActionsMapping[] = [
         [JoystickButton.B12]: { action: otherAvailableActions.no_function },
         [JoystickButton.B13]: { action: otherAvailableActions.no_function },
         [JoystickButton.B14]: { action: otherAvailableActions.no_function },
-        [JoystickButton.B15]: { action: otherAvailableActions.no_function },
+        [JoystickButton.B15]: { action: availableCockpitActions.toggle_top_bar },
         [JoystickButton.B16]: { action: availableCockpitActions.toggle_bottom_bar },
         [JoystickButton.B17]: { action: otherAvailableActions.no_function },
       },
@@ -156,7 +156,7 @@ export const cockpitStandardToProtocols: JoystickProtocolActionsMapping[] = [
         [JoystickButton.B12]: { action: otherAvailableActions.no_function },
         [JoystickButton.B13]: { action: modifierKeyActions.shift },
         [JoystickButton.B14]: { action: otherAvailableActions.no_function },
-        [JoystickButton.B15]: { action: otherAvailableActions.no_function },
+        [JoystickButton.B15]: { action: availableCockpitActions.toggle_top_bar },
         [JoystickButton.B16]: { action: availableCockpitActions.toggle_bottom_bar },
         [JoystickButton.B17]: { action: otherAvailableActions.no_function },
       },

diff --git a/src/libs/joystick/protocols/cockpit-actions.ts b/src/libs/joystick/protocols/cockpit-actions.ts
@@ -16,6 +16,7 @@ export enum CockpitActionsFunction {
   mavlink_arm = 'mavlink_arm',
   mavlink_disarm = 'mavlink_disarm',
   toggle_bottom_bar = 'toggle_bottom_bar',
+  toggle_top_bar = 'toggle_top_bar',
   start_recording_all_streams = 'start_recording_all_streams',
   stop_recording_all_streams = 'stop_recording_all_streams',
   hold_to_confirm = 'hold_to_confirm',
@@ -44,6 +45,7 @@ export const availableCockpitActions: { [key in CockpitActionsFunction]: Cockpit
   [CockpitActionsFunction.mavlink_arm]: new CockpitAction(CockpitActionsFunction.mavlink_arm, 'Mavlink arm'),
   [CockpitActionsFunction.mavlink_disarm]: new CockpitAction(CockpitActionsFunction.mavlink_disarm, 'Mavlink disarm'),
   [CockpitActionsFunction.toggle_bottom_bar]: new CockpitAction(CockpitActionsFunction.toggle_bottom_bar, 'Toggle bottom bar'),
+  [CockpitActionsFunction.toggle_top_bar]: new CockpitAction(CockpitActionsFunction.toggle_top_bar, 'Toggle top bar'),
   [CockpitActionsFunction.start_recording_all_streams]: new CockpitAction(CockpitActionsFunction.start_recording_all_streams, 'Start recording all streams'),
   [CockpitActionsFunction.stop_recording_all_streams]: new CockpitAction(CockpitActionsFunction.stop_recording_all_streams, 'Stop recording all streams'),
   [CockpitActionsFunction.hold_to_confirm]: new CockpitAction(CockpitActionsFunction.hold_to_confirm, 'Hold to confirm'),