almost complete setup working, yeah

interface/src/scripting/SelectionScriptingInterface.cpp

@@ -146,6 +146,14 @@ QVariantMap SelectionScriptingInterface::getListHighlightStyle(const QString& li
     }
 }
 
+
+QStringList SelectionScriptingInterface::getHighlightStyles() const {
+    QStringList list;
+    QReadLocker lock(&_highlightStylesLock);
+    list = _highlightStyleMap.keys();
+    return list;
+}
+
 render::HighlightStyle SelectionScriptingInterface::getHighlightStyle(const QString& listName) const {
     QReadLocker lock(&_highlightStylesLock);
     auto highlightStyle = _highlightStyleMap.find(listName);

interface/src/scripting/SelectionScriptingInterface.h

@@ -176,6 +176,8 @@ public:
     */
     Q_INVOKABLE QVariantMap getListHighlightStyle(const QString& listName) const;
 
+    Q_INVOKABLE QStringList getHighlightStyles() const;
+
     render::HighlightStyle getHighlightStyle(const QString& listName) const;
 
     void onSelectedItemsListChanged(const QString& listName);

scripts/developer/utilities/lib/plotperf/Color.qml

@@ -1,5 +1,5 @@
 //
-//  XColor.qml
+//  Color.qml
 //
 //  Created by Sam Gateau 12/4/2017
 //  Copyright 2017 High Fidelity, Inc.
@@ -20,48 +20,57 @@ Item {
     HifiConstants { id: hifi }
     id: root
 
-    anchors.left: parent.left
-    anchors.right: parent.right    
     height: 24
-    property var color
+
+    property var _color: Qt.rgba(1.0, 1.0, 1.0, 1.0 );
     property var zoneWidth: width / 3;
     property var hoveredOn: 0.0;
-    property var sliderHeight: height / 3;
+    property var sliderHeight: height / 2;
 
-    signal newColor( color la_color)
+    signal newColor(color __color)
-    function getColor() {
-        return Qt.rgba(color.red / 255.0, color.green / 255.0, color.blue / 255.0, 1.0 );
-    }
 
-    function repaint() {
+    function setColor(color) {
-        current.color = getColor()
+        _color = Qt.rgba(color.r, color.g, color.b, 1.0)
-    }
+        updateColor()
+    }  
     function setRed(r) {
-        color.red = r * 255;
+        _color.r = r;
-        repaint()
+        updateColor()
-        print("set red " + r)
     }
     function setGreen(g) {
-        color.green = g * 255;
+        _color.g = g;
-        repaint()
+        updateColor()
-        print("set green " + g)
     }
     function setBlue(b) {
-        color.blue = b * 255;
+        _color.b = b;
+        updateColor()
+    }
+
+    function updateColor() {
         repaint()
-        print("set blue " + b)
+        newColor(_color)
+    } 
+    function repaint() {
+        current.color = _color
     }
 
     function resetSliders() {
-        redZone.set(color.red / 255) 
+        redZone.set(_color.r) 
-        greenZone.set(color.green / 255) 
+        greenZone.set(_color.g) 
-        blueZone.set(color.blue / 255)          
+        blueZone.set(_color.b)          
+    }
+
+    function setXColor(xcolor) {
+        setColor(Qt.rgba(xcolor.red/255, xcolor.green/255, color.blue/255, 1.0))
+    }
+    function getXColor() {
+        return {red:_color.r * 255, green:_color.g * 255, blue:_color.b * 255}
     }
 
     Rectangle {
         id: current
         anchors.fill: root
-        color: root.getColor();
+        color: root._color;
     }
     Rectangle {
         id: sliderBack
@@ -87,8 +96,6 @@ Item {
     } 
 
     Component.onCompleted: {
-        // Binding favors qml value, so set it first
-        bindingControl.when = true;
     }
 
     Item {
@@ -98,13 +105,16 @@ Item {
         anchors.left: root.left
         width: root.zoneWidth  
 
-        function set(r) {
+        function update(r) {
             if (r < 0.0) {
                 r = 0.0
             } else if (r > 1.0) {
                 r = 1.0
             }
             root.setRed(r)
+            set(r)
+        }
+        function set(r) {
             redRect.width = r * redZone.width
             redRect.color = Qt.rgba(r, 0, 0, 1) 
         }
@@ -121,7 +131,7 @@ Item {
             id: redArea
             anchors.fill: parent
             onPositionChanged: {
-                redZone.set(mouse.x / redArea.width)
+                redZone.update(mouse.x / redArea.width)
             }   
         }
     }
@@ -129,17 +139,19 @@ Item {
         id: greenZone
         anchors.top: root.top
         anchors.bottom: root.bottom
-        anchors.left: redZone.right
+        anchors.horizontalCenter: root.horizontalCenter
-        
         width: root.zoneWidth  
 
-        function set(g) {
+        function update(g) {
             if (g < 0.0) {
                 g = 0.0
             } else if (g > 1.0) {
                 g = 1.0
             }
             root.setGreen(g)
+            set(g)
+        }
+        function set(g) {
             greenRect.width = g * greenZone.width
             greenRect.color = Qt.rgba(0, g, 0, 1) 
         }
@@ -156,7 +168,7 @@ Item {
             id: greenArea
             anchors.fill: parent
             onPositionChanged: {
-                greenZone.set(mouse.x / greenArea.width)
+                greenZone.update(mouse.x / greenArea.width)
             }     
         }
     }
@@ -164,18 +176,19 @@ Item {
         id: blueZone
         anchors.top: root.top
         anchors.bottom: root.bottom
-        anchors.right: root.right
+        anchors.right: root.right     
-       // anchors.left: greenZone.right
-        
         width: root.zoneWidth  
 
-        function set(b) {
+        function update(b) {
             if (b < 0.0) {
                 b = 0.0
             } else if (b > 1.0) {
                 b = 1.0
             }
             root.setBlue(b)
+            set(b)
+        }
+        function set(b) {
             blueRect.width = b * blueZone.width
             blueRect.color = Qt.rgba(0, 0, b, 1) 
         }
@@ -192,7 +205,7 @@ Item {
             id: blueArea
             anchors.fill: parent
             onPositionChanged: {
-                blueZone.set(mouse.x / blueArea.width)
+                blueZone.update(mouse.x / blueArea.width)
             }
         }
     }    

scripts/developer/utilities/lib/plotperf/qmldir

@@ -1,2 +1,2 @@
 PlotPerf 1.0 PlotPerf.qml
-XColor 1.0 XColor.qml
+Color 1.0 Color.qml

scripts/developer/utilities/render/configSlider/ConfigSlider.qml

@@ -30,6 +30,8 @@ Item {
     property alias min: sliderControl.minimumValue
     property alias max: sliderControl.maximumValue
 
+    signal valueChanged(real value)
+
     Component.onCompleted: {
         // Binding favors qml value, so set it first
         sliderControl.value = root.config[root.property];
@@ -69,5 +71,7 @@ Item {
         anchors.rightMargin: 0
         anchors.top: root.top
         anchors.topMargin: 0
+
+        onValueChanged: { root.valueChanged(value) }
     }
 }

scripts/developer/utilities/render/highlight/HighlightStyle.qml

@@ -0,0 +1,105 @@
+//
+//  highlightStyle.qml
+//
+//  Created by Sam Gateau 12/4/2017
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
+//
+import QtQuick 2.7
+import QtQuick.Controls 1.4
+import QtQuick.Layouts 1.3
+import "../configSlider"
+import "../../lib/plotperf"
+import "qrc:///qml/styles-uit"
+import "qrc:///qml/controls-uit" as HifiControls
+
+Item {
+    id: root
+    property var highlightStyle
+    height: 48
+
+    anchors.margins: 0
+
+    signal newStyle()
+
+    function getStyle() {
+        return highlightStyle;
+    }
+
+    Component.onCompleted: {
+    }
+
+    Column {
+        spacing: 5
+        anchors.left: root.left
+        anchors.right: root.right       
+        anchors.margins: 0  
+
+
+        
+        ConfigSlider {
+            label: "Outline Width"
+            integral: false
+            config: root.highlightStyle
+            property: "outlineWidth"
+            max: 10
+            min: 0
+
+            anchors.left: parent.left
+            anchors.right: parent.right 
+
+            onValueChanged: { root.highlightStyle["outlineWidth"] = value; newStyle() }
+        }
+        HifiControls.CheckBox {
+            id: isOutlineSmooth
+            text: "Smooth Outline"
+            checked: root.highlightStyle["isOutlineSmooth"]
+            onCheckedChanged: {
+                root.highlightStyle["isOutlineSmooth"] = checked;
+                newStyle();
+            }
+        }
+        
+        Repeater {
+            model: [
+                "Outline Unoccluded:outlineUnoccludedColor:outlineUnoccludedIntensity",
+                "Outline Occluded:outlineOccludedColor:outlineOccludedIntensity",
+                "Fill Unoccluded:fillUnoccludedColor:fillUnoccludedIntensity",
+                "Fill Occluded:fillOccludedColor:fillOccludedIntensity"]
+            Column {
+                    anchors.left: parent.left
+                    anchors.right: parent.right 
+                    anchors.margins: 0  
+           
+            Color {
+                height: 20
+                anchors.right: parent.right       
+                width: root.width / 2
+                _color: Qt.rgba(root.highlightStyle[modelData.split(":")[1]].red / 255, root.highlightStyle[modelData.split(":")[1]].green / 255, root.highlightStyle[modelData.split(":")[1]].blue / 255, 1.0)
+                onNewColor: {
+                    root.highlightStyle[modelData.split(":")[1]] = getXColor()
+                    newStyle()
+                }
+            }
+            
+            ConfigSlider {
+                label: qsTr(modelData.split(":")[0])
+                integral: false
+                config: root.highlightStyle
+                property: modelData.split(":")[2]
+                max: 1.0
+                min: 0.0
+
+                anchors.left: parent.left
+                anchors.right: parent.right 
+
+                onValueChanged: { root.highlightStyle[modelData.split(":")[2]] = value; newStyle() }
+            }
+
+            }
+        }
+
+    }
+}

scripts/developer/utilities/render/highlight/qmldir

@@ -0,0 +1 @@
+HighlightStyle 1.0 HighlightStyle.qml

scripts/developer/utilities/render/highlight2.qml

@@ -16,157 +16,111 @@ import "qrc:///qml/styles-uit"
 import "qrc:///qml/controls-uit" as HifiControls
 import  "configSlider"
 import  "../lib/plotperf"
+import  "highlight"
 
-Rectangle {
+Item {
     id: root
     HifiConstants { id: hifi;}
-    color: hifi.colors.baseGray;
+    anchors.margins: 0
-    anchors.margins: hifi.dimensions.contentMargin.x
+    property var listName: "contextOverlayHighlightList"
+    
+    property var styleList: Selection.getHighlightStyles()
 
-   
     signal sendToScript(var message);
 
+    Component.onCompleted: {
+    }
+
+  
     Column {
         id: col
-        spacing: 10
+        spacing: 5
-        anchors.left: parent.left
+        anchors.left: root.left
-        anchors.right: parent.right       
+        anchors.right: root.right       
         anchors.margins: hifi.dimensions.contentMargin.x  
 
-        Separator {}
+        Row {
-        Row  {
+            id: controlbar
+            spacing: 10
+            anchors.left: parent.left
+            anchors.right: parent.right 
             height: 24
+
+            HifiControls.Button {
+                id: debug
+                text: "Refresh"
+                height: 24
+                width: 128
+                onClicked: {
+                    print("list of highlight styles")
+                    root.styleList = Selection.getHighlightStyles()
+
+                    print(root.styleList)
+                    styleSelectorLoader.sourceComponent = undefined;
+                    styleSelectorLoader.sourceComponent = selectorWidget;
+                }
+            }
+
+            Loader {
+                id: styleSelectorLoader
+                sourceComponent: selectorWidget
+                width: 350
+                anchors.right: parent.right    
+            } 
+            Component {
+                id: selectorWidget
+                HifiControls.ComboBox {
+                    id: box
+                    width: 350
+                    z: 999
+                    editable: true
+                    colorScheme: hifi.colorSchemes.dark
+                    model: root.styleList
+                    label: ""
+
+                    Timer {
+                        id: postpone
+                        interval: 100; running: false; repeat: false
+                        onTriggered: { styleWidgetLoader.sourceComponent = styleWidget }
+                    }
+                    onCurrentIndexChanged: {
+                        root.listName = model[currentIndex];
+                    // sendToScript("highlight "+currentIndex)
+                        // This is a hack to be sure the widgets below properly reflect the change of category: delete the Component
+                        // by setting the loader source to Null and then recreate it 100ms later
+                        styleWidgetLoader.sourceComponent = undefined;
+                        postpone.interval = 100
+                        postpone.start()
+                    }
+                }
+
+
+            }
+        }
+
+        Separator {}
+        Loader {
+            id: styleWidgetLoader
+            sourceComponent: styleWidget
+            anchors.left: parent.left
+            anchors.right: parent.right    
+        }      
+    }
+
+    Component {
+        id: styleWidget
+
+        HighlightStyle {
+            id: highlightStyle
             anchors.left: parent.left
             anchors.right: parent.right       
-            HifiControls.Label {
+            highlightStyle: Selection.getListHighlightStyle(root.listName)
-                    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 {}
 
-/*
+            onNewStyle: {
-        HifiControls.ComboBox {
+                var style = getStyle()
-            id: box
+              //  print("new style " + JSON.stringify(style) )
-            width: 350
+                Selection.enableListHighlight(root.listName, style)
-            z: 999
-            editable: true
-            colorScheme: hifi.colorSchemes.dark
-            model: [
-                "contextOverlayHighlightList", 
-                "highlightList1", 
-                "highlightList2", 
-                "highlightList3", 
-                "highlightList4"]
-            label: ""
-
-            Timer {
-                id: postpone
-                interval: 100; running: false; repeat: false
-                onTriggered: { paramWidgetLoader.sourceComponent = paramWidgets }
-            }
-            onCurrentIndexChanged: {
-                root.highlightConfig["selectionName"] = model[currentIndex];
-                sendToScript("highlight "+currentIndex)
-                // This is a hack to be sure the widgets below properly reflect the change of category: delete the Component
-                // by setting the loader source to Null and then recreate it 100ms later
-                paramWidgetLoader.sourceComponent = undefined;
-                postpone.interval = 100
-                postpone.start()
             }
         }
-
-        Loader {
-            id: paramWidgetLoader
-            sourceComponent: paramWidgets
-            width: 350
-        }
-
-        Component {
-            id: paramWidgets
-
-            Column {
-                spacing: 10
-                anchors.margins: hifi.dimensions.contentMargin.x  
-
-                HifiControls.Label {
-                    text: "Outline"       
-                }
-                Column {
-                    spacing: 10
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    HifiControls.CheckBox {
-                        text: "Smooth"
-                        checked: root.highlightConfig["isOutlineSmooth"]
-                        onCheckedChanged: {
-                            root.highlightConfig["isOutlineSmooth"] = checked;
-                        }
-                    }
-                    Repeater {
-                        model: ["Width:outlineWidth:5.0:0.0",
-                                "Intensity:outlineIntensity:1.0:0.0"
-                                        ]
-                        ConfigSlider {
-                                label: qsTr(modelData.split(":")[0])
-                                integral: false
-                                config: root.highlightConfig
-                                property: modelData.split(":")[1]
-                                max: modelData.split(":")[2]
-                                min: modelData.split(":")[3]
-                        }
-                    }
-                }
-
-                Separator {}
-                HifiControls.Label {
-                    text: "Color"       
-                }
-                Repeater {
-                    model: ["Red:colorR:1.0:0.0",
-                            "Green:colorG:1.0:0.0",
-                            "Blue:colorB:1.0:0.0"
-                                    ]
-                    ConfigSlider {
-                            label: qsTr(modelData.split(":")[0])
-                            integral: false
-                            config: root.highlightConfig
-                            property: modelData.split(":")[1]
-                            max: modelData.split(":")[2]
-                            min: modelData.split(":")[3]
-                    }
-                }
-
-                Separator {}
-                HifiControls.Label {
-                    text: "Fill Opacity"       
-                }
-                Repeater {
-                    model: ["Unoccluded:unoccludedFillOpacity:1.0:0.0",
-                            "Occluded:occludedFillOpacity:1.0:0.0"
-                                    ]
-                    ConfigSlider {
-                            label: qsTr(modelData.split(":")[0])
-                            integral: false
-                            config: root.highlightConfig
-                            property: modelData.split(":")[1]
-                            max: modelData.split(":")[2]
-                            min: modelData.split(":")[3]
-                    }
-                }
-            }
-        }
-        */
     }
 }