Allow using entire top-bar to store mini-widgets

src/App.vue

@@ -198,42 +198,6 @@
  </GlassModal>
  </teleport>
 
- <teleport to="body">
- <v-dialog v-model="showMissionOptionsDialog" width="50%">
- <v-card class="pa-2 bg-[#20202022] backdrop-blur-2xl text-white rounded-lg">
- <v-card-title class="flex justify-between">
- <div />
- <div>Mission configuration</div>
- <v-btn
- icon
- :width="38"
- :height="34"
- variant="text"
- class="bg-transparent -mt-1 -mr-3"
- @click="showMissionOptionsDialog = false"
- >
- <v-icon
- :size="interfaceStore.isOnSmallScreen ? 22 : 26"
- :class="interfaceStore.isOnSmallScreen ? '-mr-[10px] -mt-[10px]' : '-mr-[2px]'"
- >mdi-close</v-icon
- >
- </v-btn>
- </v-card-title>
- <v-card-text>
- <div class="flex flex-col">
- <p>Misison Name</p>
- <v-text-field
- v-model="store.missionName"
- append-inner-icon="mdi-restore"
- class="mt-1"
- @click:append-inner="store.missionName = store.lastMissionName"
- />
- </div>
- </v-card-text>
- </v-card>
- </v-dialog>
- </teleport>
-
  <div ref="routerSection" class="router-view">
  <div class="main-view" :class="{ 'edit-mode': widgetStore.editingMode }">
  <div
@@ -251,34 +215,29 @@
  >
  <span class="text-3xl transition-all mdi mdi-menu text-slate-300 hover:text-slate-50" />
  </button>
- <div
- class="flex items-center justify-start h-full px-4 mr-1 transition-all cursor-pointer hover:bg-slate-200/30 min-w-[20%] select-none"
- :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
- @click="showMissionOptionsDialog = true"
- >
- <div class="flex items-center overflow-hidden text-lg font-medium text-white whitespace-nowrap">
- <p v-if="store.missionName" class="overflow-x-hidden text-ellipsis">{{ store.missionName }}</p>
- <p v-else class="overflow-x-hidden text-ellipsis">
- {{ randomMissionName }}
- <FontAwesomeIcon icon="fa-pen-to-square" size="1x" class="ml-2 text-slate-200/30" />
- </p>
- </div>
+ <div class="flex-1">
+ <MiniWidgetContainer
+ :container="widgetStore.currentMiniWidgetsProfile.containers[0]"
+ :allow-editing="widgetStore.editingMode"
+ align="start"
+ />
  </div>
  <div class="grow" />
- <Alerter class="min-w-[30%] max-w-[30%]" />
+ <div class="flex-1">
+ <MiniWidgetContainer
+ :container="widgetStore.currentMiniWidgetsProfile.containers[1]"
+ :allow-editing="widgetStore.editingMode"
+ align="center"
+ />
+ </div>
  <div class="grow" />
  <div class="flex-1">
  <MiniWidgetContainer
- :container="widgetStore.currentMiniWidgetsProfile.containers[0]"
+ :container="widgetStore.currentMiniWidgetsProfile.containers[2]"
  :allow-editing="widgetStore.editingMode"
  align="end"
  />
  </div>
- <div
- class="flex items-center justify-center m-2 text-sm font-bold text-center text-white select-none min-w-[80px]"
- >
- {{ format(timeNow, 'E LLL do HH:mm') }}
- </div>
  </div>
  <AltitudeSlider />
  <div class="bottom-container">
@@ -323,27 +282,23 @@
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, useDebounceFn, useFullscreen, useTimestamp, useWindowSize } from '@vueuse/core'
-import { format } from 'date-fns'
+import { onClickOutside, useDebounceFn, useFullscreen, useWindowSize } from '@vueuse/core'
 import { computed, DefineComponent, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import GlassModal from '@/components/GlassModal.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
-import { coolMissionNames } from '@/libs/funny-name/words'
 import {
  availableCockpitActions,
  registerActionCallback,
  unregisterActionCallback,
 } from '@/libs/joystick/protocols/cockpit-actions'
-import { useMissionStore } from '@/stores/mission'
 
 import AltitudeSlider from './components/AltitudeSlider.vue'
 import EditMenu from './components/EditMenu.vue'
 import GlassButton from './components/GlassButton.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import SlideToConfirm from './components/SlideToConfirm.vue'
-import Alerter from './components/widgets/Alerter.vue'
 import { datalogger } from './libs/sensors-logging'
 import { useAppInterfaceStore } from './stores/appInterface'
 import { useMainVehicleStore } from './stores/mainVehicle'
@@ -602,15 +557,8 @@ onBeforeUnmount(() => unregisterActionCallback(fullScreenCallbackId))
 
 const fullScreenToggleIcon = computed(() => (isFullscreen.value ? 'mdi-fullscreen-exit' : 'mdi-overscan'))
 
-// Mission identification
-const store = useMissionStore()
-const showMissionOptionsDialog = ref(false)
-const randomMissionName = coolMissionNames.random()
 const currentSelectedViewName = computed(() => widgetStore.currentView.name)
 
-// Clock
-const timeNow = useTimestamp({ interval: 1000 })
-
 const { width: windowWidth } = useWindowSize()
 
 const originalBarWidth = 1800
@@ -648,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
 })
@@ -658,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()

src/assets/defaults.ts

@@ -674,6 +674,28 @@ export const miniWidgetsProfiles: MiniWidgetProfile[] = [
  {
  name: 'Default Cockpit Mini Widget profile',
  containers: [
+ {
+ name: 'Top-left container',
+ widgets: [
+ {
+ hash: '2287d53a-dfd2-4978-9830-fa36994b02a1',
+ component: MiniWidgetType.MissionIdentifier,
+ name: 'MissionIdentifier',
+ options: {},
+ },
+ ],
+ },
+ {
+ name: 'Top-center container',
+ widgets: [
+ {
+ hash: 'c3a90d73-32e0-4dbf-bbe6-4d5a27e85b10',
+ component: MiniWidgetType.Alerter,
+ name: 'Alerter',
+ options: {},
+ },
+ ],
+ },
  {
  name: 'Top-right container',
  widgets: [
@@ -695,6 +717,12 @@ export const miniWidgetsProfiles: MiniWidgetProfile[] = [
  name: 'BatteryIndicator',
  options: {},
  },
+ {
+ hash: 'b902ca12-d61f-4cce-a3a3-b74bbbf148aa',
+ component: MiniWidgetType.Clock,
+ name: 'Clock',
+ options: {},
+ },
  ],
  },
  ],

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 },
  },

src/components/EditMenu.vue

@@ -507,7 +507,7 @@
  <div
  v-for="miniWidget in availableMiniWidgetTypes"
  :key="miniWidget.hash"
- class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4"
+ class="flex flex-col items-center justify-between rounded-md bg-[#273842] hover:brightness-125 h-[90%] aspect-square cursor-pointer elevation-4 overflow-clip"
  >
  <div />
  <div class="m-2 pointer-events-none select-none">

src/components/widgets/Alerter.vue → src/components/mini-widgets/Alerter.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="relative flex-grow mx-1 my-1.5 max-w-[25%]">
+ <div class="mx-1 my-1.5 w-[500px]">
  <div
  ref="currentAlertBar"
  class="flex items-center justify-between p-1 overflow-hidden rounded cursor-pointer select-none whitespace-nowrap bg-slate-800/75"

src/components/mini-widgets/Clock.vue

@@ -0,0 +1,12 @@
+<template>
+ <div class="flex items-center justify-center m-2 text-sm font-bold text-center text-white select-none min-w-[80px]">
+ {{ format(timeNow, 'E LLL do HH:mm') }}
+ </div>
+</template>
+
+<script setup lang="ts">
+import { useTimestamp } from '@vueuse/core'
+import { format } from 'date-fns'
+
+const timeNow = useTimestamp({ interval: 1000 })
+</script>

src/components/mini-widgets/MissionIdentifier.vue

@@ -0,0 +1,67 @@
+<template>
+ <div
+ class="flex items-center justify-start h-full px-4 mr-1 transition-all cursor-pointer hover:bg-slate-200/30 min-w-[20%] select-none"
+ :class="widgetStore.editingMode ? 'pointer-events-none' : 'pointer-events-auto'"
+ @click="showMissionOptionsDialog = true"
+ >
+ <div class="flex items-center overflow-hidden text-lg font-medium text-white whitespace-nowrap">
+ <p v-if="store.missionName" class="overflow-x-hidden text-ellipsis">{{ store.missionName }}</p>
+ <p v-else class="overflow-x-hidden text-ellipsis">
+ {{ randomMissionName }}
+ <FontAwesomeIcon icon="fa-pen-to-square" size="1x" class="ml-2 text-slate-200/30" />
+ </p>
+ </div>
+ </div>
+
+ <teleport to="body">
+ <v-dialog v-model="showMissionOptionsDialog" width="50%">
+ <v-card class="pa-2 bg-[#20202022] backdrop-blur-2xl text-white rounded-lg">
+ <v-card-title class="flex justify-between">
+ <div />
+ <div>Mission configuration</div>
+ <v-btn
+ icon
+ :width="38"
+ :height="34"
+ variant="text"
+ class="bg-transparent -mt-1 -mr-3"
+ @click="showMissionOptionsDialog = false"
+ >
+ <v-icon
+ :size="interfaceStore.isOnSmallScreen ? 22 : 26"
+ :class="interfaceStore.isOnSmallScreen ? '-mr-[10px] -mt-[10px]' : '-mr-[2px]'"
+ >mdi-close</v-icon
+ >
+ </v-btn>
+ </v-card-title>
+ <v-card-text>
+ <div class="flex flex-col">
+ <p>Misison Name</p>
+ <v-text-field
+ v-model="store.missionName"
+ append-inner-icon="mdi-restore"
+ class="mt-1"
+ @click:append-inner="store.missionName = store.lastMissionName"
+ />
+ </div>
+ </v-card-text>
+ </v-card>
+ </v-dialog>
+ </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { coolMissionNames } from '@/libs/funny-name/words'
+import { useAppInterfaceStore } from '@/stores/appInterface'
+import { useMissionStore } from '@/stores/mission'
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+
+const store = useMissionStore()
+const widgetStore = useWidgetManagerStore()
+const interfaceStore = useAppInterfaceStore()
+
+const showMissionOptionsDialog = ref(false)
+const randomMissionName = coolMissionNames.random()
+</script>

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'),

src/stores/widgetManager.ts

@@ -627,6 +627,10 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
  // Profile migrations
  // TODO: remove on first stable release
  onBeforeMount(() => {
+ if (currentMiniWidgetsProfile.value.containers.length < 3) {
+ currentMiniWidgetsProfile.value = miniWidgetsProfile
+ }
+
  const alreadyUsedProfileHashes: string[] = []
  const alreadyUsedViewHashes: string[] = []
  const alreadyUsedWidgetHashes: string[] = []

src/types/widgets.ts

@@ -23,11 +23,14 @@ export enum WidgetType {
  * The enum value is equal to the component's filename, without the '.vue' extension
  */
 export enum MiniWidgetType {
+ Alerter = 'Alerter',
  ArmerButton = 'ArmerButton',
  BaseCommIndicator = 'BaseCommIndicator',
  BatteryIndicator = 'BatteryIndicator',
  ChangeAltitudeCommander = 'ChangeAltitudeCommander',
+ Clock = 'Clock',
  DepthIndicator = 'DepthIndicator',
+ MissionIdentifier = 'MissionIdentifier',
  RelativeAltitudeIndicator = 'RelativeAltitudeIndicator',
  TakeoffLandCommander = 'TakeoffLandCommander',
  VeryGenericIndicator = 'VeryGenericIndicator',