commit 15bb17659c30ba8122e76da1967b1da304bc071a
parent 07a69059c1558fbe69562d46c1d38ec768cc86d0
Author: Alexandre BIQUE <bique.alexandre@gmail.com>
Date: Mon, 6 Sep 2021 18:23:47 +0200
Better know widget
Diffstat:
4 files changed, 106 insertions(+), 60 deletions(-)
diff --git a/examples/gui/application.cc b/examples/gui/application.cc
@@ -15,6 +15,9 @@ Application::Application(int &argc, char **argv)
while (waitForDebbugger)
;
+ qmlRegisterType<ParameterProxy>("org.clap", 1, 0, "ParameterProxy");
+ qmlRegisterType<PluginProxy>("org.clap", 1, 0, "PluginProxy");
+
QCommandLineParser parser;
QCommandLineOption skinOpt("skin", tr("path to the skin directory"), tr("path"));
diff --git a/examples/plugins/qml/clap/Knob.qml b/examples/plugins/qml/clap/Knob.qml
@@ -1,72 +1,115 @@
import QtQuick 2.1
-import QtQuick.Controls 2.1
-Item {
+Canvas {
property QtObject param
property int size: 20
+ property string backgroundColor: "#222222";
+ property string valueColor: "#ffffff";
+ property string modulationColor: "#3344ff"
+
id: knob
width: size
height: size
- Rectangle {
- width: knob.size
- height: knob.size
- radius: knob.size / 2
- color: "#332277"
-
- MouseArea {
- anchors.fill: parent
- drag.axis: Drag.YAxis
- property real lastY: 0
- onPressed: (mouse) => {
- if (mouse.button === Qt.LeftButton) {
- lastY = mouse.y;
- knob.param.isAdjusting = true
- }
- }
- onReleased: (mouse) => {
- if (mouse.button === Qt.LeftButton) {
- knob.param.isAdjusting = false
- }
- }
- onPositionChanged: (mouse) => {
- if (!(mouse.buttons & Qt.LeftButton))
- return;
- knob.param.normalizedValue += ((mouse.modifiers & Qt.ShiftModifier) ? 0.001 : 0.01) * (mouse.y - lastY);
- lastY = mouse.y;
- }
- }
- }
+ property real lastY: 0
- Item {
- Rectangle {
- x: knob.size / 2 - knob.size / 40
- y: knob.size / 20
- height: knob.size / 10
- width: knob.size / 20
- radius: knob.size / 40
- color: "#2282ff"
+ Connections {
+ target: param
+ function onValueChanged() {
+ knob.requestPaint();
}
- transform: Rotation {
- angle: knob.param.normalizedModulation * 270 - 135
- origin.x: knob.size / 2
- origin.y: knob.size / 2
+ function onModulationChanged() {
+ knob.requestPaint();
}
}
- Rectangle {
- x: knob.size / 2 - knob.size / 20
- y: knob.size / 20
- height: knob.size / 10
- width: knob.size / 10
- radius: knob.size / 40
- color: "#dd82ff"
+ MouseArea {
+ anchors.fill: parent
+ drag.axis: Drag.YAxis
+ property real lastY: 0
+ onPressed: (mouse) => {
+ if (mouse.button === Qt.LeftButton) {
+ lastY = mouse.y;
+ knob.param.isAdjusting = true;
+ }
+ }
+ onReleased: (mouse) => {
+ if (mouse.button === Qt.LeftButton) {
+ knob.param.isAdjusting = false;
+ }
+ }
+ onPositionChanged: (mouse) => {
+ if (!(mouse.buttons & Qt.LeftButton))
+ return;
+ knob.param.normalizedValue += ((mouse.modifiers & Qt.ShiftModifier) ? 0.001 : 0.01) * (lastY - mouse.y);
+ lastY = mouse.y;
+ knob.requestPaint();
+ }
+ onDoubleClicked: (mouse) => {
+ if (!(mouse.buttons & Qt.LeftButton))
+ return;
+ knob.param.value = knob.param.defaultValue;
+ }
+ }
+
+ onPaint: {
+ var ctx = getContext("2d");
+
+ drawBackground(ctx);
+ drawModulation(ctx);
+ drawValue(ctx);
+ }
+
+ function drawBackground(ctx) {
+ ctx.save()
+
+ ctx.fillStyle = backgroundColor;
+ ctx.strokeStyle = "black";
+
+ ctx.beginPath();
+ ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.stroke();
+
+ ctx.restore()
}
- transform: Rotation {
- angle: knob.param.normalizedValue * 270 - 135
- origin.x: knob.size / 2
- origin.y: knob.size / 2
+ function drawModulation(ctx) {
+ var radius = size / 15;
+
+ ctx.save();
+
+ ctx.translate(size / 2, size / 2);
+
+ ctx.fillStyle = modulationColor;
+ ctx.strokeStyle = "black";
+
+ ctx.beginPath();
+ ctx.rotate((param.normalizedModulation - .5) * Math.PI * 4 / 3);
+ ctx.arc(0, -size / 2 + 2 * radius, radius, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.stroke();
+
+ ctx.restore();
+ }
+
+ function drawValue(ctx) {
+ var radius = size / 15;
+
+ ctx.save();
+
+ ctx.translate(size / 2, size / 2);
+
+ ctx.fillStyle = valueColor;
+ ctx.strokeStyle = "black";
+
+ ctx.beginPath();
+ ctx.rotate((param.normalizedValue - .5) * Math.PI * 4 / 3);
+ ctx.arc(0, -size / 2 + 2 * radius, radius, 0, 2 * Math.PI, false);
+ ctx.fill();
+ ctx.stroke();
+
+ ctx.restore();
}
}
diff --git a/examples/plugins/qml/clap/qmldir b/examples/plugins/qml/clap/qmldir
@@ -1,3 +1,3 @@
module clap
-Knob 1.0 Knob.qml
-\ No newline at end of file
+Knob 1.0 Knob.qml
diff --git a/examples/plugins/qml/dc-offset/main.qml b/examples/plugins/qml/dc-offset/main.qml
@@ -3,13 +3,15 @@ import QtQuick.Controls 2.1
import clap 1.0
Rectangle {
- width: 300
+ width: 200
height: 200
color: "#224477"
Knob {
id: dc_offset_knob
param: plugin.param(0)
- size: 80
+ size: 160
+ x: 20
+ y: 20
}
-}
-\ No newline at end of file
+}
