From d62e5b298f773dce6966c03cd006248cf92c4bd9 Mon Sep 17 00:00:00 2001
From: Jan Holthuis <jan.holthuis@ruhr-uni-bochum.de>
Date: Tue, 1 Jun 2021 14:53:05 +0200
Subject: [PATCH 1/2] skins/QMLDemo: Add channel VU meters

---
 res/skins/QMLDemo/MixerColumn.qml | 37 +++++++++++---
 res/skins/QMLDemo/VuMeter.qml     | 82 +++++++++++++++++++++++++++++++
 2 files changed, 112 insertions(+), 7 deletions(-)
 create mode 100644 res/skins/QMLDemo/VuMeter.qml

diff --git a/res/skins/QMLDemo/MixerColumn.qml b/res/skins/QMLDemo/MixerColumn.qml
index 580bffc374f..b1733874adf 100644
--- a/res/skins/QMLDemo/MixerColumn.qml
+++ b/res/skins/QMLDemo/MixerColumn.qml
@@ -20,18 +20,41 @@ Item {
         color: Theme.gainKnobColor
     }
 
-    Slider {
-        id: volumeSlider
-
+    Item {
         anchors.top: gainKnob.bottom
         anchors.topMargin: 5
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: pflButton.top
-        group: root.group
-        key: "volume"
-        barColor: Theme.volumeSliderBarColor
-        bg: "images/slider_volume.svg"
+
+        VuMeter {
+            x: 15
+            y: (parent.height - height) / 2
+            width: 4
+            height: parent.height - 40
+            group: root.group
+            key: "VuMeterL"
+        }
+
+        VuMeter {
+            x: parent.width - width - 15
+            y: (parent.height - height) / 2
+            width: 4
+            height: parent.height - 40
+            group: root.group
+            key: "VuMeterR"
+        }
+
+        Slider {
+            id: volumeSlider
+
+            anchors.fill: parent
+            group: root.group
+            key: "volume"
+            barColor: Theme.volumeSliderBarColor
+            bg: "images/slider_volume.svg"
+        }
+
     }
 
     Skin.ControlButton {
diff --git a/res/skins/QMLDemo/VuMeter.qml b/res/skins/QMLDemo/VuMeter.qml
new file mode 100644
index 00000000000..a1982f54141
--- /dev/null
+++ b/res/skins/QMLDemo/VuMeter.qml
@@ -0,0 +1,82 @@
+import Mixxx 0.1 as Mixxx
+import QtGraphicalEffects 1.12
+import QtQuick 2.12
+import "Theme"
+
+Rectangle {
+    id: root
+
+    property string group // required
+    property string key // required
+    property color barColor // required
+
+    radius: width / 2
+    color: "black"
+
+    Mixxx.ControlProxy {
+        id: control
+
+        group: root.group
+        key: root.key
+    }
+
+    Item {
+        id: meterMask
+
+        anchors.fill: parent
+        visible: false
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            anchors.margins: 1
+            height: control.parameter * (parent.height - 2 * anchors.margins)
+            radius: width / 2
+        }
+
+    }
+
+    Rectangle {
+        id: meterGradient
+
+        anchors.fill: parent
+        visible: false
+
+        gradient: Gradient {
+            GradientStop {
+                position: 0.1
+                color: Theme.red
+            }
+
+            GradientStop {
+                position: 0.15
+                color: Theme.yellow
+            }
+
+            GradientStop {
+                position: 0.25
+                color: Theme.yellow
+            }
+
+            GradientStop {
+                position: 0.3
+                color: Theme.green
+            }
+
+            GradientStop {
+                position: 1
+                color: Theme.green
+            }
+
+        }
+
+    }
+
+    OpacityMask {
+        anchors.fill: parent
+        source: meterGradient
+        maskSource: meterMask
+    }
+
+}

From 62e2097d4ba0347b1ea68a08e921d937f9ff8ea3 Mon Sep 17 00:00:00 2001
From: Jan Holthuis <jan.holthuis@ruhr-uni-bochum.de>
Date: Tue, 1 Jun 2021 20:59:06 +0200
Subject: [PATCH 2/2] skins/QMLDemo: Disable antialiasing for VuMeters

---
 res/skins/QMLDemo/VuMeter.qml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/res/skins/QMLDemo/VuMeter.qml b/res/skins/QMLDemo/VuMeter.qml
index a1982f54141..628a47b7e85 100644
--- a/res/skins/QMLDemo/VuMeter.qml
+++ b/res/skins/QMLDemo/VuMeter.qml
@@ -31,6 +31,7 @@ Rectangle {
             anchors.right: parent.right
             anchors.bottom: parent.bottom
             anchors.margins: 1
+            antialiasing: false // for performance reasons
             height: control.parameter * (parent.height - 2 * anchors.margins)
             radius: width / 2
         }
@@ -40,6 +41,7 @@ Rectangle {
     Rectangle {
         id: meterGradient
 
+        antialiasing: false // for performance reasons
         anchors.fill: parent
         visible: false