QML: Various tweak on Waveform marker

Holzhaus · Feb 12, 2024 · 5d87ef8 · 5d87ef8
1 parent 8966eb6
commit 5d87ef8
Show file tree

Hide file tree

Showing 15 changed files with 132 additions and 49 deletions.
diff --git a/res/qml/Theme/Theme.qml b/res/qml/Theme/Theme.qml
@@ -41,7 +41,7 @@ QtObject {
     property color waveformBeatColor: lightGray
     property color waveformCursorColor: white
     property color waveformMarkerDefault: '#ff7a01'
-    property color waveformMarkerLabel: Qt.rgba(255, 255, 255, 0.8)
+    property color waveformMarkerLabel: Qt.rgba(0.03, 0.01, 0, 0.8)
     property color waveformMarkerIntroOutroColor: '#2c5c9a'
     property color waveformMarkerLoopColor: '#00b400'
     property color waveformMarkerLoopColorDisabled: '#FFFFFF'

diff --git a/res/qml/WaveformCue.qml b/res/qml/WaveformCue.qml
@@ -14,12 +14,14 @@ Item {
 
     property real markerHeight: root.height
     property color labelColor: Theme.waveformMarkerLabel
-    property real radiusSize: 4
+    property real radiusSize: 2
     property string cueLabel: qsTr("CUE")
 
     FontMetrics {
         id: fontMetrics
         font.family: Theme.fontFamily
+        font.pixelSize: 12
+        font.weight: Font.Normal
     }
 
     property rect contentRect: fontMetrics.tightBoundingRect(cueLabel)
@@ -32,23 +34,28 @@ Item {
             strokeStyle: ShapePath.SolidLine
             startX: -1; startY: 0
 
-            PathLine { x: 8; y: 0 }
-            PathLine { x: 8 - radiusSize + contentRect.width; y: 0 }
             PathArc {
-                x: 8 + contentRect.width
-                y: radiusSize
+                x: 2
+                y: radiusSize /2
+                radiusX: radiusSize /2; radiusY: radiusSize /2
+                direction: PathArc.Clockwise
+            }
+            PathLine { x: 4 - radiusSize + contentRect.width; y: radiusSize /2 }
+            PathArc {
+                x: 4 + contentRect.width
+                y: radiusSize * 1.5
                 radiusX: radiusSize; radiusY: radiusSize
                 direction: PathArc.Clockwise
             }
-            PathLine { x: 8 + contentRect.width; y: 16 - radiusSize }
+            PathLine { x: 4 + contentRect.width; y: 16 - radiusSize /2 }
             PathArc {
-                x: 8 - radiusSize + contentRect.width
-                y: 16
+                x: 4 - radiusSize + contentRect.width
+                y: 16 + radiusSize /2
                 radiusX: radiusSize; radiusY: radiusSize
                 direction: PathArc.Clockwise
             }
-            PathLine { x: 8; y: 16 }
-            PathLine { x: 2; y: 16 }
+            PathLine { x: 4; y: 16 + radiusSize /2 }
+            PathLine { x: 2; y: 16 + radiusSize /2 }
             PathLine { x: 2; y: markerHeight }
             PathLine { x: -1; y: markerHeight }
             PathLine { x: -1; y: 0 }
@@ -59,11 +66,11 @@ Item {
             fillColor: labelColor
             strokeColor: labelColor
             PathText {
-                x: 3
-                y: 3
+                x: 2
+                y: 4
                 font.family: Theme.fontFamily
-                font.pixelSize: 13
-                font.weight: Font.Bold
+                font.pixelSize: 12
+                font.weight: Font.Normal
                 text: cueLabel
             }
         }

diff --git a/res/qml/WaveformHotcue.qml b/res/qml/WaveformHotcue.qml
@@ -25,12 +25,14 @@ Item {
 
     property real markerHeight: root.height
     property color labelColor: Theme.waveformMarkerLabel
-    property real radiusSize: 4
+    property real radiusSize: 2
     property string hotcueLabel: label != "" ? `${hotcueNumber}: ${label}` : `${hotcueNumber}`
 
     FontMetrics {
         id: fontMetrics
         font.family: Theme.fontFamily
+        font.pixelSize: 12
+        font.weight: Font.Normal
     }
 
     property rect contentRect: fontMetrics.tightBoundingRect(hotcueLabel)
@@ -50,17 +52,24 @@ Item {
             startX: -1; startY: 0
 
             PathLine { x: 1; y: 0 }
-            PathLine { x: 1; y: markerHeight - 16 }
-            PathLine { x: 8 - radiusSize + contentRect.width; y: markerHeight - 16 }
+            PathLine { x: 1; y: markerHeight - 16 - radiusSize }
+            PathLine { x: 8 - radiusSize + contentRect.width; y: markerHeight - 16 - radiusSize }
             PathArc {
                 x: 8 + contentRect.width
-                y: markerHeight - 16 + radiusSize
+                y: markerHeight - 16
                 radiusX: radiusSize; radiusY: radiusSize
                 direction: PathArc.Clockwise
             }
-            PathLine { x: 8 + contentRect.width; y: markerHeight - radiusSize }
+            PathLine { x: 8 + contentRect.width; y: markerHeight - 2 * radiusSize }
             PathArc {
                 x: 8 - radiusSize + contentRect.width
+                y: markerHeight - radiusSize
+                radiusX: radiusSize; radiusY: radiusSize
+                direction: PathArc.Clockwise
+            }
+            PathLine { x: 1 + radiusSize; y: markerHeight - radiusSize }
+            PathArc {
+                x: 1
                 y: markerHeight
                 radiusX: radiusSize; radiusY: radiusSize
                 direction: PathArc.Clockwise
@@ -89,10 +98,10 @@ Item {
             strokeColor: labelColor
             PathText {
                 x: 3
-                y: markerHeight - 13
+                y: markerHeight - 13 - radiusSize
                 font.family: Theme.fontFamily
-                font.pixelSize: 13
-                font.weight: Font.Medium
+                font.pixelSize: 12
+                font.weight: Font.Normal
                 text: hotcueLabel
             }
         }

diff --git a/res/qml/WaveformIntroOutro.qml b/res/qml/WaveformIntroOutro.qml
@@ -14,7 +14,7 @@ Item {
     property bool isIntro: true
 
     property real markerHeight: root.height
-    property real radiusSize: 4
+    property real radiusSize: 2
 
     Rectangle {
         anchors.fill: parent
@@ -24,7 +24,7 @@ Item {
     Shape {
         ShapePath {
             strokeWidth: 0
-            strokeColor: 'transparent'
+            strokeColor: '#3f85df'
             fillColor: root.mainColor
             strokeStyle: ShapePath.SolidLine
             startX: -1; startY: 0
@@ -52,7 +52,7 @@ Item {
         visible: root.width != 0
         ShapePath {
             strokeWidth: 0
-            strokeColor: 'transparent'
+            strokeColor: '#3f85df'
             fillColor: root.mainColor
             strokeStyle: ShapePath.SolidLine
             startX: root.width - 1; startY: 0

diff --git a/res/qml/WaveformLoop.qml b/res/qml/WaveformLoop.qml
@@ -16,7 +16,7 @@ Item {
     property real disabledOpacity: 0.5
 
     property real markerHeight: root.height
-    property real radiusSize: 4
+    property real radiusSize: 2
     property bool enabled: true
 
     Rectangle {

diff --git a/res/qml/WaveformRow.qml b/res/qml/WaveformRow.qml
@@ -1,6 +1,6 @@
 import "." as Skin
 import Mixxx 1.0 as Mixxx
-import QtQuick 2.14
+import QtQuick 2.15
 import QtQuick.Shapes 1.12
 import "Theme"
 
@@ -16,6 +16,16 @@ Item {
     property string group // required
     property var deckPlayer: Mixxx.PlayerManager.getPlayer(group)
 
+    // Enable smooth curves. For QtQuick Shapes, this currently only works
+    // by enabling multisampling, so we use 4xMSAA here.
+    //
+    // See https://www.qt.io/blog/2017/07/07/let-there-be-shapes for details.
+    property int multiSamplingLevel: Mixxx.Config.getMultiSamplingLevel()
+    layer.enabled: multiSamplingLevel > 1
+    layer.samples: multiSamplingLevel
+    layer.format: ShaderEffectSource.Alpha
+    layer.smooth: true
+
     Item {
         id: waveformContainer
 
@@ -59,6 +69,13 @@ Item {
             key: "waveform_zoom"
         }
 
+        Mixxx.ControlProxy {
+            id: globalZoomControl
+
+            group: "[App]"
+            key: "waveform_zoom"
+        }
+
         Mixxx.ControlProxy {
             id: introStartPosition
 
@@ -120,8 +137,9 @@ Item {
 
             property real constantRate: Mixxx.Config.getBool("[Waveform]", "ConstantRate", true)
             property real screenPos: Mixxx.Config.getDouble("[Waveform]", "PlayMarkerPosition", 0.5)
+            property real zoomSynchronization: Mixxx.Config.getBool("[Waveform]", "ZoomSynchronization", true)
 
-            property real effectiveZoomFactor: (waveform.constantRate ? 1 / rateRatioControl.value : 1.0) * (200 / zoomControl.value)
+            property real effectiveZoomFactor: (waveform.constantRate ? 1 / rateRatioControl.value : 1.0) * (200 / (zoomSynchronization ? globalZoomControl.value : zoomControl.value))
 
             width: waveformContainer.duration * effectiveZoomFactor
             height: parent.height
@@ -154,7 +172,11 @@ Item {
                         paths: {
                             let p = [];
                             for (let i = 0; i < preroll.numTriangles; i++) {
-                                p.push([Qt.point(preroll.width - i * preroll.triangleWidth, preroll.triangleHeight / 2), Qt.point(preroll.width - (i + 1) * preroll.triangleWidth, 0), Qt.point(preroll.width - (i + 1) * preroll.triangleWidth, preroll.triangleHeight), Qt.point(preroll.width - i * preroll.triangleWidth, preroll.triangleHeight / 2)]);
+                                p.push([
+                                        Qt.point(preroll.width - i * preroll.triangleWidth, preroll.triangleHeight / 2),
+                                        Qt.point(preroll.width - (i + 1) * preroll.triangleWidth, preroll.triangleHeight / 4),
+                                        Qt.point(preroll.width - (i + 1) * preroll.triangleWidth, 3 *(preroll.triangleHeight / 4)),
+                                        Qt.point(preroll.width - i * preroll.triangleWidth, preroll.triangleHeight / 2)]);
                             }
                             return p;
                         }
@@ -183,7 +205,11 @@ Item {
                         paths: {
                             let p = [];
                             for (let i = 0; i < postroll.numTriangles; i++) {
-                                p.push([Qt.point(i * postroll.triangleWidth, postroll.triangleHeight / 2), Qt.point((i + 1) * postroll.triangleWidth, 0), Qt.point((i + 1) * postroll.triangleWidth, postroll.triangleHeight), Qt.point(i * postroll.triangleWidth, postroll.triangleHeight / 2)]);
+                                p.push([
+                                        Qt.point(i * postroll.triangleWidth, postroll.triangleHeight / 2),
+                                        Qt.point((i + 1) * postroll.triangleWidth, postroll.triangleHeight / 4),
+                                        Qt.point((i + 1) * postroll.triangleWidth, 3 * postroll.triangleHeight / 4),
+                                        Qt.point(i * postroll.triangleWidth, postroll.triangleHeight / 2)]);
                             }
                             return p;
                         }

diff --git a/res/qml/WaveformShader.qml b/res/qml/WaveformShader.qml
@@ -1,18 +1,22 @@
 import Mixxx 1.0 as Mixxx
 import QtQuick 2.12
 
+import "Theme"
+
 ShaderEffect {
     id: root
 
-    property string group // required
+    required property string group
+
     property var deckPlayer: Mixxx.PlayerManager.getPlayer(group)
-    property size framebufferSize: Qt.size(width, height)
+    property size framebufferSize: Qt.size(width, height*oversamplingFactor)
     property int waveformLength: root.deckPlayer.waveformLength
     property int textureSize: root.deckPlayer.waveformTextureSize
     property int textureStride: root.deckPlayer.waveformTextureStride
     property real firstVisualIndex: 1
+    property int oversamplingFactor: Math.max(Mixxx.Config.getMultiSamplingLevel(), 1)
     property real lastVisualIndex: root.deckPlayer.waveformLength / 2
-    property color axesColor: "#FFFFFF"
+    property color axesColor: Theme.waveformBeatColor
     property color highColor: "#0000FF"
     property color midColor: "#00FF00"
     property color lowColor: "#FF0000"
@@ -27,9 +31,9 @@ ShaderEffect {
     property real lowGain: (filterWaveformEnableControl.value ? (filterLowKillControl.value ? 0 : filterLowControl.value) : 1) * visualGainLow
     property real allGain: gainControl.value * 2.0 * visualGainAll // See WaveformWidgetRenderer::getGain()
 
-    Component.onCompleted: () => {
-        console.warn(`visualGainAll: ${visualGainAll}, visualGainLow: ${visualGainLow}, visualGainMid: ${visualGainMid}, visualGainHigh: ${visualGainHigh}`)
-    }
+    // Component.onCompleted: () => {
+    //     console.warn(`highGain: ${highGain}, midGain: ${midGain}, lowGain: ${lowGain}, allGain: ${allGain}(${gainControl.value},${visualGainAll}), framebufferSize: ${framebufferSize}`)
+    // }
     property Image waveformTexture
 
     fragmentShader: "qrc:/shaders/rgbsignal_qml.frag.qsb"

diff --git a/res/qml/main.qml b/res/qml/main.qml
@@ -103,7 +103,7 @@ ApplicationWindow {
 
             group: "[Channel3]"
             width: root.width
-            height: 60
+            height: root.show4decks ? 60 : 92
             visible: root.show4decks && !root.maximizeLibrary
 
             FadeBehavior on visible {
@@ -116,7 +116,7 @@ ApplicationWindow {
 
             group: "[Channel1]"
             width: root.width
-            height: 60
+            height: root.show4decks ? 60 : 92
             visible: !root.maximizeLibrary
 
             FadeBehavior on visible {
@@ -129,7 +129,7 @@ ApplicationWindow {
 
             group: "[Channel2]"
             width: root.width
-            height: 60
+            height: root.show4decks ? 60 : 92
             visible: !root.maximizeLibrary
 
             FadeBehavior on visible {
@@ -142,7 +142,7 @@ ApplicationWindow {
 
             group: "[Channel4]"
             width: root.width
-            height: 60
+            height: root.show4decks ? 60 : 92
             visible: root.show4decks && !root.maximizeLibrary
 
             FadeBehavior on visible {

diff --git a/src/mixer/basetrackplayer.cpp b/src/mixer/basetrackplayer.cpp
@@ -147,6 +147,10 @@ BaseTrackPlayerImpl::BaseTrackPlayerImpl(
     m_pWaveformZoom->connectValueChangeRequest(this,
             &BaseTrackPlayerImpl::slotWaveformZoomValueChangeRequest,
             Qt::DirectConnection);
+    // The following CO is used to indicate what zoom level should be ably if
+    // waveform zoom is sync across channels
+    m_pGlobalWaveformZoom =
+            std::make_unique<ControlProxy>(ConfigKey("[App]", "waveform_zoom"));
     m_pWaveformZoom->set(1.0);
     m_pWaveformZoomUp = std::make_unique<ControlPushButton>(
             ConfigKey(getGroup(), "waveform_zoom_up"));
@@ -853,6 +857,7 @@ void BaseTrackPlayerImpl::slotWaveformZoomValueChangeRequest(double v) {
     if (v <= WaveformWidgetRenderer::s_waveformMaxZoom
             && v >= WaveformWidgetRenderer::s_waveformMinZoom) {
         m_pWaveformZoom->setAndConfirm(v);
+        m_pGlobalWaveformZoom->set(v);
     }
 }
 

diff --git a/src/mixer/basetrackplayer.h b/src/mixer/basetrackplayer.h
@@ -165,6 +165,7 @@ class BaseTrackPlayerImpl : public BaseTrackPlayer {
 
     // Waveform display related controls
     std::unique_ptr<ControlObject> m_pWaveformZoom;
+    std::unique_ptr<ControlProxy> m_pGlobalWaveformZoom;
     std::unique_ptr<ControlPushButton> m_pWaveformZoomUp;
     std::unique_ptr<ControlPushButton> m_pWaveformZoomDown;
     std::unique_ptr<ControlPushButton> m_pWaveformZoomSetDefault;

diff --git a/src/mixer/playermanager.cpp b/src/mixer/playermanager.cpp
@@ -23,6 +23,7 @@
 #include "util/compatibility/qatomic.h"
 #include "util/defs.h"
 #include "util/logger.h"
+#include "waveform/renderers/waveformwidgetrenderer.h"
 
 namespace {
 
@@ -112,15 +113,32 @@ PlayerManager::PlayerManager(UserSettingsPointer pConfig,
           // NOTE(XXX) LegacySkinParser relies on these controls being Controls
           // and not ControlProxies.
           m_pCONumDecks(std::make_unique<ControlObject>(
-                  ConfigKey(kAppGroup, QStringLiteral("num_decks")), true, true)),
+                  ConfigKey(kAppGroup, QStringLiteral("num_decks")),
+                  true,
+                  true)),
+          m_pCOWaveformZoom(std::make_unique<ControlObject>(
+                  ConfigKey(kAppGroup, QStringLiteral("waveform_zoom")),
+                  true,
+                  true,
+                  false,
+                  m_pConfig->getValue(ConfigKey("[Waveform]", "DefaultZoom"),
+                          WaveformWidgetRenderer::s_waveformDefaultZoom))),
           m_pCONumSamplers(std::make_unique<ControlObject>(
-                  ConfigKey(kAppGroup, QStringLiteral("num_samplers")), true, true)),
+                  ConfigKey(kAppGroup, QStringLiteral("num_samplers")),
+                  true,
+                  true)),
           m_pCONumPreviewDecks(std::make_unique<ControlObject>(
-                  ConfigKey(kAppGroup, QStringLiteral("num_preview_decks")), true, true)),
+                  ConfigKey(kAppGroup, QStringLiteral("num_preview_decks")),
+                  true,
+                  true)),
           m_pCONumMicrophones(std::make_unique<ControlObject>(
-                  ConfigKey(kAppGroup, QStringLiteral("num_microphones")), true, true)),
+                  ConfigKey(kAppGroup, QStringLiteral("num_microphones")),
+                  true,
+                  true)),
           m_pCONumAuxiliaries(std::make_unique<ControlObject>(
-                  ConfigKey(kAppGroup, QStringLiteral("num_auxiliaries")), true, true)),
+                  ConfigKey(kAppGroup, QStringLiteral("num_auxiliaries")),
+                  true,
+                  true)),
           m_pTrackAnalysisScheduler(TrackAnalysisScheduler::NullPointer()) {
     m_pCONumDecks->addAlias(ConfigKey(kLegacyGroup, QStringLiteral("num_decks")));
     m_pCONumDecks->connectValueChangeRequest(this,