From 2c0075ec6bcf84049647c4676a6d543f216b23bb Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Wed, 8 Sep 2021 14:23:32 +0200 Subject: [PATCH] Improve lights control page --- nymea-app/ui/components/BrightnessSlider.qml | 11 +- .../ui/components/ColorTemperaturePicker.qml | 80 +++++---- nymea-app/ui/devicepages/LightDevicePage.qml | 153 +++++++++--------- 3 files changed, 131 insertions(+), 113 deletions(-) diff --git a/nymea-app/ui/components/BrightnessSlider.qml b/nymea-app/ui/components/BrightnessSlider.qml index edc3d570..5f2d32cb 100644 --- a/nymea-app/ui/components/BrightnessSlider.qml +++ b/nymea-app/ui/components/BrightnessSlider.qml @@ -35,8 +35,8 @@ import "../utils" Item { id: root - implicitWidth: orientation == Qt.Horizontal ? 300 : Style.hugeIconSize - implicitHeight: orientation == Qt.Horizontal ? Style.hugeIconSize : 300 + implicitWidth: orientation == Qt.Horizontal ? 300 : 12 + 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 - width: root.orientation === Qt.Horizontal ? 8 : parent.width - radius: 4 + height: 14 + width: 14 + radius: 7 color: Style.foregroundColor } MouseArea { anchors.fill: parent + anchors.margins: -Style.smallMargins onPositionChanged: { var minCt = root.colorTemperatureStateType.minValue; var maxCt = root.colorTemperatureStateType.maxValue diff --git a/nymea-app/ui/components/ColorTemperaturePicker.qml b/nymea-app/ui/components/ColorTemperaturePicker.qml index 483b49a6..a5dc60cb 100644 --- a/nymea-app/ui/components/ColorTemperaturePicker.qml +++ b/nymea-app/ui/components/ColorTemperaturePicker.qml @@ -23,16 +23,10 @@ Item { } Rectangle { - id: clipRect - anchors.fill: parent - radius: Style.cornerRadius - } - - 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 + width: Math.min(parent.width, parent.height) + anchors.centerIn: parent + height: width + radius: width / 2 gradient: Gradient { GradientStop { position: 0.0; color: "#dfffff" } GradientStop { position: 0.5; color: "#ffffea" } @@ -40,30 +34,48 @@ Item { } } - 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)) - } +// Rectangle { +// id: clipRect +// anchors.fill: parent +// radius: Style.cornerRadius +// } - 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); - } - } +// 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" } +// GradientStop { position: 1.0; color: "#ffd649" } +// } +// } + +// 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); +// } +// } } diff --git a/nymea-app/ui/devicepages/LightDevicePage.qml b/nymea-app/ui/devicepages/LightDevicePage.qml index cbf445a1..4be900b2 100644 --- a/nymea-app/ui/devicepages/LightDevicePage.qml +++ b/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 - columnSpacing: app.margins + rowSpacing: Style.bigMargins + 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 { - Layout.preferredWidth: Style.hugeIconSize + delegate: ProgressButton { Layout.preferredHeight: Style.hugeIconSize - Layout.fillWidth: true - Layout.fillHeight: app.landscape - ItemDelegate { - height: Style.hugeIconSize - width: height - 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" - } - } + Layout.preferredWidth: Style.hugeIconSize + imageSource: "../images/lighting/" + model.name + ".svg" + longpressEnabled: false +// mode: "normal" +// backgroundColor: model.color - onClicked: { - // Translate from % to absolute value in min/max - // % : 100 = abs : (max - min) - 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 params = []; - var param1 = {}; - param1["paramName"] = root.ctActionType.paramTypes.get(0).name; - param1["value"] = absoluteCtValue; - params.push(param1) - root.thing.executeAction(root.ctActionType.name, params) - params = []; - param1 = {}; - param1["paramName"] = root.brightnessActionType.paramTypes.get(0).name; - param1["value"] = model.bri; - params.push(param1) - root.thing.executeAction(root.brightnessActionType.name, params) - } + onClicked: { + // Translate from % to absolute value in min/max + // % : 100 = abs : (max - min) + 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 params = []; + var param1 = {}; + param1["paramName"] = root.ctActionType.paramTypes.get(0).name; + param1["value"] = absoluteCtValue; + params.push(param1) + root.thing.executeAction(root.ctActionType.name, params) + params = []; + param1 = {}; + param1["paramName"] = root.brightnessActionType.paramTypes.get(0).name; + param1["value"] = model.bri; + params.push(param1) + root.thing.executeAction(root.brightnessActionType.name, params) } } } } - ColorPicker { + StackLayout { Layout.fillWidth: true Layout.fillHeight: true Layout.maximumHeight: width - thing: root.thing - visible: root.thing.thingClass.stateTypes.findByName("color") !== null + currentIndex: selectionTabs.currentIndex + + 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 { - Layout.fillWidth: !app.landscape - Layout.fillHeight: app.landscape - thing: root.thing - orientation: app.landscape ? Qt.Vertical : Qt.Horizontal - visible: root.thing.thingClass.stateTypes.findByName("colorTemperature") !== null + ListModel { + id: modeModel + Component.onCompleted: { + if (root.thing.thingClass.stateTypes.findByName("color") !== null) { + append({modelData: qsTr("Color"), comp: colorPickerComponent}) + } + 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 - Layout.preferredHeight: width - radius: Style.cornerRadius - color: root.colorState ? root.colorState.value : "red" -// color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1)) - ColorIcon { - anchors.centerIn: parent - 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}]) - } + + ProgressButton { + imageSource: root.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg" + mode: "normal" + size: Style.bigIconSize + longpressEnabled: false + onClicked: { + root.thing.executeAction("power", [{paramName: "power", value: !root.powerState.value}]) } }