Add view selector mini-widget and allow changing views from joystick

src/assets/defaults.ts

@@ -141,7 +141,13 @@ export const miniWidgetsProfiles: MiniWidgetProfile[] = [
       },
       {
         name: 'Bottom-left container',
-        widgets: [],
+        widgets: [
+          {
+            hash: 'c6eb406b-8e3c-4ab9-a348-4ad5058352be',
+            component: MiniWidgetType.ViewSelector,
+            options: {},
+          },
+        ],
       },
       {
         name: 'Bottom-center container',

src/assets/joystick-profiles.ts

@@ -18,10 +18,10 @@ export const cockpitStandardToProtocols: ProtocolControllerMapping = {
     { protocol: JoystickProtocol.MAVLink, value: 1 },
     { protocol: JoystickProtocol.MAVLink, value: 2 },
     { protocol: JoystickProtocol.MAVLink, value: 3 },
+    { protocol: JoystickProtocol.CockpitAction, value: CockpitAction.GO_TO_PREVIOUS_VIEW },
+    { protocol: JoystickProtocol.CockpitAction, value: CockpitAction.GO_TO_NEXT_VIEW },
     { protocol: JoystickProtocol.MAVLink, value: 9 },
     { protocol: JoystickProtocol.MAVLink, value: 10 },
-    { protocol: JoystickProtocol.CockpitAction, value: CockpitAction.TOGGLE_FULL_SCREEN },
-    { protocol: undefined, value: undefined },
     { protocol: JoystickProtocol.MAVLink, value: 4 },
     { protocol: JoystickProtocol.MAVLink, value: 6 },
     { protocol: JoystickProtocol.MAVLink, value: 7 },
@@ -31,7 +31,7 @@ export const cockpitStandardToProtocols: ProtocolControllerMapping = {
     { protocol: JoystickProtocol.MAVLink, value: 13 },
     { protocol: JoystickProtocol.MAVLink, value: 14 },
     { protocol: JoystickProtocol.MAVLink, value: 5 },
-    { protocol: undefined, value: undefined },
+    { protocol: JoystickProtocol.CockpitAction, value: CockpitAction.TOGGLE_FULL_SCREEN },
   ],
 }
 

src/components/MiniWidgetContainer.vue

@@ -42,6 +42,9 @@
           <template v-if="item.component === MiniWidgetType.ModeSelector">
             <ModeSelector :options="item.options" />
           </template>
+          <template v-if="item.component === MiniWidgetType.ViewSelector">
+            <ViewSelector :options="item.options" />
+          </template>
         </div>
       </div>
     </VueDraggable>
@@ -83,6 +86,9 @@
               <template v-if="item.component === MiniWidgetType.ModeSelector">
                 <ModeSelector :options="item.options" />
               </template>
+              <template v-if="item.component === MiniWidgetType.ViewSelector">
+                <ViewSelector :options="item.options" />
+              </template>
             </div>
           </div>
         </VueDraggable>
@@ -136,6 +142,9 @@
                 <template v-if="item.component === MiniWidgetType.ModeSelector">
                   <ModeSelector :options="item.options" />
                 </template>
+                <template v-if="item.component === MiniWidgetType.ViewSelector">
+                  <ViewSelector :options="item.options" />
+                </template>
               </div>
             </div>
           </VueDraggable>
@@ -162,6 +171,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 ViewSelector from './mini-widgets/ViewSelector.vue'
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 interface Props {

src/components/mini-widgets/ViewSelector.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <Dropdown
+      name-key="name"
+      :model-value="widgetStore.currentView"
+      :options="widgetStore.currentProfile.views"
+      @update:model-value="widgetStore.selectView"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWidgetManagerStore } from '@/stores/widgetManager'
+
+import Dropdown from '../Dropdown.vue'
+
+const widgetStore = useWidgetManagerStore()
+</script>

src/libs/joystick/protocols.ts

@@ -81,6 +81,8 @@ export class MavlinkControllerState extends ProtocolControllerState {
  * Possible Cockpit Actions
  */
 export enum CockpitAction {
+  GO_TO_NEXT_VIEW = 'Go to next view',
+  GO_TO_PREVIOUS_VIEW = 'Go to previous view',
   TOGGLE_FULL_SCREEN = 'Toggle full-screen',
   MAVLINK_ARM = 'Mavlink Command - Arm',
   MAVLINK_DISARM = 'Mavlink Command - Disarm',

src/stores/widgetManager.ts

@@ -1,15 +1,16 @@
 import '@/libs/cosmos'
 
-import { useStorage } from '@vueuse/core'
+import { useDebounceFn, useStorage } from '@vueuse/core'
 import { saveAs } from 'file-saver'
 import { defineStore } from 'pinia'
 import Swal from 'sweetalert2'
 import { v4 as uuid4 } from 'uuid'
-import { computed, ref } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 
 import { widgetProfile, widgetProfiles } from '@/assets/defaults'
 import { miniWidgetsProfile } from '@/assets/defaults'
 import * as Words from '@/libs/funny-name/words'
+import { CockpitAction, registerActionCallback, unregisterActionCallback } from '@/libs/joystick/protocols'
 import { isEqual } from '@/libs/utils'
 import type { Point2D, SizeRect2D } from '@/types/general'
 import { type Profile, type View, type Widget, type WidgetType, isProfile, isView } from '@/types/widgets'
@@ -21,8 +22,16 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const currentProfile = useStorage('cockpit-current-profile-v2', widgetProfile)
   const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile', miniWidgetsProfile)
   const savedProfiles = useStorage('cockpit-saved-profiles-v2', widgetProfiles)
+  const currentViewIndex = useStorage('cockpit-current-view-index', 0)
 
-  const currentView = computed(() => currentProfile.value.views[0])
+  const currentView = computed(() => currentProfile.value.views[currentViewIndex.value])
+
+  const viewsToShow = computed((): View[] => {
+    const viewsOnShowOrder = currentProfile.value.views.slice()
+    viewsOnShowOrder.splice(currentViewIndex.value, 1)
+    viewsOnShowOrder.push(currentProfile.value.views[currentViewIndex.value])
+    return viewsOnShowOrder
+  })
 
   /**
    * Get view where given widget is at
@@ -145,8 +154,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
    */
   const selectView = (view: View): void => {
     const index = currentProfile.value.views.indexOf(view)
-    currentProfile.value.views.splice(index, 1)
-    currentProfile.value.views.unshift(view)
+    currentViewIndex.value = index
   }
 
   const exportCurrentView = (): void => {
@@ -246,12 +254,29 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     return isEqual(widget.position, fullScreenPosition) && isEqual(widget.size, fullScreenSize)
   }
 
+  const selectNextView = (): void => {
+    const newIndex = currentViewIndex.value === currentProfile.value.views.length - 1 ? 0 : currentViewIndex.value + 1
+    selectView(currentProfile.value.views[newIndex])
+  }
+  const debouncedSelectNextView = useDebounceFn(() => selectNextView(), 500)
+  const selectNextViewCallbackId = registerActionCallback(CockpitAction.GO_TO_NEXT_VIEW, debouncedSelectNextView)
+  onBeforeUnmount(() => unregisterActionCallback(selectNextViewCallbackId))
+
+  const selectPreviousView = (): void => {
+    const newIndex = currentViewIndex.value === 0 ? currentProfile.value.views.length - 1 : currentViewIndex.value - 1
+    selectView(currentProfile.value.views[newIndex])
+  }
+  const debouncedSelectPreviousView = useDebounceFn(() => selectPreviousView(), 500)
+  const selectPrevViewCBId = registerActionCallback(CockpitAction.GO_TO_PREVIOUS_VIEW, debouncedSelectPreviousView)
+  onBeforeUnmount(() => unregisterActionCallback(selectPrevViewCBId))
+
   return {
     editingMode,
     showGrid,
     gridInterval,
     currentProfile,
     currentView,
+    viewsToShow,
     currentMiniWidgetsProfile,
     savedProfiles,
     loadProfile,

src/styles/global.css

@@ -42,3 +42,7 @@
 ::-webkit-scrollbar-thumb:hover {
     background-color: hsla(0, 0%, 0%, 0.411);
 }
+
+select:focus {
+    outline: none;
+}

src/types/miniWidgets.ts

@@ -10,6 +10,7 @@ export enum MiniWidgetType {
   JoystickCommIndicator = 'JoystickCommIndicator',
   MiniVideoRecorder = 'MiniVideoRecorder',
   ModeSelector = 'ModeSelector',
+  ViewSelector = 'ViewSelector',
 }
 
 export type MiniWidget = {

src/views/WidgetsView.vue

@@ -1,7 +1,7 @@
 <template>
   <SnappingGrid v-if="store.showGrid && store.editingMode" :grid-interval="store.gridInterval" class="snapping-grid" />
   <div class="widgets-view">
-    <div v-for="view in store.currentProfile.views.slice().reverse()" :key="view.hash" class="widget-view">
+    <div v-for="view in store.viewsToShow" :key="view.hash" class="widget-view">
       <template v-for="widget in view.widgets.slice().reverse()" :key="widget">
         <WidgetHugger
           v-if="Object.values(WidgetType).includes(widget.component)"