Improve lights control page

nymea-app/ui/components/BrightnessSlider.qml

@@ -35,8 +35,8 @@ import "../utils"
 
 Item {
     id: root
-    implicitWidth: orientation == Qt.Horizontal ? 300 : Style.hugeIconSize
+    implicitWidth: orientation == Qt.Horizontal ? 300 : 12
-    implicitHeight: orientation == Qt.Horizontal ? Style.hugeIconSize : 300
+    implicitHeight: orientation == Qt.Horizontal ? 12 : 300
 
     property Thing thing: null
 
@@ -84,14 +84,15 @@ Item {
         y: root.orientation === Qt.Vertical ?
                root.height - dragHandle.height - ((actionQueue.pendingValue || root.value) * (root.height - dragHandle.height) / 100)
              : 0
-        height: root.orientation === Qt.Horizontal ? parent.height : 8
+        height: 14
-        width: root.orientation === Qt.Horizontal ? 8 : parent.width
+        width: 14
-        radius: 4
+        radius: 7
         color: Style.foregroundColor
     }
 
     MouseArea {
         anchors.fill: parent
+        anchors.margins: -Style.smallMargins
         onPositionChanged: {
             var minCt = root.colorTemperatureStateType.minValue;
             var maxCt = root.colorTemperatureStateType.maxValue

nymea-app/ui/components/ColorTemperaturePicker.qml

@@ -23,16 +23,10 @@ Item {
     }
 
     Rectangle {
-        id: clipRect
+        width: Math.min(parent.width, parent.height)
-        anchors.fill: parent
+        anchors.centerIn: parent
-        radius: Style.cornerRadius
+        height: width
-    }
+        radius: width / 2
-
-    LinearGradient {
-        anchors.fill: parent
-        start: root.orientation == Qt.Horizontal ? Qt.point(0, 0) : Qt.point(0, height)
-        end: root.orientation == Qt.Horizontal ? Qt.point(width, 0) : Qt.point(0, 0)
-        source: clipRect
         gradient: Gradient {
             GradientStop { position: 0.0; color: "#dfffff" }
             GradientStop { position: 0.5; color: "#ffffea" }
@@ -40,30 +34,48 @@ Item {
         }
     }
 
-    Rectangle {
+//    Rectangle {
-        id: dragHandle
+//        id: clipRect
-        property double valuePercentage: ((actionQueue.pendingValue || root.value) - root.colorTemperatureStateType.minValue) / (root.colorTemperatureStateType.maxValue - root.colorTemperatureStateType.minValue)
+//        anchors.fill: parent
-        x: orientation == Qt.Horizontal ? valuePercentage * (root.width - dragHandle.width) : 0
+//        radius: Style.cornerRadius
-        y: root.orientation === Qt.Vertical ? root.height - dragHandle.height - (valuePercentage * (root.height - dragHandle.height)) : 0
+//    }
-        height: root.orientation == Qt.Horizontal ? parent.height : 8
-        width: root.orientation == Qt.Horizontal ? 8 : parent.width
-        radius: 4
-        color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.5))
-    }
 
-    MouseArea {
+//    LinearGradient {
-        anchors.fill: parent
+//        anchors.fill: parent
-        onPositionChanged: {
+//        start: root.orientation == Qt.Horizontal ? Qt.point(0, 0) : Qt.point(0, height)
-            var minCt = root.colorTemperatureStateType.minValue;
+//        end: root.orientation == Qt.Horizontal ? Qt.point(width, 0) : Qt.point(0, 0)
-            var maxCt = root.colorTemperatureStateType.maxValue
+//        source: clipRect
-            var ct;
+//        gradient: Gradient {
-            if (root.orientation == Qt.Horizontal) {
+//            GradientStop { position: 0.0; color: "#dfffff" }
-                ct = Math.min(maxCt, Math.max(minCt, (mouseX * (maxCt - minCt) / (width - dragHandle.width)) + minCt))
+//            GradientStop { position: 0.5; color: "#ffffea" }
-            } else {
+//            GradientStop { position: 1.0; color: "#ffd649" }
-                ct = Math.min(maxCt, Math.max(minCt, ((height - mouseY) * (maxCt - minCt) / (height - dragHandle.height)) + minCt))
+//        }
-            }
+//    }
-            actionQueue.sendValue(ct);
+
-        }
+//    Rectangle {
-    }
+//        id: dragHandle
+//        property double valuePercentage: ((actionQueue.pendingValue || root.value) - root.colorTemperatureStateType.minValue) / (root.colorTemperatureStateType.maxValue - root.colorTemperatureStateType.minValue)
+//        x: orientation == Qt.Horizontal ? valuePercentage * (root.width - dragHandle.width) : 0
+//        y: root.orientation === Qt.Vertical ? root.height - dragHandle.height - (valuePercentage * (root.height - dragHandle.height)) : 0
+//        height: root.orientation == Qt.Horizontal ? parent.height : 8
+//        width: root.orientation == Qt.Horizontal ? 8 : parent.width
+//        radius: 4
+//        color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.5))
+//    }
+
+//    MouseArea {
+//        anchors.fill: parent
+//        onPositionChanged: {
+//            var minCt = root.colorTemperatureStateType.minValue;
+//            var maxCt = root.colorTemperatureStateType.maxValue
+//            var ct;
+//            if (root.orientation == Qt.Horizontal) {
+//                ct = Math.min(maxCt, Math.max(minCt, (mouseX * (maxCt - minCt) / (width - dragHandle.width)) + minCt))
+//            } else {
+//                ct = Math.min(maxCt, Math.max(minCt, ((height - mouseY) * (maxCt - minCt) / (height - dragHandle.height)) + minCt))
+//            }
+//            actionQueue.sendValue(ct);
+//        }
+//    }
 }
 

nymea-app/ui/devicepages/LightDevicePage.qml

@@ -30,7 +30,7 @@
 
 import QtQuick 2.9
 import QtQuick.Controls 2.1
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.3
 import QtQuick.Controls.Material 2.1
 import Nymea 1.0
 import QtGraphicalEffects 1.0
@@ -57,10 +57,10 @@ ThingPageBase {
 
     GridLayout {
         anchors.fill: parent
-        anchors.margins: app.margins
+        anchors.margins: Style.bigMargins
         columns: app.landscape ? root.statesCount : 1
-        rowSpacing: app.margins
+        rowSpacing: Style.bigMargins
-        columnSpacing: app.margins
+        columnSpacing: Style.bigMargins
         Layout.alignment: Qt.AlignCenter
 
         GridLayout {
@@ -79,72 +79,88 @@ ThingPageBase {
                     ListElement { name: "reading"; ct: "57"; bri: 100; color: "#f4de00" }
                     ListElement { name: "relax"; ct: "95" ; bri: 55; color: "#ffaf2a"}
                 }
-                delegate: Item {
+                delegate: ProgressButton {
-                    Layout.preferredWidth: Style.hugeIconSize
                     Layout.preferredHeight: Style.hugeIconSize
-                    Layout.fillWidth: true
+                    Layout.preferredWidth: Style.hugeIconSize
-                    Layout.fillHeight: app.landscape
+                    imageSource: "../images/lighting/" + model.name + ".svg"
-                    ItemDelegate {
+                    longpressEnabled: false
-                        height: Style.hugeIconSize
+//                    mode: "normal"
-                        width: height
+//                    backgroundColor: model.color
-                        anchors.centerIn: parent
-
-                        leftPadding: 0
-                        rightPadding: 0
-                        topPadding: 0
-                        bottomPadding: 0
-
-                        contentItem: Rectangle {
-                            color: model.color
-                            radius: Style.cornerRadius
-
-                            ColorIcon {
-                                anchors.fill: parent
-                                name: "../images/lighting/" + model.name + ".svg"
-                                color: "white"
-                            }
-                        }
 
 
-                        onClicked: {
+                    onClicked: {
-                            // Translate from % to absolute value in min/max
+                        // Translate from % to absolute value in min/max
-                            // % : 100 = abs : (max - min)
+                        // % : 100 = abs : (max - min)
-                            print("min,max", root.ctStateType, root.ctStateType.minValue, root.ctStateType.maxValue)
+                        print("min,max", root.ctStateType, root.ctStateType.minValue, root.ctStateType.maxValue)
-                            var absoluteCtValue = (model.ct * (root.ctStateType.maxValue - root.ctStateType.minValue) / 100) + root.ctStateType.minValue
+                        var absoluteCtValue = (model.ct * (root.ctStateType.maxValue - root.ctStateType.minValue) / 100) + root.ctStateType.minValue
-                            var params = [];
+                        var params = [];
-                            var param1 = {};
+                        var param1 = {};
-                            param1["paramName"] = root.ctActionType.paramTypes.get(0).name;
+                        param1["paramName"] = root.ctActionType.paramTypes.get(0).name;
-                            param1["value"] = absoluteCtValue;
+                        param1["value"] = absoluteCtValue;
-                            params.push(param1)
+                        params.push(param1)
-                            root.thing.executeAction(root.ctActionType.name, params)
+                        root.thing.executeAction(root.ctActionType.name, params)
-                            params = [];
+                        params = [];
-                            param1 = {};
+                        param1 = {};
-                            param1["paramName"] = root.brightnessActionType.paramTypes.get(0).name;
+                        param1["paramName"] = root.brightnessActionType.paramTypes.get(0).name;
-                            param1["value"] = model.bri;
+                        param1["value"] = model.bri;
-                            params.push(param1)
+                        params.push(param1)
-                            root.thing.executeAction(root.brightnessActionType.name, params)
+                        root.thing.executeAction(root.brightnessActionType.name, params)
-                        }
                     }
                 }
             }
         }
 
-        ColorPicker {
+        StackLayout {
             Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.maximumHeight: width
-            thing: root.thing
+            currentIndex: selectionTabs.currentIndex
-            visible: root.thing.thingClass.stateTypes.findByName("color") !== null
+
+            Repeater {
+                model: modeModel
+                delegate: Loader {
+                    sourceComponent: model.comp
+                }
+            }
+
+            Component {
+                id: colorPickerComponent
+                ColorPicker {
+                    anchors.fill: parent
+                    thing: root.thing
+                }
+            }
+
+            Component {
+                id: colorTemperatureComponent
+                ColorTemperaturePicker {
+                    anchors.fill: parent
+                    thing: root.thing
+                    orientation: app.landscape ? Qt.Vertical : Qt.Horizontal
+                }
+            }
         }
 
-        ColorTemperaturePicker {
+        ListModel {
-            Layout.fillWidth: !app.landscape
+            id: modeModel
-            Layout.fillHeight: app.landscape
+            Component.onCompleted: {
-            thing: root.thing
+                if (root.thing.thingClass.stateTypes.findByName("color") !== null) {
-            orientation: app.landscape ? Qt.Vertical : Qt.Horizontal
+                    append({modelData: qsTr("Color"), comp: colorPickerComponent})
-            visible: root.thing.thingClass.stateTypes.findByName("colorTemperature") !== null
+                }
+                if (root.thing.thingClass.stateTypes.findByName("colorTemperature") !== null) {
+                    append({modelData: qsTr("Temperature"), comp: colorTemperatureComponent})
+                }
+            }
         }
 
+        SelectionTabs {
+            id: selectionTabs
+            Layout.fillWidth: true
+            model: modeModel
+            visible: modeModel.count > 1
+        }
+
+
         GridLayout {
             id: basicItems
             Layout.fillWidth: !app.landscape
@@ -154,25 +170,14 @@ ThingPageBase {
             rowSpacing: app.margins
             columns: (app.landscape && (root.colorState !== null && root.ctState !== null))
                      || (!app.landscape && (root.colorState === null && root.ctState === null)) ? 1 : 2
-            Rectangle {
+
-                Layout.preferredWidth: Style.hugeIconSize
+            ProgressButton {
-                Layout.preferredHeight: width
+                imageSource: root.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg"
-                radius: Style.cornerRadius
+                mode: "normal"
-                color: root.colorState ? root.colorState.value : "red"
+                size: Style.bigIconSize
-//                color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1))
+                longpressEnabled: false
-                ColorIcon {
+                onClicked: {
-                    anchors.centerIn: parent
+                    root.thing.executeAction("power", [{paramName: "power", value: !root.powerState.value}])
-                    height: Style.bigIconSize
-                    width: height
-                    name: root.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg"
-                    color: root.colorState ?
-                               NymeaUtils.isDark(root.colorState.value) ? "white" : "black" : "white"
-                }
-                MouseArea {
-                    anchors.fill: parent
-                    onClicked: {
-                        root.thing.executeAction("power", [{paramName: "power", value: !root.powerState.value}])
-                    }
                 }
             }