[GSoC] LateNightQML: Mixer

res/skins/LateNightQML/Controls/Fader.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import "../../../qml" as Skin
+import "../LateNightTheme"
+
+Skin.ControlFader {
+    id: root
+
+    property int backgroundMargin: 0
+    property alias backgroundSource: backgroundImage.source
+    property alias handleSource: handleImage.source
+    property real handleWidth: 0
+    property color valueLineColor: LateNightTheme.mixerSliderBarColor
+
+    bar.color: valueLineColor
+    bar.enabled: true
+    bar.margin: 8
+    bar.width: 2
+    implicitHeight: backgroundImage.implicitHeight + (backgroundMargin * 2)
+    implicitWidth: backgroundImage.implicitWidth + (backgroundMargin * 2)
+    showDefaultHandle: false
+
+    background: Image {
+        id: backgroundImage
+
+        anchors.fill: parent
+        anchors.margins: root.backgroundMargin
+        fillMode: Image.PreserveAspectFit
+    }
+    handle: Image {
+        id: handleImage
+
+        fillMode: Image.PreserveAspectFit
+        height: implicitHeight
+        width: root.handleWidth > 0 ? root.handleWidth : implicitWidth
+        x: root.horizontal ? root.visualPosition * (root.width - width) : (root.width - width) / 2
+        y: root.vertical ? root.visualPosition * (root.height - height) : (root.height - height) / 2
+    }
+}

res/skins/LateNightQML/Controls/ImageVuMeter.qml

@@ -0,0 +1,88 @@
+import Mixxx 1.0 as Mixxx
+import QtQuick
+import "../LateNightTheme"
+
+Item {
+    id: root
+
+    property int backgroundVariant: 0
+    property real clipThreshold: 0.98
+    readonly property bool clipping: peakIndicatorControl.value > 0 || levelControl.value >= clipThreshold
+    property bool drawGroove: true
+    required property string group
+    readonly property real level: Math.max(0, Math.min(1, levelControl.value))
+    property string levelKey: "vu_meter"
+    property string peakKey: "peak_indicator"
+    readonly property string variantName: backgroundVariant === 0 ? "dark" : "light"
+
+    clip: true
+    implicitHeight: 96
+    implicitWidth: 8
+
+    Rectangle {
+        anchors.horizontalCenter: parent.horizontalCenter
+        color: "#040404"
+        height: parent.height
+        visible: root.drawGroove
+        width: 8
+    }
+    Image {
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillMode: Image.PreserveAspectFit
+        height: 11
+        smooth: false
+        source: LateNightTheme.mixerVuClipBackground(root.variantName)
+        width: 6
+        y: 1
+    }
+    Image {
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 1
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillMode: Image.PreserveAspectFit
+        height: 81
+        smooth: false
+        source: LateNightTheme.mixerVuLevelBackground(root.variantName)
+        width: 6
+    }
+    Image {
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillMode: Image.PreserveAspectFit
+        height: 11
+        opacity: root.clipping ? 1 : 0
+        smooth: false
+        source: LateNightTheme.lateNightAsset("style", "vu_deck_clipping_active.png")
+        width: 6
+        y: 1
+    }
+    Item {
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 1
+        anchors.horizontalCenter: parent.horizontalCenter
+        clip: true
+        height: 81 * root.level
+        width: 6
+
+        Image {
+            anchors.bottom: parent.bottom
+            anchors.horizontalCenter: parent.horizontalCenter
+            fillMode: Image.PreserveAspectFit
+            height: 81
+            smooth: false
+            source: LateNightTheme.lateNightAsset("style", "vu_deck_level_active.png")
+            width: 6
+        }
+    }
+    Mixxx.ControlProxy {
+        id: levelControl
+
+        group: root.group
+        key: root.levelKey
+    }
+    Mixxx.ControlProxy {
+        id: peakIndicatorControl
+
+        group: root.group
+        key: root.peakKey
+    }
+}

res/skins/LateNightQML/Controls/Knob.qml

@@ -0,0 +1,96 @@
+import QtQuick
+import "../../../qml" as Skin
+import "../LateNightTheme"
+
+Skin.ControlKnob {
+    id: root
+
+    readonly property int arcRenderScale: 8
+    property url backgroundSource: LateNightTheme.assetRegularKnobBackground
+    property bool displayArc: false
+    property color displayArcColor: "transparent"
+    property real displayArcOffsetY: 1.998
+    property real displayArcRadius: 12.5
+    property int displayArcStart: 1 // Knob.ArcStart.Center
+    property real displayArcWidth: 2
+    property string indicatorColor: "orange"
+    property string indicatorKind: "regular"
+
+    angle: 135
+    arc: false
+    arcStart: displayArcStart
+    color: displayArcColor
+    implicitHeight: backgroundImage.implicitHeight
+    implicitWidth: backgroundImage.implicitWidth
+    knobCenterOffsetY: displayArcOffsetY
+    showDefaultBackground: false
+    showDefaultForeground: false
+
+    background: Image {
+        id: backgroundImage
+
+        anchors.fill: parent
+        fillMode: Image.PreserveAspectFit
+        source: root.backgroundSource
+    }
+    foreground: Item {
+        anchors.fill: parent
+
+        Image {
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectFit
+            source: LateNightTheme.mixerKnobIndicator(root.indicatorKind, root.indicatorColor)
+        }
+    }
+
+    Canvas {
+        id: arcCanvas
+
+        readonly property color renderedColor: root.displayArcColor
+        readonly property real renderedOffsetY: root.displayArcOffsetY
+        readonly property real renderedRadius: root.displayArcRadius
+        readonly property int renderedStart: root.displayArcStart
+        readonly property real renderedValue: root.value
+        readonly property real renderedWidth: root.displayArcWidth
+
+        antialiasing: true
+        height: root.height * root.arcRenderScale
+        layer.enabled: true
+        layer.mipmap: true
+        renderStrategy: Canvas.Immediate
+        scale: 1 / root.arcRenderScale
+        transformOrigin: Item.TopLeft
+        visible: root.displayArc
+        width: root.width * root.arcRenderScale
+        z: 1
+
+        Component.onCompleted: requestPaint()
+        onPaint: {
+            const ctx = getContext("2d");
+            ctx.clearRect(0, 0, width, height);
+            if (!root.displayArc) {
+                return;
+            }
+
+            const renderScale = root.arcRenderScale;
+            const startAngle = root.angleFrom(root.arcStartValue - root.valueCenter) - 90;
+            const sweepAngle = root.angleFrom(root.value - root.arcStartValue);
+            const startRadians = startAngle * Math.PI / 180;
+            const endRadians = (startAngle + sweepAngle) * Math.PI / 180;
+
+            ctx.beginPath();
+            ctx.strokeStyle = root.displayArcColor;
+            ctx.lineWidth = root.displayArcWidth * renderScale;
+            ctx.lineCap = "round";
+            ctx.arc((root.width / 2) * renderScale, (root.height / 2 + root.displayArcOffsetY) * renderScale, root.displayArcRadius * renderScale, startRadians, endRadians, sweepAngle < 0);
+            ctx.stroke();
+        }
+        onRenderedColorChanged: requestPaint()
+        onRenderedOffsetYChanged: requestPaint()
+        onRenderedRadiusChanged: requestPaint()
+        onRenderedStartChanged: requestPaint()
+        onRenderedValueChanged: requestPaint()
+        onRenderedWidthChanged: requestPaint()
+        onVisibleChanged: requestPaint()
+    }
+}