sensors-logging: Allow changing the interval between log points

src/libs/sensors-logging.ts

@@ -74,12 +74,12 @@ class DataLogger {
   currentCockpitLog: CockpitStandardLog = []
   variablesBeingUsed: DatalogVariable[] = []
   selectedVariablesToShow = useStorage<DatalogVariable[]>('cockpit-datalogger-overlay-variables', [])
+  logInterval = useStorage<number>('cockpit-datalogger-log-interval', 1000)
 
   /**
    * Start an intervaled logging
-   * @param {number} interval - The time to wait between two logs
    */
-  startLogging(interval = 1000): void {
+  startLogging(): void {
     if (this.logging()) {
       Swal.fire({ title: 'Error', text: 'A log is already being generated.', icon: 'error', timer: 3000 })
       return
@@ -158,6 +158,32 @@ class DataLogger {
     return this.shouldBeLogging
   }
 
+  /**
+   * Set the interval between log points
+   * @param {number} interval The interval in milliseconds. Default is 1000 and minimum is 1
+   */
+  setInterval(interval: number): void {
+    if (interval < 1) {
+      Swal.fire({ text: 'Minimum log interval is 1 millisecond (1000 Hz).', icon: 'error' })
+      return
+    }
+
+    this.logInterval.value = interval
+  }
+
+  /**
+   * Set the frequency of log points
+   * @param {number} frequency The frequency in hertz. Default is 1 Hz, minimum is 0.1 Hz and maximum is 1000 Hz
+   */
+  setFrequency(frequency: number): void {
+    if (frequency > 1000 || frequency < 0.1) {
+      Swal.fire({ text: 'Log frequency should stay between 0.1 Hz and 1000 Hz.', icon: 'error' })
+      return
+    }
+
+    this.setInterval(1000 / frequency)
+  }
+
   /**
    * Update state of a given variable
    * @param {DatalogVariable} variable - Name of the variable being updated

src/views/ConfigurationLogsView.vue

@@ -12,12 +12,41 @@
           :value="variable"
         ></v-checkbox>
       </div>
+      <h1 class="text-lg font-bold text-slate-600">Frequency of the telemetry log</h1>
+      <span class="text-sm text-slate-400 w-[50%] text-center">
+        Values between 1 and 100Hz are more common and can be set with the slider.
+      </span>
+      <span class="text-sm text-slate-400">
+        You can go as low as 0.1 Hz and as far as 1000 Hz using the text input.
+      </span>
+      <div class="flex flex-col justify-center m-3 align-center">
+        <fwb-range v-model="newFrequency" class="m-2" :min="1" :max="100" :steps="1" label="" />
+        <fwb-input v-model="newFrequencyString" class="w-24 m-1 text-center align-middle">
+          <template #suffix>
+            <span class="flex justify-center h-7 align-center">Hz</span>
+          </template>
+        </fwb-input>
+      </div>
     </template>
   </BaseConfigurationView>
 </template>
 
 <script setup lang="ts">
+import { FwbInput, FwbRange } from 'flowbite-vue'
+import { computed, ref, watch } from 'vue'
+
 import { datalogger, DatalogVariable } from '@/libs/sensors-logging'
 
 import BaseConfigurationView from './BaseConfigurationView.vue'
+
+const newFrequency = ref(1000 / datalogger.logInterval.value)
+
+watch(newFrequency, (newVal) => {
+  datalogger.setFrequency(newVal)
+})
+
+const newFrequencyString = computed({
+  get: () => newFrequency.value.toString(),
+  set: (value) => (newFrequency.value = parseFloat(value)),
+})
 </script>