🆕 Add connection timer

locales/en/messages.json

@@ -729,6 +729,10 @@
         "message": "CPU Load:",
         "description": "CPU load text shown in the status bar"
     },
+    "statusbar_connection_time": {
+        "message": "Connection:",
+        "description": "Connection time text shown in the status bar"
+    },
     "dfu_connect_message": {
         "message": "Please use the Firmware Flasher to access DFU devices"
     },

src/components/init.js

@@ -14,6 +14,11 @@ import PortUsage from "../js/port_usage.js";
 import CONFIGURATOR from "../js/data_storage.js";
 import { BetaflightComponents } from "../js/vue_components.js";
 
+// Connection tracking object
+const CONNECTION = reactive({
+    timestamp: null,
+});
+
 /*
  Most of the global objects can go here at first.
  It's a bit of overkill for simple components,
@@ -30,6 +35,7 @@ const betaflightModel = reactive({
     MSP,
     PortUsage,
     PortHandler,
+    CONNECTION,
 });
 
 i18next.on("initialized", function () {

src/components/status-bar/StatusBar.vue

@@ -1,6 +1,10 @@
 <template>
     <div id="status-bar">
         <PortUtilization :usage-down="portUsageDown" :usage-up="portUsageUp" />
+        <span v-if="connectionTimestamp">
+            <span class="message">{{ $t("statusbar_connection_time") }}</span>
+            <span class="value">{{ formattedConnectionTime }}</span>
+        </span>
         <ReadingStat message="statusbar_packet_error" :model-value="packetError" />
         <ReadingStat message="statusbar_i2c_error" :model-value="i2cError" />
         <ReadingStat message="statusbar_cycle_time" :model-value="cycleTime" />
@@ -15,7 +19,7 @@
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { defineComponent, ref, computed, onMounted, onUnmounted } from "vue";
 import StatusBarVersion from "./StatusBarVersion.vue";
 import ReadingStat from "./ReadingStat.vue";
 import PortUtilization from "./PortUtilization.vue";
@@ -35,6 +39,10 @@ export default defineComponent({
             type: Number,
             default: 0,
         },
+        connectionTimestamp: {
+            type: Number,
+            default: null,
+        },
         packetError: {
             type: Number,
             default: 0,
@@ -68,6 +76,42 @@ export default defineComponent({
             default: "",
         },
     },
+    setup(props) {
+        const currentTime = ref(Date.now());
+        let interval = null;
+
+        onMounted(() => {
+            // Update current time every second for the connection timer
+            interval = setInterval(() => {
+                currentTime.value = Date.now();
+            }, 1000);
+        });
+
+        onUnmounted(() => {
+            if (interval) {
+                clearInterval(interval);
+            }
+        });
+
+        const formattedConnectionTime = computed(() => {
+            if (!props.connectionTimestamp) {
+                return "00:00";
+            }
+
+            // Use currentTime.value to make this reactive to time changes
+            const elapsedMs = currentTime.value - props.connectionTimestamp;
+            const elapsedSeconds = Math.floor(elapsedMs / 1000);
+
+            const minutes = Math.floor(elapsedSeconds / 60);
+            const seconds = elapsedSeconds % 60;
+
+            return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+        });
+
+        return {
+            formattedConnectionTime,
+        };
+    },
 });
 </script>
 

src/index.html

@@ -170,6 +170,7 @@
     <status-bar
             :port-usage-down="PortUsage.port_usage_down"
             :port-usage-up="PortUsage.port_usage_up"
+            :connection-timestamp="CONNECTION.timestamp"
             :packet-error="MSP.packet_error"
             :i2c-error="FC.CONFIG.i2cError"
             :cycle-time="FC.CONFIG.cycleTime"

src/js/serial_backend.js

@@ -98,8 +98,8 @@ async function sendConfigTracking() {
         flightControllerIdentifier: FC.CONFIG.flightControllerIdentifier,
         mcu: FC.CONFIG.targetName,
         deviceIdentifier: CryptoES.SHA1(FC.CONFIG.deviceIdentifier).toString(),
-        buildKey: FC.CONFIG.buildKey
-    });  
+        buildKey: FC.CONFIG.buildKey,
+    });
 }
 
 function connectDisconnect() {
@@ -392,6 +392,14 @@ function onOpenVirtual() {
 
     isConnected = true;
 
+    // Set connection timestamp for virtual connections
+    connectionTimestamp = Date.now();
+    setTimeout(() => {
+        if (window.vm?.CONNECTION) {
+            window.vm.CONNECTION.timestamp = connectionTimestamp;
+        }
+    }, 100);
+
     mspHelper = new MspHelper();
 
     VirtualFC.setVirtualConfig();
@@ -558,10 +566,18 @@ async function processUid() {
 
     connectionTimestamp = Date.now();
 
+    // Update the global CONNECTION object for Vue components
+    // Use a small delay to ensure the Vue app is mounted
+    setTimeout(() => {
+        if (window.vm?.CONNECTION) {
+            window.vm.CONNECTION.timestamp = connectionTimestamp;
+        }
+    }, 100);
+
     gui_log(i18n.getMessage("uniqueDeviceIdReceived", FC.CONFIG.deviceIdentifier));
 
     await processBuildConfiguration();
-    await sendConfigTracking();    
+    await sendConfigTracking();
 }
 
 async function processCraftName() {
@@ -690,6 +706,14 @@ function onConnect() {
 function onClosed(result) {
     gui_log(i18n.getMessage(result ? "serialPortClosedOk" : "serialPortClosedFail"));
 
+    // Clear connection timestamp
+    connectionTimestamp = null;
+    setTimeout(() => {
+        if (window.vm?.CONNECTION) {
+            window.vm.CONNECTION.timestamp = null;
+        }
+    }, 100);
+
     console.log(`${logHead} Connection closed:`, result);
 
     resetConnection();