From 006c449fa20b566a6a566d7a5973445341bdb718 Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Fri, 1 Oct 2021 00:57:37 +0200 Subject: [PATCH] Improve ev charger view and minor fixes in similar views --- nymea-app/ui/components/BlurredLabel.qml | 1 + nymea-app/ui/components/CircleBackground.qml | 1 + nymea-app/ui/components/Dial.qml | 17 ++-- .../ui/devicepages/EvChargerThingPage.qml | 98 +++++++++++++++---- .../ui/devicepages/GenericDevicePage.qml | 10 ++ .../ui/devicepages/SmartMeterDevicePage.qml | 10 +- .../ui/devicepages/VentilationDevicePage.qml | 2 + 7 files changed, 113 insertions(+), 26 deletions(-) diff --git a/nymea-app/ui/components/BlurredLabel.qml b/nymea-app/ui/components/BlurredLabel.qml index 1bda1a5c..e80b1af8 100644 --- a/nymea-app/ui/components/BlurredLabel.qml +++ b/nymea-app/ui/components/BlurredLabel.qml @@ -9,6 +9,7 @@ Item { implicitHeight: label.implicitHeight + Style.margins * 2 property alias text: label.text + property alias font: label.font property alias wrapMode: label.wrapMode property alias horizontalAlignment: label.horizontalAlignment property alias textFormat: label.textFormat diff --git a/nymea-app/ui/components/CircleBackground.qml b/nymea-app/ui/components/CircleBackground.qml index 8a92e217..b5a467f1 100644 --- a/nymea-app/ui/components/CircleBackground.qml +++ b/nymea-app/ui/components/CircleBackground.qml @@ -42,6 +42,7 @@ Item { property alias iconSource: icon.name property color onColor: Style.accentColor property bool on: false + property alias showOnGradient: opacityMask.visible readonly property Item contentItem: background diff --git a/nymea-app/ui/components/Dial.qml b/nymea-app/ui/components/Dial.qml index b8c03fff..897a57f2 100644 --- a/nymea-app/ui/components/Dial.qml +++ b/nymea-app/ui/components/Dial.qml @@ -42,6 +42,7 @@ Item { property StateType stateType: thing ? thing.thingClass.stateTypes.findByName(stateName) : null property color color: Style.accentColor + property bool on: true property int precision: 1 readonly property State progressState: thing ? thing.states.getState(stateType.id) : null @@ -49,8 +50,8 @@ Item { property int startAngle: 135 property int maxAngle: 270 - readonly property int steps: canvas.roundToPrecision(root.stateType.maxValue - root.stateType.minValue) / root.precision + 1 - readonly property double stepSize: (root.stateType.maxValue - root.stateType.minValue) / steps + readonly property int steps: canvas.roundToPrecision(root.progressState.maxValue - root.progressState.minValue) / root.precision + 1 + readonly property double stepSize: (root.progressState.maxValue - root.progressState.minValue) / steps readonly property double anglePerStep: maxAngle / steps @@ -81,6 +82,10 @@ Item { width: Math.min(root.width, root.height) height: width + property color effectColor: root.on ? root.color : Style.iconColor + Behavior on effectColor { ColorAnimation { duration: Style.animationDuration } } + onEffectColorChanged: requestPaint() + function roundToPrecision(value) { var tmp = Math.round(value / root.precision) * root.precision; return tmp; @@ -96,7 +101,7 @@ Item { var currentValue = actionQueue.pendingValue || root.progressState.value var currentStep; if (root.progressState) { - currentStep = roundToPrecision(currentValue - root.stateType.minValue) / root.precision + currentStep = roundToPrecision(currentValue - root.progressState.minValue) / root.precision } print("* current step", currentStep, root.steps, currentValue) @@ -106,8 +111,8 @@ Item { var innerRadius = canvas.width * 0.4 var outerRadius = canvas.width * 0.5 - if (step === currentStep) { - ctx.strokeStyle = root.color + if (step <= currentStep) { + ctx.strokeStyle = canvas.effectColor innerRadius = canvas.width * 0.38 ctx.lineWidth = 4; } else { @@ -177,7 +182,7 @@ Item { if (Math.abs(valueDiff) > 0) { var currentValue = actionQueue.pendingValue || root.progressState.value var newValue = currentValue + valueDiff - newValue = Math.min(root.stateType.maxValue, Math.max(root.stateType.minValue, newValue)) + newValue = Math.min(root.stateType.maxValue, Math.max(root.progressState.minValue, newValue)) if (currentValue !== newValue) { actionQueue.sendValue(newValue) } diff --git a/nymea-app/ui/devicepages/EvChargerThingPage.qml b/nymea-app/ui/devicepages/EvChargerThingPage.qml index 556763bc..3a931fbb 100644 --- a/nymea-app/ui/devicepages/EvChargerThingPage.qml +++ b/nymea-app/ui/devicepages/EvChargerThingPage.qml @@ -41,6 +41,7 @@ ThingPageBase { readonly property State powerState: thing.stateByName("power") readonly property State maxChargingCurrentState: thing.stateByName("maxChargingCurrent") readonly property StateType maxChargingCurrentStateType: thing.thingClass.stateTypes.findByName("maxChargingCurrent") + readonly property State currentPowerState: thing.stateByName("currentPower") ActionQueue { id: actionQueue @@ -48,27 +49,88 @@ ThingPageBase { stateName: "power" } - CircleBackground { - id: background + GridLayout { anchors.fill: parent - anchors.margins: Style.hugeMargins - iconSource: "ev-charger" - onColor: app.interfaceToColor("evcharger") - on: (actionQueue.pendingValue || powerState.value) === true - onClicked: { - PlatformHelper.vibrate(PlatformHelper.HapticsFeedbackSelection) - actionQueue.sendValue(!root.powerState.value) + columns: app.landscape ? 2 : 1 + + CircleBackground { + id: background + Layout.fillWidth: true + Layout.fillHeight: true + Layout.margins: Style.hugeMargins + // iconSource: "ev-charger" + onColor: app.interfaceToColor("evcharger") + // on: (actionQueue.pendingValue || powerState.value) === true + onClicked: { + PlatformHelper.vibrate(PlatformHelper.HapticsFeedbackSelection) + actionQueue.sendValue(!root.powerState.value) + } + + Column { + anchors.centerIn: parent + width: background.contentItem.width * .6 + spacing: Style.margins + Label { + text: qsTr("Maximum charging current") + font: Style.smallFont + width: parent.width + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + } + + Label { + font: Style.largeFont + text: "%1 %2".arg(root.maxChargingCurrentState.value).arg(Types.toUiUnit(root.maxChargingCurrentStateType.unit)) + width: parent.width + horizontalAlignment: Text.AlignHCenter + } + } + + Dial { + anchors.centerIn: parent + height: background.contentItem.height + width: background.contentItem.width + visible: root.maxChargingCurrentState + + thing: root.thing + stateName: "maxChargingCurrent" + color: app.interfaceToColor("evcharger") + on: (actionQueue.pendingValue || powerState.value) === true + } } - } - Dial { - anchors.centerIn: parent - height: background.contentItem.height - width: background.contentItem.width - visible: root.maxChargingCurrentState + ColumnLayout { + Layout.fillHeight: true + Layout.fillWidth: true + Layout.margins: Style.hugeMargins + spacing: Style.bigMargins + Label { + Layout.fillWidth: true + property double currentPower: root.currentPowerState.value / (root.currentPowerState.value > 1000 ? 1000 : 1) + property string unit: root.currentPowerState.value > 1000 ? "kW" : "W" + font: Style.smallFont + text: qsTr("Currently charging at %1.") + .arg('' + + (currentPower.toFixed(1)) + + '' + ' ' + unit) + textFormat: Text.RichText + horizontalAlignment: Text.AlignHCenter + wrapMode: Text.WordWrap + } + + ProgressButton { + Layout.alignment: Qt.AlignCenter + imageSource: "system-shutdown" + mode: "normal" + size: Style.bigIconSize + busy: root.currentPowerState.value > 0 + color: (actionQueue.pendingValue || powerState.value) === true ? app.interfaceToColor("evcharger") : Style.iconColor + onClicked: { + PlatformHelper.vibrate(PlatformHelper.HapticsFeedbackSelection) + actionQueue.sendValue(!root.powerState.value) + } + } + } - thing: root.thing - stateName: "maxChargingCurrent" - color: app.interfaceToColor("evcharger") } } diff --git a/nymea-app/ui/devicepages/GenericDevicePage.qml b/nymea-app/ui/devicepages/GenericDevicePage.qml index c946cd4e..64249d5c 100644 --- a/nymea-app/ui/devicepages/GenericDevicePage.qml +++ b/nymea-app/ui/devicepages/GenericDevicePage.qml @@ -268,6 +268,16 @@ ThingPageBase { value: stateDelegate.thingState.value when: !stateDelegate.valueCacheDirty && stateDelegate.pendingActionId === -1 } + Binding { + target: stateDelegateLoader.item + property: "from" + value: stateDelegate.thingState.minValue + } + Binding { + target: stateDelegateLoader.item + property: "to" + value: stateDelegate.thingState.maxValue + } Binding { target: stateDelegateLoader.item.hasOwnProperty("unit") ? stateDelegateLoader.item : null property: "unit" diff --git a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml index cd492682..24d4f8a7 100644 --- a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml +++ b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml @@ -160,9 +160,13 @@ ThingPageBase { } } if (root.isProducer) { - return qsTr("Production") + return qsTr("Producing") } - return root.currentPower < 0 ? qsTr("Return") : qsTr("Consumption") + if (root.isConsumer) { + return qsTr("Consuming") + } + + return root.currentPower < 0 ? qsTr("Returning") : qsTr("Obtaining") } font: Style.smallFont } @@ -223,6 +227,7 @@ ThingPageBase { horizontalAlignment: Text.AlignHCenter visible: isEnergyMeter || isConsumer blurred: periodConsumptionModel.busy + font: Style.smallFont text: isConsumer ? qsTr("A total of %1 kWh has been consumed in the last 24 hours.").arg('' + (totalPeriodConsumption).toFixed(1) + '') : qsTr("A total of %1 kWh has been obtained in the last 24 hours.").arg('' + (totalPeriodConsumption).toFixed(1) + '') @@ -247,6 +252,7 @@ ThingPageBase { wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter blurred: periodProductionModel.busy + font: Style.smallFont text: isProducer ? qsTr("A total of %1 kWh has been produced in the last 24 hours.").arg('' + (totalPeriodProduction).toFixed(1) + '') : qsTr("A total of %1 kWh has been returned in the last 24 hours.").arg('' + (totalPeriodProduction).toFixed(1) + '') diff --git a/nymea-app/ui/devicepages/VentilationDevicePage.qml b/nymea-app/ui/devicepages/VentilationDevicePage.qml index e4101304..e4d71351 100644 --- a/nymea-app/ui/devicepages/VentilationDevicePage.qml +++ b/nymea-app/ui/devicepages/VentilationDevicePage.qml @@ -54,6 +54,7 @@ ThingPageBase { anchors.margins: Style.hugeMargins iconSource: "ventilation" onColor: app.interfaceToColor("ventilation") + showOnGradient: root.flowRateState == null on: (actionQueue.pendingValue || powerState.value) === true onClicked: { PlatformHelper.vibrate(PlatformHelper.HapticsFeedbackSelection) @@ -77,6 +78,7 @@ ThingPageBase { height: background.contentItem.height width: background.contentItem.width visible: root.flowRateState + on: (actionQueue.pendingValue || powerState.value) === true thing: root.thing stateName: "flowRate"