Generate log files (cockpit standard and video subtitles)

package.json

@@ -58,7 +58,7 @@
     "@types/file-saver": "^2.0.5",
     "@types/jsdom": "^16.2.14",
     "@types/leaflet": "^1.9.0",
-    "@types/node": "^16.11.27",
+    "@types/node": "^17.0.29",
     "@types/uuid": "^8.3.4",
     "@types/webfontloader": "^1.0.0",
     "@vitejs/plugin-vue": "3.1.0",

src/App.vue

@@ -155,6 +155,7 @@ import Dialog from './components/Dialog.vue'
 import EditMenu from './components/EditMenu.vue'
 import MiniWidgetContainer from './components/MiniWidgetContainer.vue'
 import Alerter from './components/widgets/Alerter.vue'
+import { datalogger } from './libs/logging'
 import { useWidgetManagerStore } from './stores/widgetManager'
 
 const widgetStore = useWidgetManagerStore()
@@ -210,6 +211,9 @@ watch([() => widgetStore.currentView, () => widgetStore.currentView.showBottomBa
 const debouncedToggleBottomBar = useDebounceFn(() => (showBottomBarNow.value = !showBottomBarNow.value), 25)
 const bottomBarToggleCallbackId = registerActionCallback(CockpitAction.TOGGLE_BOTTOM_BAR, debouncedToggleBottomBar)
 onBeforeUnmount(() => unregisterActionCallback(bottomBarToggleCallbackId))
+
+// Start datalogging
+datalogger.startLogging()
 </script>
 
 <style>

src/components/ConfigurationMenu.vue

@@ -41,6 +41,7 @@ import ConfigurationAlertsView from '../views/ConfigurationAlertsView.vue'
 import ConfigurationDevelopmentView from '../views/ConfigurationDevelopmentView.vue'
 import ConfigurationGeneralView from '../views/ConfigurationGeneralView.vue'
 import ConfigurationJoystickView from '../views/ConfigurationJoystickView.vue'
+import ConfigurationLogsView from '../views/ConfigurationLogsView.vue'
 
 const store = useMainVehicleStore()
 
@@ -58,6 +59,11 @@ const menus = [
     title: 'Joystick',
     component: ConfigurationJoystickView,
   },
+  {
+    icon: 'mdi-script',
+    title: 'Logs',
+    component: ConfigurationLogsView,
+  },
   {
     icon: 'mdi-bell-ring',
     title: 'Alerts',

src/components/mini-widgets/DepthIndicator.vue

@@ -17,9 +17,11 @@ import { useAverage } from '@vueuse/math'
 import { ref, watch } from 'vue'
 import { computed } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 const store = useMainVehicleStore()
+datalogger.registerUsage(DatalogVariable.depth)
 
 // Calculate depth time-average (50 values window)
 const depth = ref(0)

src/components/mini-widgets/MiniVideoRecorder.vue

@@ -64,6 +64,7 @@ import { computed, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vu
 import adapter from 'webrtc-adapter'
 
 import { WebRTCManager } from '@/composables/webRTC'
+import { datalogger } from '@/libs/logging'
 import type { Stream } from '@/libs/webrtc/signalling_protocol'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
@@ -194,6 +195,12 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
   timeRecordingStart.value = new Date()
   const fileName = `${missionName || 'Cockpit'} (${format(timeRecordingStart.value, 'LLL dd, yyyy - HH꞉mm꞉ss O')})`
   mediaRecorder.value = new MediaRecorder(mediaStream.value)
+  if (!datalogger.logging()) {
+    datalogger.startLogging()
+  }
+  const videoTrack = mediaStream.value.getVideoTracks()[0]
+  const vWidth = videoTrack.getSettings().width || 1920
+  const vHeight = videoTrack.getSettings().height || 1080
   mediaRecorder.value.start(1000)
   let chunks: Blob[] = []
   mediaRecorder.value.ondataavailable = async (e) => {
@@ -203,8 +210,12 @@ const startRecording = async (): Promise<SweetAlertResult | void> => {
 
   mediaRecorder.value.onstop = () => {
     const blob = new Blob(chunks, { type: 'video/webm' })
+    const videoTelemetryLog = datalogger.getSlice(datalogger.currentCockpitLog, timeRecordingStart.value, new Date())
+    const assLog = datalogger.toAssOverlay(videoTelemetryLog, vWidth, vHeight, timeRecordingStart.value.getTime())
+    var logBlob = new Blob([assLog], { type: 'text/plain' })
     fixWebmDuration(blob, Date.now() - timeRecordingStart.value.getTime()).then((fixedBlob) => {
-      saveAs(fixedBlob, fileName)
+      saveAs(fixedBlob, `${fileName}.webm`)
+      saveAs(logBlob, `${fileName}.ass`)
       cockpitVideoDB.removeItem(fileName)
     })
     chunks = []

src/components/mini-widgets/ModeSelector.vue

@@ -7,10 +7,12 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
 import Dropdown from '../Dropdown.vue'
 
+datalogger.registerUsage(DatalogVariable.mode)
 const vehicleStore = useMainVehicleStore()
 const currentMode = ref()
 

src/components/mini-widgets/SatelliteIndicator.vue

@@ -9,7 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
+datalogger.registerUsage(DatalogVariable.gpsFixType)
+datalogger.registerUsage(DatalogVariable.gpsVisibleSatellites)
 const store = useMainVehicleStore()
 </script>

src/components/widgets/Attitude.vue

@@ -64,10 +64,13 @@ import { useWindowSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { constrain, degrees, radians, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.roll)
+datalogger.registerUsage(DatalogVariable.pitch)
 const store = useMainVehicleStore()
 const props = defineProps<{
   /**

src/components/widgets/Compass.vue

@@ -26,10 +26,12 @@ import { computed, onBeforeMount, ref, toRefs } from 'vue'
 
 import Dialog from '@/components/Dialog.vue'
 import Dropdown from '@/components/Dropdown.vue'
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees, radians, resetCanvas, sequentialArray } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.heading)
 const store = useMainVehicleStore()
 const compassRoot = ref()
 const canvasRef = ref<HTMLCanvasElement | undefined>()

src/components/widgets/CompassHUD.vue

@@ -41,10 +41,12 @@ import { colord } from 'colord'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.heading)
 const store = useMainVehicleStore()
 const props = defineProps<{
   /**

src/components/widgets/DepthHUD.vue

@@ -33,10 +33,12 @@ import { colord } from 'colord'
 import gsap from 'gsap'
 import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { constrain, range, resetCanvas, round } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import type { Widget } from '@/types/widgets'
 
+datalogger.registerUsage(DatalogVariable.depth)
 const store = useMainVehicleStore()
 const props = defineProps<{
   /**

src/components/widgets/Map.vue

@@ -116,13 +116,16 @@ import type { Map } from 'leaflet'
 import Swal from 'sweetalert2'
 import { type Ref, computed, nextTick, onBeforeMount, onBeforeUnmount, ref, toRefs, watch } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 import { useMissionStore } from '@/stores/mission'
 import type { Widget } from '@/types/widgets'
 
 import VehicleIcon from './VehicleIcon.vue'
 
+datalogger.registerUsage(DatalogVariable.latitude)
+datalogger.registerUsage(DatalogVariable.longitude)
 const vehicleStore = useMainVehicleStore()
 const missionStore = useMissionStore()
 

src/components/widgets/VirtualHorizon.vue

@@ -14,9 +14,12 @@ import { useElementSize } from '@vueuse/core'
 import gsap from 'gsap'
 import { computed, ref } from 'vue'
 
+import { datalogger, DatalogVariable } from '@/libs/logging'
 import { degrees, radians, resetCanvas } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
 
+datalogger.registerUsage(DatalogVariable.roll)
+datalogger.registerUsage(DatalogVariable.pitch)
 const store = useMainVehicleStore()
 const virtualHorizonRoot = ref()
 const canvasRef = ref<HTMLCanvasElement | undefined>()