show battery level

src/components/Header.vue

@@ -9,7 +9,10 @@
 
                 <!-- connected or configured -->
                 <span v-if="GlobalState.connection != null">
-                    <span v-if="GlobalState.selfInfo">{{ GlobalState.selfInfo.name }}</span>
+                    <span v-if="GlobalState.selfInfo">
+                        <span v-if="GlobalState.batteryPercentage">{{ GlobalState.batteryPercentage }}% - </span>
+                        <span>{{ GlobalState.selfInfo.name }}</span>
+                    </span>
                     <span v-else>Connecting...</span>
                 </span>
 

src/js/Connection.js

@@ -60,6 +60,7 @@ class Connection {
 
         // clear previous connection state
         GlobalState.contacts = [];
+        GlobalState.batteryPercentage = null;
 
         // update connection and listen for events
         GlobalState.connection = connection;
@@ -144,14 +145,20 @@ class Connection {
         // initial setup without needing database
         await this.loadSelfInfo();
         await this.syncDeviceTime();
+        await this.updateBatteryPercentage();
 
         // wait for database to be ready
         await databaseToBeReady;
 
-        // sync messages
+        // fetch data after database is ready
         await this.loadContacts();
         await this.syncMessages();
 
+        // auto update battery percentage once per minute
+        setInterval(async () => {
+            await this.updateBatteryPercentage();
+        }, 60000);
+
     }
 
     static async onDisconnected() {
@@ -166,6 +173,17 @@ class Connection {
         GlobalState.contacts = await GlobalState.connection.getContacts();
     }
 
+    static async updateBatteryPercentage() {
+        if(GlobalState.connection){
+            try {
+                const response = await GlobalState.connection.getBatteryVoltage();
+                GlobalState.batteryPercentage = Utils.getBatteryPercentage(response.batteryMilliVolts);
+            } catch(e) {
+                // ignore error
+            }
+        }
+    }
+
     static async setAdvertName(name) {
         await GlobalState.connection.setAdvertName(name);
     }
@@ -270,6 +288,10 @@ class Connection {
         await GlobalState.connection.reboot();
     }
 
+    static async getBatteryVoltage() {
+        return await GlobalState.connection.getBatteryVoltage();
+    }
+
     static async onContactMessageReceived(message) {
 
         console.log("onContactMessageReceived", message);

src/js/GlobalState.js

@@ -5,6 +5,7 @@ const globalState = reactive({
     connection: null,
     isDatabaseReady: false,
     selfInfo: null,
+    batteryPercentage: null,
     contacts: [],
     channels: [
         {

src/js/Utils.js

@@ -43,6 +43,27 @@ class Utils {
 
     }
 
+    static getBatteryPercentage(millivolts) {
+
+        const minVoltage = 3400; // show battery as 0% at or below this value
+        const maxVoltage = 4200; // show battery as 100% at or above this value
+
+        // 0% if at or below min voltage
+        if(millivolts <= minVoltage){
+            return 0;
+        }
+
+        // 100% if at or above max voltage
+        if(millivolts >= maxVoltage){
+            return 100;
+        }
+
+        // linear calculation
+        // todo implement curve based voltage to percentage calculations
+        return Math.floor(((millivolts - minVoltage) / (maxVoltage - minVoltage)) * 100);
+
+    }
+
 }
 
 export default Utils;