From 1c5548b77b0a1c18ab43dd1bde32617416db0211 Mon Sep 17 00:00:00 2001 From: Sam Gateau Date: Tue, 5 Dec 2017 01:25:30 -0800 Subject: [PATCH] Color picker in qml --- .../utilities/lib/plotperf/XColor.qml | 168 ++++++++++++++++-- .../developer/utilities/render/highlight2.qml | 55 +++--- 2 files changed, 174 insertions(+), 49 deletions(-) diff --git a/scripts/developer/utilities/lib/plotperf/XColor.qml b/scripts/developer/utilities/lib/plotperf/XColor.qml index 1e1d28c059..68600007d9 100644 --- a/scripts/developer/utilities/lib/plotperf/XColor.qml +++ b/scripts/developer/utilities/lib/plotperf/XColor.qml @@ -24,36 +24,176 @@ Item { anchors.right: parent.right height: 24 property var color - property alias label: labelControl.text + property var zoneWidth: width / 3; + property var hoveredOn: 0.0; + property var sliderHeight: height / 3; + signal newColor( color la_color) function getColor() { return Qt.rgba(color.red / 255.0, color.green / 255.0, color.blue / 255.0, 1.0 ); } + function repaint() { + current.color = getColor() + } + function setRed(r) { + color.red = r * 255; + repaint() + print("set red " + r) + } + function setGreen(g) { + color.green = g * 255; + repaint() + print("set green " + g) + } + function setBlue(b) { + color.blue = b * 255; + repaint() + print("set blue " + b) + } + + function resetSliders() { + redZone.set(color.red / 255) + greenZone.set(color.green / 255) + blueZone.set(color.blue / 255) + } + Rectangle { id: current - HifiConstants { id: hifi;} + anchors.fill: root color: root.getColor(); } + Rectangle { + id: sliderBack + height: root.sliderHeight + anchors.bottom: root.bottom + anchors.left: root.left + anchors.right: root.right + color: Qt.rgba(0.2, 0.2, 0.2, 1) + opacity: root.hoveredOn * 0.5 + } + + MouseArea { + id: all + anchors.fill: root + hoverEnabled: true + onEntered: { + root.hoveredOn = 1.0; + resetSliders(); + } + onExited: { + root.hoveredOn = 0.0; + } + } Component.onCompleted: { // Binding favors qml value, so set it first bindingControl.when = true; } - HifiControls.Label { - id: labelControl - text: root.label - enabled: true + Item { + id: redZone + anchors.top: root.top + anchors.bottom: root.bottom anchors.left: root.left - anchors.right: root.horizontalCenter - anchors.verticalCenter: root.verticalCenter - } + width: root.zoneWidth - Binding { - id: bindingControl - target: root.color - property: root.property - when: false + function set(r) { + if (r < 0.0) { + r = 0.0 + } else if (r > 1.0) { + r = 1.0 + } + root.setRed(r) + redRect.width = r * redZone.width + redRect.color = Qt.rgba(r, 0, 0, 1) + } + + Rectangle { + id: redRect + anchors.bottom: parent.bottom + anchors.left: parent.left + height: root.sliderHeight + opacity: root.hoveredOn + } + + MouseArea { + id: redArea + anchors.fill: parent + onPositionChanged: { + redZone.set(mouse.x / redArea.width) + } + } } + Item { + id: greenZone + anchors.top: root.top + anchors.bottom: root.bottom + anchors.left: redZone.right + + width: root.zoneWidth + + function set(g) { + if (g < 0.0) { + g = 0.0 + } else if (g > 1.0) { + g = 1.0 + } + root.setGreen(g) + greenRect.width = g * greenZone.width + greenRect.color = Qt.rgba(0, g, 0, 1) + } + + Rectangle { + id: greenRect + anchors.bottom: parent.bottom + anchors.left: parent.left + height: root.sliderHeight + opacity: root.hoveredOn + } + + MouseArea { + id: greenArea + anchors.fill: parent + onPositionChanged: { + greenZone.set(mouse.x / greenArea.width) + } + } + } + Item { + id: blueZone + anchors.top: root.top + anchors.bottom: root.bottom + anchors.right: root.right + // anchors.left: greenZone.right + + width: root.zoneWidth + + function set(b) { + if (b < 0.0) { + b = 0.0 + } else if (b > 1.0) { + b = 1.0 + } + root.setBlue(b) + blueRect.width = b * blueZone.width + blueRect.color = Qt.rgba(0, 0, b, 1) + } + + Rectangle { + id: blueRect + anchors.bottom: parent.bottom + anchors.left: parent.left + height: root.sliderHeight + opacity: root.hoveredOn + } + + MouseArea { + id: blueArea + anchors.fill: parent + onPositionChanged: { + blueZone.set(mouse.x / blueArea.width) + } + } + } } diff --git a/scripts/developer/utilities/render/highlight2.qml b/scripts/developer/utilities/render/highlight2.qml index b6dc49613e..39b6fc2825 100644 --- a/scripts/developer/utilities/render/highlight2.qml +++ b/scripts/developer/utilities/render/highlight2.qml @@ -23,9 +23,7 @@ Rectangle { color: hifi.colors.baseGray; anchors.margins: hifi.dimensions.contentMargin.x - //property var debugConfig: Render.getConfig("RenderMainView.HighlightDebug") - //property var highlightConfig: Render.getConfig("UpdateScene.HighlightStageSetup") - + signal sendToScript(var message); Column { @@ -35,40 +33,27 @@ Rectangle { anchors.right: parent.right anchors.margins: hifi.dimensions.contentMargin.x - Row { - spacing: 10 - anchors.left: parent.left - anchors.right: parent.right - - HifiControls.CheckBox { - id: debug - text: "View Mask" - checked: root.debugConfig["viewMask"] - onCheckedChanged: { - root.debugConfig["viewMask"] = checked; - } - } - HifiControls.CheckBox { - text: "Hover select" - checked: false - onCheckedChanged: { - sendToScript("pick "+checked.toString()) - } - } - HifiControls.CheckBox { - text: "Add to selection" - checked: false - onCheckedChanged: { - sendToScript("add "+checked.toString()) - } - } - } Separator {} - - XColor { - color: { "red": 0, "green": 255, "blue": 0} + Row { + height: 24 + anchors.left: parent.left + anchors.right: parent.right + HifiControls.Label { + height: 24 + width: parent.width / 2 + id: labelControl + text: "Color" + enabled: true + anchors.left: parent.left + anchors.right: parent.horizontalCenter + } + XColor { + // width: parent.width / 2 + anchors.left: parent.horizontalCenter + anchors.right: parent.right + color: { "red": 0, "green": 255, "blue": 0} + } } - Separator {} /*