Merge pull request #13286 from ElderOrb/spinbox-bugs

Introduce test 'controls gallery' application for controls testing & few spinbox fixes

interface/resources/qml/controls-uit/SpinBox.qml

@@ -17,6 +17,10 @@ import "../controls-uit" as HifiControls
 SpinBox {
     id: spinBox
 
+    HifiConstants {
+        id: hifi
+    }
+
     property int colorScheme: hifi.colorSchemes.light
     readonly property bool isLightColorScheme: colorScheme === hifi.colorSchemes.light
     property string label: ""
@@ -53,7 +57,8 @@ SpinBox {
     onValueChanged: realValue = value/factor
 
     stepSize: realStepSize*factor
-    value: realValue*factor
+    value: Math.round(realValue*factor)
+
     to : realTo*factor
     from : realFrom*factor
 
@@ -110,7 +115,7 @@ SpinBox {
             anchors.centerIn: parent
             text: hifi.glyphs.caratUp
             size: hifi.dimensions.spinnerSize
-            color: spinBox.down.pressed || spinBox.up.hovered ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
+            color: spinBox.up.pressed || spinBox.up.hovered ? (isLightColorScheme ? hifi.colors.black : hifi.colors.white) : hifi.colors.gray
         }
     }
 
@@ -149,26 +154,14 @@ SpinBox {
         visible: spinBox.labelInside != ""
     }
 
-//    MouseArea {
+    MouseArea {
-//        anchors.fill: parent
+        anchors.fill: parent
-//        propagateComposedEvents: true
+        acceptedButtons: Qt.NoButton
-//        onWheel: {
+        onWheel: {
-//            if(spinBox.activeFocus)
+            if (wheel.angleDelta.y > 0)
-//                wheel.accepted = false
+                value += stepSize
-//            else
+            else
-//                wheel.accepted = true
+                value -= stepSize
-//        }
+        }
-//        onPressed: {
+    }
-//            mouse.accepted = false
-//        }
-//        onReleased: {
-//            mouse.accepted = false
-//        }
-//        onClicked: {
-//            mouse.accepted = false
-//        }
-//        onDoubleClicked: {
-//            mouse.accepted = false
-//        }
-//    }
 }

scripts/developer/tests/ControlsGallery.qml

@@ -0,0 +1,103 @@
+import QtQuick 2.10
+import QtQuick.Window 2.10
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import "qrc:////qml//styles-uit" as HifiStylesUit
+import "qrc:////qml//controls-uit" as HifiControlsUit
+
+//uncomment to use from qmlscratch tool
+//import '../../../interface/resources/qml/controls-uit' as HifiControlsUit
+//import '../../../interface/resources/qml/styles-uit'
+
+//uncomment to use with HIFI_USE_SOURCE_TREE_RESOURCES=1
+//import '../../../resources/qml/controls-uit' as HifiControlsUit
+//import '../../../resources/qml/styles-uit'
+
+Item {
+    visible: true
+    width: 640
+    height: 480
+
+    Introspector {
+        id: introspector
+        properties: ['realFrom', 'realTo', 'realValue', 'realStepSize', 'decimals']
+        visible: true
+        y: 50
+        x: 130
+    }
+
+    HifiStylesUit.HifiConstants {
+        id: hifi
+    }
+
+    TabBar {
+        id: bar
+        width: parent.width
+        TabButton {
+            text: "Spinbox"
+        }
+        TabButton {
+            text: "... Other Controls"
+        }
+    }
+
+    StackLayout {
+        id: controlsLayout
+        currentIndex: bar.currentIndex
+        anchors.top: bar.bottom
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 20
+
+        Item {
+            id: spinboxTab
+            anchors.fill: parent
+
+            Column {
+                spacing: 20
+
+                HifiControlsUit.SpinBox {
+                    realValue: 5.0
+                    realFrom: 16.0
+                    realTo: 20.0
+                    decimals: 2
+                    realStepSize: 0.01
+
+                    width: 100
+                    height: 30
+
+                    colorScheme: hifi.colorSchemes.dark
+
+                    onFocusChanged: {
+                        if(focus) {
+                            introspector.object = this
+                        }
+                    }
+                }
+
+                HifiControlsUit.SpinBox {
+                    realValue: 5.0
+                    realFrom: 1.0
+                    realTo: 20.0
+                    decimals: 2
+                    realStepSize: 0.01
+
+                    width: 100
+                    height: 30
+
+                    colorScheme: hifi.colorSchemes.light
+
+                    onFocusChanged: {
+                        if(focus) {
+                            introspector.object = this
+                        }
+                    }
+                }
+            }
+        }
+        Item {
+            id: otherTab
+        }
+    }
+}

scripts/developer/tests/Introspector.qml

@@ -0,0 +1,166 @@
+import QtQuick 2.1;
+import QtQuick.Window 2.1;
+
+MouseArea {
+    id: base;
+    opacity: 0.65;
+    // anchors.fill: parent;
+    width: 400;
+    height: 300;
+
+    drag.target: list;
+    onWheel: { }
+
+    onClicked: { object = null }
+    property var object: null
+    onObjectChanged: {
+        visible = (object != null)
+    }
+
+    property var properties: []
+    onPropertiesChanged: {
+        console.debug('properties: ', JSON.stringify(properties, 4, 0))
+    }
+
+    function getPropertiesList(obj) {
+        var props = [];
+        var propertiesObject = obj;
+        if(properties.length !== 0) {
+            propertiesObject = {};
+            for(var i = 0; i < properties.length; ++i) {
+                propertiesObject[properties[i]] = properties[i];
+            }
+        }
+
+        for(var prop in propertiesObject) {
+
+            var info = {'name' : prop};
+            var value = obj[prop];
+            var typeOfValue = typeof(value);
+
+            if(typeof(value) === 'string') {
+                info['type'] = 'string'
+            } else if(typeof(value) === 'number') {
+                if(Number.isInteger(value))
+                    info['type'] = 'int'
+                else
+                    info['type'] = 'float'
+            } else if(typeof(value) === 'boolean') {
+                info['type'] = 'boolean'
+            } else if(typeof(value) === 'function') {
+                continue;
+            }
+
+            /*
+            if(prop !== 'parent' && prop !== 'data' && prop !== 'children')
+                console.debug('typeof(value): ', typeof(value), JSON.stringify(value, null, 4));
+            */
+
+            info['subName'] = ''
+            props.push(info);
+        }
+
+        return props;
+    }
+
+    Rectangle {
+        color: "lightgray";
+        anchors.fill: list;
+        anchors.margins: -50;
+    }
+    ListView {
+        id: list;
+        x: 50;
+        y: 50;
+        width: 400;
+        height: 300;
+        spacing: 5;
+        model: object !== null ? getPropertiesList(object) : [];
+        header: Text {
+            text: object !== null ? object.toString () : '';
+            font.bold: true;
+            font.pixelSize: 20;
+        }
+        delegate: Row {
+            spacing: 20;
+
+            Column {
+                width: 180;
+
+                Text {
+                    text: (modelData ["subName"] !== "" ? (modelData ["name"] + "." + modelData ["subName"]) : modelData ["name"]);
+                    font.pixelSize: 16;
+                }
+            }
+            Column {
+                width: 200;
+
+                Text {
+                    text: {
+                        return modelData ["type"]
+                    }
+                    font.pixelSize: 10;
+                }
+                TextInput {
+                    id: input;
+                    text: display;
+                    width: parent.width;
+                    font.pixelSize: 16;
+                    font.underline: (text !== display);
+                    Keys.onReturnPressed: { save (); }
+                    Keys.onEnterPressed:  { save (); }
+                    Keys.onEscapePressed: { cancel (); }
+
+                    property string display : "";
+
+                    function save () {
+                        var tmp;
+                        switch (modelData ["type"]) {
+                        case 'boolean':
+                            tmp = (text === "true" || text === "1");
+                            break;
+                        case 'float':
+                            tmp = parseFloat (text);
+                            break;
+                        case 'int':
+                            tmp = parseInt (text);
+                            break;
+                        case 'string':
+                            tmp = text;
+                            break;
+
+                        default:
+                            break;
+                        }
+                        if (modelData ["subName"] !== "") {
+                            object [modelData ["name"]][modelData ["subName"]] = tmp;
+                        }
+                        else {
+                            object [modelData ["name"]] = tmp;
+                        }
+                        text = display;
+                    }
+
+                    function cancel () {
+                        text = display;
+                    }
+
+                    Binding on text    { value: input.display; }
+                    Binding on display {
+                        value: {
+                            var ret = (modelData ["subName"] !== ""
+                                       ? object [modelData ["name"]][modelData ["subName"]]
+                                       : object [modelData ["name"]]);
+                            return ret.toString ();
+                        }
+                    }
+                    Rectangle {
+                        z: -1;
+                        color: "white";
+                        anchors.fill: parent;
+                    }
+                }
+            }
+        }
+    }
+}

scripts/developer/tests/controlsGallery.js

@@ -0,0 +1,23 @@
+(function() { // BEGIN LOCAL_SCOPE
+
+    console.debug('controlsGallery: creating window')
+
+    var qml = Script.resolvePath('ControlsGallery.qml');
+    var qmlWindow = new OverlayWindow({
+                                      title: 'Hifi Controls Gallery',
+                                      source: qml,
+                                      height: 480,
+                                      width: 640,
+                                      visible: true
+                                  });
+
+    console.debug('controlsGallery: creating window... done')
+
+    qmlWindow.closed.connect(function() { Script.stop(); });
+
+    Script.scriptEnding.connect(function() {
+        console.debug('controlsGallery: end of scripting')
+        delete qmlWindow;
+    });
+
+}()); // END LOCAL_SCOPE