Improve ev charger view and minor fixes in similar views

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

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
 

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 int steps: canvas.roundToPrecision(root.progressState.maxValue - root.progressState.minValue) / root.precision + 1
-    readonly property double stepSize: (root.stateType.maxValue - root.stateType.minValue) / steps
+    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) {
+                if (step <= currentStep) {
-                    ctx.strokeStyle = root.color
+                    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)
                 }

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 {
+    GridLayout {
-        id: background
         anchors.fill: parent
-        anchors.margins: Style.hugeMargins
+        columns: app.landscape ? 2 : 1
-        iconSource: "ev-charger"
+
-        onColor: app.interfaceToColor("evcharger")
+        CircleBackground {
-        on: (actionQueue.pendingValue || powerState.value) === true
+            id: background
-        onClicked: {
+            Layout.fillWidth: true
-            PlatformHelper.vibrate(PlatformHelper.HapticsFeedbackSelection)
+            Layout.fillHeight: true
-            actionQueue.sendValue(!root.powerState.value)
+            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 {
+        ColumnLayout {
-        anchors.centerIn: parent
+            Layout.fillHeight: true
-        height: background.contentItem.height
+            Layout.fillWidth: true
-        width: background.contentItem.width
+            Layout.margins: Style.hugeMargins
-        visible: root.maxChargingCurrentState
+            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('<span style="font-size:' + Style.bigFont.pixelSize + 'px">'
+                        + (currentPower.toFixed(1))
+                        + '</span>' + ' ' + 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")
     }
 }

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"

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 <b>consumed</b> in the last 24 hours.").arg('<span style="font-size:' + Style.bigFont.pixelSize + 'px">' + (totalPeriodConsumption).toFixed(1) + '</span>')
                             : qsTr("A total of %1 kWh has been <b>obtained</b> in the last 24 hours.").arg('<span style="font-size:' + Style.bigFont.pixelSize + 'px">' + (totalPeriodConsumption).toFixed(1) + '</span>')
@@ -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 <b>produced</b> in the last 24 hours.").arg('<span style="font-size:' + Style.bigFont.pixelSize + 'px">' + (totalPeriodProduction).toFixed(1) + '</span>')
                             : qsTr("A total of %1 kWh has been <b>returned</b> in the last 24 hours.").arg('<span style="font-size:' + Style.bigFont.pixelSize + 'px">' + (totalPeriodProduction).toFixed(1) + '</span>')

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"