Color picker in qml

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)
+            }
+        }
+    }    
 }

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 {}
 
 /*