[1.4] core: frontend: App: Add battery information widget

core/frontend/src/App.vue

@@ -423,6 +423,7 @@ import menus, { menuItem } from './menus'
 import autopilot_data from './store/autopilot'
 import system_information from './store/system-information'
 import { TopBarWidget } from './types/common'
+import Battery from './widgets/Battery.vue'
 import Cpu from './widgets/Cpu.vue'
 import Disk from './widgets/Disk.vue'
 import Networking from './widgets/Networking.vue'
@@ -472,6 +473,11 @@ export default Vue.extend({
   computed: {
     widgets(): TopBarWidget[] {
       const widgets = [
+        {
+          component: Battery,
+          name: 'Battery',
+          props: {},
+        },
         {
           component: Cpu,
           name: 'CPU',

core/frontend/src/components/health/HealthTrayMenu.vue

@@ -163,11 +163,8 @@ export default Vue.extend({
   },
   computed: {
     cpu_temperature(): string {
-      const temperature_sensors = system_information.system?.temperature
-      const main_sensor = temperature_sensors?.find(
-        (sensor) => sensor.name.toLowerCase().includes('cpu') || sensor.name.toLowerCase().includes('soc'),
-      )
-      return main_sensor ? main_sensor.temperature.toFixed(1) : 'Loading..'
+      const temperature = system_information.cpu_temperature
+      return temperature === undefined ? 'Loading..' : temperature.toFixed(1)
     },
     cpu_throttled() : boolean {
       const events = system_information.platform?.raspberry?.events

core/frontend/src/components/system-information/SystemCondition.vue

@@ -110,11 +110,7 @@ export default Vue.extend({
     },
     temperature(): Record<string, unknown> {
       const temperature_sensors = system_information.system?.temperature
-      const main_sensor = temperature_sensors?.find((
-        sensor,
-      ) => sensor.name.toLowerCase().includes('cpu') || sensor.name.toLowerCase().includes('soc'))
-      const main_temperature = main_sensor?.temperature.toFixed(1) ?? 'Loading..'
-      console.log(`main_temperature: ${main_temperature}`)
+      const main_temperature = system_information.cpu_temperature?.toFixed(1) ?? 'Loading..'
       const temperature_text = temperature_sensors?.map(
         (sensor) => {
           const critical_temp = sensor.critical_temperature || 0

core/frontend/src/store/system-information.ts

@@ -101,6 +101,13 @@ class SystemInformationStore extends VuexModule {
   // Stable interface name list for App tray widgets — updated only when the set of names changes.
   network_interface_names: string[] = []
 
+  get cpu_temperature(): number | undefined {
+    return this.system?.temperature?.find((sensor) => {
+      const name = sensor.name.toLowerCase()
+      return name.includes('cpu') || name.includes('soc') || name.includes('ccd')
+    })?.temperature
+  }
+
   fetchPlatformTask = new OneMoreTime(
     { delay: 5000, autostart: false },
   )

core/frontend/src/widgets/Battery.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-card
+    v-tooltip="'Battery'"
+    class="d-flex align-center justify-center battery-card"
+    height="40"
+  >
+    <div class="battery-info-container">
+      <div class="battery-info-row">
+        <v-icon small class="battery-icon">
+          mdi-car-battery
+        </v-icon>
+        <div class="battery-value">
+          {{ battery_voltage }}
+        </div>
+      </div>
+      <div class="battery-info-row">
+        <v-icon small class="battery-icon">
+          mdi-current-dc
+        </v-icon>
+        <div class="battery-value">
+          {{ battery_current }}
+        </div>
+      </div>
+    </div>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import mavlink from '@/store/mavlink'
+import mavlink_store_get from '@/utils/mavlink'
+
+export default Vue.extend({
+  name: 'BatteryWidget',
+  computed: {
+    battery_voltage(): string {
+      const voltage_millivolts = mavlink_store_get(mavlink, 'SYS_STATUS.messageData.message.voltage_battery') as number
+      if (voltage_millivolts === undefined || voltage_millivolts === 65535) {
+        return 'Loading..'
+      }
+      return `${(voltage_millivolts / 1000).toFixed(2)} V`
+    },
+    battery_current(): string {
+      const current_centiampere = mavlink_store_get(mavlink, 'SYS_STATUS.messageData.message.current_battery') as number
+      if (current_centiampere === undefined || current_centiampere === -1) {
+        return 'Loading..'
+      }
+      return `${(current_centiampere / 100).toFixed(2)} A`
+    },
+  },
+})
+</script>
+
+<style scoped>
+.battery-card {
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.battery-info-container {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.8rem;
+  line-height: 1.1;
+  min-width: 70px;
+}
+
+.battery-icon {
+  margin-right: 2px;
+  font-size: 0.9rem !important;
+}
+
+.battery-info-row {
+  display: flex;
+  align-items: center;
+}
+
+.battery-value {
+  flex: 1;
+  text-align: right;
+}
+</style>

core/frontend/src/widgets/Cpu.vue

@@ -65,13 +65,8 @@ export default Vue.extend({
       return cpus.map((cpu) => cpu.frequency)
     },
     cpu_temperature(): string {
-      const temperature_sensors = system_information.system?.temperature
-      const main_sensor = temperature_sensors?.find(
-        (sensor) => sensor.name.toLowerCase().includes('cpu')
-          || sensor.name.toLowerCase().includes('soc')
-          || sensor.name.toLowerCase().includes('ccd'),
-      )
-      return main_sensor ? main_sensor.temperature.toFixed(1) : 'Loading..'
+      const temperature = system_information.cpu_temperature
+      return temperature === undefined ? 'Loading..' : temperature.toFixed(1)
     },
     clockDisplay(): { single: string | null; max?: string | null; min?: string | null } {
       if (this.cpu_clock.length === 0) {