diff --git a/androidservice/controlviews/Main.qml b/androidservice/controlviews/Main.qml index 31b032a3..be1bb2fa 100644 --- a/androidservice/controlviews/Main.qml +++ b/androidservice/controlviews/Main.qml @@ -37,7 +37,7 @@ ApplicationWindow { property int smallIconSize: 16 property int iconSize: 24 - property int largeIconSize: 40 + property int bigIconSize: 40 property int hugeIconSize: 64 property int delegateHeight: 60 diff --git a/libnymea-app/types/browseritem.h b/libnymea-app/types/browseritem.h index b8269a9f..98bedc16 100644 --- a/libnymea-app/types/browseritem.h +++ b/libnymea-app/types/browseritem.h @@ -37,7 +37,7 @@ class BrowserItem : public QObject { Q_OBJECT - Q_PROPERTY(QUuid id READ id CONSTANT) + Q_PROPERTY(QString id READ id CONSTANT) Q_PROPERTY(QString displayName READ displayName NOTIFY displayNameChanged) Q_PROPERTY(QString description READ description NOTIFY descriptionChanged) Q_PROPERTY(QString icon READ icon NOTIFY iconChanged) diff --git a/libnymea-app/types/interfaces.cpp b/libnymea-app/types/interfaces.cpp index 576ddd1d..b2b35fa9 100644 --- a/libnymea-app/types/interfaces.cpp +++ b/libnymea-app/types/interfaces.cpp @@ -88,6 +88,9 @@ Interfaces::Interfaces(QObject *parent) : QAbstractListModel(parent) addInterface("sensor", tr("Sensors")); + addInterface("cleaningrobot", tr("Cleaning robots")); + addStateType("cleaningrobot", "state", QVariant::String, false, tr("Cleaning state"), tr("Cleaning state changed")); + addInterface("closablesensor", tr("Closable sensors"), {"sensor"}); addStateType("closablesensor", "closed", QVariant::Bool, false, tr("Closed"), tr("Opened or closed")); diff --git a/nymea-app/images.qrc b/nymea-app/images.qrc index c16b3c8c..6c0163cf 100644 --- a/nymea-app/images.qrc +++ b/nymea-app/images.qrc @@ -79,7 +79,6 @@ ui/images/filters.svg ui/images/find.svg ui/images/fingerprint.svg - ui/images/go-down.svg ui/images/nymea-logo.svg ui/images/info.svg ui/images/light-off.svg @@ -257,5 +256,6 @@ ui/images/zigbee/deCONZ.svg ui/images/zigbee/NXP.svg ui/images/nymea-splash.svg + ui/images/cleaning-robot.svg diff --git a/nymea-app/resources.qrc b/nymea-app/resources.qrc index 1b124310..a57a99d7 100644 --- a/nymea-app/resources.qrc +++ b/nymea-app/resources.qrc @@ -234,5 +234,6 @@ ui/components/BigThingTile.qml ui/appsettings/LoggingCategories.qml ui/ConfigurationBase.qml + ui/devicepages/CleaningRobotThingPage.qml diff --git a/nymea-app/styles/energize/Button.qml b/nymea-app/styles/energize/Button.qml index e90bc513..2d6afc11 100644 --- a/nymea-app/styles/energize/Button.qml +++ b/nymea-app/styles/energize/Button.qml @@ -34,6 +34,7 @@ import QtQuick.Controls 2.2 import QtQuick.Controls.impl 2.2 import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material.impl 2.2 +import Nymea 1.0 T.Button { id: control diff --git a/nymea-app/styles/noir/Button.qml b/nymea-app/styles/noir/Button.qml index 276465e4..5a5298df 100644 --- a/nymea-app/styles/noir/Button.qml +++ b/nymea-app/styles/noir/Button.qml @@ -34,6 +34,7 @@ import QtQuick.Controls 2.2 import QtQuick.Controls.impl 2.2 import QtQuick.Controls.Material 2.2 import QtQuick.Controls.Material.impl 2.2 +import Nymea 1.0 T.Button { id: control diff --git a/nymea-app/ui/MainMenu.qml b/nymea-app/ui/MainMenu.qml index c6380c8f..7b1534b4 100644 --- a/nymea-app/ui/MainMenu.qml +++ b/nymea-app/ui/MainMenu.qml @@ -38,9 +38,9 @@ Drawer { spacing: app.margins Image { - Layout.preferredHeight: app.hugeIconSize + Layout.preferredHeight: Style.hugeIconSize // w : h = ss.w : ss.h - Layout.preferredWidth: app.hugeIconSize * sourceSize.width / sourceSize.height + Layout.preferredWidth: Style.hugeIconSize * sourceSize.width / sourceSize.height source: "qrc:/styles/%1/logo-wide.svg".arg(styleController.currentStyle) } diff --git a/nymea-app/ui/MainPage.qml b/nymea-app/ui/MainPage.qml index e120e726..53997172 100644 --- a/nymea-app/ui/MainPage.qml +++ b/nymea-app/ui/MainPage.qml @@ -613,8 +613,8 @@ Page { } } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: engine.jsonRpcClient.currentConnection.secure ? "../images/lock-closed.svg" : "../images/lock-open.svg" MouseArea { anchors.fill: parent diff --git a/nymea-app/ui/Nymea.qml b/nymea-app/ui/Nymea.qml index 5b5076c0..3f4c0ba7 100644 --- a/nymea-app/ui/Nymea.qml +++ b/nymea-app/ui/Nymea.qml @@ -68,11 +68,6 @@ ApplicationWindow { property int largeFont: 20 property int hugeFont: 40 - property int smallIconSize: 16 - property int iconSize: 24 - property int largeIconSize: 40 - property int hugeIconSize: 64 - property int delegateHeight: 60 readonly property bool landscape: app.width > app.height @@ -148,6 +143,7 @@ ApplicationWindow { "awning", "shutter", "blind", + "cleaningrobot", "garagedoor", "powersocket", "thermostat", @@ -383,6 +379,8 @@ ApplicationWindow { return Qt.resolvedUrl("images/notification.svg") case "barcodescanner": return Qt.resolvedUrl("images/qrcode.svg") + case "cleaningrobot": + return Qt.resolvedUrl("images/cleaning-robot.svg") default: console.warn("InterfaceToIcon: Unhandled interface", name) } diff --git a/nymea-app/ui/PushButtonAuthPage.qml b/nymea-app/ui/PushButtonAuthPage.qml index a60204e8..efc09614 100644 --- a/nymea-app/ui/PushButtonAuthPage.qml +++ b/nymea-app/ui/PushButtonAuthPage.qml @@ -75,7 +75,7 @@ Page { } Image { - Layout.preferredWidth: app.iconSize * 6 + Layout.preferredWidth: Style.iconSize * 6 Layout.preferredHeight: width source: "images/nymea-box-setup.svg" Layout.alignment: Qt.AlignHCenter diff --git a/nymea-app/ui/StyleBase.qml b/nymea-app/ui/StyleBase.qml index 9bbb7d3d..b9c570eb 100644 --- a/nymea-app/ui/StyleBase.qml +++ b/nymea-app/ui/StyleBase.qml @@ -19,10 +19,18 @@ Item { readonly property int smallMargins: 8 readonly property int margins: 16 + readonly property int bigMargins: 32 + readonly property int hugeMargins: 64 readonly property int smallDelegateHeight: 50 readonly property int delegateHeight: 60 + readonly property int smallIconSize: 16 + readonly property int iconSize: 24 + readonly property int bigIconSize: 32 + readonly property int largeIconSize: 40 + readonly property int hugeIconSize: 64 + // Note: Font files need to be provided in a "fonts" folder in the style property string fontFamily: "Ubuntu" @@ -80,4 +88,7 @@ Item { "totalEnergyProduced": "lightgreen", "currentPower": "deepskyblue", } + + readonly property color red: "#ad4754" + readonly property color white: "white" } diff --git a/nymea-app/ui/appsettings/CloudLoginPage.qml b/nymea-app/ui/appsettings/CloudLoginPage.qml index e82d2a34..e1c5adc3 100644 --- a/nymea-app/ui/appsettings/CloudLoginPage.qml +++ b/nymea-app/ui/appsettings/CloudLoginPage.qml @@ -95,7 +95,7 @@ SettingsPageBase { } BusyIndicator { running: AWSClient.awsDevices.busy - height: app.iconSize + height: Style.iconSize width: height } } diff --git a/nymea-app/ui/components/BrightnessSlider.qml b/nymea-app/ui/components/BrightnessSlider.qml index 28466a1e..7cf1de28 100644 --- a/nymea-app/ui/components/BrightnessSlider.qml +++ b/nymea-app/ui/components/BrightnessSlider.qml @@ -35,8 +35,8 @@ import "../utils" Item { id: root - implicitWidth: orientation == Qt.Horizontal ? 300 : app.hugeIconSize - implicitHeight: orientation == Qt.Horizontal ? app.hugeIconSize : 300 + implicitWidth: orientation == Qt.Horizontal ? 300 : Style.hugeIconSize + implicitHeight: orientation == Qt.Horizontal ? Style.hugeIconSize : 300 property Thing thing: null diff --git a/nymea-app/ui/components/ClosableArrowAnimation.qml b/nymea-app/ui/components/ClosableArrowAnimation.qml index cc8e170b..ea09329e 100644 --- a/nymea-app/ui/components/ClosableArrowAnimation.qml +++ b/nymea-app/ui/components/ClosableArrowAnimation.qml @@ -33,7 +33,7 @@ import Nymea 1.0 Item { id: arrows - width: app.iconSize * 2 + width: Style.iconSize * 2 height: parent.height * .6 clip: true visible: state !== "" @@ -56,8 +56,8 @@ Item { property: "y" duration: 500 easing.type: Easing.Linear - from: arrows.up ? app.iconSize : -app.iconSize - to: arrows.up ? -app.iconSize : app.iconSize + from: arrows.up ? Style.iconSize : -Style.iconSize + to: arrows.up ? -Style.iconSize : Style.iconSize loops: Animation.Infinite running: arrows.animationHack && (arrows.state === "opening" || arrows.state === "closing") } @@ -67,7 +67,7 @@ Item { width: parent.width Repeater { - model: arrows.height / app.iconSize + 1 + model: arrows.height / Style.iconSize + 1 ColorIcon { name: arrows.up ? "../images/up.svg" : "../images/down.svg" width: parent.width diff --git a/nymea-app/ui/components/ColorIcon.qml b/nymea-app/ui/components/ColorIcon.qml index 01af32e7..85dacdc7 100644 --- a/nymea-app/ui/components/ColorIcon.qml +++ b/nymea-app/ui/components/ColorIcon.qml @@ -35,10 +35,13 @@ import Nymea 1.0 Item { id: icon + width: size + height: size property string name property alias color: colorizedImage.outColor property int margins: 0 + property int size: Style.iconSize property alias status: image.status diff --git a/nymea-app/ui/components/ColorTemperaturePicker.qml b/nymea-app/ui/components/ColorTemperaturePicker.qml index 7c4b0178..3646aa42 100644 --- a/nymea-app/ui/components/ColorTemperaturePicker.qml +++ b/nymea-app/ui/components/ColorTemperaturePicker.qml @@ -5,8 +5,8 @@ import "../utils" Item { id: root - implicitWidth: orientation == Qt.Horizontal ? 300 : app.hugeIconSize - implicitHeight: orientation == Qt.Horizontal ? app.hugeIconSize : 300 + implicitWidth: orientation == Qt.Horizontal ? 300 : Style.hugeIconSize + implicitHeight: orientation == Qt.Horizontal ? Style.hugeIconSize : 300 property Thing thing: null diff --git a/nymea-app/ui/components/DatePicker.qml b/nymea-app/ui/components/DatePicker.qml index 5de471bd..1e94c090 100644 --- a/nymea-app/ui/components/DatePicker.qml +++ b/nymea-app/ui/components/DatePicker.qml @@ -41,8 +41,8 @@ ColumnLayout { RowLayout { Layout.fillWidth: true ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/back.svg" MouseArea { anchors.fill: parent @@ -59,8 +59,8 @@ ColumnLayout { horizontalAlignment: Text.AlignHCenter } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/next.svg" MouseArea { anchors.fill: parent diff --git a/nymea-app/ui/components/EmptyViewPlaceholder.qml b/nymea-app/ui/components/EmptyViewPlaceholder.qml index b37dbfcc..efcb92dc 100644 --- a/nymea-app/ui/components/EmptyViewPlaceholder.qml +++ b/nymea-app/ui/components/EmptyViewPlaceholder.qml @@ -64,11 +64,11 @@ ColumnLayout { } Image { id: image - Layout.preferredWidth: app.iconSize * 5 + Layout.preferredWidth: Style.iconSize * 5 Layout.preferredHeight: width Layout.alignment: Qt.AlignHCenter - sourceSize.width: app.iconSize * 5 - sourceSize.height: app.iconSize * 5 + sourceSize.width: Style.iconSize * 5 + sourceSize.height: Style.iconSize * 5 MouseArea { anchors.fill: parent onClicked: root.imageClicked(); diff --git a/nymea-app/ui/components/HeaderButton.qml b/nymea-app/ui/components/HeaderButton.qml index 92723c4d..99a3687c 100644 --- a/nymea-app/ui/components/HeaderButton.qml +++ b/nymea-app/ui/components/HeaderButton.qml @@ -30,14 +30,15 @@ import QtQuick 2.5 import QtQuick.Controls 2.1 +import Nymea 1.0 ToolButton { property alias imageSource: image.name property alias color: image.color contentItem: Item { - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize ColorIcon { id: image anchors.fill: parent diff --git a/nymea-app/ui/components/IconMenuItem.qml b/nymea-app/ui/components/IconMenuItem.qml index babc2fa8..c221db8c 100644 --- a/nymea-app/ui/components/IconMenuItem.qml +++ b/nymea-app/ui/components/IconMenuItem.qml @@ -31,6 +31,7 @@ import QtQuick 2.8 import QtQuick.Controls 2.1 import QtQuick.Layouts 1.3 +import Nymea 1.0 MenuItem { id: root @@ -41,7 +42,7 @@ MenuItem { spacing: app.margins ColorIcon { id: icon - Layout.preferredHeight: app.iconSize + Layout.preferredHeight: Style.iconSize Layout.preferredWidth: height } Label { diff --git a/nymea-app/ui/components/Imprint.qml b/nymea-app/ui/components/Imprint.qml index ec405368..b32c69ce 100644 --- a/nymea-app/ui/components/Imprint.qml +++ b/nymea-app/ui/components/Imprint.qml @@ -54,7 +54,7 @@ Item { Image { id: logo - Layout.preferredHeight: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 Layout.preferredWidth: height fillMode: Image.PreserveAspectFit source: "qrc:/styles/%1/logo.svg".arg(styleController.currentStyle) @@ -193,12 +193,12 @@ Item { spacing: app.margins Image { - Layout.preferredHeight: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 Layout.preferredWidth: height fillMode: Image.PreserveAspectFit source: "qrc:/ui/images/Built_with_Qt_RGB_logo_vertical.svg" - sourceSize.width: app.iconSize * 2 - sourceSize.height: app.iconSize * 2 + sourceSize.width: Style.iconSize * 2 + sourceSize.height: Style.iconSize * 2 } Label { diff --git a/nymea-app/ui/components/InfoPane.qml b/nymea-app/ui/components/InfoPane.qml index 882f5184..fea3589d 100644 --- a/nymea-app/ui/components/InfoPane.qml +++ b/nymea-app/ui/components/InfoPane.qml @@ -2,6 +2,7 @@ import QtQuick 2.0 import QtQuick.Controls 2.2 import QtQuick.Controls.Material 2.2 import QtQuick.Layouts 1.2 +import Nymea 1.0 InfoPaneBase { id: root @@ -30,7 +31,7 @@ InfoPaneBase { } ColorIcon { id: icon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height color: root.textColor visible: name.length > 0 diff --git a/nymea-app/ui/components/InfoPaneBase.qml b/nymea-app/ui/components/InfoPaneBase.qml index 04dfaad6..38c7607e 100644 --- a/nymea-app/ui/components/InfoPaneBase.qml +++ b/nymea-app/ui/components/InfoPaneBase.qml @@ -31,7 +31,7 @@ Item { Pane { anchors { left: parent.left; bottom: parent.bottom; right: parent.right } - Material.elevation: 2 +// Material.elevation: 2 leftPadding: 0 rightPadding: 0 bottomPadding: 0 diff --git a/nymea-app/ui/components/Led.qml b/nymea-app/ui/components/Led.qml index 3fc7a994..e0f118d3 100644 --- a/nymea-app/ui/components/Led.qml +++ b/nymea-app/ui/components/Led.qml @@ -33,7 +33,7 @@ import Nymea 1.0 Item { id: root - implicitHeight: app.iconSize * .8 + implicitHeight: Style.iconSize * .8 implicitWidth: height // TODO: Convert to enum once we have Qt 5.10 diff --git a/nymea-app/ui/components/MainPageTabButton.qml b/nymea-app/ui/components/MainPageTabButton.qml index b706caa0..5ee35d37 100644 --- a/nymea-app/ui/components/MainPageTabButton.qml +++ b/nymea-app/ui/components/MainPageTabButton.qml @@ -55,8 +55,8 @@ TabButton { verticalItemAlignment: Grid.AlignVCenter ColorIcon { - width: app.iconSize - height: app.iconSize + width: Style.iconSize + height: Style.iconSize name: root.iconSource color: root.checked ? Style.accentColor : Style.iconColor } diff --git a/nymea-app/ui/components/MainPageTile.qml b/nymea-app/ui/components/MainPageTile.qml index b4f8b141..e9e67dee 100644 --- a/nymea-app/ui/components/MainPageTile.qml +++ b/nymea-app/ui/components/MainPageTile.qml @@ -132,7 +132,7 @@ Item { ColorIcon { id: colorIcon anchors.centerIn: parent - height: app.largeIconSize + height: Style.largeIconSize width: height ColorIcon { id: fallbackIcon @@ -169,7 +169,7 @@ Item { Item { id: innerContent anchors { left: parent.left; bottom: parent.bottom; right: parent.right; margins: app.margins / 2 } - height: app.iconSize + app.margins * 2 + height: Style.iconSize + app.margins * 2 Material.foreground: Style.tileOverlayForegroundColor MouseArea { @@ -181,7 +181,7 @@ Item { id: quickAlertPane anchors { top: parent.top; right: parent.right; margins: app.margins } ColorIcon { - height: app.smallIconSize + height: Style.smallIconSize width: height name: "../images/system-update.svg" color: Style.accentColor @@ -189,21 +189,21 @@ Item { } ColorIcon { - height: app.smallIconSize + height: Style.smallIconSize width: height name: root.isWireless ? "../images/connections/nm-signal-00.svg" : "../images/connections/network-wired-offline.svg" color: root.disconnected ? "red" : "orange" visible: root.setupStatus == Thing.ThingSetupStatusComplete && (root.disconnected || (root.isWireless && root.signalStrength < 20 && root.signalStrength >= 0)) } ColorIcon { - height: app.smallIconSize + height: Style.smallIconSize width: height name: root.setupStatus === Thing.ThingSetupStatusFailed ? "../images/dialog-warning-symbolic.svg" : "../images/settings.svg" color: root.setupStatus === Thing.ThingSetupStatusFailed ? "red" : Style.tileForegroundColor visible: root.setupStatus === Thing.ThingSetupStatusFailed || root.setupStatus === Thing.ThingSetupStatusInProgress } ColorIcon { - height: app.smallIconSize + height: Style.smallIconSize width: height name: "../images/battery/battery-010.svg" visible: root.setupStatus == Thing.ThingSetupStatusComplete && root.batteryCritical diff --git a/nymea-app/ui/components/MeaDialog.qml b/nymea-app/ui/components/MeaDialog.qml index 797ea43e..fdc0a611 100644 --- a/nymea-app/ui/components/MeaDialog.qml +++ b/nymea-app/ui/components/MeaDialog.qml @@ -69,7 +69,7 @@ Dialog { spacing: app.margins ColorIcon { id: headerColorIcon - Layout.preferredHeight: app.hugeIconSize + Layout.preferredHeight: Style.hugeIconSize Layout.preferredWidth: height color: Style.accentColor visible: name.length > 0 diff --git a/nymea-app/ui/components/MediaControls.qml b/nymea-app/ui/components/MediaControls.qml index 9ffed03f..92a79369 100644 --- a/nymea-app/ui/components/MediaControls.qml +++ b/nymea-app/ui/components/MediaControls.qml @@ -36,7 +36,8 @@ import Nymea 1.0 RowLayout { id: root - implicitHeight: app.iconSize * (showExtendedControls ? 2 : 1) + app.margins + implicitHeight: Style.iconSize * (showExtendedControls ? 2 : 1) + app.margins + spacing: 0 property Thing thing: null @@ -58,8 +59,6 @@ RowLayout { } ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: height imageSource: "../images/media-playlist-shuffle.svg" longpressEnabled: false enabled: root.shuffleState !== null @@ -78,8 +77,7 @@ RowLayout { Item { Layout.fillWidth: true } ProgressButton { - Layout.preferredHeight: app.iconSize * (root.showExtendedControls ? 1.5 : 1) - Layout.preferredWidth: height + size: Style.iconSize * (root.showExtendedControls ? 1.5 : 1) imageSource: "../images/media-skip-backward.svg" longpressImageSource: "../images/media-seek-backward.svg" longpressEnabled: root.thing.thingClass.actionTypes.findByName("fastRewind") !== null @@ -97,8 +95,7 @@ RowLayout { } Item { Layout.fillWidth: true } ProgressButton { - Layout.preferredHeight: app.iconSize * (root.showExtendedControls ? 2 : 1) - Layout.preferredWidth: height + size: Style.iconSize * (root.showExtendedControls ? 2 : 1) imageSource: root.playbackState && root.playbackState.value === "Playing" ? "../images/media-playback-pause.svg" : "../images/media-playback-start.svg" longpressImageSource: "../images/media-playback-stop.svg" longpressEnabled: root.playbackState && root.playbackState.value !== "Stopped" @@ -118,8 +115,7 @@ RowLayout { } Item { Layout.fillWidth: true } ProgressButton { - Layout.preferredHeight: app.iconSize * (root.showExtendedControls ? 1.5 : 1) - Layout.preferredWidth: height + size: Style.iconSize * (root.showExtendedControls ? 1.5 : 1) imageSource: "../images/media-skip-forward.svg" longpressImageSource: "../images/media-seek-forward.svg" longpressEnabled: root.thing.thingClass.actionTypes.findByName("fastForward") !== null @@ -137,8 +133,7 @@ RowLayout { Item { Layout.fillWidth: true } ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: height + size: Style.iconSize imageSource: root.repeatState.value === "One" ? "../images/media-playlist-repeat-one.svg" : "../images/media-playlist-repeat.svg" color: root.repeatState.value === "None" ? root.iconColor : Style.accentColor longpressEnabled: false diff --git a/nymea-app/ui/components/MediaPlayer.qml b/nymea-app/ui/components/MediaPlayer.qml index 248021e1..3b9f23f3 100644 --- a/nymea-app/ui/components/MediaPlayer.qml +++ b/nymea-app/ui/components/MediaPlayer.qml @@ -165,8 +165,6 @@ Item { } } ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize longpressEnabled: false imageSource: "../images/like.svg" visible: root.likeState !== null @@ -225,10 +223,7 @@ Item { } RowLayout { - spacing: app.margins ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize longpressEnabled: false visible: root.thing.thingClass.browsable imageSource: "../images/folder-symbolic.svg" @@ -240,18 +235,15 @@ Item { } } ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize longpressEnabled: false visible: root.hasNavigationPatd imageSource: "../images/navigationpad.svg" onClicked: pageStack.push(navigationPadPage) } RowLayout { + spacing: 0 ProgressButton { id: inputSourceButton - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize longpressEnabled: false visible: root.inputSourceState !== null imageSource: "../images/state-in.svg" @@ -270,9 +262,8 @@ Item { } } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize * 3 visible: root.ambeoModeState !== null + Layout.preferredWidth: Style.iconSize * 3 name: "../images/media/ambeo.svg" color: root.ambeoModeState && root.ambeoModeState.value !== "Off" ? Style.accentColor : Style.iconColor MouseArea { @@ -284,8 +275,6 @@ Item { } } ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize longpressEnabled: false visible: root.nightModeState !== null imageSource: "../images/weathericons/weather-clear-night.svg" @@ -293,8 +282,6 @@ Item { onClicked: d.pendingCallId = engine.thingManager.executeAction(root.thing.id, root.nightModeState.stateTypeId, [{paramTypeId: root.nightModeState.stateTypeId, value: !root.nightModeState.value}]) } ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize longpressEnabled: false visible: root.equalizerPresetState !== null imageSource: "../images/media/equalizer.svg" @@ -305,8 +292,6 @@ Item { } ProgressButton { id: volumeButton - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize visible: root.hasVolumeControl longpressEnabled: false imageSource: root.muteState && root.muteState.value === true ? @@ -394,7 +379,7 @@ Item { NavigationPad { Layout.fillWidth: true; Layout.fillHeight: true; thing: root.thing } MediaControls { Layout.fillWidth: true; thing: root.thing } - ShuffleRepeatVolumeControl { Layout.fillWidth: true; Layout.fillHeight: false; Layout.preferredHeight: app.iconSize; thing: root.thing } + ShuffleRepeatVolumeControl { Layout.fillWidth: true; Layout.fillHeight: false; Layout.preferredHeight: Style.iconSize; thing: root.thing } } } } @@ -545,8 +530,8 @@ Item { id: ambeoModeDialog standardButtons: Dialog.NoButton ColorIcon { - Layout.preferredHeight: app.hugeIconSize - Layout.preferredWidth: app.hugeIconSize * 3 + Layout.preferredHeight: Style.hugeIconSize + Layout.preferredWidth: Style.hugeIconSize * 3 Layout.alignment: Qt.AlignHCenter name: "../images/media/ambeo.svg" color: Style.accentColor diff --git a/nymea-app/ui/components/NavigationPad.qml b/nymea-app/ui/components/NavigationPad.qml index 327249ae..0d2ae3e2 100644 --- a/nymea-app/ui/components/NavigationPad.qml +++ b/nymea-app/ui/components/NavigationPad.qml @@ -65,16 +65,16 @@ Item { KeypadButton { id: backButton anchors { left: parent.left; top: parent.top; margins: parent.width * .1 } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize imageSource: "../images/back.svg" Item { id: backButtonArea; anchors.centerIn: parent; width: pane.width / 4; height: width; rotation: 45; } } KeypadButton { id: menuButton anchors { right: parent.right; top: parent.top; margins: parent.width * .1 } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize visible: root.thing.thingClass.interfaces.indexOf("extendednavigationpad") >= 0 imageSource: "../images/navigation-menu.svg" Item { id: menuButtonArea; anchors.centerIn: parent; width: pane.width / 4; height: width; rotation: 45 } @@ -82,8 +82,8 @@ Item { KeypadButton { id: homeButton anchors { left: parent.left; bottom: parent.bottom; margins: parent.width * .1 } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize imageSource: "../images/home.svg" visible: root.thing.thingClass.interfaces.indexOf("extendednavigationpad") >= 0 Item { id: homeButtonArea; anchors.centerIn: parent; width: pane.width / 4; height: width; rotation: 45 } @@ -91,8 +91,8 @@ Item { KeypadButton { id: infoButton anchors { right: parent.right; bottom: parent.bottom; margins: parent.width * .1 } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize imageSource: "../images/info.svg" visible: root.thing.thingClass.interfaces.indexOf("extendednavigationpad") >= 0 Item { id: infoButtonArea; anchors.centerIn: parent; width: pane.width / 4; height: width; rotation: 45 } @@ -100,8 +100,8 @@ Item { Rectangle { id: enterButton anchors.centerIn: parent - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize radius: width / 2 border.color: t.running ? Style.accentColor : "#808080" Behavior on border.color { ColorAnimation { duration: 200 } } @@ -123,7 +123,7 @@ Item { Column { height: parent.height * .8 - width: app.iconSize + width: Style.iconSize anchors.centerIn: parent rotation: index * 90 @@ -161,7 +161,7 @@ Item { id: childRepeater model: 3 KeypadButton { - height: app.iconSize + height: Style.iconSize width: height imageSource: "../images/up.svg" } diff --git a/nymea-app/ui/components/NymeaHeader.qml b/nymea-app/ui/components/NymeaHeader.qml index f591586f..95892ade 100644 --- a/nymea-app/ui/components/NymeaHeader.qml +++ b/nymea-app/ui/components/NymeaHeader.qml @@ -119,7 +119,7 @@ Item { anchors { left: parent.left; top: parent.top; right: parent.right; leftMargin: app.margins; rightMargin: app.margins } Item { Layout.fillWidth: true - height: app.iconSize + height: Style.iconSize } Label { @@ -129,7 +129,7 @@ Item { } ColorIcon { - height: app.iconSize / 2 + height: Style.iconSize / 2 width: height visible: true color: "white" diff --git a/nymea-app/ui/components/NymeaItemDelegate.qml b/nymea-app/ui/components/NymeaItemDelegate.qml index 5dfc4bb8..7503693b 100644 --- a/nymea-app/ui/components/NymeaItemDelegate.qml +++ b/nymea-app/ui/components/NymeaItemDelegate.qml @@ -53,7 +53,7 @@ ItemDelegate { property string iconName property string thumbnail - property int iconSize: app.iconSize + property int iconSize: Style.iconSize property color iconColor: Style.accentColor property alias secondaryIconName: secondaryIcon.name property alias secondaryIconColor: secondaryIcon.color @@ -154,7 +154,7 @@ ItemDelegate { ColorIcon { id: secondaryIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height visible: name.length > 0 MouseArea { @@ -168,7 +168,7 @@ ItemDelegate { ColorIcon { id: tertiaryIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height visible: name.length > 0 MouseArea { @@ -182,7 +182,7 @@ ItemDelegate { ColorIcon { id: progressionIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height name: "../images/next.svg" visible: root.progressive diff --git a/nymea-app/ui/components/NymeaSwipeDelegate.qml b/nymea-app/ui/components/NymeaSwipeDelegate.qml index b30f4284..a955ed4a 100644 --- a/nymea-app/ui/components/NymeaSwipeDelegate.qml +++ b/nymea-app/ui/components/NymeaSwipeDelegate.qml @@ -49,7 +49,7 @@ SwipeDelegate { property string iconName property string thumbnail - property int iconSize: app.iconSize + property int iconSize: Style.iconSize property color iconColor: Style.accentColor property alias secondaryIconName: secondaryIcon.name property alias secondaryIconColor: secondaryIcon.color @@ -150,7 +150,7 @@ SwipeDelegate { ColorIcon { id: secondaryIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height visible: name.length > 0 MouseArea { @@ -164,7 +164,7 @@ SwipeDelegate { ColorIcon { id: tertiaryIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height visible: name.length > 0 MouseArea { @@ -178,7 +178,7 @@ SwipeDelegate { ColorIcon { id: progressionIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height name: "../images/next.svg" visible: root.progressive diff --git a/nymea-app/ui/components/PasswordTextField.qml b/nymea-app/ui/components/PasswordTextField.qml index a8d5dd67..86c95409 100644 --- a/nymea-app/ui/components/PasswordTextField.qml +++ b/nymea-app/ui/components/PasswordTextField.qml @@ -110,8 +110,8 @@ ColumnLayout { } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/eye.svg" color: root.hiddenPassword ? Style.iconColor : Style.accentColor MouseArea { diff --git a/nymea-app/ui/components/ProgressButton.qml b/nymea-app/ui/components/ProgressButton.qml index dd42ba26..52fffa28 100644 --- a/nymea-app/ui/components/ProgressButton.qml +++ b/nymea-app/ui/components/ProgressButton.qml @@ -34,23 +34,28 @@ import Nymea 1.0 Item { id: root - implicitHeight: app.iconSize - implicitWidth: app.iconSize + implicitHeight: size + Style.smallMargins * 2 + implicitWidth: size + Style.smallMargins * 2 + + // FIXME: enums not available in < 5.10 + property string mode: "transparent" // "normal" "highlight" "destructive" "transparent" property string imageSource property string longpressImageSource: imageSource property bool repeat: false property alias color: icon.color + property alias backgroundColor: background.color property bool longpressEnabled: true + property int size: Style.iconSize + signal clicked(); signal longpressed(); MouseArea { id: buttonDelegate anchors.fill: parent - anchors.margins: -app.margins / 2 hoverEnabled: true property bool longpressed: false @@ -75,7 +80,6 @@ Item { } buttonDelegate.longpressed = false } - } NumberAnimation { @@ -98,20 +102,36 @@ Item { } Rectangle { + id: background anchors.fill: parent - anchors.margins: -app.margins / 2 radius: width / 2 - color: Style.foregroundColor - opacity: buttonDelegate.pressed || buttonDelegate.containsMouse ? .08 : 0 - Behavior on opacity { - NumberAnimation { duration: 200 } + color: { + switch (root.mode) { + case "highlight": + return Style.accentColor; + case "destructive": + return Style.red; + case "normal": + return Style.tileOverlayColor; + default: + return "transparent" + } + } + + Rectangle { + anchors.fill: parent + radius: width / 2 + color: Style.foregroundColor + opacity: buttonDelegate.pressed || buttonDelegate.containsMouse ? .08 : 0 + Behavior on opacity { + NumberAnimation { duration: 200 } + } } } Canvas { id: canvas anchors.fill: parent - anchors.margins: -app.margins / 2 property real progress: 0 property bool inverted: false @@ -154,7 +174,20 @@ Item { ColorIcon { id: icon anchors.fill: parent + anchors.margins: Style.smallMargins name: buttonDelegate.longpressed ? root.longpressImageSource : root.imageSource + color: { + switch (root.mode) { + case "highlight": + return Style.white; + case "destructive": + return Style.white; + case "normal": + return Style.iconColor; + default: + return Style.iconColor + } + } } } diff --git a/nymea-app/ui/components/RemoveThingMethodDialog.qml b/nymea-app/ui/components/RemoveThingMethodDialog.qml index 8d4e5390..98091761 100644 --- a/nymea-app/ui/components/RemoveThingMethodDialog.qml +++ b/nymea-app/ui/components/RemoveThingMethodDialog.qml @@ -55,11 +55,11 @@ Dialog { ThinDivider {} ListView { Layout.fillWidth: true - Layout.preferredHeight: app.iconSize * Math.min(count, 5) + Layout.preferredHeight: Style.iconSize * Math.min(count, 5) model: rulesList interactive: contentHeight > height delegate: Label { - height: app.iconSize + height: Style.iconSize width: parent.width elide: Text.ElideRight text: engine.ruleManager.rules.getRule(modelData).name diff --git a/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml b/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml index 92867a38..f98585e3 100644 --- a/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml +++ b/nymea-app/ui/components/ShuffleRepeatVolumeControl.qml @@ -47,7 +47,7 @@ RowLayout { property State muteState: thing.stateByName("mute") Item { - Layout.preferredHeight: app.iconSize + Layout.preferredHeight: Style.iconSize Layout.fillWidth: true visible: root.repeatState !== null @@ -68,7 +68,7 @@ RowLayout { } Item { - Layout.preferredHeight: app.iconSize + Layout.preferredHeight: Style.iconSize Layout.fillWidth: true visible: root.shuffleState !== null diff --git a/nymea-app/ui/components/ShutterControls.qml b/nymea-app/ui/components/ShutterControls.qml index f0ef5571..5fe2a61c 100644 --- a/nymea-app/ui/components/ShutterControls.qml +++ b/nymea-app/ui/components/ShutterControls.qml @@ -36,12 +36,15 @@ import Nymea 1.0 RowLayout { id: root + spacing: 0 property Thing thing: null readonly property State openState: thing.stateByName("state") readonly property bool canStop: thing && thing.thingClass.actionTypes.findByName("stop") property bool invert: false + property bool backgroundEnabled: false + property int size: Style.iconSize signal activated(string button); @@ -50,6 +53,8 @@ RowLayout { ProgressButton { longpressEnabled: false imageSource: root.invert ? "../images/down.svg" : "../images/up.svg" + mode: root.backgroundEnabled ? "normal" : "transparent" + size: root.size color: root.openState && root.openState.value === "opening" ? Material.accent : Style.iconColor onClicked: { engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("open").id) @@ -62,6 +67,8 @@ RowLayout { ProgressButton { visible: root.canStop longpressEnabled: false + mode: root.backgroundEnabled ? "normal" : "transparent" + size: root.size imageSource: "../images/media-playback-stop.svg" onClicked: { engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("stop").id) @@ -74,6 +81,8 @@ RowLayout { ProgressButton { imageSource: root.invert ? "../images/up.svg" : "../images/down.svg" longpressEnabled: false + mode: root.backgroundEnabled ? "normal" : "transparent" + size: root.size color: root.openState && root.openState.value === "closing" ? Material.accent : Style.iconColor onClicked: { engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("close").id) diff --git a/nymea-app/ui/components/ThingStatusIcons.qml b/nymea-app/ui/components/ThingStatusIcons.qml index 953730e1..a2837e88 100644 --- a/nymea-app/ui/components/ThingStatusIcons.qml +++ b/nymea-app/ui/components/ThingStatusIcons.qml @@ -19,7 +19,7 @@ RowLayout { UpdateStatusIcon { id: updateStatusIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height thing: root.thing visible: setupStatusIcon.setupStatus == Thing.ThingSetupStatusComplete && connectionStatusIcon.isConnected && (updateAvailable || updateRunning) @@ -57,7 +57,7 @@ RowLayout { } BatteryStatusIcon { id: batteryStatusIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height thing: root.thing visible: root.thing.setupStatus == Thing.ThingSetupStatusComplete && (hasBatteryLevel || isCritical) @@ -86,7 +86,7 @@ RowLayout { } ConnectionStatusIcon { id: connectionStatusIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height thing: root.thing visible: root.thing.setupStatus == Thing.ThingSetupStatusComplete && (hasSignalStrength || !isConnected) @@ -115,7 +115,7 @@ RowLayout { } SetupStatusIcon { id: setupStatusIcon - Layout.preferredHeight: app.smallIconSize + Layout.preferredHeight: Style.smallIconSize Layout.preferredWidth: height thing: root.thing visible: setupFailed || setupInProgress diff --git a/nymea-app/ui/components/UpdateRunningOverlay.qml b/nymea-app/ui/components/UpdateRunningOverlay.qml index eaffcb60..ce638d12 100644 --- a/nymea-app/ui/components/UpdateRunningOverlay.qml +++ b/nymea-app/ui/components/UpdateRunningOverlay.qml @@ -49,7 +49,7 @@ Rectangle { width: parent.width ColorIcon { - height: app.iconSize * 3 + height: Style.iconSize * 3 width: height Layout.alignment: Qt.AlignHCenter name: Qt.resolvedUrl("../images/system-update.svg") diff --git a/nymea-app/ui/connection/CertificateDialog.qml b/nymea-app/ui/connection/CertificateDialog.qml index 2ebb4477..96049f00 100644 --- a/nymea-app/ui/connection/CertificateDialog.qml +++ b/nymea-app/ui/connection/CertificateDialog.qml @@ -54,7 +54,7 @@ Dialog { Layout.fillWidth: true spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 Layout.preferredWidth: height name: "../images/lock-closed.svg" color: Style.accentColor diff --git a/nymea-app/ui/connection/ConnectPage.qml b/nymea-app/ui/connection/ConnectPage.qml index 6e7138c9..97c0b150 100644 --- a/nymea-app/ui/connection/ConnectPage.qml +++ b/nymea-app/ui/connection/ConnectPage.qml @@ -291,7 +291,7 @@ Page { anchors { left: parent.left; right: parent.right; top: parent.top; margins: app.margins } spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 Layout.preferredWidth: height name: "../images/info.svg" color: Style.accentColor diff --git a/nymea-app/ui/connection/ConnectingPage.qml b/nymea-app/ui/connection/ConnectingPage.qml index ae9f9068..a664adb1 100644 --- a/nymea-app/ui/connection/ConnectingPage.qml +++ b/nymea-app/ui/connection/ConnectingPage.qml @@ -43,7 +43,7 @@ Page { ColorIcon { anchors { top: parent.top; right: parent.right; margins: app.margins } - height: app.iconSize + height: Style.iconSize width: height name: "../images/logs.svg" visible: settings.showHiddenOptions && AppLogController.enabled diff --git a/nymea-app/ui/connection/LoginPage.qml b/nymea-app/ui/connection/LoginPage.qml index 6f7a8788..a2b9ac87 100644 --- a/nymea-app/ui/connection/LoginPage.qml +++ b/nymea-app/ui/connection/LoginPage.qml @@ -93,8 +93,8 @@ Page { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize * 2 - Layout.preferredWidth: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 + Layout.preferredWidth: Style.iconSize * 2 name: "../images/lock-closed.svg" color: Style.accentColor } diff --git a/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml b/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml index b1edc04e..7a8b1463 100644 --- a/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml +++ b/nymea-app/ui/connection/wifisetup/BluetoothDiscoveryPage.qml @@ -224,7 +224,7 @@ Page { text: qsTr("After having installed the nymea community image to your Raspberry Pi, all you need to do is to plug it into a power socket. Note that the Wireless setup will only be available if the Raspberry Pi is not connected to a wired network.") } Image { - Layout.preferredWidth: app.iconSize * 8 + Layout.preferredWidth: Style.iconSize * 8 Layout.preferredHeight: width * 540 / 800 sourceSize.width: 800 sourceSize.height: 540 @@ -249,7 +249,7 @@ Page { text: qsTr("If you have a %1 box, plug it into a power socket and wait for it to be booted. Once the LED pulses slowly, press the button for 3 seconds until the LED changes.").arg(Configuration.systemName) } Image { - Layout.preferredWidth: app.iconSize * 5 + Layout.preferredWidth: Style.iconSize * 5 Layout.preferredHeight: width Layout.bottomMargin: app.margins sourceSize.width: width diff --git a/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml b/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml index adfb6e24..915dba6a 100644 --- a/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml +++ b/nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml @@ -184,8 +184,8 @@ Page { } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/eye.svg" color: passwordTextField.showPassword ? Style.accentColor : Style.iconColor MouseArea { diff --git a/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml b/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml index 7fb37833..25340696 100644 --- a/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml +++ b/nymea-app/ui/connection/wifisetup/WirelessSetupPage.qml @@ -109,7 +109,7 @@ Page { anchors { left: parent.left; top: parent.top; right: parent.right } spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 Layout.preferredWidth: height Layout.alignment: Qt.AlignCenter name: "../images/tick.svg" diff --git a/nymea-app/ui/customviews/GarageController.qml b/nymea-app/ui/customviews/GarageController.qml index 27912478..8c70e1aa 100644 --- a/nymea-app/ui/customviews/GarageController.qml +++ b/nymea-app/ui/customviews/GarageController.qml @@ -35,65 +35,70 @@ Item { columnSpacing: 0 rowSpacing: 0 - ColorIcon { + Item { id: shutterImage Layout.preferredWidth: app.landscape ? - Math.min(parent.width - shutterControlsContainer.minimumWidth, parent.height) - app.margins + Math.min(parent.width - shutterControlsContainer.minimumWidth, parent.height) : Math.min(Math.min(parent.width, 500), parent.height - shutterControlsContainer.minimumHeight) Layout.preferredHeight: width - Layout.alignment: Qt.AlignHCenter - property string currentImage: { - if (root.isExtended) { - return NymeaUtils.pad(Math.round(root.percentageState.value / 10), 2) + "0" - } - if (root.intermediatePositionStateType) { - return root.stateState.value === "closed" ? "100" - : root.intermediatePositionState.value === false ? "000" : "050" - } - return "100" - } - name: "../images/garage/garage-" + currentImage + ".svg" - Item { - id: arrows + ColorIcon { anchors.centerIn: parent - width: app.iconSize * 2 - height: parent.height * .6 - clip: true - visible: root.stateStateType && (root.stateState.value === "opening" || root.stateState.value === "closing") - property bool up: root.stateState && root.stateState.value === "opening" - - // NumberAnimation doesn't reload to/from while it's running. If we switch from closing to opening or vice versa - // we need to somehow stop and start the animation - property bool animationHack: true - onAnimationHackChanged: { - if (!animationHack) hackTimer.start(); + size: Math.min(parent.height, parent.width) - Style.hugeMargins * 2 + property string currentImage: { + if (root.isExtended) { + return NymeaUtils.pad(Math.round(root.percentageState.value / 10), 2) + "0" + } + if (root.intermediatePositionStateType) { + return root.stateState.value === "closed" ? "100" + : root.intermediatePositionState.value === false ? "000" : "050" + } + return "100" } - Timer { id: hackTimer; interval: 1; onTriggered: arrows.animationHack = true } - Connections { target: root.stateState; onValueChanged: arrows.animationHack = false } + name: "../images/garage/garage-" + currentImage + ".svg" - NumberAnimation { - target: arrowColumn - property: "y" - duration: 500 - easing.type: Easing.Linear - from: arrows.up ? app.iconSize : -app.iconSize - to: arrows.up ? -app.iconSize : app.iconSize - loops: Animation.Infinite - running: arrows.animationHack && root.stateState && (root.stateState.value === "opening" || root.stateState.value === "closing") - } - Column { - id: arrowColumn - width: parent.width + Item { + id: arrows + anchors.centerIn: parent + width: Style.iconSize * 2 + height: parent.height * .6 + clip: true + visible: root.stateStateType && (root.stateState.value === "opening" || root.stateState.value === "closing") + property bool up: root.stateState && root.stateState.value === "opening" - Repeater { - model: arrows.height / app.iconSize + 1 - ColorIcon { - name: arrows.up ? "../images/up.svg" : "../images/down.svg" - width: parent.width - height: width - color: Style.accentColor + // NumberAnimation doesn't reload to/from while it's running. If we switch from closing to opening or vice versa + // we need to somehow stop and start the animation + property bool animationHack: true + onAnimationHackChanged: { + if (!animationHack) hackTimer.start(); + } + Timer { id: hackTimer; interval: 1; onTriggered: arrows.animationHack = true } + Connections { target: root.stateState; onValueChanged: arrows.animationHack = false } + + NumberAnimation { + target: arrowColumn + property: "y" + duration: 500 + easing.type: Easing.Linear + from: arrows.up ? Style.iconSize : -Style.iconSize + to: arrows.up ? -Style.iconSize : Style.iconSize + loops: Animation.Infinite + running: arrows.animationHack && root.stateState && (root.stateState.value === "opening" || root.stateState.value === "closing") + } + + Column { + id: arrowColumn + width: parent.width + + Repeater { + model: arrows.height / Style.iconSize + 1 + ColorIcon { + name: arrows.up ? "../images/up.svg" : "../images/down.svg" + width: parent.width + height: width + color: Style.accentColor + } } } } @@ -105,8 +110,8 @@ Item { Layout.fillWidth: true Layout.minimumWidth: minimumWidth Layout.fillHeight: true - property int minimumWidth: app.iconSize * 10 - property int minimumHeight: app.iconSize * 2.5 + property int minimumWidth: Style.iconSize * 10 + property int minimumHeight: Style.iconSize * 2.5 ProgressButton { anchors.centerIn: parent @@ -125,7 +130,9 @@ Item { thing: root.thing width: parent.width anchors.centerIn: parent - spacing: (parent.width - app.iconSize*2*children.length) / (children.length - 1) + backgroundEnabled: true + size: Style.bigIconSize + spacing: (parent.width - Style.iconSize*2*children.length) / (children.length - 1) visible: !root.isImpulseBased } } diff --git a/nymea-app/ui/customviews/GenericTypeGraph.qml b/nymea-app/ui/customviews/GenericTypeGraph.qml index 303eb304..93420888 100644 --- a/nymea-app/ui/customviews/GenericTypeGraph.qml +++ b/nymea-app/ui/customviews/GenericTypeGraph.qml @@ -76,7 +76,7 @@ Item { ChartView { id: chartView anchors.fill: parent - margins.top: app.iconSize + app.margins + margins.top: Style.iconSize + app.margins margins.bottom: app.margins / 2 margins.left: 0 margins.right: 0 @@ -95,8 +95,8 @@ Item { anchors { left: parent.left; top: parent.top; right: parent.right; topMargin: app.margins / 2; leftMargin: app.margins * 1.5; rightMargin: app.margins } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: root.iconSource visible: root.iconSource.length > 0 color: root.color diff --git a/nymea-app/ui/customviews/ThermostatController.qml b/nymea-app/ui/customviews/ThermostatController.qml index 19a0beb8..09b0c842 100644 --- a/nymea-app/ui/customviews/ThermostatController.qml +++ b/nymea-app/ui/customviews/ThermostatController.qml @@ -164,7 +164,7 @@ Item { } ColorIcon { - width: app.largeIconSize + width: Style.largeIconSize height: width anchors { bottom: canvas.bottom; horizontalCenter: canvas.horizontalCenter } name: root.heatingOnState && root.heatingOnState.value === true diff --git a/nymea-app/ui/customviews/WeatherView.qml b/nymea-app/ui/customviews/WeatherView.qml index 8d09b53f..afb36504 100644 --- a/nymea-app/ui/customviews/WeatherView.qml +++ b/nymea-app/ui/customviews/WeatherView.qml @@ -61,7 +61,7 @@ Item { Layout.fillWidth: true Layout.preferredHeight: mainImageSize - property int mainImageSize: app.iconSize * 2 + property int mainImageSize: Style.iconSize * 2 Item { Layout.fillWidth: true @@ -72,7 +72,7 @@ Item { columns: 2 ColorIcon { name: "../images/sensors/temperature.svg" - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: width color: app.interfaceToColor("temperaturesensor") } @@ -83,7 +83,7 @@ Item { } ColorIcon { name: "../images/weathericons/humidity.svg" - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: width color: app.interfaceToColor("humiditysensor") } @@ -111,7 +111,7 @@ Item { anchors.centerIn: parent ColorIcon { name: "../images/sensors/pressure.svg" - width: app.iconSize + width: Style.iconSize height: width color: app.interfaceToColor("pressuresensor") } @@ -121,7 +121,7 @@ Item { } ColorIcon { name: "../images/weathericons/wind.svg" - width: app.iconSize + width: Style.iconSize height: width color: app.interfaceToColor("windspeedsensor") } diff --git a/nymea-app/ui/delegates/InterfaceTile.qml b/nymea-app/ui/delegates/InterfaceTile.qml index e42ee63e..980531a9 100644 --- a/nymea-app/ui/delegates/InterfaceTile.qml +++ b/nymea-app/ui/delegates/InterfaceTile.qml @@ -269,6 +269,7 @@ MainPageTile { RowLayout { Layout.fillWidth: true + spacing: 0 Item { Layout.fillWidth: true; Layout.fillHeight: true } @@ -678,8 +679,8 @@ MainPageTile { spacing: app.margins / 2 ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: sensorsRoot.currentSensor >= 0 && sensorsRoot.shownSensors.length > sensorsRoot.currentSensor ? app.interfaceToIcon(sensorsRoot.shownSensors[sensorsRoot.currentSensor].ifaceName) : "" color: sensorsRoot.currentSensor >= 0 && sensorsRoot.shownSensors.length > sensorsRoot.currentSensor ? app.interfaceToColor(sensorsRoot.shownSensors[sensorsRoot.currentSensor].ifaceName) : Style.iconColor } @@ -702,7 +703,7 @@ MainPageTile { elide: Text.ElideRight } Led { - Layout.preferredHeight: app.iconSize * .5 + Layout.preferredHeight: Style.iconSize * .5 Layout.preferredWidth: height state: visible && sensorsRoot.thing.states.getState(sensorsRoot.shownStateType.id).value === true ? "on" : "off" visible: sensorsRoot.shownStateType && sensorsRoot.shownStateType.type.toLowerCase() === "bool" diff --git a/nymea-app/ui/delegates/ThingTile.qml b/nymea-app/ui/delegates/ThingTile.qml index 6e22fcc9..3d7d1d5b 100644 --- a/nymea-app/ui/delegates/ThingTile.qml +++ b/nymea-app/ui/delegates/ThingTile.qml @@ -109,7 +109,7 @@ MainPageTile { } ItemDelegate { - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: width Layout.rightMargin: app.margins / 2 Layout.alignment: Qt.AlignVCenter @@ -213,7 +213,7 @@ MainPageTile { Item { Layout.fillHeight: true; Layout.fillWidth: true } ColorIcon { - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: width Layout.alignment: Qt.AlignVCenter color: app.interfaceToColor(sensorsRoot.shownInterfaces[sensorsRoot.currentStateIndex].iface) diff --git a/nymea-app/ui/delegates/statedelegates/ColorDelegate.qml b/nymea-app/ui/delegates/statedelegates/ColorDelegate.qml index 010166d2..1c8b0ad5 100644 --- a/nymea-app/ui/delegates/statedelegates/ColorDelegate.qml +++ b/nymea-app/ui/delegates/statedelegates/ColorDelegate.qml @@ -37,8 +37,8 @@ import "../../components" Item { id: colorComponentItem - implicitWidth: app.iconSize * 2 - implicitHeight: app.iconSize + implicitWidth: Style.iconSize * 2 + implicitHeight: Style.iconSize property bool writable: false property var value signal changed(var value) diff --git a/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml b/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml index f04382d8..3ed3c549 100644 --- a/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml +++ b/nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml @@ -118,8 +118,8 @@ ThingsListPageBase { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize color: itemDelegate.movingState && itemDelegate.movingState.value === true ? Style.accentColor : Style.iconColor diff --git a/nymea-app/ui/devicelistpages/GarageThingsListPage.qml b/nymea-app/ui/devicelistpages/GarageThingsListPage.qml index 5b3431f5..ea2c0809 100644 --- a/nymea-app/ui/devicelistpages/GarageThingsListPage.qml +++ b/nymea-app/ui/devicelistpages/GarageThingsListPage.qml @@ -30,21 +30,27 @@ import QtQuick 2.5 import QtQuick.Controls 2.1 -import QtQuick.Controls.Material 2.1 import QtQuick.Layouts 1.1 -import QtGraphicalEffects 1.0 import Nymea 1.0 import "../components" +import "../delegates" ThingsListPageBase { id: root - property string iconBasename: "../images/garage/garage" - header: NymeaHeader { - id: header - onBackPressed: pageStack.pop() - text: qsTr("Garage doors") + text: { + if (root.shownInterfaces.length === 1) { + return qsTr("My %1").arg(app.interfaceToString(root.shownInterfaces[0])) + } else if (root.shownInterfaces.length > 1 || root.hiddenInterfaces.length > 0) { + return qsTr("My things") + } + return qsTr("All my things") + } + + onBackPressed: { + pageStack.pop() + } } Flickable { @@ -78,23 +84,17 @@ ThingsListPageBase { } } - property State movingState: thing.stateByName("moving") - property State percentageState: thing.stateByName("percentage") - - readonly property bool isImpulseBased: thing.thingClass.interfaces.indexOf("impulsegaragedoor") >= 0 + property State connectedState: thing.stateByName("connected") + property State powerState: thing.stateByName("power") contentItem: RowLayout { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize - color: itemDelegate.movingState && itemDelegate.movingState.value === true - ? Style.accentColor - : Style.iconColor - name: itemDelegate.percentageState - ? root.iconBasename + "-" + app.pad(Math.round(itemDelegate.percentageState.value / 10) * 10, 3) + ".svg" - : root.iconBasename + "-050.svg" + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize + name: app.interfacesToIcon(itemDelegate.thing.thingClass.interfaces) + color: itemDelegate.powerState && itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor } Label { @@ -107,29 +107,6 @@ ThingsListPageBase { ThingStatusIcons { thing: itemDelegate.thing } - - ShutterControls { - id: shutterControls - Layout.fillWidth: false - height: parent.height - thing: itemDelegate.thing - invert: root.invertControls - visible: !itemDelegate.isImpulseBased - enabled: itemDelegate.isEnabled - } - ProgressButton { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: height - longpressEnabled: false - imageSource: "../images/closable-move.svg" - visible: itemDelegate.isImpulseBased - enabled: itemDelegate.isEnabled - onClicked: { - var actionTypeId = itemDelegate.thing.thingClass.actionTypes.findByName("triggerImpulse").id - print("Triggering impulse", actionTypeId) - engine.thingManager.executeAction(itemDelegate.thing.id, actionTypeId) - } - } } } } diff --git a/nymea-app/ui/devicelistpages/GenericThingsListPage.qml b/nymea-app/ui/devicelistpages/GenericThingsListPage.qml index fa980522..ea2c0809 100644 --- a/nymea-app/ui/devicelistpages/GenericThingsListPage.qml +++ b/nymea-app/ui/devicelistpages/GenericThingsListPage.qml @@ -91,8 +91,8 @@ ThingsListPageBase { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: app.interfacesToIcon(itemDelegate.thing.thingClass.interfaces) color: itemDelegate.powerState && itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor } diff --git a/nymea-app/ui/devicelistpages/LightThingsListPage.qml b/nymea-app/ui/devicelistpages/LightThingsListPage.qml index e1b88f11..e82bc127 100644 --- a/nymea-app/ui/devicelistpages/LightThingsListPage.qml +++ b/nymea-app/ui/devicelistpages/LightThingsListPage.qml @@ -136,8 +136,8 @@ ThingsListPageBase { ColorIcon { id: lightIcon - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: itemDelegate.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg" color: itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor Binding { diff --git a/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml b/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml index 15935407..faface99 100644 --- a/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml @@ -85,8 +85,8 @@ ThingsListPageBase { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: app.interfaceToIcon("powersocket") color: itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor } diff --git a/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml b/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml index c00150b1..9cf121f4 100644 --- a/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/SensorsDeviceListPage.qml @@ -97,7 +97,7 @@ ThingsListPageBase { property State stateValue: stateType ? itemDelegate.thing.states.getState(stateType.id) : null ColorIcon { - Layout.preferredHeight: app.iconSize + Layout.preferredHeight: Style.iconSize Layout.preferredWidth: height Layout.alignment: Qt.AlignVCenter color: { diff --git a/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml b/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml index 0148a328..9ed29a9b 100644 --- a/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml +++ b/nymea-app/ui/devicelistpages/SmartMeterDeviceListPage.qml @@ -100,7 +100,7 @@ ThingsListPageBase { property State stateValue: stateType ? itemDelegate.thing.states.getState(stateType.id) : null ColorIcon { - Layout.preferredHeight: app.iconSize + Layout.preferredHeight: Style.iconSize Layout.preferredWidth: height Layout.alignment: Qt.AlignVCenter color: app.stateColor(model.stateName) diff --git a/nymea-app/ui/devicepages/AwningThingPage.qml b/nymea-app/ui/devicepages/AwningThingPage.qml index aae4ca39..2b066224 100644 --- a/nymea-app/ui/devicepages/AwningThingPage.qml +++ b/nymea-app/ui/devicepages/AwningThingPage.qml @@ -48,25 +48,29 @@ ThingPageBase { anchors.fill: parent columns: root.landscape ? 2 : 1 - ColorIcon { + Item { id: shutterImage Layout.preferredWidth: root.landscape ? - Math.min(parent.width - shutterControlsContainer.minimumWidth, parent.height) - app.margins + Math.min(parent.width - shutterControlsContainer.minimumWidth, parent.height) : Math.min(Math.min(500, parent.width), parent.height - shutterControlsContainer.minimumHeight) Layout.preferredHeight: width - Layout.alignment: Qt.AlignHCenter - name: "../images/awning/awning-" + app.pad(Math.round(root.percentageState.value / 10) * 10, 3) + ".svg" - visible: isExtended - } + ColorIcon { + anchors.centerIn: parent + size: Math.min(parent.height, parent.width) - Style.hugeMargins * 2 + name: root.isExtended ? + "../images/awning/awning-" + app.pad(Math.round(root.percentageState.value / 10) * 10, 3) + ".svg" + : "../images/awning/awning-100.svg" + } + } Item { id: shutterControlsContainer Layout.fillWidth: true Layout.fillHeight: true Layout.margins: app.margins * 2 - property int minimumWidth: app.iconSize * 2.7 * 3 - property int minimumHeight: app.iconSize * 4.5 + property int minimumWidth: Style.iconSize * 2.7 * 3 + property int minimumHeight: Style.iconSize * 4.5 ColumnLayout { anchors.centerIn: parent @@ -107,6 +111,8 @@ ThingPageBase { ShutterControls { id: shutterControls thing: root.thing + size: Style.bigIconSize + backgroundEnabled: true invert: true Layout.fillWidth: true } diff --git a/nymea-app/ui/devicepages/BoolSensorDevicePage.qml b/nymea-app/ui/devicepages/BoolSensorDevicePage.qml index 82511cb8..ce4f195b 100644 --- a/nymea-app/ui/devicepages/BoolSensorDevicePage.qml +++ b/nymea-app/ui/devicepages/BoolSensorDevicePage.qml @@ -46,7 +46,7 @@ Item { Layout.alignment: Qt.AlignCenter Item { - Layout.preferredWidth: Math.max(app.iconSize * 4, parent.width / 5) + Layout.preferredWidth: Math.max(Style.iconSize * 4, parent.width / 5) Layout.preferredHeight: width Layout.topMargin: app.margins Layout.bottomMargin: app.landscape ? app.margins : 0 diff --git a/nymea-app/ui/devicepages/CleaningRobotThingPage.qml b/nymea-app/ui/devicepages/CleaningRobotThingPage.qml new file mode 100644 index 00000000..76b9fa70 --- /dev/null +++ b/nymea-app/ui/devicepages/CleaningRobotThingPage.qml @@ -0,0 +1,411 @@ +/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * +* +* Copyright 2013 - 2021, 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 . +* +* 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.Controls.Material 2.2 +import QtQuick.Layouts 1.3 +import Nymea 1.0 +import "../components" +import "../customviews" + +ThingPageBase { + id: root + + readonly property State robotState: thing.stateByName("robotState") + showBrowserButton: false + + GridLayout { + anchors.fill: parent + columns: app.landscape ? 2 : 1 + + Item { + Layout.preferredWidth: app.landscape ? + Math.min(parent.width, parent.height) + : Math.min(Math.min(500, parent.width), parent.height) + Layout.preferredHeight: width + Layout.alignment: Qt.AlignHCenter + + Rectangle { + id: robotArea + anchors.centerIn: parent + height: Math.min(parent.width, parent.height) - Style.hugeMargins * 2 + width: height + radius: height / 2 + color: Style.tileBackgroundColor + + property int robotX: width / 2 + property int robotY: height / 2 + + property bool initialized: false + Timer { + interval: 500 + running: true + onTriggered: { + robotArea.initialized = true; + robot.evaluateState() + } + } + + ColorIcon { + id: robot + size: Style.largeIconSize + name: "../images/cleaning-robot.svg" + x: robotArea.robotX - (width / 2) + y: robotArea.robotY - (height / 2) + color: root.robotState.value == "cleaning" ? Style.accentColor : Style.iconColor + + property int pixelsPerSecond: 30 + + + function evaluateState() { + if (!robotArea.initialized) { + return + } + + switch (root.robotState.value) { + case "cleaning": + if (travelAnimation.paused) { + travelAnimation.resume(); + } else { + robot.travel() + } + return + case "paused": + travelAnimation.pause() + return + case "traveling": + if (travelAnimation.paused) { + travelAnimation.resume(); + } else { + robot.travel() + } + return + case "docked": + if (robotArea.robotX != robotArea.radius || robotArea.robotY != robotArea.radius) { + robot.travel(true) + } + return + case "stopped": + travelAnimation.stop() + return + case "error": + travelAnimation.pause() + } + } + + Connections { + target: root.robotState + onValueChanged: robot.evaluateState() + } + + function travel(toHome) { + var areaWidth = robotArea.width; + var radius = areaWidth / 2 + + if (radius < 0) { + return + } + + var centerX = radius + var fromX = robotArea.robotX ? robotArea.robotX : radius + var toX; + + var centerY = radius + var fromY = robotArea.robotY ? robotArea.robotY : radius + var toY; + + if (toHome) { + toX = radius + toY = radius + } else { + var distanceToCenter + do { + toX = Math.floor(Math.random() * areaWidth) + toY = Math.floor(Math.random() * areaWidth) + var toXCentered = toX - centerX + var toYCentered = toY - centerY + distanceToCenter = Math.abs(Math.sqrt(Math.pow(toXCentered, 2) + Math.pow(toYCentered, 2))) + print("new pos:", toX, toY, "to center:", toXCentered, toYCentered, "radius:", radius, "distance to center", distanceToCenter) + } while (distanceToCenter > (radius - robot.width / 2)) + } + + travelXAnimation.from = fromX + travelXAnimation.to = toX + + travelYAnimation.from = fromY + travelYAnimation.to = toY + + var distanceToTarget = Math.abs(Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2))) + var travelDuration = 1000 * distanceToTarget / robot.pixelsPerSecond + + travelXAnimation.duration = travelDuration + travelYAnimation.duration = travelDuration + + rotationAnimation.from = robot.rotation + rotationAnimation.to = robot.getAngleDegrees(fromX, fromY, toX, toY) + print(":", fromX, fromY, toX, toY, rotationAnimation.to, "__", robotArea.robotX) + travelAnimation.start() + } + + SequentialAnimation { + id: travelAnimation + + onRunningChanged: { + if (!running) { + robot.evaluateState() + } + } + + RotationAnimation { + id: rotationAnimation + target: robot + property: "rotation" + duration: 500 + easing.type: Easing.InOutQuad + direction: RotationAnimation.Shortest + } + ParallelAnimation { + NumberAnimation { + id: travelYAnimation + target: robotArea + property: "robotY" + } + NumberAnimation { + id: travelXAnimation + target: robotArea + property: "robotX" + } + } + } + + function getAngleDegrees(fromX,fromY,toX,toY) { + var deltaX = fromX-toX; + var deltaY = fromY-toY; // reverse + var radians = Math.atan2(deltaY, deltaX) + var degrees = (radians * 180) / Math.PI - 90; // rotate + while (degrees >= 360) degrees -= 360; + while (degrees < 0) degrees += 360; + return degrees; + } + } + } + } + + + + RowLayout { + id: controlsContainer + Layout.fillWidth: true + Layout.fillHeight: true + Layout.margins: app.margins * 2 + property int minimumWidth: Style.iconSize * 2.7 * 3 + property int minimumHeight: Style.iconSize * 4.5 + + Item { + Layout.fillWidth: true + } + + ProgressButton { + longpressEnabled: false + mode: root.robotState.value === "cleaning" ? "normal" : "highlight" + size: Style.bigIconSize + imageSource: root.robotState.value === "cleaning" ? "../images/media-playback-pause.svg" : "../images/media-playback-start.svg" + onClicked: { + if (root.robotState.value === "cleaning") { + engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("pauseCleaning").id) + } else { + engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("startCleaning").id) + } + } + } + Item { + Layout.fillWidth: true + } + + ProgressButton { + longpressEnabled: false + imageSource: "../images/media-playback-stop.svg" + size: Style.bigIconSize + mode: "destructive" + onClicked: { + engine.thingManager.executeAction(root.thing.id, root.thing.thingClass.actionTypes.findByName("returnToBase").id) + } + } + Item { + Layout.fillWidth: true + } + ProgressButton { + longpressEnabled: false + imageSource: "../images/view-grid-symbolic.svg" + mode: "normal" + size: Style.bigIconSize + visible: root.thing.thingClass.browsable + onClicked: { + pageStack.push(mapPageComponent) + } + } + Item { + Layout.fillWidth: true + visible: root.thing.thingClass.browsable + } + } + } + + Component { + id: mapPageComponent + Page { + id: mapsPage + property BrowserItems maps: engine.thingManager.browseThing(root.thing.id, "maps") + + header: NymeaHeader { + text: root.thing.name + onBackPressed: { + pageStack.pop() + } + } + + BusyIndicator { + anchors.centerIn: parent + visible: mapsPage.maps.busy + } + + ColumnLayout { + anchors.fill: parent + visible: !mapsPage.maps.busy + ComboBox { + id: mapComboBox + Layout.fillWidth: true + Layout.margins: Style.margins + model: mapsPage.maps.busy ? null : mapsPage.maps + textRole: "displayName" + } + + StackLayout { + Layout.fillHeight: true + Layout.fillWidth: true + currentIndex: mapComboBox.currentIndex + + Repeater { + model: mapsPage.maps + + delegate: Item { + id: mapView + anchors.fill: parent + property BrowserItem map: mapsPage.maps.get(index) + property BrowserItems boundaries: engine.thingManager.browseThing(root.thing.id, map.id) + Connections { + target: boundaries + onCountChanged: { + canvas.requestPaint(); + } + } + + Image { + id: mapImage + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: mapView.map.thumbnail + } + + ShaderEffect { + id: colorizedImage + objectName: "shader" + + anchors.centerIn: parent + height: mapImage.paintedHeight + width: mapImage.paintedWidth + + // Whether or not a color has been set. + visible: mapImage.status == Image.Ready && outColor != inColor + + property Image source: mapImage + property color outColor: Style.backgroundColor + // Colorize only pixels of this color, leave the rest untouched. + // This needs to match the basic color of the icon set + property color inColor: "#ebf3f3" + property real threshold: 0.1 + + fragmentShader: " + varying highp vec2 qt_TexCoord0; + uniform sampler2D source; + uniform highp vec4 outColor; + uniform highp vec4 inColor; + uniform lowp float threshold; + uniform lowp float qt_Opacity; + void main() { + lowp vec4 sourceColor = texture2D(source, qt_TexCoord0); + gl_FragColor = mix(vec4(outColor.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, inColor.rgb))) * qt_Opacity; + }" + } + + Canvas { + id: canvas + anchors.centerIn: parent + height: mapImage.paintedHeight + width: mapImage.paintedWidth + + property int penWidth: 2 + + onPaint: { + var ctx = getContext("2d"); + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = Qt.rgba(1, 0, 0, 1); + ctx.lineWidth = canvas.penWidth + + console.warn("Boundaries") + for (var i = 0; i < mapView.boundaries.count; i++) { + var boundary = mapView.boundaries.get(i) + var boundaryData = JSON.parse(boundary.description) + console.warn("Boundary:", boundary.id, boundary.description) + + var color = Qt.lighter(boundaryData["color"], 1) + ctx.strokeStyle = color + ctx.fillStyle = Qt.rgba(color.r, color.g, color.b, 0.3) + var vertices = boundaryData["vertices"] + + ctx.beginPath(); + ctx.moveTo(vertices[0][0] * canvas.width, vertices[0][1] * canvas.height); + for (var j = 1; j < vertices.length; j++) { + ctx.lineTo(vertices[j][0] * canvas.width, vertices[j][1] * canvas.height) + } + ctx.closePath(); + ctx.stroke(); + ctx.fill(); + } + } + } + } + } + } + } + } + } +} diff --git a/nymea-app/ui/devicepages/DeviceLogPage.qml b/nymea-app/ui/devicepages/DeviceLogPage.qml index 161806f2..515bd77a 100644 --- a/nymea-app/ui/devicepages/DeviceLogPage.qml +++ b/nymea-app/ui/devicepages/DeviceLogPage.qml @@ -168,7 +168,7 @@ Page { contentItem: RowLayout { ColorIcon { - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: width Layout.alignment: Qt.AlignVCenter color: { diff --git a/nymea-app/ui/devicepages/DoorbellDevicePage.qml b/nymea-app/ui/devicepages/DoorbellDevicePage.qml index f55edc6e..b41bb6ab 100644 --- a/nymea-app/ui/devicepages/DoorbellDevicePage.qml +++ b/nymea-app/ui/devicepages/DoorbellDevicePage.qml @@ -101,8 +101,8 @@ ThingPageBase { } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/alarm-clock.svg" color: Style.accentColor } diff --git a/nymea-app/ui/devicepages/GenericDevicePage.qml b/nymea-app/ui/devicepages/GenericDevicePage.qml index 5e0ae0c6..c946cd4e 100644 --- a/nymea-app/ui/devicepages/GenericDevicePage.qml +++ b/nymea-app/ui/devicepages/GenericDevicePage.qml @@ -384,7 +384,7 @@ ThingPageBase { Item { Layout.preferredHeight: preferredSize Layout.preferredWidth: preferredSize - property int preferredSize: actionDelegate.pendingActionId !== -1 || pendingTimer.running ? app.iconSize : 0 + property int preferredSize: actionDelegate.pendingActionId !== -1 || pendingTimer.running ? Style.iconSize : 0 Behavior on preferredSize { NumberAnimation { duration: 100 } } BusyIndicator { @@ -415,7 +415,7 @@ ThingPageBase { } Rectangle { id: flashlight - Layout.preferredHeight: app.iconSize * .8 + Layout.preferredHeight: Style.iconSize * .8 Layout.preferredWidth: height color: "lightgray" radius: width / 2 diff --git a/nymea-app/ui/devicepages/HeatingDevicePage.qml b/nymea-app/ui/devicepages/HeatingDevicePage.qml index 727087d0..cefd3401 100644 --- a/nymea-app/ui/devicepages/HeatingDevicePage.qml +++ b/nymea-app/ui/devicepages/HeatingDevicePage.qml @@ -50,7 +50,7 @@ ThingPageBase { Layout.alignment: Qt.AlignCenter Item { - Layout.preferredWidth: Math.max(app.iconSize * 6, parent.width / 5) + Layout.preferredWidth: Math.max(Style.iconSize * 6, parent.width / 5) Layout.preferredHeight: width Layout.topMargin: app.margins Layout.bottomMargin: app.landscape ? app.margins : 0 diff --git a/nymea-app/ui/devicepages/IrrigationDevicePage.qml b/nymea-app/ui/devicepages/IrrigationDevicePage.qml index dfd46bae..062d2178 100644 --- a/nymea-app/ui/devicepages/IrrigationDevicePage.qml +++ b/nymea-app/ui/devicepages/IrrigationDevicePage.qml @@ -160,7 +160,7 @@ ThingPageBase { Layout.preferredHeight: app.landscape ? parent.height : parent.height *.4 AbstractButton { - height: Math.min(Math.min(parent.height, parent.width), app.iconSize * 5) + height: Math.min(Math.min(parent.height, parent.width), Style.iconSize * 5) width: height anchors.centerIn: parent Rectangle { diff --git a/nymea-app/ui/devicepages/LightDevicePage.qml b/nymea-app/ui/devicepages/LightDevicePage.qml index 3918a39a..2de9ecf2 100644 --- a/nymea-app/ui/devicepages/LightDevicePage.qml +++ b/nymea-app/ui/devicepages/LightDevicePage.qml @@ -80,12 +80,12 @@ ThingPageBase { ListElement { name: "relax"; ct: "95" ; bri: 55; color: "#ffaf2a"} } delegate: Item { - Layout.preferredWidth: app.hugeIconSize - Layout.preferredHeight: app.hugeIconSize + Layout.preferredWidth: Style.hugeIconSize + Layout.preferredHeight: Style.hugeIconSize Layout.fillWidth: true Layout.fillHeight: app.landscape ItemDelegate { - height: app.hugeIconSize + height: Style.hugeIconSize width: height anchors.centerIn: parent @@ -155,14 +155,14 @@ ThingPageBase { columns: (app.landscape && (root.colorState !== null && root.ctState !== null)) || (!app.landscape && (root.colorState === null && root.ctState === null)) ? 1 : 2 Rectangle { - Layout.preferredWidth: app.hugeIconSize + Layout.preferredWidth: Style.hugeIconSize Layout.preferredHeight: width radius: Style.tileRadius color: root.colorState ? root.colorState.value : "red" // color: Qt.tint(Style.backgroundColor, Qt.rgba(Style.foregroundColor.r, Style.foregroundColor.g, Style.foregroundColor.b, 0.1)) ColorIcon { anchors.centerIn: parent - height: app.largeIconSize + height: Style.bigIconSize width: height name: root.powerState.value === true ? "../images/light-on.svg" : "../images/light-off.svg" color: root.colorState ? diff --git a/nymea-app/ui/devicepages/NotificationsDevicePage.qml b/nymea-app/ui/devicepages/NotificationsDevicePage.qml index 10055db3..7d28264b 100644 --- a/nymea-app/ui/devicepages/NotificationsDevicePage.qml +++ b/nymea-app/ui/devicepages/NotificationsDevicePage.qml @@ -89,7 +89,7 @@ ThingPageBase { } ScrollView { - Layout.preferredWidth: inputPane.width - app.iconSize - inputPane.spacing + Layout.preferredWidth: inputPane.width - Style.iconSize - inputPane.spacing Layout.maximumHeight: content.height - y - app.margins contentWidth: width @@ -103,12 +103,12 @@ ThingPageBase { Item { id: sendButton - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: inputColumn.height ColorIcon { anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; margins: app.margins } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize name: "../images/send.svg" color: titleTextField.displayText.length > 0 ? Style.accentColor : Style.iconColor visible: d.pendingAction == -1 @@ -189,8 +189,8 @@ ThingPageBase { font.pixelSize: app.extraSmallFont } ColorIcon { - Layout.preferredWidth: app.smallIconSize - Layout.preferredHeight: app.smallIconSize + Layout.preferredWidth: Style.smallIconSize + Layout.preferredHeight: Style.smallIconSize name: "../images/dialog-warning-symbolic.svg" color: "red" visible: model.errorCode !== "" @@ -256,8 +256,8 @@ ThingPageBase { } } ColorIcon { - Layout.preferredWidth: app.largeIconSize - Layout.preferredHeight: app.largeIconSize + Layout.preferredWidth: Style.largeIconSize + Layout.preferredHeight: Style.largeIconSize name: "../images/dialog-warning-symbolic.svg" color: "red" visible: detailsDialog.errorCode !== "" diff --git a/nymea-app/ui/devicepages/PowersocketDevicePage.qml b/nymea-app/ui/devicepages/PowersocketDevicePage.qml index 17884549..87cf3bd9 100644 --- a/nymea-app/ui/devicepages/PowersocketDevicePage.qml +++ b/nymea-app/ui/devicepages/PowersocketDevicePage.qml @@ -50,7 +50,7 @@ ThingPageBase { Layout.alignment: Qt.AlignCenter Item { - Layout.preferredWidth: Math.max(app.iconSize * 6, parent.width / 5) + Layout.preferredWidth: Math.max(Style.iconSize * 6, parent.width / 5) Layout.preferredHeight: width Layout.topMargin: app.margins Layout.bottomMargin: app.landscape ? app.margins : 0 diff --git a/nymea-app/ui/devicepages/SensorDevicePage.qml b/nymea-app/ui/devicepages/SensorDevicePage.qml index 6e1bd1e2..b93bf3da 100644 --- a/nymea-app/ui/devicepages/SensorDevicePage.qml +++ b/nymea-app/ui/devicepages/SensorDevicePage.qml @@ -142,11 +142,11 @@ ThingPageBase { Item { Layout.fillWidth: true Layout.fillHeight: true - Layout.minimumWidth: app.iconSize * 5 + Layout.minimumWidth: Style.iconSize * 5 Layout.rowSpan: app.landscape ? 5 : 1 ColorIcon { anchors.centerIn: parent - height: app.iconSize * 4 + height: Style.iconSize * 4 width: height name: { switch (boolView.interfaceName) { diff --git a/nymea-app/ui/devicepages/ShutterDevicePage.qml b/nymea-app/ui/devicepages/ShutterDevicePage.qml index 3379750b..860dd96b 100644 --- a/nymea-app/ui/devicepages/ShutterDevicePage.qml +++ b/nymea-app/ui/devicepages/ShutterDevicePage.qml @@ -173,14 +173,14 @@ ThingPageBase { visible: false ColorIcon { anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: app.margins } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize name: "../images/up.svg" } ColorIcon { anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; bottomMargin: app.margins } - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize name: "../images/down.svg" } Rectangle { @@ -280,8 +280,8 @@ ThingPageBase { Layout.margins: app.margins * 2 Layout.alignment: Qt.AlignHCenter Layout.fillHeight: true - property int minimumHeight: app.iconSize * 2.5 - property int minimumWidth: app.iconSize * 2.5 * 3 + property int minimumHeight: Style.iconSize * 2.5 + property int minimumWidth: Style.iconSize * 2.5 * 3 ShutterControls { id: shutterControls @@ -289,7 +289,9 @@ ThingPageBase { width: parent.width anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - spacing: (width - app.iconSize*2*children.length) / (children.length - 1) + size: Style.bigIconSize + backgroundEnabled: true + spacing: (width - Style.iconSize*2*children.length) / (children.length - 1) property int count: children.length diff --git a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml index 8c94fa68..fa029f99 100644 --- a/nymea-app/ui/devicepages/SmartMeterDevicePage.qml +++ b/nymea-app/ui/devicepages/SmartMeterDevicePage.qml @@ -64,8 +64,8 @@ ThingPageBase { contentItem: RowLayout { ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: app.stateIcon("totalEnergyConsumed") color: app.stateColor("totalEnergyConsumed") } @@ -76,8 +76,8 @@ ThingPageBase { font.pixelSize: app.largeFont } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: app.stateIcon("totalEnergyProduced") color: app.stateColor("totalEnergyProduced") visible: root.totalEnergyProducedState !== null diff --git a/nymea-app/ui/devicepages/ThermostatDevicePage.qml b/nymea-app/ui/devicepages/ThermostatDevicePage.qml index 78e8d05f..2926190c 100644 --- a/nymea-app/ui/devicepages/ThermostatDevicePage.qml +++ b/nymea-app/ui/devicepages/ThermostatDevicePage.qml @@ -77,8 +77,8 @@ ThingPageBase { anchors.centerIn: parent spacing: app.margins / 2 ColorIcon { - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize name: "../images/sensors/temperature.svg" color: root.boostStateType && root.boostState.value === true ? "red" : Style.iconColor } diff --git a/nymea-app/ui/devicepages/VentilationDevicePage.qml b/nymea-app/ui/devicepages/VentilationDevicePage.qml index 38761e04..80586954 100644 --- a/nymea-app/ui/devicepages/VentilationDevicePage.qml +++ b/nymea-app/ui/devicepages/VentilationDevicePage.qml @@ -50,7 +50,7 @@ ThingPageBase { Layout.alignment: Qt.AlignCenter Item { - Layout.preferredWidth: Math.max(app.iconSize * 6, parent.width / 5) + Layout.preferredWidth: Math.max(Style.iconSize * 6, parent.width / 5) Layout.preferredHeight: width Layout.topMargin: app.margins Layout.bottomMargin: app.landscape ? app.margins : 0 diff --git a/nymea-app/ui/experiences/heating/Main.qml b/nymea-app/ui/experiences/heating/Main.qml index 8380b779..d4effa5e 100644 --- a/nymea-app/ui/experiences/heating/Main.qml +++ b/nymea-app/ui/experiences/heating/Main.qml @@ -178,8 +178,8 @@ Item { RowLayout { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "qrc:/ui/images/weathericons/wind.svg" color: Style.accentColor } @@ -206,8 +206,8 @@ Item { RowLayout { ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "qrc:/ui/images/sensors/temperature.svg" color: Style.accentColor } @@ -237,7 +237,7 @@ Item { Layout.fillWidth: false Layout.bottomMargin: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize //* 1.5 + Layout.preferredHeight: Style.iconSize //* 1.5 Layout.preferredWidth: height Layout.alignment: Qt.AlignHCenter color: Style.accentColor @@ -261,8 +261,8 @@ Item { Layout.rightMargin: parent.width * .2 spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize color: Style.accentColor name: "qrc:/ui/images/ventilation.svg" PropertyAnimation on rotation { @@ -282,7 +282,7 @@ Item { RowLayout { Layout.fillWidth: true - Layout.maximumHeight: app.iconSize + Layout.maximumHeight: Style.iconSize spacing: 0 Repeater { @@ -334,7 +334,7 @@ Item { // ProgressButton { // imageSource: "qrc:/ui/images/system-shutdown.svg" -// Layout.preferredHeight: app.iconSize * 1.5 +// Layout.preferredHeight: Style.iconSize * 1.5 // Layout.preferredWidth: height // Layout.alignment: Qt.AlignHCenter // } diff --git a/nymea-app/ui/images/back.svg b/nymea-app/ui/images/back.svg index 362f4c42..28e5b6aa 100644 --- a/nymea-app/ui/images/back.svg +++ b/nymea-app/ui/images/back.svg @@ -1,6 +1,4 @@ - - + sodipodi:docname="back.svg"> + inkscape:snap-global="true" + inkscape:document-rotation="0" + inkscape:window-width="1380" + inkscape:window-height="873" + inkscape:window-x="60" + inkscape:window-y="27" + inkscape:window-maximized="1"> image/svg+xml - + @@ -141,7 +145,7 @@ + transform="matrix(0.83333333,0,0,0.83333333,-3.3095267,21.084161)"> - - + sodipodi:docname="cleaning-robot.svg"> - - - - + id="defs4876" /> + inkscape:snap-global="true" + inkscape:document-rotation="0" + inkscape:window-width="1380" + inkscape:window-height="873" + inkscape:window-x="60" + inkscape:window-y="27" + inkscape:window-maximized="1"> - - @@ -139,37 +126,58 @@ id="layer1" transform="translate(67.857146,-78.50504)"> + transform="matrix(0,-1,-1,0,373.50506,516.50504)" + id="g4845" + style="display:inline"> + inkscape:export-ydpi="90" + inkscape:export-xdpi="90" + inkscape:export-filename="next01.png" + transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)" + id="g4778" + inkscape:label="Layer 1"> + transform="matrix(-1,0,0,1,575.99999,611)" + id="g4780" + style="display:inline"> - + id="g933" + transform="rotate(-180,389.98345,393.36221)"> + height="96" + x="-438.00244" + y="345.36221" + transform="scale(-1,1)" /> + + + + + + diff --git a/nymea-app/ui/images/down.svg b/nymea-app/ui/images/down.svg index d4931a09..5174db6e 100644 --- a/nymea-app/ui/images/down.svg +++ b/nymea-app/ui/images/down.svg @@ -1,6 +1,4 @@ - - + sodipodi:docname="down.svg"> + inkscape:snap-global="true" + inkscape:document-rotation="0" + inkscape:window-width="1380" + inkscape:window-height="873" + inkscape:window-x="60" + inkscape:window-y="27" + inkscape:window-maximized="1"> image/svg+xml - + @@ -139,7 +143,7 @@ id="layer1" transform="translate(67.857146,-78.50504)"> - - + sodipodi:docname="next.svg"> + inkscape:snap-global="true" + inkscape:document-rotation="0" + inkscape:window-width="1380" + inkscape:window-height="873" + inkscape:window-x="60" + inkscape:window-y="27" + inkscape:window-maximized="1"> image/svg+xml - + @@ -141,7 +145,7 @@ + transform="matrix(-0.83333334,0,0,0.83333334,-36.404765,21.084161)"> - - + sodipodi:docname="up.svg"> + inkscape:snap-global="true" + inkscape:document-rotation="0" + inkscape:window-width="1380" + inkscape:window-height="873" + inkscape:window-x="60" + inkscape:window-y="27" + inkscape:window-maximized="1"> image/svg+xml - + @@ -139,7 +143,7 @@ id="layer1" transform="translate(67.857146,-78.50504)"> 0 ? implicitHeight : 0 @@ -389,7 +389,7 @@ Page { delegate: Item { Layout.fillWidth: true - Layout.preferredHeight: app.iconSize + app.margins + Layout.preferredHeight: Style.iconSize + app.margins Rectangle { height: parent.height width: height @@ -407,8 +407,8 @@ Page { } ColorIcon { - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize color: modelData name: "../images/" + (root.ruleIcon ? root.ruleIcon : "slideshow") + ".svg" anchors.centerIn: parent @@ -419,7 +419,7 @@ Page { model: ["light-on", "light-off", "alarm-clock", "media-playback-start", "connections/network-secure", "notification", "sensors", "shutter/shutter-050", "attention", "eye"] delegate: Item { Layout.fillWidth: true - Layout.preferredHeight: app.iconSize + app.margins + Layout.preferredHeight: Style.iconSize + app.margins Rectangle { height: parent.height width: height @@ -437,8 +437,8 @@ Page { } ColorIcon { - height: app.iconSize - width: app.iconSize + height: Style.iconSize + width: Style.iconSize color: root.ruleColor name: "../images/" + modelData + ".svg" anchors.centerIn: parent @@ -755,7 +755,7 @@ Page { iconName: model.iconName text: model.text progressive: true - iconSize: app.iconSize * 2 + iconSize: Style.iconSize * 2 visible: engine.jsonRpcClient.ensureServerVersion(model.minimumJsonRpcVersion) onClicked: { @@ -805,7 +805,7 @@ Page { iconName: model.iconName text: model.text progressive: true - iconSize: app.iconSize * 2 + iconSize: Style.iconSize * 2 visible: engine.jsonRpcClient.ensureServerVersion(model.minimumJsonRpcVersion) onClicked: { @@ -868,7 +868,7 @@ Page { iconName: model.iconName text: model.text progressive: true - iconSize: app.iconSize * 2 + iconSize: Style.iconSize * 2 visible: ruleActionQuestionPage.exitAction === model.isExitAction && engine.jsonRpcClient.ensureServerVersion(model.minimumJsonRpcVersion) onClicked: { diff --git a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml index f917e11b..fcfbbf9f 100644 --- a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml +++ b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml @@ -60,7 +60,7 @@ SwipeDelegate { RowLayout { Layout.fillWidth: true ColorIcon { - Layout.preferredHeight: childEvaluatorsRepeater.count > 0 ? app.iconSize * .6 : app.iconSize + Layout.preferredHeight: childEvaluatorsRepeater.count > 0 ? Style.iconSize * .6 : Style.iconSize Layout.preferredWidth: height name: root.stateEvaluator && root.stateEvaluator.stateDescriptor.interfaceName.length === 0 ? "../images/state.svg" : "../images/state-interface.svg" color: Style.accentColor @@ -129,7 +129,7 @@ SwipeDelegate { : null ColorIcon { - Layout.preferredHeight: app.iconSize * .6 + Layout.preferredHeight: Style.iconSize * .6 Layout.preferredWidth: height name: childEvaluatorDelegate.stateDescriptor.interfaceName.length === 0 ? "../images/state.svg" : "../images/state-interface.svg" color: Style.accentColor diff --git a/nymea-app/ui/magic/StateEvaluatorDelegate.qml b/nymea-app/ui/magic/StateEvaluatorDelegate.qml index 8c7e5896..267b73cb 100644 --- a/nymea-app/ui/magic/StateEvaluatorDelegate.qml +++ b/nymea-app/ui/magic/StateEvaluatorDelegate.qml @@ -157,7 +157,7 @@ ItemDelegate { iconName: model.iconName text: model.text progressive: true - iconSize: app.iconSize * 2 + iconSize: Style.iconSize * 2 onClicked: { root[model.method]() diff --git a/nymea-app/ui/magic/ThingRulesPage.qml b/nymea-app/ui/magic/ThingRulesPage.qml index c9d51631..6a88c526 100644 --- a/nymea-app/ui/magic/ThingRulesPage.qml +++ b/nymea-app/ui/magic/ThingRulesPage.qml @@ -189,7 +189,7 @@ Page { } AbstractButton { - height: app.iconSize * 4 + height: Style.iconSize * 4 width: height anchors.horizontalCenter: parent.horizontalCenter diff --git a/nymea-app/ui/magic/WriteNfcTagPage.qml b/nymea-app/ui/magic/WriteNfcTagPage.qml index 5b3cbf8a..0a5154c3 100644 --- a/nymea-app/ui/magic/WriteNfcTagPage.qml +++ b/nymea-app/ui/magic/WriteNfcTagPage.qml @@ -90,18 +90,18 @@ Page { Item { Layout.fillWidth: true - Layout.preferredHeight: app.iconSize * 8 + Layout.preferredHeight: Style.iconSize * 8 SequentialAnimation { loops: Animation.Infinite running: true - PropertyAction { target: phoneIcon; property: "anchors.horizontalCenterOffset"; value: app.iconSize * 2 } + PropertyAction { target: phoneIcon; property: "anchors.horizontalCenterOffset"; value: Style.iconSize * 2 } PropertyAction { target: phoneIcon; property: "scale"; value: 1.3 } NumberAnimation { target: phoneIcon; property: "opacity"; duration: 500; to: 1 } PauseAnimation { duration: 500 } ParallelAnimation { - NumberAnimation { target: phoneIcon; property: "anchors.horizontalCenterOffset"; from: app.iconSize * 2; to: -app.iconSize * 2; duration: 1500; easing.type: Easing.OutQuad } + NumberAnimation { target: phoneIcon; property: "anchors.horizontalCenterOffset"; from: Style.iconSize * 2; to: -Style.iconSize * 2; duration: 1500; easing.type: Easing.OutQuad } NumberAnimation { target: phoneIcon; property: "scale"; duration: 1500; from: 1.3; to: 1; easing.type: Easing.InOutQuad } } PauseAnimation { duration: 500 } @@ -113,20 +113,20 @@ Page { ColorIcon { id: nfcIcon name: "../images/nfc.svg" - height: app.iconSize * 2 - width: app.iconSize * 2 + height: Style.iconSize * 2 + width: Style.iconSize * 2 anchors.centerIn: parent - anchors.horizontalCenterOffset: - app.iconSize * 2 + anchors.horizontalCenterOffset: - Style.iconSize * 2 visible: nfcWriter.status == NfcThingActionWriter.TagStatusWaiting } Item { id: phoneIcon - height: app.iconSize * 5 - width: app.iconSize * 5 + height: Style.iconSize * 5 + width: Style.iconSize * 5 scale: 1.5 anchors.centerIn: parent - anchors.horizontalCenterOffset: app.iconSize * 2 + anchors.horizontalCenterOffset: Style.iconSize * 2 visible: nfcWriter.status == NfcThingActionWriter.TagStatusWaiting Rectangle { @@ -147,8 +147,8 @@ Page { Rectangle { id: tick anchors.centerIn: parent - height: app.iconSize * 6 - width: app.iconSize * 6 + height: Style.iconSize * 6 + width: Style.iconSize * 6 radius: width / 2 color: Style.backgroundColor border.width: 4 @@ -173,8 +173,8 @@ Page { ColorIcon { x: (tick.width - width) / 2 y: (tick.height - height) / 2 - height: app.iconSize * 4 - width: app.iconSize * 4 + height: Style.iconSize * 4 + width: Style.iconSize * 4 name: nfcWriter.status == NfcThingActionWriter.TagStatusFailed ? "../images/close.svg" : "../images/tick.svg" color: nfcWriter.status == NfcThingActionWriter.TagStatusFailed ? "red" : "green" } diff --git a/nymea-app/ui/magic/scripting/EditorPane.qml b/nymea-app/ui/magic/scripting/EditorPane.qml index a7bf5192..d4b1027f 100644 --- a/nymea-app/ui/magic/scripting/EditorPane.qml +++ b/nymea-app/ui/magic/scripting/EditorPane.qml @@ -106,7 +106,7 @@ Item { name: "../images/edit-clear.svg" enabled: contentContainer.data[panelTabs.currentIndex].clearEnabled color: enabled ? Style.accentColor : Style.iconColor - Layout.preferredHeight: app.iconSize / 2 + Layout.preferredHeight: Style.iconSize / 2 Layout.preferredWidth: height MouseArea { anchors.fill: parent @@ -117,7 +117,7 @@ Item { ColorIcon { name: pane.shown ? "../images/down.svg" : "../images/up.svg" - Layout.preferredHeight: app.iconSize / 2 + Layout.preferredHeight: Style.iconSize / 2 Layout.preferredWidth: height color: Style.accentColor MouseArea { diff --git a/nymea-app/ui/system/LogViewerPage.qml b/nymea-app/ui/system/LogViewerPage.qml index a95230f5..1b2c74f0 100644 --- a/nymea-app/ui/system/LogViewerPage.qml +++ b/nymea-app/ui/system/LogViewerPage.qml @@ -42,7 +42,7 @@ Page { onBackPressed: pageStack.pop() HeaderButton { - imageSource: "../images/go-down.svg" + imageSource: "../images/down.svg" color: root.autoScroll ? Style.accentColor : Style.iconColor onClicked: { listView.positionViewAtEnd(); @@ -96,7 +96,7 @@ Page { id: contentColumn anchors { left: parent.left; right: parent.right; margins: app.margins / 2 } ColorIcon { - Layout.preferredWidth: app.iconSize + Layout.preferredWidth: Style.iconSize Layout.preferredHeight: width Layout.alignment: Qt.AlignVCenter color: { diff --git a/nymea-app/ui/system/MqttPolicyPage.qml b/nymea-app/ui/system/MqttPolicyPage.qml index af829e81..137316ad 100644 --- a/nymea-app/ui/system/MqttPolicyPage.qml +++ b/nymea-app/ui/system/MqttPolicyPage.qml @@ -128,7 +128,7 @@ SettingsPageBase { property bool hiddenPassword: true } ColorIcon { - Layout.preferredHeight: app.iconSize + Layout.preferredHeight: Style.iconSize Layout.preferredWidth: height name: "../images/eye.svg" color: passwordTextField.hiddenPassword ? Style.iconColor : Style.accentColor diff --git a/nymea-app/ui/system/NetworkSettingsPage.qml b/nymea-app/ui/system/NetworkSettingsPage.qml index 62938ccb..e5b3524a 100644 --- a/nymea-app/ui/system/NetworkSettingsPage.qml +++ b/nymea-app/ui/system/NetworkSettingsPage.qml @@ -137,8 +137,8 @@ SettingsPageBase { visible: !networkManager.available && !networkManager.loading spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/connections/network-wired-disabled.svg" } Label { @@ -491,8 +491,8 @@ SettingsPageBase { } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/eye.svg" color: passwordTextField.showPassword ? Style.accentColor : Style.iconColor MouseArea { diff --git a/nymea-app/ui/system/SystemUpdatePage.qml b/nymea-app/ui/system/SystemUpdatePage.qml index 9f4d7971..619cd314 100644 --- a/nymea-app/ui/system/SystemUpdatePage.qml +++ b/nymea-app/ui/system/SystemUpdatePage.qml @@ -82,7 +82,7 @@ Page { spacing: app.margins * 2 ColorIcon { - Layout.preferredHeight: app.iconSize * 4 + Layout.preferredHeight: Style.iconSize * 4 Layout.preferredWidth: height Layout.alignment: Qt.AlignHCenter name: "../images/system-update.svg" @@ -124,7 +124,7 @@ Page { spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 Layout.preferredWidth: height name: "../images/system-update.svg" color: Style.accentColor @@ -316,8 +316,8 @@ Page { Layout.margins: app.margins spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize * 2 - Layout.preferredWidth: app.iconSize * 2 + Layout.preferredHeight: Style.iconSize * 2 + Layout.preferredWidth: Style.iconSize * 2 name: "../images/plugin.svg" color: Style.accentColor } diff --git a/nymea-app/ui/system/ZigbeeAddNetworkPage.qml b/nymea-app/ui/system/ZigbeeAddNetworkPage.qml index a82928a1..4ef8d894 100644 --- a/nymea-app/ui/system/ZigbeeAddNetworkPage.qml +++ b/nymea-app/ui/system/ZigbeeAddNetworkPage.qml @@ -90,8 +90,8 @@ SettingsPageBase { visible: root.zigbeeManager.adapters.count == 0 spacing: app.margins ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: "../images/connections/network-wifi-offline.svg" } Label { diff --git a/nymea-app/ui/system/ZigbeeSettingsPage.qml b/nymea-app/ui/system/ZigbeeSettingsPage.qml index 1289294a..a4a93ef7 100644 --- a/nymea-app/ui/system/ZigbeeSettingsPage.qml +++ b/nymea-app/ui/system/ZigbeeSettingsPage.qml @@ -86,8 +86,8 @@ SettingsPageBase { RowLayout { ColorIcon { name: "/ui/images/zigbee/" + model.backend + ".svg" - Layout.preferredWidth: app.iconSize - Layout.preferredHeight: app.iconSize + Layout.preferredWidth: Style.iconSize + Layout.preferredHeight: Style.iconSize } Label { @@ -97,8 +97,8 @@ SettingsPageBase { } ProgressButton { - Layout.preferredWidth: app.iconSize - Layout.preferredHeight: app.iconSize + Layout.preferredWidth: Style.iconSize + Layout.preferredHeight: Style.iconSize imageSource: "/ui/images/configure.svg" longpressEnabled: false onClicked: pageStack.push(Qt.resolvedUrl("ZigbeeNetworkPage.qml"), { zigbeeManager: zigbeeManager, network: zigbeeManager.networks.get(index) }) @@ -127,8 +127,8 @@ SettingsPageBase { } Led { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize state: { switch (model.networkState) { case ZigbeeNetwork.ZigbeeNetworkStateOnline: @@ -155,15 +155,15 @@ SettingsPageBase { text: model.permitJoiningEnabled ? qsTr("Open for %0 s").arg(model.permitJoiningRemaining) : qsTr("Closed") } ColorIcon { - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize name: model.permitJoiningEnabled ? "/ui/images/lock-open.svg" : "/ui/images/lock-closed.svg" visible: !model.permitJoiningEnabled } Canvas { id: canvas - Layout.preferredHeight: app.iconSize - Layout.preferredWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.preferredWidth: Style.iconSize rotation: -90 visible: model.permitJoiningEnabled diff --git a/nymea-app/ui/thingconfiguration/NewThingPage.qml b/nymea-app/ui/thingconfiguration/NewThingPage.qml index aeee91db..91dc0a2e 100644 --- a/nymea-app/ui/thingconfiguration/NewThingPage.qml +++ b/nymea-app/ui/thingconfiguration/NewThingPage.qml @@ -121,8 +121,8 @@ Page { } Item { - Layout.preferredHeight: app.iconSize - Layout.minimumWidth: app.iconSize + Layout.preferredHeight: Style.iconSize + Layout.minimumWidth: Style.iconSize ColorIcon { height: parent.height diff --git a/nymea-app/ui/utils/NymeaUtils.qml b/nymea-app/ui/utils/NymeaUtils.qml index bea9988f..567fd84b 100644 --- a/nymea-app/ui/utils/NymeaUtils.qml +++ b/nymea-app/ui/utils/NymeaUtils.qml @@ -59,6 +59,8 @@ Item { page = "VentilationDevicePage.qml"; } else if (interfaceList.indexOf("barcodescanner") >= 0) { page = "BarcodeScannerThingPage.qml"; + } else if (interfaceList.indexOf("cleaningrobot") >= 0) { + page = "CleaningRobotThingPage.qml"; } else { page = "GenericDevicePage.qml"; }