format and color audio stats

scripts/developer/utilities/audio/Jitter.qml

@@ -20,20 +20,24 @@ ColumnLayout {
     property var avgWindow
     property bool showGraphs: false
 
-    MovingValuePair {
-        label: "Total"
-        label1: "Maximum"
-        label2: "Average"
-        source1: max
-        source2: avg
-        showGraphs: jitter.showGraphs
-    }
     MovingValuePair {
         label: "Window"
         label1: "Maximum"
         label2: "Average"
         source1: maxWindow
         source2: avgWindow
+        color1: "red"
+        color2: "dimgrey"
+        showGraphs: jitter.showGraphs
+    }
+    MovingValuePair {
+        label: "Overall"
+        label1: "Maximum"
+        label2: "Average"
+        source1: max
+        source2: avg
+        color1: "firebrick"
+        color2: "dimgrey"
         showGraphs: jitter.showGraphs
     }
 }

scripts/developer/utilities/audio/MovingValue.qml

@@ -19,18 +19,20 @@ RowLayout {
     property var source
     property string unit: "ms"
     property bool showGraphs: false
+    property color color: "darkslategrey"
 
     width: parent.width
-    property int dataPixelWidth: 150
 
     Label {
-        Layout.preferredWidth: dataPixelWidth
+        Layout.preferredWidth: 100
+        color: value.color
         text: value.label
     }
     Label {
         visible: !value.showGraphs
-        Layout.preferredWidth: 0
+        Layout.preferredWidth: 50
         horizontalAlignment: Text.AlignRight
+        color: value.color
         text: value.source + ' ' + unit
     }
     PlotPerf {
@@ -41,7 +43,7 @@ RowLayout {
         valueUnit: value.unit
         valueNumDigits: 0
 
-        plots: [{ binding: "source" }]
+        plots: [{ binding: "source", color: value.color }]
     }
 }
 

scripts/developer/utilities/audio/MovingValuePair.qml

@@ -20,6 +20,8 @@ RowLayout {
     property string label2
     property var source1
     property var source2
+    property color color1
+    property color color2
     property string unit: "ms"
     property bool showGraphs: false
 
@@ -27,32 +29,36 @@ RowLayout {
     property int dataPixelWidth: 100
 
     Label {
-        Layout.preferredWidth: labelPixelWidth - value.spacing
+        Layout.preferredWidth: 50 - value.spacing
         text: value.label
     }
 
     ColumnLayout {
         RowLayout {
             Label {
-                Layout.preferredWidth: dataPixelWidth 
+                Layout.preferredWidth: 50 
+                color: value.color1
                 text: value.label1
             }
             Label {
                 visible: !value.showGraphs
-                Layout.preferredWidth: 0
+                Layout.preferredWidth: 50
                 horizontalAlignment: Text.AlignRight
+                color: value.color1
                 text: value.source1 + ' ' + unit
             }
         }
         RowLayout {
             Label {
-                Layout.preferredWidth: dataPixelWidth 
+                Layout.preferredWidth: 50
+                color: value.color2
                 text: value.label2
             }
             Label {
                 visible: !value.showGraphs
-                Layout.preferredWidth: 0
+                Layout.preferredWidth: 50
                 horizontalAlignment: Text.AlignRight
+                color: value.color2
                 text: value.source2 + ' ' + unit
             }
         }
@@ -66,6 +72,6 @@ RowLayout {
         valueUnit: value.unit
         valueNumDigits: 0
 
-        plots: [{ binding: "source1" }, { binding: "source2" }]
+        plots: [{ binding: "source1", color: value.color1 }, { binding: "source2", color: value.color2 }]
     }
 }

scripts/developer/utilities/audio/Stream.qml

@@ -24,12 +24,14 @@ ColumnLayout {
     }
     MovingValue {
         label: "Desired"
+        color: "limegreen"
         source: stream.framesDesired
         unit: "frames"
         showGraphs: root.showGraphs
     }
     MovingValue {
         label: "Unplayed"
+        color: "darkblue"
         source: stream.unplayedMsMax
         showGraphs: root.showGraphs
     }
@@ -56,13 +58,14 @@ ColumnLayout {
         text: "Packet Loss"
         font.italic: true
     }
-    Value {
-        label: "Overall"
-        source: stream.lossRate.toFixed(2) + "% (" + stream.lossCount + " lost)"
-    }
     Value {
         label: "Window"
         source: stream.lossRateWindow.toFixed(2) + "% (" + stream.lossCountWindow + " lost)"
     }
+    Value {
+        label: "Overall"
+        color: "dimgrey"
+        source: stream.lossRate.toFixed(2) + "% (" + stream.lossCount + " lost)"
+    }
 }
 

scripts/developer/utilities/audio/Value.qml

@@ -16,17 +16,20 @@ RowLayout {
     id: value
     property string label
     property var source
+    property color color: "darkslategrey"
 
     width: parent.width
     property int dataPixelWidth: 150
 
     Label {
         Layout.preferredWidth: dataPixelWidth
+        color: value.color
         text: value.label
     }
     Label {
         Layout.preferredWidth: 0
         horizontalAlignment: Text.AlignRight
+        color: value.color
         text: value.source
     }
 }

scripts/developer/utilities/audio/stats.js

@@ -17,7 +17,7 @@ var qml = Script.resolvePath('stats.qml');
 var window = new OverlayWindow({
     title: 'Audio Interface Statistics',
     source: qml,
-    width: 800, height: 720 // stats.qml may be too large for some screens
+    width: 500, height: 520 // stats.qml may be too large for some screens
 });
 window.setPosition(INITIAL_OFFSET, INITIAL_OFFSET);
 

scripts/developer/utilities/audio/stats.qml

@@ -47,12 +47,12 @@ Column {
                 control: ColumnLayout {
                     MovingValue { label: "Input Read"; source: AudioStats.inputReadMsMax; showGraphs: stats.showGraphs }
                     MovingValue { label: "Input Ring"; source: AudioStats.inputUnplayedMsMax; showGraphs: stats.showGraphs }
-                    MovingValue { label: "Network (client->mixer)"; source: AudioStats.pingMs / 2; showGraphs: stats.showGraphs }
+                    MovingValue { label: "Network (up)"; source: AudioStats.pingMs / 2; showGraphs: stats.showGraphs }
                     MovingValue { label: "Mixer Ring"; source: AudioStats.mixerStream.unplayedMsMax; showGraphs: stats.showGraphs }
-                    MovingValue { label: "Network (mixer->client)"; source: AudioStats.pingMs / 2; showGraphs: stats.showGraphs }
+                    MovingValue { label: "Network (down)"; source: AudioStats.pingMs / 2; showGraphs: stats.showGraphs }
                     MovingValue { label: "Output Ring"; source: AudioStats.clientStream.unplayedMsMax; showGraphs: stats.showGraphs }
                     MovingValue { label: "Output Read"; source: AudioStats.outputUnplayedMsMax; showGraphs: stats.showGraphs }
-                    MovingValue { label: "TOTAL"; showGraphs: stats.showGraphs
+                    MovingValue { label: "TOTAL"; color: "black"; showGraphs: stats.showGraphs
                         source: AudioStats.inputReadMsMax +
                             AudioStats.inputUnplayedMsMax +
                             AudioStats.outputUnplayedMsMax +