Add support cleaning robots

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

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)

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"));
 

nymea-app/images.qrc

@@ -79,7 +79,6 @@
         <file>ui/images/filters.svg</file>
         <file>ui/images/find.svg</file>
         <file>ui/images/fingerprint.svg</file>
-        <file>ui/images/go-down.svg</file>
         <file>ui/images/nymea-logo.svg</file>
         <file>ui/images/info.svg</file>
         <file>ui/images/light-off.svg</file>
@@ -257,5 +256,6 @@
         <file>ui/images/zigbee/deCONZ.svg</file>
         <file>ui/images/zigbee/NXP.svg</file>
         <file>ui/images/nymea-splash.svg</file>
+        <file>ui/images/cleaning-robot.svg</file>
     </qresource>
 </RCC>

nymea-app/resources.qrc

@@ -234,5 +234,6 @@
         <file>ui/components/BigThingTile.qml</file>
         <file>ui/appsettings/LoggingCategories.qml</file>
         <file>ui/ConfigurationBase.qml</file>
+        <file>ui/devicepages/CleaningRobotThingPage.qml</file>
     </qresource>
 </RCC>

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

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

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)
                 }
 

nymea-app/ui/MainPage.qml

@@ -613,8 +613,8 @@ Page {
                     }
                 }
                 ColorIcon {
-                    Layout.preferredHeight: app.iconSize
+                    Layout.preferredHeight: Style.iconSize
-                    Layout.preferredWidth: app.iconSize
+                    Layout.preferredWidth: Style.iconSize
                     name: engine.jsonRpcClient.currentConnection.secure ? "../images/lock-closed.svg" : "../images/lock-open.svg"
                     MouseArea {
                         anchors.fill: parent

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)
         }

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

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"
 }

nymea-app/ui/appsettings/CloudLoginPage.qml

@@ -95,7 +95,7 @@ SettingsPageBase {
             }
             BusyIndicator {
                 running: AWSClient.awsDevices.busy
-                height: app.iconSize
+                height: Style.iconSize
                 width: height
             }
         }

nymea-app/ui/components/BrightnessSlider.qml

@@ -35,8 +35,8 @@ import "../utils"
 
 Item {
     id: root
-    implicitWidth: orientation == Qt.Horizontal ? 300 : app.hugeIconSize
+    implicitWidth: orientation == Qt.Horizontal ? 300 : Style.hugeIconSize
-    implicitHeight: orientation == Qt.Horizontal ? app.hugeIconSize : 300
+    implicitHeight: orientation == Qt.Horizontal ? Style.hugeIconSize : 300
 
     property Thing thing: null
 

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
+        from: arrows.up ? Style.iconSize : -Style.iconSize
-        to: arrows.up ? -app.iconSize : app.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

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
 

nymea-app/ui/components/ColorTemperaturePicker.qml

@@ -5,8 +5,8 @@ import "../utils"
 
 Item {
     id: root
-    implicitWidth: orientation == Qt.Horizontal ? 300 : app.hugeIconSize
+    implicitWidth: orientation == Qt.Horizontal ? 300 : Style.hugeIconSize
-    implicitHeight: orientation == Qt.Horizontal ? app.hugeIconSize : 300
+    implicitHeight: orientation == Qt.Horizontal ? Style.hugeIconSize : 300
 
     property Thing thing: null
 

nymea-app/ui/components/DatePicker.qml

@@ -41,8 +41,8 @@ ColumnLayout {
     RowLayout {
         Layout.fillWidth: true
         ColorIcon {
-            Layout.preferredHeight: app.iconSize
+            Layout.preferredHeight: Style.iconSize
-            Layout.preferredWidth: app.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.preferredHeight: Style.iconSize
-            Layout.preferredWidth: app.iconSize
+            Layout.preferredWidth: Style.iconSize
             name: "../images/next.svg"
             MouseArea {
                 anchors.fill: parent

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.width: Style.iconSize * 5
-        sourceSize.height: app.iconSize * 5
+        sourceSize.height: Style.iconSize * 5
         MouseArea {
             anchors.fill: parent
             onClicked: root.imageClicked();

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
+        height: Style.iconSize
-        width: app.iconSize
+        width: Style.iconSize
         ColorIcon {
             id: image
             anchors.fill: parent

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 {

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.width: Style.iconSize * 2
-                sourceSize.height: app.iconSize * 2
+                sourceSize.height: Style.iconSize * 2
             }
 
             Label {

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

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

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

nymea-app/ui/components/MainPageTabButton.qml

@@ -55,8 +55,8 @@ TabButton {
             verticalItemAlignment: Grid.AlignVCenter
 
             ColorIcon {
-                width: app.iconSize
+                width: Style.iconSize
-                height: app.iconSize
+                height: Style.iconSize
                 name: root.iconSource
                 color: root.checked ? Style.accentColor : Style.iconColor
             }

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

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

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)
+        size: Style.iconSize * (root.showExtendedControls ? 1.5 : 1)
-        Layout.preferredWidth: height
         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)
+        size: Style.iconSize * (root.showExtendedControls ? 2 : 1)
-        Layout.preferredWidth: height
         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)
+        size: Style.iconSize * (root.showExtendedControls ? 1.5 : 1)
-        Layout.preferredWidth: height
         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
+        size: Style.iconSize
-        Layout.preferredWidth: height
         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

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.preferredHeight: Style.hugeIconSize
-                Layout.preferredWidth: app.hugeIconSize * 3
+                Layout.preferredWidth: Style.hugeIconSize * 3
                 Layout.alignment: Qt.AlignHCenter
                 name: "../images/media/ambeo.svg"
                 color: Style.accentColor

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
+                height: Style.iconSize
-                width: app.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
+                height: Style.iconSize
-                width: app.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
+                height: Style.iconSize
-                width: app.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
+                height: Style.iconSize
-                width: app.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
+                height: Style.iconSize
-                width: app.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"
                         }

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"

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

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

nymea-app/ui/components/PasswordTextField.qml

@@ -110,8 +110,8 @@ ColumnLayout {
 
         }
         ColorIcon {
-            Layout.preferredHeight: app.iconSize
+            Layout.preferredHeight: Style.iconSize
-            Layout.preferredWidth: app.iconSize
+            Layout.preferredWidth: Style.iconSize
             name: "../images/eye.svg"
             color: root.hiddenPassword ? Style.iconColor : Style.accentColor
             MouseArea {

nymea-app/ui/components/ProgressButton.qml

@@ -34,23 +34,28 @@ import Nymea 1.0
 
 Item {
     id: root
-    implicitHeight: app.iconSize
+    implicitHeight: size + Style.smallMargins * 2
-    implicitWidth: app.iconSize
+    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
+        color: {
-        opacity: buttonDelegate.pressed || buttonDelegate.containsMouse ? .08 : 0
+            switch (root.mode) {
-        Behavior on opacity {
+            case "highlight":
-            NumberAnimation { duration: 200 }
+                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
+            }
+        }
     }
 }
 

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

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
 

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)

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

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")

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

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

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

nymea-app/ui/connection/LoginPage.qml

@@ -93,8 +93,8 @@ Page {
                 spacing: app.margins
 
                 ColorIcon {
-                    Layout.preferredHeight: app.iconSize * 2
+                    Layout.preferredHeight: Style.iconSize * 2
-                    Layout.preferredWidth: app.iconSize * 2
+                    Layout.preferredWidth: Style.iconSize * 2
                     name: "../images/lock-closed.svg"
                     color: Style.accentColor
                 }

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

nymea-app/ui/connection/wifisetup/ConnectWiFiPage.qml

@@ -184,8 +184,8 @@ Page {
                     }
 
                     ColorIcon {
-                        Layout.preferredHeight: app.iconSize
+                        Layout.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.iconSize
+                        Layout.preferredWidth: Style.iconSize
                         name: "../images/eye.svg"
                         color: passwordTextField.showPassword ? Style.accentColor : Style.iconColor
                         MouseArea {

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"

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 {
+            ColorIcon {
-                id: arrows
                 anchors.centerIn: parent
-                width: app.iconSize * 2
+                size: Math.min(parent.height, parent.width) - Style.hugeMargins * 2
-                height: parent.height * .6
+                property string currentImage: {
-                clip: true
+                    if (root.isExtended) {
-                visible: root.stateStateType && (root.stateState.value === "opening" || root.stateState.value === "closing")
+                        return NymeaUtils.pad(Math.round(root.percentageState.value / 10), 2) + "0"
-                property bool up: root.stateState && root.stateState.value === "opening"
+                    }
-
+                    if (root.intermediatePositionStateType) {
-                // NumberAnimation doesn't reload to/from while it's running. If we switch from closing to opening or vice versa
+                        return root.stateState.value === "closed" ? "100"
-                // we need to somehow stop and start the animation
+                                : root.intermediatePositionState.value === false ? "000" : "050"
-                property bool animationHack: true
+                    }
-                onAnimationHackChanged: {
+                    return "100"
-                    if (!animationHack) hackTimer.start();
                 }
-                Timer { id: hackTimer; interval: 1; onTriggered: arrows.animationHack = true }
+                name: "../images/garage/garage-" + currentImage + ".svg"
-                Connections { target: root.stateState; onValueChanged: arrows.animationHack = false }
 
-                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 {
+                Item {
-                    id: arrowColumn
+                    id: arrows
-                    width: parent.width
+                    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 {
+                    // NumberAnimation doesn't reload to/from while it's running. If we switch from closing to opening or vice versa
-                        model: arrows.height / app.iconSize + 1
+                    // we need to somehow stop and start the animation
-                        ColorIcon {
+                    property bool animationHack: true
-                            name: arrows.up ? "../images/up.svg" : "../images/down.svg"
+                    onAnimationHackChanged: {
-                            width: parent.width
+                        if (!animationHack) hackTimer.start();
-                            height: width
+                    }
-                            color: Style.accentColor
+                    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 minimumWidth: Style.iconSize * 10
-            property int minimumHeight: app.iconSize * 2.5
+            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
             }
         }

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.preferredHeight: Style.iconSize
-                Layout.preferredWidth: app.iconSize
+                Layout.preferredWidth: Style.iconSize
                 name: root.iconSource
                 visible: root.iconSource.length > 0
                 color: root.color

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

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")
                     }

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.preferredHeight: Style.iconSize
-                    Layout.preferredWidth: app.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"

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)

nymea-app/ui/delegates/statedelegates/ColorDelegate.qml

@@ -37,8 +37,8 @@ import "../../components"
 
 Item {
     id: colorComponentItem
-    implicitWidth: app.iconSize * 2
+    implicitWidth: Style.iconSize * 2
-    implicitHeight: app.iconSize
+    implicitHeight: Style.iconSize
     property bool writable: false
     property var value
     signal changed(var value)

nymea-app/ui/devicelistpages/ClosablesThingsListPage.qml

@@ -118,8 +118,8 @@ ThingsListPageBase {
                         spacing: app.margins
 
                         ColorIcon {
-                            Layout.preferredHeight: app.iconSize
+                            Layout.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.iconSize
+                            Layout.preferredWidth: Style.iconSize
                             color: itemDelegate.movingState && itemDelegate.movingState.value === true
                                    ? Style.accentColor
                                    : Style.iconColor

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
+        text: {
-        onBackPressed: pageStack.pop()
+            if (root.shownInterfaces.length === 1) {
-        text: qsTr("Garage doors")
+                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 connectedState: thing.stateByName("connected")
-                    property State percentageState: thing.stateByName("percentage")
+                    property State powerState: thing.stateByName("power")
-
-                    readonly property bool isImpulseBased: thing.thingClass.interfaces.indexOf("impulsegaragedoor") >= 0
 
                     contentItem: RowLayout {
                         spacing: app.margins
 
                         ColorIcon {
-                            Layout.preferredHeight: app.iconSize
+                            Layout.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.iconSize
+                            Layout.preferredWidth: Style.iconSize
-                            color: itemDelegate.movingState && itemDelegate.movingState.value === true
+                            name: app.interfacesToIcon(itemDelegate.thing.thingClass.interfaces)
-                                   ? Style.accentColor
+                            color: itemDelegate.powerState && itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor
-                                   : Style.iconColor
-                            name: itemDelegate.percentageState
-                                  ? root.iconBasename + "-" + app.pad(Math.round(itemDelegate.percentageState.value / 10) * 10, 3) + ".svg"
-                                  : root.iconBasename + "-050.svg"
                         }
 
                         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)
-                            }
-                        }
                     }
                 }
             }

nymea-app/ui/devicelistpages/GenericThingsListPage.qml

@@ -91,8 +91,8 @@ ThingsListPageBase {
                         spacing: app.margins
 
                         ColorIcon {
-                            Layout.preferredHeight: app.iconSize
+                            Layout.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.iconSize
+                            Layout.preferredWidth: Style.iconSize
                             name: app.interfacesToIcon(itemDelegate.thing.thingClass.interfaces)
                             color: itemDelegate.powerState && itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor
                         }

nymea-app/ui/devicelistpages/LightThingsListPage.qml

@@ -136,8 +136,8 @@ ThingsListPageBase {
 
                                 ColorIcon {
                                     id: lightIcon
-                                    Layout.preferredHeight: app.iconSize
+                                    Layout.preferredHeight: Style.iconSize
-                                    Layout.preferredWidth: app.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 {

nymea-app/ui/devicelistpages/PowerSocketsDeviceListPage.qml

@@ -85,8 +85,8 @@ ThingsListPageBase {
                         spacing: app.margins
 
                         ColorIcon {
-                            Layout.preferredHeight: app.iconSize
+                            Layout.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.iconSize
+                            Layout.preferredWidth: Style.iconSize
                             name: app.interfaceToIcon("powersocket")
                             color: itemDelegate.powerState.value === true ? Style.accentColor : Style.iconColor
                         }

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: {

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)

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 minimumWidth: Style.iconSize * 2.7 * 3
-            property int minimumHeight: app.iconSize * 4.5
+            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
                 }

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

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 <https://www.gnu.org/licenses/>.
+*
+* For any further details and any questions please contact us under
+* contact@nymea.io or see our FAQ/Licensing Information on
+* https://nymea.io/license/faq
+*
+* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
+
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.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();
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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: {

nymea-app/ui/devicepages/DoorbellDevicePage.qml

@@ -101,8 +101,8 @@ ThingPageBase {
                     }
 
                     ColorIcon {
-                        Layout.preferredHeight: app.iconSize
+                        Layout.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.iconSize
+                        Layout.preferredWidth: Style.iconSize
                         name: "../images/alarm-clock.svg"
                         color: Style.accentColor
                     }

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

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

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 {

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.preferredWidth: Style.hugeIconSize
-                    Layout.preferredHeight: app.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 ?

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
+                    height: Style.iconSize
-                    width: app.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.preferredWidth: Style.smallIconSize
-                                    Layout.preferredHeight: app.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.preferredWidth: Style.largeIconSize
-                    Layout.preferredHeight: app.largeIconSize
+                    Layout.preferredHeight: Style.largeIconSize
                     name: "../images/dialog-warning-symbolic.svg"
                     color: "red"
                     visible: detailsDialog.errorCode !== ""

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

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) {

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
+                                height: Style.iconSize
-                                width: app.iconSize
+                                width: Style.iconSize
                                 name: "../images/up.svg"
                             }
                             ColorIcon {
                                 anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom; bottomMargin: app.margins }
-                                height: app.iconSize
+                                height: Style.iconSize
-                                width: app.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 minimumHeight: Style.iconSize * 2.5
-            property int minimumWidth: app.iconSize * 2.5 * 3
+            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
 

nymea-app/ui/devicepages/SmartMeterDevicePage.qml

@@ -64,8 +64,8 @@ ThingPageBase {
 
                 contentItem: RowLayout {
                     ColorIcon {
-                        Layout.preferredHeight: app.iconSize
+                        Layout.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.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.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.iconSize
+                        Layout.preferredWidth: Style.iconSize
                         name: app.stateIcon("totalEnergyProduced")
                         color: app.stateColor("totalEnergyProduced")
                         visible: root.totalEnergyProducedState !== null

nymea-app/ui/devicepages/ThermostatDevicePage.qml

@@ -77,8 +77,8 @@ ThingPageBase {
                 anchors.centerIn: parent
                 spacing: app.margins / 2
                 ColorIcon {
-                    height: app.iconSize
+                    height: Style.iconSize
-                    width: app.iconSize
+                    width: Style.iconSize
                     name: "../images/sensors/temperature.svg"
                     color: root.boostStateType && root.boostState.value === true ? "red" : Style.iconColor
                 }

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

nymea-app/ui/experiences/heating/Main.qml

@@ -178,8 +178,8 @@ Item {
                 RowLayout {
                     spacing: app.margins
                     ColorIcon {
-                        Layout.preferredHeight: app.iconSize
+                        Layout.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.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.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.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.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.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
 //            }

nymea-app/ui/images/back.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -13,9 +11,9 @@
    height="96"
    id="svg4874"
    version="1.1"
-   inkscape:version="0.91+devel r"
+   inkscape:version="1.0.2 (1.0.2+r75+1)"
    viewBox="0 0 96 96.000001"
-   sodipodi:docname="go-previous.svg">
+   sodipodi:docname="back.svg">
   <defs
      id="defs4876">
     <clipPath
@@ -34,9 +32,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.8889466"
+     inkscape:zoom="3.093259"
-     inkscape:cx="20.182555"
+     inkscape:cx="16.805931"
-     inkscape:cy="89.679926"
+     inkscape:cy="38.930541"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -59,7 +57,13 @@
      inkscape:snap-center="true"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:snap-global="true">
+     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">
     <inkscape:grid
        type="xygrid"
        id="grid5451"
@@ -129,7 +133,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -141,7 +145,7 @@
     <g
        inkscape:label="Layer 1"
        id="layer1-695"
-       transform="translate(-2.8652345e-6,-1.4294891e-5)">
+       transform="matrix(0.83333333,0,0,0.83333333,-3.3095267,21.084161)">
       <g
          transform="matrix(0,-1,-1,0,373.50506,516.50504)"
          id="g4845-27"
@@ -159,7 +163,7 @@
              style="display:inline">
             <path
                style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1"
-               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 l 7.93911,0 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 l 0.002,0 1.22173,0.5752 1.22172,-0.5752 0.002,0 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 l 7.9412,0 z"
+               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 h 7.93911 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 h 0.002 l 1.22173,0.5752 1.22172,-0.5752 h 0.002 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 h 7.9412 z"
                id="path4265-0-4"
                inkscape:connector-curvature="0" />
             <rect

nymea-app/ui/images/cleaning-robot.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -13,20 +11,11 @@
    height="96"
    id="svg4874"
    version="1.1"
-   inkscape:version="0.91+devel r"
+   inkscape:version="1.0.2 (1.0.2+r75+1)"
    viewBox="0 0 96 96.000001"
-   sodipodi:docname="go-down.svg">
+   sodipodi:docname="cleaning-robot.svg">
   <defs
-     id="defs4876">
+     id="defs4876" />
-    <clipPath
-       clipPathUnits="userSpaceOnUse"
-       id="clipPath16">
-      <path
-         d="m 0,595.28 841.89,0 L 841.89,0 0,0 0,595.28 Z"
-         id="path18"
-         inkscape:connector-curvature="0" />
-    </clipPath>
-  </defs>
   <sodipodi:namedview
      id="base"
      pagecolor="#ffffff"
@@ -34,11 +23,11 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.5111573"
+     inkscape:zoom="4.0091255"
-     inkscape:cx="-151.39141"
+     inkscape:cx="21.576953"
-     inkscape:cy="28.091447"
+     inkscape:cy="33.816765"
      inkscape:document-units="px"
-     inkscape:current-layer="layer1"
+     inkscape:current-layer="g4780"
      showgrid="true"
      showborder="true"
      fit-margin-top="0"
@@ -59,7 +48,13 @@
      inkscape:snap-center="true"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:snap-global="true">
+     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">
     <inkscape:grid
        type="xygrid"
        id="grid5451"
@@ -76,10 +71,6 @@
        orientation="0,1"
        position="-8,88.000001"
        id="guide4067" />
-    <sodipodi:guide
-       orientation="0,1"
-       position="-8,92.000001"
-       id="guide4069" />
     <sodipodi:guide
        orientation="0,1"
        position="104,4"
@@ -116,10 +107,6 @@
        position="92,-8.0000001"
        orientation="1,0"
        id="guide4760" />
-    <sodipodi:guide
-       position="104,12"
-       orientation="0,1"
-       id="guide4207" />
   </sodipodi:namedview>
   <metadata
      id="metadata4879">
@@ -139,37 +126,58 @@
      id="layer1"
      transform="translate(67.857146,-78.50504)">
     <g
-       transform="matrix(0,-1,-1,0,106.64791,106.6479)"
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
-       id="g5743"
+       id="g4845"
-       inkscape:label="Layer 1">
+       style="display:inline">
       <g
-         style="display:inline"
+         inkscape:export-ydpi="90"
-         id="g5745"
+         inkscape:export-xdpi="90"
-         transform="matrix(0,-1,-1,0,373.50506,516.50504)">
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
         <g
-           inkscape:label="Layer 1"
+           transform="matrix(-1,0,0,1,575.99999,611)"
-           id="g5747"
+           id="g4780"
-           transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+           style="display:inline">
-           inkscape:export-filename="next01.png"
-           inkscape:export-xdpi="90"
-           inkscape:export-ydpi="90">
           <g
-             style="display:inline"
+             id="g933"
-             id="g5749"
+             transform="rotate(-180,389.98345,393.36221)">
-             transform="matrix(-1,0,0,1,575.99999,611)">
-            <path
-               inkscape:connector-curvature="0"
-               id="path5751"
-               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 l 7.93911,0 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 l 0.002,0 1.22173,0.5752 1.22172,-0.5752 0.002,0 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 l 7.9412,0 z"
-               style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1" />
             <rect
-               transform="scale(-1,1)"
+               style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
-               y="345.36221"
+               id="rect4782"
-               x="-438.00244"
-               height="96"
                width="96.037987"
-               id="rect5753"
+               height="96"
-               style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate" />
+               x="-438.00244"
+               y="345.36221"
+               transform="scale(-1,1)" />
+            <circle
+               style="opacity:0.978314;fill:none;stroke:#808080;stroke-width:4.00079;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+               id="path870"
+               cx="-393.36221"
+               cy="-389.98346"
+               transform="matrix(0,-1,-1,0,0,0)"
+               r="12.004749" />
+            <g
+               id="g925">
+              <path
+                 id="path882"
+                 style="opacity:0.978314;fill:none;stroke:#808080;stroke-width:4.00079;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                 transform="matrix(0,-1,-1,0,0,0)"
+                 d="m -433.2444,-393.05241 a 40,40.015827 0 0 1 39.91467,-36.94686 40,40.015827 0 0 1 39.85464,37.01167" />
+            </g>
+            <path
+               id="path884"
+               style="opacity:0.978314;fill:none;stroke:#808080;stroke-width:4.00079;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+               transform="matrix(0,-1,-1,0,0,0)"
+               d="m -361.49894,-387.0052 c -1.50171,16.28161 -15.18835,29.02685 -31.84966,29.0344 -16.64573,0.008 -30.33317,-12.70306 -31.87006,-28.96164 -0.14356,-8.053 -12.14356,-7.0526 -12.13131,-2.01097 0.36022,15.29306 8.64856,29.33775 21.93232,37.03293 13.61209,7.88538 30.39843,7.90375 44.0277,0.0481 13.32947,-7.68285 21.65572,-21.75379 22.01558,-37.0848 0.0122,-5.03786 -11.98785,-6.03826 -12.12457,1.94198 z"
+               sodipodi:nodetypes="csccsscc" />
+            <path
+               id="rect890"
+               style="opacity:0.978314;fill:none;stroke:#808080;stroke-width:4.00079;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+               transform="matrix(0,-1,-1,0,0,0)"
+               d="m -377.36222,-425.9977 10e-6,7.00278 c 0,2.77109 -2.23,5.00198 -5,5.00198 h -22 c -2.77,0 -5,-2.23089 -5,-5.00198 l -10e-6,-7.00278"
+               sodipodi:nodetypes="cssssc" />
           </g>
         </g>
       </g>

nymea-app/ui/images/down.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -13,9 +11,9 @@
    height="96"
    id="svg4874"
    version="1.1"
-   inkscape:version="0.91+devel r"
+   inkscape:version="1.0.2 (1.0.2+r75+1)"
    viewBox="0 0 96 96.000001"
-   sodipodi:docname="go-down.svg">
+   sodipodi:docname="down.svg">
   <defs
      id="defs4876">
     <clipPath
@@ -34,9 +32,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.5111573"
+     inkscape:zoom="5.9314882"
-     inkscape:cx="-151.39141"
+     inkscape:cx="54.685555"
-     inkscape:cy="28.091447"
+     inkscape:cy="51.771487"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -59,7 +57,13 @@
      inkscape:snap-center="true"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:snap-global="true">
+     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">
     <inkscape:grid
        type="xygrid"
        id="grid5451"
@@ -129,7 +133,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -139,7 +143,7 @@
      id="layer1"
      transform="translate(67.857146,-78.50504)">
     <g
-       transform="matrix(0,-1,-1,0,106.64791,106.6479)"
+       transform="matrix(0,-0.83333333,-0.83333334,0,85.56373,109.95742)"
        id="g5743"
        inkscape:label="Layer 1">
       <g
@@ -160,7 +164,7 @@
             <path
                inkscape:connector-curvature="0"
                id="path5751"
-               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 l 7.93911,0 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 l 0.002,0 1.22173,0.5752 1.22172,-0.5752 0.002,0 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 l 7.9412,0 z"
+               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 h 7.93911 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 h 0.002 l 1.22173,0.5752 1.22172,-0.5752 h 0.002 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 h 7.9412 z"
                style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1" />
             <rect
                transform="scale(-1,1)"

nymea-app/ui/images/next.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -13,9 +11,9 @@
    height="96"
    id="svg4874"
    version="1.1"
-   inkscape:version="0.91+devel r"
+   inkscape:version="1.0.2 (1.0.2+r75+1)"
    viewBox="0 0 96 96.000001"
-   sodipodi:docname="go-next.svg">
+   sodipodi:docname="next.svg">
   <defs
      id="defs4876">
     <clipPath
@@ -34,9 +32,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.8889466"
+     inkscape:zoom="3.7870925"
-     inkscape:cx="-134.66566"
+     inkscape:cx="-14.378035"
-     inkscape:cy="89.679926"
+     inkscape:cy="53.329964"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -59,7 +57,13 @@
      inkscape:snap-center="true"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:snap-global="true">
+     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">
     <inkscape:grid
        type="xygrid"
        id="grid5451"
@@ -129,7 +133,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -141,7 +145,7 @@
     <g
        inkscape:label="Layer 1"
        id="layer1-695"
-       transform="matrix(-1,0,0,1,-39.714289,-1.4294891e-5)">
+       transform="matrix(-0.83333334,0,0,0.83333334,-36.404765,21.084161)">
       <g
          transform="matrix(0,-1,-1,0,373.50506,516.50504)"
          id="g4845-27"
@@ -159,7 +163,7 @@
              style="display:inline">
             <path
                style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1"
-               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 l 7.93911,0 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 l 0.002,0 1.22173,0.5752 1.22172,-0.5752 0.002,0 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 l 7.9412,0 z"
+               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 h 7.93911 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 h 0.002 l 1.22173,0.5752 1.22172,-0.5752 h 0.002 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 h 7.9412 z"
                id="path4265-0-4"
                inkscape:connector-curvature="0" />
             <rect

nymea-app/ui/images/up.svg

@@ -1,6 +1,4 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
@@ -13,9 +11,9 @@
    height="96"
    id="svg4874"
    version="1.1"
-   inkscape:version="0.91+devel r"
+   inkscape:version="1.0.2 (1.0.2+r75+1)"
    viewBox="0 0 96 96.000001"
-   sodipodi:docname="go-up.svg">
+   sodipodi:docname="up.svg">
   <defs
      id="defs4876">
     <clipPath
@@ -34,9 +32,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="1.5111573"
+     inkscape:zoom="5.0171326"
-     inkscape:cx="-151.39141"
+     inkscape:cx="27.786231"
-     inkscape:cy="28.091447"
+     inkscape:cy="77.066646"
      inkscape:document-units="px"
      inkscape:current-layer="layer1"
      showgrid="true"
@@ -59,7 +57,13 @@
      inkscape:snap-center="true"
      showguides="true"
      inkscape:guide-bbox="true"
-     inkscape:snap-global="true">
+     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">
     <inkscape:grid
        type="xygrid"
        id="grid5451"
@@ -129,7 +133,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -139,7 +143,7 @@
      id="layer1"
      transform="translate(67.857146,-78.50504)">
     <g
-       transform="rotate(90,-19.857136,126.50505)"
+       transform="matrix(0,0.83333346,-0.83333346,0,85.563754,143.05266)"
        id="g5743"
        inkscape:label="Layer 1">
       <g
@@ -160,7 +164,7 @@
             <path
                inkscape:connector-curvature="0"
                id="path5751"
-               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 l 7.93911,0 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 l 0.002,0 1.22173,0.5752 1.22172,-0.5752 0.002,0 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 l 7.9412,0 z"
+               d="m 437.00209,379.49587 c -5.24691,4.1449 -10.54573,8.128 -15.94494,11.7914 -6.00476,4.0757 -11.8322,7.7257 -17.4773,10.9536 -5.20923,2.9783 -9.64507,5.2206 -13.59532,7.0003 -3.95086,-1.7798 -8.3889,-4.0213 -13.59947,-7.0003 -5.64495,-3.2278 -11.47152,-6.8778 -17.47731,-10.9536 -5.39821,-3.6627 -10.69595,-7.6466 -15.94285,-11.7914 h 7.93911 c 3.15098,2.4002 6.38063,4.7681 9.75501,7.0752 4.26477,2.9172 8.6291,5.6557 13.09079,8.2194 4.52823,2.6011 10.75085,5.7064 15.00884,7.7151 h 0.002 l 1.22173,0.5752 1.22172,-0.5752 h 0.002 c 4.25899,-2.0087 10.48126,-5.1138 15.00884,-7.7151 4.46175,-2.5637 8.82538,-5.3023 13.09078,-8.2194 3.37342,-2.307 6.60393,-4.6749 9.75502,-7.0752 h 7.9412 z"
                style="display:inline;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1" />
             <rect
                transform="scale(-1,1)"

nymea-app/ui/magic/EditRulePage.qml

@@ -328,8 +328,8 @@ Page {
 
                     ColorIcon {
                         name: "../images/settings.svg"
-                        Layout.preferredHeight: app.iconSize
+                        Layout.preferredHeight: Style.iconSize
-                        Layout.preferredWidth: app.iconSize
+                        Layout.preferredWidth: Style.iconSize
                         MouseArea {
                             anchors.fill: parent
                             onClicked: ruleSettings.showDetails = !ruleSettings.showDetails
@@ -376,7 +376,7 @@ Page {
                 GridLayout {
                     id: colorsGrid
                     Layout.fillWidth: true
-                    columns: (root.width / 10 < app.iconSize + app.margins) ? 5 : 10
+                    columns: (root.width / 10 < Style.iconSize + app.margins) ? 5 : 10
                     columnSpacing: app.margins
                     rowSpacing: app.margins
                     Layout.preferredHeight: opacity > 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
+                                height: Style.iconSize
-                                width: app.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
+                                height: Style.iconSize
-                                width: app.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: {

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

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]()

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
 

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
+                    height: Style.iconSize * 2
-                    width: app.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
+                    height: Style.iconSize * 5
-                    width: app.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
+                    height: Style.iconSize * 6
-                    width: app.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
+                            height: Style.iconSize * 4
-                            width: app.iconSize * 4
+                            width: Style.iconSize * 4
                             name: nfcWriter.status == NfcThingActionWriter.TagStatusFailed ? "../images/close.svg" : "../images/tick.svg"
                             color: nfcWriter.status == NfcThingActionWriter.TagStatusFailed ? "red" : "green"
                         }

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 {

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: {

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

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.preferredHeight: Style.iconSize
-            Layout.preferredWidth: app.iconSize
+            Layout.preferredWidth: Style.iconSize
             name: "../images/connections/network-wired-disabled.svg"
         }
         Label {
@@ -491,8 +491,8 @@ SettingsPageBase {
                 }
 
                 ColorIcon {
-                    Layout.preferredHeight: app.iconSize
+                    Layout.preferredHeight: Style.iconSize
-                    Layout.preferredWidth: app.iconSize
+                    Layout.preferredWidth: Style.iconSize
                     name: "../images/eye.svg"
                     color: passwordTextField.showPassword ? Style.accentColor : Style.iconColor
                     MouseArea {

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.preferredHeight: Style.iconSize * 2
-                        Layout.preferredWidth: app.iconSize * 2
+                        Layout.preferredWidth: Style.iconSize * 2
                         name: "../images/plugin.svg"
                         color: Style.accentColor
                     }

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.preferredHeight: Style.iconSize
-            Layout.preferredWidth: app.iconSize
+            Layout.preferredWidth: Style.iconSize
             name: "../images/connections/network-wifi-offline.svg"
         }
         Label {

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.preferredWidth: Style.iconSize
-                            Layout.preferredHeight: app.iconSize
+                            Layout.preferredHeight: Style.iconSize
                         }
 
                         Label {
@@ -97,8 +97,8 @@ SettingsPageBase {
                         }
 
                         ProgressButton {
-                            Layout.preferredWidth: app.iconSize
+                            Layout.preferredWidth: Style.iconSize
-                            Layout.preferredHeight: app.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.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.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.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.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.preferredHeight: Style.iconSize
-                            Layout.preferredWidth: app.iconSize
+                            Layout.preferredWidth: Style.iconSize
                             rotation: -90
                             visible: model.permitJoiningEnabled
 

nymea-app/ui/thingconfiguration/NewThingPage.qml

@@ -121,8 +121,8 @@ Page {
                 }
 
                 Item {
-                    Layout.preferredHeight: app.iconSize
+                    Layout.preferredHeight: Style.iconSize
-                    Layout.minimumWidth: app.iconSize
+                    Layout.minimumWidth: Style.iconSize
 
                     ColorIcon {
                         height: parent.height

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";
         }