From abe3a26c916a7619f184790ca1f11d1ebe2c1222 Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Fri, 1 Oct 2021 11:57:55 +0200 Subject: [PATCH] Fix layout issues in smart meter views --- .../ui/devicepages/SmartMeterDevicePage.qml | 143 +++++++++--------- 1 file changed, 70 insertions(+), 73 deletions(-) diff --git a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml index c1b68db0..605f78fc 100644 --- a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml +++ b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml @@ -85,11 +85,8 @@ ThingPageBase { CircleBackground { id: background Layout.fillWidth: true - Layout.preferredHeight: width - Layout.leftMargin: app.landscape ? Style.margins : Style.hugeMargins - Layout.rightMargin: Style.hugeMargins - Layout.topMargin: Style.hugeMargins - Layout.bottomMargin: app.landscape ? Style.hugeMargins : Style.margins + Layout.fillHeight: true + Layout.margins: Style.hugeMargins iconSource: "" onColor: batteryLevelState ? currentPower < 0 ? "crimson" : "limegreen" @@ -185,92 +182,92 @@ ThingPageBase { } OpacityMask { - anchors.fill: background + anchors.centerIn: parent + width: background.contentItem.width + height: background.contentItem.height source: ShaderEffectSource { sourceItem: juice hideSource: true + sourceRect: Qt.rect(background.contentItem.x, background.contentItem.y, background.contentItem.width, background.contentItem.height) } maskSource: mask } } - Item { + + ColumnLayout { + id: textLayout Layout.fillHeight: true Layout.fillWidth: true Layout.margins: Style.bigMargins + spacing: Style.margins - ColumnLayout { - id: textLayout - anchors.fill: parent - spacing: Style.margins + Label { + Layout.fillWidth: true + visible: isBattery + wrapMode: Text.WordWrap + horizontalAlignment: Text.AlignHCenter + textFormat: Text.RichText + property bool isCharging: root.chargingState && root.chargingState.value === "charging" + property bool isDischarging: root.chargingState && root.chargingState.value === "discharging" + property double availableWh: isBattery ? root.capacityState.value * 1000 * root.batteryLevelState.value / 100 : 0 + property double remainingWh: isCharging ? root.capacityState.value - availableWh : availableWh + property double remainingHours: isBattery ? remainingWh / Math.abs(root.currentPower) : 0 + property date endTime: isBattery ? new Date(new Date().getTime() + remainingHours * 60 * 60 * 1000) : new Date() + property int n: Math.round(remainingHours) - Label { - Layout.fillWidth: true - visible: isBattery - wrapMode: Text.WordWrap - horizontalAlignment: Text.AlignHCenter - textFormat: Text.RichText - property bool isCharging: root.chargingState && root.chargingState.value === "charging" - property bool isDischarging: root.chargingState && root.chargingState.value === "discharging" - property double availableWh: isBattery ? root.capacityState.value * 1000 * root.batteryLevelState.value / 100 : 0 - property double remainingWh: isCharging ? root.capacityState.value - availableWh : availableWh - property double remainingHours: isBattery ? remainingWh / Math.abs(root.currentPower) : 0 - property date endTime: isBattery ? new Date(new Date().getTime() + remainingHours * 60 * 60 * 1000) : new Date() - property int n: Math.round(remainingHours) + text: isCharging ? qsTr("At the current rate, the battery will be fully charged at %1.").arg('' + endTime.toLocaleTimeString(Locale.ShortFormat) + "") + : isDischarging ? qsTr("At the current rate, the battery will last until %1.").arg('' + endTime.toLocaleTimeString(Locale.ShortFormat) + "") + : qsTr("The battery is fully charged") + } - text: isCharging ? qsTr("At the current rate, the battery will be fully charged at %1.").arg('' + endTime.toLocaleTimeString(Locale.ShortFormat) + "") - : isDischarging ? qsTr("At the current rate, the battery will last until %1.").arg('' + endTime.toLocaleTimeString(Locale.ShortFormat) + "") - : qsTr("The battery is fully charged") + BlurredLabel { + Layout.fillWidth: true + wrapMode: Text.WordWrap + 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) + '') + textFormat: Text.RichText + + LogsModel { + id: periodConsumptionModel + objectName: "Root meter model" + engine: root.isEnergyMeter ? _engine : null + thingId: root.thing.id + typeIds: isEnergyMeter ? [root.totalEnergyConsumedStateType.id] : [] + viewStartTime: root.startTime + live: true } + property LogEntry logEntryAtStart: periodConsumptionModel.busy ? null : periodConsumptionModel.findClosest(periodConsumptionModel.viewStartTime) + property double totalPeriodConsumption: logEntryAtStart && totalEnergyConsumedState ? totalEnergyConsumedState.value - logEntryAtStart.value : 0 + } - BlurredLabel { - Layout.fillWidth: true - wrapMode: Text.WordWrap - 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) + '') - textFormat: Text.RichText + BlurredLabel { + visible: isEnergyMeter || isProducer + Layout.fillWidth: true + 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) + '') + textFormat: Text.RichText - LogsModel { - id: periodConsumptionModel - objectName: "Root meter model" - engine: root.isEnergyMeter ? _engine : null - thingId: root.thing.id - typeIds: isEnergyMeter ? [root.totalEnergyConsumedStateType.id] : [] - viewStartTime: root.startTime - live: true - } - property LogEntry logEntryAtStart: periodConsumptionModel.busy ? null : periodConsumptionModel.findClosest(periodConsumptionModel.viewStartTime) - property double totalPeriodConsumption: logEntryAtStart && totalEnergyConsumedState ? totalEnergyConsumedState.value - logEntryAtStart.value : 0 - } - - BlurredLabel { - visible: isEnergyMeter || isProducer - Layout.fillWidth: true - 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) + '') - textFormat: Text.RichText - - LogsModel { - id: periodProductionModel - engine: root.isEnergyMeter ? _engine : null - thingId: root.thing.id - typeIds: isEnergyMeter ? [root.totalEnergyProducedStateType.id] : [] - viewStartTime: root.startTime - live: true - } - property LogEntry logEntryAtStart: periodProductionModel.busy ? null : periodProductionModel.findClosest(periodProductionModel.viewStartTime) - property double totalPeriodProduction: logEntryAtStart && totalEnergyProducedState ? totalEnergyProducedState.value - logEntryAtStart.value : 0 + LogsModel { + id: periodProductionModel + engine: root.isEnergyMeter ? _engine : null + thingId: root.thing.id + typeIds: isEnergyMeter ? [root.totalEnergyProducedStateType.id] : [] + viewStartTime: root.startTime + live: true } + property LogEntry logEntryAtStart: periodProductionModel.busy ? null : periodProductionModel.findClosest(periodProductionModel.viewStartTime) + property double totalPeriodProduction: logEntryAtStart && totalEnergyProducedState ? totalEnergyProducedState.value - logEntryAtStart.value : 0 } } }