Merge pull request #3932 from Holzhaus/qml-vumeter

skins/QMLDemo: Add channel VU meters
mixxxdj · Jun 1, 2021 · 646583c · 646583c
2 parents 2a85c7c + 62e2097
commit 646583c
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 7 deletions.
diff --git 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
@@ -0,0 +1,84 @@
+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
+            antialiasing: false // for performance reasons
+            height: control.parameter * (parent.height - 2 * anchors.margins)
+            radius: width / 2
+        }
+
+    }
+
+    Rectangle {
+        id: meterGradient
+
+        antialiasing: false // for performance reasons
+        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
+    }
+
+}