This repository has been archived on 2026-05-31. You can view files and clone it, but cannot push or open issues or pull requests.
powersync-app/nymea-app/ui/devicepages/SensorDevicePage.qml
2022-10-17 22:37:33 +02:00

624 lines
26 KiB
QML

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
*
* Copyright 2013 - 2020, nymea GmbH
* Contact: contact@nymea.io
*
* This file is part of nymea.
* This project including source code and documentation is protected by
* copyright law, and remains the property of nymea GmbH. All rights, including
* reproduction, publication, editing and translation, are reserved. The use of
* this project is subject to the terms of a license agreement to be concluded
* with nymea GmbH in accordance with the terms of use of nymea GmbH, available
* under https://nymea.io/license
*
* GNU General Public License Usage
* Alternatively, this project may be redistributed and/or modified under the
* terms of the GNU General Public License as published by the Free Software
* Foundation, GNU version 3. This project is distributed in the hope that it
* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this project. If not, see <https://www.gnu.org/licenses/>.
*
* For any further details and any questions please contact us under
* contact@nymea.io or see our FAQ/Licensing Information on
* https://nymea.io/license/faq
*
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
import QtQuick 2.5
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.1
import QtGraphicalEffects 1.0
import Nymea 1.0
import "../components"
import "../customviews"
ThingPageBase {
id: root
property var interfaceStateMap: {
"temperaturesensor": "temperature",
"humiditysensor": "humidity",
"pressuresensor": "pressure",
"moisturesensor": "moisture",
"lightsensor": "lightIntensity",
"conductivitysensor": "conductivity",
"noisesensor": "noise",
"cosensor": "co",
"co2sensor": "co2",
"gassensor": "gasLevel",
"presencesensor": "isPresent",
"daylightsensor": "daylight",
"closablesensor": "closed",
"watersensor": "waterDetected",
"firesensor": "fireDetected",
"waterlevelsensor": "waterLevel",
"phsensor": "ph",
"o2sensor": "o2saturation",
"o3sensor": "o3",
"orpsensor": "orp",
"vocsensor": "voc",
"cosensor": "co",
"pm10sensor": "pm10",
"pm25sensor": "pm25",
"no2sensor": "no2"
}
ListModel {
id: sensorsModel
Component.onCompleted: {
var supportedInterfaces = Object.keys(interfaceStateMap)
for (var i = 0; i < supportedInterfaces.length; i++) {
if (root.thingClass.interfaces.indexOf(supportedInterfaces[i]) >= 0) {
append({name: supportedInterfaces[i]});
}
}
}
}
Flickable {
id: listView
anchors { fill: parent }
topMargin: app.margins / 2
interactive: contentHeight > height
contentHeight: contentGrid.implicitHeight
ColumnLayout {
id: contentGrid
width: parent.width
spacing: Style.margins
Flow {
id: flow
Layout.fillWidth: true
Layout.leftMargin: sensorsModel.count == 1 ? Style.hugeMargins : Style.bigMargins
Layout.rightMargin: sensorsModel.count == 1 ? Style.hugeMargins : Style.bigMargins
Layout.preferredHeight: cellWidth * Math.min(400, Math.ceil(flowRepeater.count / columns))
property int columns: Math.min(flowRepeater.count, Math.floor(listView.width / 150))
property int cellWidth: width / columns
property int totalRows: flowRepeater.count / columns
// columns: 2// Math.ceil(width / 600)
// columnSpacing: Style.margins
// rowSpacing: Style.margins
Repeater {
id: flowRepeater
model: sensorsModel
delegate: Item {
width: Math.floor(flow.width / itemsInRow)
height: Math.min(400, flow.cellWidth)
property int row: Math.floor(index / flow.columns)
property int itemsInRow: row < flow.totalRows ? flow.columns : (flowRepeater.count % flow.columns)
CircleBackground {
id: background
anchors.centerIn: parent
width: Math.min(parent.width, parent.height) - Style.margins
height: width
readonly property StateType sensorStateType: root.thing.thingClass.stateTypes.findByName(interfaceStateMap[modelData])
readonly property State sensorState: root.thing.stateByName(interfaceStateMap[modelData])
onColor: app.interfaceToColor(modelData)
on: sensorStateType.type.toLowerCase() == "bool" && sensorState.value === true
iconSource: [
"closablesensor",
"presencesensor",
"daylightsensor",
"firesensor",
"watersensor"
].indexOf(modelData) >= 0 ? app.interfaceToIcon(modelData) : ""
Loader {
anchors.centerIn: parent
width: background.contentItem.width
height: background.contentItem.height
property StateType stateType: root.thingClass.stateTypes.findByName(interfaceStateMap[modelData])
property State state: root.thing.stateByName(interfaceStateMap[modelData])
property string interfaceName: modelData
property var minValue: {
if (["temperaturesensor"].indexOf(modelData) >= 0) {
return Types.toUiValue(-50, Types.UnitDegreeCelsius)
}
if (["pressuresensor"].indexOf(modelData) >= 0) {
return Types.toUiValue(900, Types.UnitMilliBar)
}
return state.minValue
}
property var maxValue: {
if (["temperaturesensor"].indexOf(modelData) >= 0) {
return Types.toUiValue(50, Types.UnitDegreeCelsius)
}
if (["pressuresensor"].indexOf(modelData) >= 0) {
return Types.toUiValue(1100, Types.UnitMilliBar)
}
return state.maxValue
}
sourceComponent: {
var progressInterfaces = [
"humiditysensor",
"o2sensor",
"temperaturesensor",
"moisturesensor",
"conductivitysensor",
"gassensor",
"lightsensor",
"orpsensor",
"phsensor",
"pressuresensor",
"waterlevelsensor",
"windspeedsensor"
]
if (progressInterfaces.indexOf(modelData) >= 0) {
return progressComponent
}
var scaleInterfaces = [
"vocsensor",
"cosensor",
"co2sensor",
"o3sensor",
"pm10sensor",
"pm25sensor",
"no2sensor"
]
if (scaleInterfaces.indexOf(modelData) >= 0) {
return scaleComponent
}
}
}
}
}
}
}
GridLayout {
columns: Math.ceil(width / 600)
rowSpacing: 0
columnSpacing: 0
Repeater {
model: sensorsModel
delegate: Loader {
id: loader
Layout.fillWidth: true
Layout.preferredHeight: item.implicitHeight
property StateType stateType: root.thingClass.stateTypes.findByName(interfaceStateMap[modelData])
property State state: root.thing.stateByName(interfaceStateMap[modelData])
property string interfaceName: modelData
// sourceComponent: stateType && stateType.type.toLowerCase() === "bool" ? boolComponent : graphComponent
sourceComponent: graphComponent
}
}
}
}
Component {
id: graphComponent
GenericTypeGraph {
id: graph
thing: root.thing
color: app.interfaceToColor(interfaceName)
iconSource: app.interfaceToIcon(interfaceName)
implicitHeight: width * .6
property string interfaceName: parent.interfaceName
stateType: parent.stateType
property State state: parent.state
Binding {
target: graph
property: "title"
when: ["presencesensor", "daylightsensor", "closablesensor", "watersensor", "firesensor"].indexOf(graph.interfaceName) >= 0
value: {
switch (graph.interfaceName) {
case "presencesensor":
return graph.state.value === true ? qsTr("Presence") : qsTr("Vacant")
case "daylightsensor":
return graph.state.value === true ? qsTr("Daytime") : qsTr("Nighttime")
case "closablesensor":
return graph.state.value === true ? qsTr("Closed") : qsTr("Open")
case "watersensor":
return graph.state.value === true ? qsTr("Wet") : qsTr("Dry")
case "firesensor":
return graph.state.value === true ? qsTr("Fire") : qsTr("No fire")
}
}
}
}
}
Component {
id: boolComponent
GridLayout {
id: boolView
property string interfaceName: parent.interfaceName
property StateType stateType: parent.stateType
height: listView.height
columns: app.landscape ? 2 : 1
Item {
Layout.fillWidth: true
Layout.fillHeight: true
Layout.minimumWidth: Style.iconSize * 5
Layout.rowSpan: app.landscape ? 5 : 1
ColorIcon {
anchors.centerIn: parent
height: Style.iconSize * 4
width: height
name: {
switch (boolView.interfaceName) {
case "closablesensor":
return thing.states.getState(boolView.stateType.id).value === true ? Qt.resolvedUrl("../images/lock-closed.svg") : Qt.resolvedUrl("../images/lock-open.svg")
default:
return app.interfaceToIcon(boolView.interfaceName)
}
}
color: {
switch (boolView.interfaceName) {
case "closablesensor":
return thing.states.getState(boolView.stateType.id).value === true ? "green" : "red"
default:
thing.states.getState(boolView.stateType.id).value === true ? app.interfaceToColor(boolView.interfaceName) : Style.iconColor
}
}
}
}
Item {
Layout.fillHeight: true
Layout.fillWidth: true
}
RowLayout {
Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter
property StateType lastSeenStateType: root.thingClass.stateTypes.findByName("lastSeenTime")
property State lastSeenState: lastSeenStateType ? root.thing.states.getState(lastSeenStateType.id) : null
visible: lastSeenStateType !== null
Label {
text: qsTr("Last seen:")
font.bold: true
}
Label {
text: parent.lastSeenState ? Qt.formatDateTime(new Date(parent.lastSeenState.value * 1000)) : ""
}
}
RowLayout {
Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter
property StateType sunriseStateType: root.thingClass.stateTypes.findByName("sunriseTime")
property State sunriseState: sunriseStateType ? root.thing.states.getState(sunriseStateType.id) : null
visible: sunriseStateType !== null
Label {
text: qsTr("Sunrise:")
font.bold: true
}
Label {
text: parent.sunriseStateType ? Qt.formatDateTime(new Date(parent.sunriseState.value * 1000)) : ""
}
}
RowLayout {
Layout.fillWidth: false
Layout.alignment: Qt.AlignHCenter
property StateType sunsetStateType: root.thingClass.stateTypes.findByName("sunsetTime")
property State sunsetState: sunsetStateType ? root.thing.states.getState(sunsetStateType.id) : null
visible: sunsetStateType !== null
Label {
text: qsTr("Sunset:")
font.bold: true
}
Label {
text: parent.sunsetStateType ? Qt.formatDateTime(new Date(parent.sunsetState.value * 1000)) : ""
}
}
Item {
Layout.fillHeight: true
Layout.fillWidth: true
}
}
}
}
Component {
id: progressComponent
Canvas {
id: progressCanvas
property string interfaceName: parent.interfaceName
property StateType stateType: parent.stateType
property State state: parent.state
property var minValue: parent.minValue
property var maxValue: parent.maxValue
property double progress: (progressCanvas.state.value - progressCanvas.minValue) / (progressCanvas.maxValue - progressCanvas.minValue)
Behavior on progress { NumberAnimation { duration: Style.slowAnimationDuration; easing.type: Easing.InOutQuad } }
onProgressChanged: requestPaint();
ColumnLayout {
anchors.centerIn: parent
anchors.verticalCenterOffset: -Style.smallMargins
width: parent.width * 0.6
Label {
Layout.fillWidth: true
text: Types.toUiValue(progressCanvas.state.value, progressCanvas.stateType.unit).toFixed(1)
wrapMode: Text.WordWrap
font.pixelSize: Math.min(Style.hugeFont.pixelSize, progressCanvas.height / 8)
maximumLineCount: 2
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
}
Label {
Layout.fillWidth: true
text: Types.toUiUnit(progressCanvas.stateType.unit)
font.pixelSize: Math.min(Style.largeFont.pixelSize, progressCanvas.height / 12)
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
}
}
onPaint: {
var ctx = getContext("2d");
ctx.reset();
ctx.beginPath()
ctx.fillStyle = Style.foregroundColor
ctx.translate(width / 2, height / 2)
ctx.rotate(135 * Math.PI / 180)
ctx.lineCap = "round"
ctx.lineWidth = width * .1
ctx.beginPath()
ctx.strokeStyle = Style.tileOverlayColor
var startAngle = 0
var endAngle = 270
var radStart = startAngle * Math.PI/180;
var radEnd = endAngle * Math.PI/180;
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.strokeStyle = app.interfaceToColor(progressCanvas.interfaceName)
radEnd *= progressCanvas.progress
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
ctx.stroke()
ctx.closePath()
}
ColorIcon {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.smallMargins
name: app.interfaceToIcon(progressCanvas.interfaceName)
size: Math.min(Style.bigIconSize, parent.height / 5)
color: app.interfaceToColor(progressCanvas.interfaceName)
}
}
}
Component {
id: scaleComponent
Item {
id: scaleCanvas
property string interfaceName: parent.interfaceName
property StateType stateType: parent.stateType
property State state: parent.state
property var minValue: parent.minValue
property var maxValue: parent.maxValue
property int scaleWidth: width * .1
property var scale: {
switch (interfaceName) {
case "vocsensor":
return AirQualityIndex.iaqVoc
case "cosensor":
return AirQualityIndex.caqiCo
case "o3sensor":
return AirQualityIndex.caqiO3
case "pm10sensor":
return AirQualityIndex.caqiPm10
case "pm25sensor":
return AirQualityIndex.caqiPm25
case "no2sensor":
return AirQualityIndex.caqiNo2
}
return baseScale
}
property var baseScale: [
{
"value": maxValue,
"angle": 270,
"color": Style.tileOverlayColor
}
]
property var currentIndex: {
for (var i = 0; i < scale.length; i++) {
if (state.value <= scale[i].value) {
return i;
}
}
log.warn("Value out of scale!")
return -1
}
property double angle: {
var baseAngle = 0
var baseValue = 0;
if (currentIndex > 0) {
baseAngle = scale[currentIndex-1].angle
baseValue = scale[currentIndex-1].value
}
var valueRange = scale[currentIndex].value - baseValue
var angleRange = scale[currentIndex].angle - baseAngle
var progress = (state.value - baseValue) / (scale[currentIndex].value - baseValue)
return baseAngle + angleRange * progress
}
Behavior on angle { NumberAnimation { duration: Style.slowAnimationDuration; easing.type: Easing.InOutQuad } }
onAngleChanged: maskCanvas.requestPaint();
Canvas {
id: baseCanvas
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d");
ctx.reset();
ctx.beginPath()
ctx.fillStyle = Style.foregroundColor
ctx.translate(width / 2, height / 2)
ctx.rotate(135 * Math.PI / 180)
ctx.lineCap = "round"
ctx.lineWidth = scaleCanvas.scaleWidth
// paint first rounded
ctx.beginPath()
ctx.strokeStyle = scaleCanvas.scale[0].color
var startAngle = 0
var endAngle = scaleCanvas.scale[0].angle * Math.PI/180
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, startAngle, endAngle)
ctx.stroke()
ctx.closePath()
// paint last rounded
ctx.beginPath()
ctx.strokeStyle = scaleCanvas.scale[scaleCanvas.scale.length - 1].color
startAngle = scaleCanvas.scale[scaleCanvas.scale.length - 2].angle * Math.PI/180
endAngle = scaleCanvas.scale[scaleCanvas.scale.length - 1].angle * Math.PI/180
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, startAngle, endAngle)
ctx.stroke()
ctx.closePath()
// paint inner parts
ctx.lineCap = "butt"
for (var i = 1; i < scaleCanvas.scale.length - 1; i++) {
ctx.beginPath()
ctx.strokeStyle = scaleCanvas.scale[i].color
startAngle = scaleCanvas.scale[i - 1].angle * Math.PI/180
endAngle = scaleCanvas.scale[i].angle * Math.PI/180
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, startAngle, endAngle)
ctx.stroke()
ctx.closePath()
}
}
}
Canvas {
id: maskCanvas
anchors.fill: parent
visible: false
onPaint: {
var ctx = getContext("2d");
ctx.reset();
ctx.beginPath()
ctx.fillStyle = Style.foregroundColor
ctx.translate(width / 2, height / 2)
ctx.rotate(135 * Math.PI / 180)
ctx.lineCap = "round"
ctx.lineWidth = width * .1
ctx.beginPath()
ctx.strokeStyle = "#55ffffff"
var startAngle = 0
var endAngle = 270
var radStart = startAngle * Math.PI/180;
var radEnd = endAngle * Math.PI/180;
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
ctx.stroke()
ctx.closePath()
ctx.beginPath()
ctx.strokeStyle = "#000000"
radEnd = scaleCanvas.angle * Math.PI/180
ctx.arc(0, 0, width / 2 - ctx.lineWidth / 2, radStart, radEnd)
ctx.stroke()
ctx.closePath()
}
}
OpacityMask {
anchors.fill: parent
source: baseCanvas
maskSource: maskCanvas
}
ColumnLayout {
anchors.centerIn: parent
anchors.verticalCenterOffset: -Style.smallMargins
width: parent.width * 0.6
Label {
Layout.fillWidth: true
text: scaleCanvas.scale[scaleCanvas.currentIndex].text
font.pixelSize: Math.min(Style.hugeFont.pixelSize, scaleCanvas.height / 8)
wrapMode: Text.WordWrap
// color: scaleCanvas.scale[scaleCanvas.currentIndex].color
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
maximumLineCount: 2
}
Label {
Layout.fillWidth: true
text: Types.toUiValue(scaleCanvas.state.value, scaleCanvas.stateType.unit).toFixed(1) + " " + Types.toUiUnit(scaleCanvas.stateType.unit)
font.pixelSize: Math.min(Style.largeFont.pixelSize, scaleCanvas.height / 12)
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignHCenter
elide: Text.ElideRight
}
}
ColorIcon {
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom
anchors.bottomMargin: Style.smallMargins
// anchors.verticalCenterOffset: scaleCanvas.height / 2 - height
name: app.interfaceToIcon(scaleCanvas.interfaceName)
size: Math.min(Style.bigIconSize, parent.height / 5)
color: app.interfaceToColor(scaleCanvas.interfaceName)
}
}
}
}