// SPDX-License-Identifier: GPL-3.0-or-later /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Copyright (C) 2013 - 2024, nymea GmbH * Copyright (C) 2024 - 2025, chargebyte austria GmbH * * This file is part of nymea-app. * * nymea-app is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * nymea-app 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 nymea-app. If not, see . * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ import QtQuick import QtQuick.Controls import QtQuick.Layouts import QtQuick.Controls.Material import Qt5Compat.GraphicalEffects import Nymea import "../components" import "../utils" ThingPageBase { id: root readonly property State powerState: thing.stateByName("power") readonly property State brightnessState: thing.stateByName("brightness") readonly property ActionType brightnessActionType: thing.thingClass.actionTypes.findByName("brightness"); readonly property State colorState: thing.stateByName("color") readonly property StateType ctStateType: thing.thingClass.stateTypes.findByName("colorTemperature") readonly property State ctState: thing.stateByName("colorTemperature") readonly property ActionType ctActionType: thing.thingClass.actionTypes.findByName("colorTemperature") readonly property int statesCount: (powerState !== null ? 1 : 0) + (brightnessState !== null ? 1 : 0) + (ctState !== null ? 1 : 0) + (colorState !== null ? 1 : 0) GridLayout { anchors.fill: parent anchors.margins: Style.bigMargins columns: app.landscape ? root.statesCount : 1 rowSpacing: Style.bigMargins columnSpacing: Style.bigMargins Layout.alignment: Qt.AlignCenter GridLayout { Layout.fillHeight: true Layout.fillWidth: !app.landscape columnSpacing: app.margins rowSpacing: app.margins Layout.alignment: Qt.AlignHCenter visible: root.ctStateType !== null columns: app.landscape ? 1 : 4 Repeater { model: ListModel { ListElement { name: "activate"; ct: "0"; bri: 100; color: "#00c5ff" } ListElement { name: "concentrate"; ct: "23"; bri: 100; color: "#3dddff" } ListElement { name: "reading"; ct: "57"; bri: 100; color: "#f4de00" } ListElement { name: "relax"; ct: "95" ; bri: 55; color: "#ffaf2a"} } delegate: ProgressButton { Layout.preferredHeight: Style.hugeIconSize Layout.preferredWidth: Style.hugeIconSize imageSource: "qrc:/icons/lighting/" + model.name + ".svg" longpressEnabled: false // mode: "normal" // backgroundColor: model.color onClicked: { // Translate from % to absolute value in min/max // % : 100 = abs : (max - min) print("min,max", root.ctStateType, root.ctStateType.minValue, root.ctStateType.maxValue) var absoluteCtValue = (model.ct * (root.ctStateType.maxValue - root.ctStateType.minValue) / 100) + root.ctStateType.minValue var params = []; var param1 = {}; param1["paramName"] = root.ctActionType.paramTypes.get(0).name; param1["value"] = absoluteCtValue; params.push(param1) root.thing.executeAction(root.ctActionType.name, params) params = []; param1 = {}; param1["paramName"] = root.brightnessActionType.paramTypes.get(0).name; param1["value"] = model.bri; params.push(param1) root.thing.executeAction(root.brightnessActionType.name, params) } } } } ColumnLayout { spacing: Style.hugeMargins StackLayout { Layout.fillWidth: true Layout.fillHeight: true Layout.maximumHeight: width currentIndex: selectionTabs.currentIndex Repeater { model: modeModel delegate: Loader { sourceComponent: model.comp } } Component { id: colorPickerComponent ColorPicker { anchors.fill: parent thing: root.thing } } Component { id: colorTemperatureComponent ColorTemperaturePicker { anchors.fill: parent thing: root.thing orientation: app.landscape ? Qt.Vertical : Qt.Horizontal } } Component { id: brightnessComponent Item { id: brightnessController property Thing thing: root.thing readonly property State brightnessState: thing ? thing.stateByName("brightness") : null readonly property State colorState: thing ? thing.stateByName("color") : null readonly property State powerState: thing ? thing.stateByName("power") : null ActionQueue { id: actionQueue thing: brightnessController.thing stateType: thing.thingClass.stateTypes.findByName("brightness") } Rectangle { id: brightnessCircle anchors.centerIn: parent width: Math.min(400, Math.min(parent.width, parent.height)) height: width radius: width / 2 color: Style.tileBackgroundColor } ShaderEffect { anchors.fill: brightnessCircle property Item source: ShaderEffectSource { id: shaderSource anchors.fill: parent sourceItem: brightnessCircle hideSource: true } property color inColor: Style.tileBackgroundColor property color outColor: powerState.value === true ? colorState ? colorState.value : "#ffd649" : Style.tileOverlayColor Behavior on outColor { ColorAnimation { duration: Style.animationDuration } } property real threshold: 0.1 property real brightness: 1 - (actionQueue.pendingValue || brightnessState.value) / 100 fragmentShader: "/ui/shaders/brightnesscircle.frag.qsb" } MouseArea { anchors.fill: brightnessCircle onMouseYChanged: { var progress = 1 - mouseY / height actionQueue.sendValue(progress * 100); } } } } Component { id: powerComponent Item { id: powerController property Thing thing: root.thing readonly property State powerState: thing ? thing.stateByName("power") : null ActionQueue { id: actionQueue thing: powerController.thing stateType: thing.thingClass.stateTypes.findByName("power") } CircleBackground { anchors.fill: parent anchors.margins: Style.bigMargins onColor: "#ffd649" iconSource: (actionQueue.pendingValue || powerState.value) === true ? "light-on" : "light-off" on: (actionQueue.pendingValue || powerState.value) === true ? 1 : 0 onClicked: { actionQueue.sendValue(!powerState.value) } } } } } ListModel { id: modeModel Component.onCompleted: { if (root.colorState) { append({modelData: qsTr("Color"), comp: colorPickerComponent}) } if (root.ctState) { append({modelData: qsTr("Temperature"), comp: colorTemperatureComponent}) } if (root.brightnessState && !root.ctState && !root.colorState) { append({modelData: qsTr("Brightness"), comp: brightnessComponent}) } if (!root.colorState && !root.ctState && !root.brightnessState) { append({modelData: qsTr("Power"), comp: powerComponent}) } } } SelectionTabs { id: selectionTabs Layout.fillWidth: true model: modeModel visible: modeModel.count > 1 } } GridLayout { id: basicItems Layout.fillWidth: !app.landscape Layout.fillHeight: app.landscape && (powerButton.visible || brightnessSlider.visible) Layout.alignment: Qt.AlignHCenter columnSpacing: app.margins rowSpacing: app.margins columns: app.landscape ? 1 : 2 ProgressButton { id: powerButton imageSource: root.powerState.value === true ? "qrc:/icons/light-on.svg" : "qrc:/icons/light-off.svg" mode: "normal" size: Style.bigIconSize longpressEnabled: false visible: root.brightnessState || root.ctState || root.colorState onClicked: { root.thing.executeAction("power", [{paramName: "power", value: !root.powerState.value}]) } } BrightnessSlider { id: brightnessSlider Layout.fillWidth: orientation == Qt.Horizontal Layout.fillHeight: orientation == Qt.Vertical Layout.alignment: Qt.AlignHCenter thing: root.thing orientation: basicItems.columns === 1 ? Qt.Vertical : Qt.Horizontal visible: root.brightnessState && (root.ctState || root.colorState) } } } }