From 1682405447f2a981683e7116cc8cdf04db6dc387 Mon Sep 17 00:00:00 2001 From: Michael Zanetti Date: Sun, 10 May 2020 23:54:36 +0200 Subject: [PATCH] Improve thing pages with graphs --- nymea-app/images.qrc | 1 + nymea-app/ui/Nymea.qml | 5 +- nymea-app/ui/customviews/GenericTypeGraph.qml | 2 +- nymea-app/ui/customviews/WeatherView.qml | 2 + .../devicepages/SensorDevicePagePost110.qml | 72 +++++--- .../ui/devicepages/SmartMeterDevicePage.qml | 64 +++---- .../devicepages/WeatherDevicePagePost110.qml | 58 +++--- nymea-app/ui/images/sensors/windspeed.svg | 165 ++++++++++++++++++ 8 files changed, 288 insertions(+), 81 deletions(-) create mode 100644 nymea-app/ui/images/sensors/windspeed.svg diff --git a/nymea-app/images.qrc b/nymea-app/images.qrc index 9668cfce..91494793 100644 --- a/nymea-app/images.qrc +++ b/nymea-app/images.qrc @@ -220,5 +220,6 @@ ui/images/key.svg ui/images/browser/MediaBrowserIconRadioParadise.svg ui/images/io-connections.svg + ui/images/sensors/windspeed.svg diff --git a/nymea-app/ui/Nymea.qml b/nymea-app/ui/Nymea.qml index 98d5ac1c..1299f131 100644 --- a/nymea-app/ui/Nymea.qml +++ b/nymea-app/ui/Nymea.qml @@ -222,6 +222,8 @@ ApplicationWindow { return Qt.resolvedUrl("images/sensors/presence.svg") case "closablesensor": return Qt.resolvedUrl("images/sensors/closable.svg") + case "windspeedsensor": + return Qt.resolvedUrl("images/sensors/windspeed.svg") case "media": case "mediacontroller": case "mediaplayer": @@ -315,7 +317,8 @@ ApplicationWindow { "extendedsmartmeterconsumer": "blue", "heating" : "gainsboro", "thermostat": "dodgerblue", - "irrigation": "lightblue" + "irrigation": "lightblue", + "windspeedsensor": "blue" } function interfaceToColor(name) { diff --git a/nymea-app/ui/customviews/GenericTypeGraph.qml b/nymea-app/ui/customviews/GenericTypeGraph.qml index b081db59..c228cff6 100644 --- a/nymea-app/ui/customviews/GenericTypeGraph.qml +++ b/nymea-app/ui/customviews/GenericTypeGraph.qml @@ -350,7 +350,7 @@ Item { borderColor: root.color axisX: xAxis axisY: yAxis - pointLabelsVisible: true + pointLabelsVisible: root.stateType.type.toLowerCase() !== "bool" pointLabelsColor: app.foregroundColor pointLabelsFont.pixelSize: app.smallFont pointLabelsFormat: "@yPoint" diff --git a/nymea-app/ui/customviews/WeatherView.qml b/nymea-app/ui/customviews/WeatherView.qml index e95c4646..38b89ac4 100644 --- a/nymea-app/ui/customviews/WeatherView.qml +++ b/nymea-app/ui/customviews/WeatherView.qml @@ -106,6 +106,7 @@ CustomViewBase { Layout.preferredWidth: app.largeFont * 4 Layout.preferredHeight: app.largeFont * 4 name: weatherConditionState ? "../images/weathericons/weather-" + weatherConditionState.value + ".svg" : "" + color: "white" } Item { @@ -128,6 +129,7 @@ CustomViewBase { name: "../images/weathericons/wind.svg" width: app.iconSize height: width + color: app.interfaceToColor("windspeedsensor") } Label { diff --git a/nymea-app/ui/devicepages/SensorDevicePagePost110.qml b/nymea-app/ui/devicepages/SensorDevicePagePost110.qml index f30e316b..c0132e65 100644 --- a/nymea-app/ui/devicepages/SensorDevicePagePost110.qml +++ b/nymea-app/ui/devicepages/SensorDevicePagePost110.qml @@ -35,43 +35,59 @@ import Nymea 1.0 import "../components" import "../customviews" -ListView { +Flickable { id: listView anchors { fill: parent } interactive: contentHeight > height - model: ListModel { - Component.onCompleted: { - var supportedInterfaces = ["temperaturesensor", "humiditysensor", "pressuresensor", "moisturesensor", "lightsensor", "conductivitysensor", "noisesensor", "co2sensor", "presencesensor", "daylightsensor", "closablesensor"] - for (var i = 0; i < supportedInterfaces.length; i++) { - if (root.deviceClass.interfaces.indexOf(supportedInterfaces[i]) >= 0) { - append({name: supportedInterfaces[i]}); + contentHeight: contentGrid.implicitHeight + + GridLayout { + id: contentGrid + width: parent.width + columns: width / 300 + + Repeater { + model: ListModel { + Component.onCompleted: { + var supportedInterfaces = ["temperaturesensor", "humiditysensor", "pressuresensor", "moisturesensor", "lightsensor", "conductivitysensor", "noisesensor", "co2sensor", "presencesensor", "daylightsensor", "closablesensor"] + for (var i = 0; i < supportedInterfaces.length; i++) { + if (root.deviceClass.interfaces.indexOf(supportedInterfaces[i]) >= 0) { + append({name: supportedInterfaces[i]}); + } + } } } + + delegate: Loader { + id: loader + Layout.fillWidth: true + Layout.preferredHeight: item.implicitHeight + + property StateType stateType: root.deviceClass.stateTypes.findByName(interfaceStateMap[modelData]) + property string interfaceName: modelData + +// sourceComponent: stateType && stateType.type.toLowerCase() === "bool" ? boolComponent : graphComponent + sourceComponent: graphComponent + + property var interfaceStateMap: { + "temperaturesensor": "temperature", + "humiditysensor": "humidity", + "pressuresensor": "pressure", + "moisturesensor": "moisture", + "lightsensor": "lightIntensity", + "conductivitysensor": "conductivity", + "noisesensor": "noise", + "co2sensor": "co2", + "presencesensor": "isPresent", + "daylightsensor": "daylight", + "closablesensor": "closed" + } + } + } } - delegate: Loader { - id: loader - width: parent.width - property StateType stateType: root.deviceClass.stateTypes.findByName(interfaceStateMap[modelData]) - property string interfaceName: modelData - sourceComponent: stateType && stateType.type.toLowerCase() === "bool" ? boolComponent : graphComponent - - property var interfaceStateMap: { - "temperaturesensor": "temperature", - "humiditysensor": "humidity", - "pressuresensor": "pressure", - "moisturesensor": "moisture", - "lightsensor": "lightIntensity", - "conductivitysensor": "conductivity", - "noisesensor": "noise", - "co2sensor": "co2", - "presencesensor": "isPresent", - "daylightsensor": "daylight", - "closablesensor": "closed" - } - } Component { id: graphComponent diff --git a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml index 884ae3a3..30733fc8 100644 --- a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml +++ b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml @@ -38,37 +38,41 @@ import "../customviews" DevicePageBase { id: root - ListView { - anchors { fill: parent } - model: ListModel { - Component.onCompleted: { - if (root.deviceClass.interfaces.indexOf("extendedsmartmeterproducer") >= 0 - || root.deviceClass.interfaces.indexOf("extendedsmartmeterconsumer") >= 0) { - append( {interface: "extendedsmartmeterproducer", stateTypeName: "currentPower" }) - } - if (root.deviceClass.interfaces.indexOf("smartmeterproducer") >= 0) { - append( {interface: "smartmeterproducer", stateTypeName: "totalEnergyProduced" }) - } - if (root.deviceClass.interfaces.indexOf("smartmeterconsumer") >= 0) { - append( {interface: "smartmeterconsumer", stateTypeName: "totalEnergyConsumed" }) - } - print("shown graphs are", count) - } - } - delegate: ColumnLayout { + Flickable { + anchors.fill: parent + contentHeight: contentGrid.height + interactive: contentHeight > height + + GridLayout { + id: contentGrid width: parent.width - Label { - Layout.fillWidth: true - Layout.leftMargin: app.margins; Layout.topMargin: app.margins; Layout.rightMargin: app.rightMargins; - text: root.deviceClass.stateTypes.findByName(model.stateTypeName).displayName - } - GenericTypeGraph { - Layout.fillWidth: true - device: root.device - stateType: root.deviceClass.stateTypes.findByName(model.stateTypeName) - color: app.interfaceToColor(model.interface) - iconSource: app.interfaceToIcon(model.interface) - roundTo: 5 + columns: Math.min(width / 300, contentModel.count) + + Repeater { + model: ListModel { + id: contentModel + Component.onCompleted: { + if (root.deviceClass.interfaces.indexOf("extendedsmartmeterproducer") >= 0 + || root.deviceClass.interfaces.indexOf("extendedsmartmeterconsumer") >= 0) { + append( {interface: "extendedsmartmeterproducer", stateTypeName: "currentPower" }) + } + if (root.deviceClass.interfaces.indexOf("smartmeterproducer") >= 0) { + append( {interface: "smartmeterproducer", stateTypeName: "totalEnergyProduced" }) + } + if (root.deviceClass.interfaces.indexOf("smartmeterconsumer") >= 0) { + append( {interface: "smartmeterconsumer", stateTypeName: "totalEnergyConsumed" }) + } + print("shown graphs are", count) + } + } + delegate: GenericTypeGraph { + Layout.preferredWidth: contentGrid.width / contentGrid.columns + device: root.device + stateType: root.deviceClass.stateTypes.findByName(model.stateTypeName) + color: app.interfaceToColor(model.interface) + iconSource: app.interfaceToIcon(model.interface) + roundTo: 5 + } } } } diff --git a/nymea-app/ui/devicepages/WeatherDevicePagePost110.qml b/nymea-app/ui/devicepages/WeatherDevicePagePost110.qml index e9c794e5..a51f9238 100644 --- a/nymea-app/ui/devicepages/WeatherDevicePagePost110.qml +++ b/nymea-app/ui/devicepages/WeatherDevicePagePost110.qml @@ -38,39 +38,55 @@ import "../customviews" Flickable { anchors.fill: parent clip: true - contentHeight: content.implicitHeight + contentHeight: contentColumn.implicitHeight property var device property var deviceClass ColumnLayout { - id: content + id: contentColumn width: parent.width + WeatherView { Layout.fillWidth: true device: root.device deviceClass: root.deviceClass } - GenericTypeGraph { + + GridLayout { + id: content Layout.fillWidth: true - device: root.device - stateType: root.deviceClass.stateTypes.findByName("temperature") - iconSource: app.interfaceToIcon("temperaturesensor") - color: app.interfaceToColor("temperaturesensor") - } - GenericTypeGraph { - Layout.fillWidth: true - device: root.device - stateType: root.deviceClass.stateTypes.findByName("humidity") - iconSource: app.interfaceToIcon("humiditysensor") - color: app.interfaceToColor("humiditysensor") - } - GenericTypeGraph { - Layout.fillWidth: true - device: root.device - stateType: root.deviceClass.stateTypes.findByName("pressure") - iconSource: app.interfaceToIcon("pressuresensor") - color: app.interfaceToColor("pressuresensor") + columns: Math.min(width / 300, 4) + + GenericTypeGraph { + Layout.fillWidth: true + device: root.device + stateType: root.deviceClass.stateTypes.findByName("temperature") + iconSource: app.interfaceToIcon("temperaturesensor") + color: app.interfaceToColor("temperaturesensor") + } + GenericTypeGraph { + Layout.fillWidth: true + device: root.device + stateType: root.deviceClass.stateTypes.findByName("humidity") + iconSource: app.interfaceToIcon("humiditysensor") + color: app.interfaceToColor("humiditysensor") + } + GenericTypeGraph { + Layout.fillWidth: true + device: root.device + stateType: root.deviceClass.stateTypes.findByName("pressure") + iconSource: app.interfaceToIcon("pressuresensor") + color: app.interfaceToColor("pressuresensor") + } + GenericTypeGraph { + Layout.fillWidth: true + device: root.device + stateType: root.deviceClass.stateTypes.findByName("windSpeed") + iconSource: app.interfaceToIcon("windspeedsensor") + color: app.interfaceToColor("windspeedsensor") + } } } + } diff --git a/nymea-app/ui/images/sensors/windspeed.svg b/nymea-app/ui/images/sensors/windspeed.svg new file mode 100644 index 00000000..e5661abc --- /dev/null +++ b/nymea-app/ui/images/sensors/windspeed.svg @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + +