Show Headset Battery in VR Overlay (#742)

Fixes #741

Dotnet/Overlay/VRCXVR.cs

@@ -331,6 +331,36 @@ namespace VRCX
                             IsHmdAfk = isHmdAfk;
                             AppApi.Instance.CheckGameRunning();
                         }
+
+                        var headsetErr = ETrackedPropertyError.TrackedProp_Success;
+                        var headsetBatteryPercentage = system.GetFloatTrackedDeviceProperty(i, ETrackedDeviceProperty.Prop_DeviceBatteryPercentage_Float, ref headsetErr);
+                        if (headsetErr != ETrackedPropertyError.TrackedProp_Success)
+                        {
+                            // Headset has no battery, skip displaying it
+                            break;
+                        }
+
+                        var headset = new[]
+                        {
+                            "headset",
+                            system.IsTrackedDeviceConnected(i)
+                                ? "connected"
+                                : "disconnected",
+                            // Currently neither VD or SteamLink report charging state
+                            "discharging",
+                            (headsetBatteryPercentage * 100).ToString(),
+                            poses[i].eTrackingResult.ToString()
+                        };
+                        _deviceListLock.EnterWriteLock();
+                        try
+                        {
+                            _deviceList.Add(headset);
+                        }
+                        finally
+                        {
+                            _deviceListLock.ExitWriteLock();
+                        }
+
                         break;
                     case ETrackedDeviceClass.Controller:
                     case ETrackedDeviceClass.GenericTracker:

html/src/vr.js

@@ -446,22 +446,19 @@ Vue.component('marquee-text', MarqueeText);
                         if (device[0] === 'base' && device[1] === 'connected') {
                             baseStations++;
                         } else {
-                            deviceList.unshift(device);
+                            deviceList.push(device);
                         }
                     });
                     this.deviceCount = deviceList.length;
-                    deviceList.sort((a, b) => {
+                    const deviceValue = (dev) => {
-                        if (a[0] === b[0]) {
+                        if (dev[0] === 'headset') return 0;
-                            return 0;
+                        if (dev[0] === 'leftController') return 1;
+                        if (dev[0] === 'rightController') return 2;
+                        if (dev[0].toLowerCase().includes('controller')) return 3;
+                        if (dev[0] === 'tracker' || dev[0] === 'base') return 4;
+                        return 5;
                     }
-                        if (a[0] === 'tracker' || a[0] === 'base') {
+                    deviceList.sort((a, b) => deviceValue(a) - deviceValue(b));
-                            return 1;
-                        }
-                        if (a[0].toLowerCase().includes('controller')) {
-                            return -1;
-                        }
-                        return 0;
-                    });
                     deviceList.sort((a, b) => {
                         if (a[1] === b[1]) {
                             return 0;

html/src/vr.pug

@@ -434,6 +434,12 @@ html
                 .x-containerbottom
                     div(style="display:flex;flex-direction:row;flex-wrap:wrap")
                         div(v-for="device in devices" class="tracker-container")
+                            div(v-if="device[0] === 'headset'" class="tracker-device" :class="trackingResultToClass(device[4])")
+                                img(v-if="device[1] !== 'connected'" src="images/headset_quest_status_off.png" class="tracker-device" :class="trackingResultToClass(device[4])")
+                                img(v-else-if="device[2] === 'charging'" src="images/headset_quest_status_ready_charging.png")
+                                img(v-else-if="device[3] < 20" src="images/headset_quest_status_ready_low.png")
+                                img(v-else src="images/headset_quest_status_ready.png")
+                                span {{ device[3] }}%
                             div(v-if="device[0] === 'leftController'" class="tracker-device" :class="trackingResultToClass(device[4])")
                                 img(v-if="device[1] !== 'connected'" src="images/left_controller_status_off.png" class="tracker-device" :class="trackingResultToClass(device[4])")
                                 img(v-else-if="device[2] === 'charging'" src="images/left_controller_status_ready_charging.png")

html/src/vr.scss

@@ -414,7 +414,6 @@ i.x-user-status.busy {
 }
 
 .tracker-device img {
-    width: 32px;
     height: 32px;
     transition: all 0.25s linear;
 }