From f5f73b4bea1d13132143e20033cbe21d7434c907 Mon Sep 17 00:00:00 2001
From: Michael Zanetti <michael_zanetti@gmx.net>
Date: Sun, 8 Jul 2018 02:20:15 +0200
Subject: [PATCH] more work on closable interfaces

---
 libnymea-app-core/jsonrpc/jsonrpcclient.cpp   |   2 +-
 nymea-app/resources.qrc                       |  34 +++--
 nymea-app/ui/ConnectPage.qml                  |   1 +
 nymea-app/ui/Nymea.qml                        |  28 +++-
 nymea-app/ui/components/ShutterControls.qml   |   6 +-
 nymea-app/ui/devicepages/AwningDevicePage.qml |  82 ++++++++++++
 .../ui/devicepages/GarageGateDevicePage.qml   |   6 +-
 .../ui/devicepages/ShutterDevicePage.qml      |  71 +++++++++-
 nymea-app/ui/images/awning/awning-000.svg     |  71 ++++++++++
 nymea-app/ui/images/awning/awning-010.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-020.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-030.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-040.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-050.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-060.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-070.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-080.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-090.svg     | 125 ++++++++++++++++++
 nymea-app/ui/images/awning/awning-100.svg     | 125 ++++++++++++++++++
 .../shutter-000.svg}                          |   0
 .../shutter-010.svg}                          |   0
 .../shutter-020.svg}                          |   0
 .../shutter-030.svg}                          |   0
 .../shutter-040.svg}                          |   0
 .../shutter-050.svg}                          |   0
 .../shutter-060.svg}                          |   0
 .../shutter-070.svg}                          |   0
 .../shutter-080.svg}                          |   0
 .../shutter-090.svg}                          |   0
 .../shutter-100.svg}                          |   0
 30 files changed, 1521 insertions(+), 30 deletions(-)
 create mode 100644 nymea-app/ui/devicepages/AwningDevicePage.qml
 create mode 100644 nymea-app/ui/images/awning/awning-000.svg
 create mode 100644 nymea-app/ui/images/awning/awning-010.svg
 create mode 100644 nymea-app/ui/images/awning/awning-020.svg
 create mode 100644 nymea-app/ui/images/awning/awning-030.svg
 create mode 100644 nymea-app/ui/images/awning/awning-040.svg
 create mode 100644 nymea-app/ui/images/awning/awning-050.svg
 create mode 100644 nymea-app/ui/images/awning/awning-060.svg
 create mode 100644 nymea-app/ui/images/awning/awning-070.svg
 create mode 100644 nymea-app/ui/images/awning/awning-080.svg
 create mode 100644 nymea-app/ui/images/awning/awning-090.svg
 create mode 100644 nymea-app/ui/images/awning/awning-100.svg
 rename nymea-app/ui/images/{shutter-0.svg => shutter/shutter-000.svg} (100%)
 rename nymea-app/ui/images/{shutter-1.svg => shutter/shutter-010.svg} (100%)
 rename nymea-app/ui/images/{shutter-2.svg => shutter/shutter-020.svg} (100%)
 rename nymea-app/ui/images/{shutter-3.svg => shutter/shutter-030.svg} (100%)
 rename nymea-app/ui/images/{shutter-4.svg => shutter/shutter-040.svg} (100%)
 rename nymea-app/ui/images/{shutter-5.svg => shutter/shutter-050.svg} (100%)
 rename nymea-app/ui/images/{shutter-6.svg => shutter/shutter-060.svg} (100%)
 rename nymea-app/ui/images/{shutter-7.svg => shutter/shutter-070.svg} (100%)
 rename nymea-app/ui/images/{shutter-8.svg => shutter/shutter-080.svg} (100%)
 rename nymea-app/ui/images/{shutter-9.svg => shutter/shutter-090.svg} (100%)
 rename nymea-app/ui/images/{shutter-10.svg => shutter/shutter-100.svg} (100%)

diff --git a/libnymea-app-core/jsonrpc/jsonrpcclient.cpp b/libnymea-app-core/jsonrpc/jsonrpcclient.cpp
index 91773949..edf18a71 100644
--- a/libnymea-app-core/jsonrpc/jsonrpcclient.cpp
+++ b/libnymea-app-core/jsonrpc/jsonrpcclient.cpp
@@ -279,7 +279,7 @@ void JsonRpcClient::dataReceived(const QByteArray &data)
 //        qWarning() << "Could not parse json data from nymea" << m_receiveBuffer.left(splitIndex) << error.errorString();
         return;
     }
-//    qDebug() << "received response" << m_receiveBuffer.left(splitIndex);
+//    qDebug() << "received response" << qUtf8Printable(jsonDoc.toJson(QJsonDocument::Indented));
     m_receiveBuffer = m_receiveBuffer.right(m_receiveBuffer.length() - splitIndex - 1);
     if (!m_receiveBuffer.isEmpty()) {
         staticMetaObject.invokeMethod(this, "dataReceived", Qt::QueuedConnection, Q_ARG(QByteArray, QByteArray()));
diff --git a/nymea-app/resources.qrc b/nymea-app/resources.qrc
index 7cca24d7..b5fafe89 100644
--- a/nymea-app/resources.qrc
+++ b/nymea-app/resources.qrc
@@ -160,21 +160,21 @@
         <file>ui/AboutPage.qml</file>
         <file>ui/images/sort-listitem.svg</file>
         <file>ui/devicepages/ShutterDevicePage.qml</file>
-        <file>ui/images/shutter-1.svg</file>
-        <file>ui/images/shutter-2.svg</file>
-        <file>ui/images/shutter-3.svg</file>
-        <file>ui/images/shutter-4.svg</file>
-        <file>ui/images/shutter-5.svg</file>
-        <file>ui/images/shutter-6.svg</file>
-        <file>ui/images/shutter-7.svg</file>
-        <file>ui/images/shutter-8.svg</file>
-        <file>ui/images/shutter-9.svg</file>
-        <file>ui/images/shutter-10.svg</file>
+        <file>ui/images/shutter/shutter-000.svg</file>
+        <file>ui/images/shutter/shutter-010.svg</file>
+        <file>ui/images/shutter/shutter-020.svg</file>
+        <file>ui/images/shutter/shutter-030.svg</file>
+        <file>ui/images/shutter/shutter-040.svg</file>
+        <file>ui/images/shutter/shutter-050.svg</file>
+        <file>ui/images/shutter/shutter-060.svg</file>
+        <file>ui/images/shutter/shutter-070.svg</file>
+        <file>ui/images/shutter/shutter-080.svg</file>
+        <file>ui/images/shutter/shutter-090.svg</file>
+        <file>ui/images/shutter/shutter-100.svg</file>
         <file>ui/images/down.svg</file>
         <file>ui/images/up.svg</file>
         <file>ui/devicepages/GarageGateDevicePage.qml</file>
         <file>ui/images/remove.svg</file>
-        <file>ui/images/shutter-0.svg</file>
         <file>ui/components/ShutterControls.qml</file>
         <file>../LICENSE</file>
         <file>ui/images/Built_with_Qt_RGB_logo.svg</file>
@@ -214,5 +214,17 @@
         <file>ui/components/FancyHeader.qml</file>
         <file>ui/connection/ManualConnectPage.qml</file>
         <file>ui/connection/BluetoothDiscoveryPage.qml</file>
+        <file>ui/images/awning/awning-100.svg</file>
+        <file>ui/devicepages/AwningDevicePage.qml</file>
+        <file>ui/images/awning/awning-000.svg</file>
+        <file>ui/images/awning/awning-010.svg</file>
+        <file>ui/images/awning/awning-020.svg</file>
+        <file>ui/images/awning/awning-030.svg</file>
+        <file>ui/images/awning/awning-040.svg</file>
+        <file>ui/images/awning/awning-050.svg</file>
+        <file>ui/images/awning/awning-060.svg</file>
+        <file>ui/images/awning/awning-070.svg</file>
+        <file>ui/images/awning/awning-080.svg</file>
+        <file>ui/images/awning/awning-090.svg</file>
     </qresource>
 </RCC>
diff --git a/nymea-app/ui/ConnectPage.qml b/nymea-app/ui/ConnectPage.qml
index 61fe1110..9f4d68f2 100644
--- a/nymea-app/ui/ConnectPage.qml
+++ b/nymea-app/ui/ConnectPage.qml
@@ -93,6 +93,7 @@ Page {
                         break;
                     case 2:
                         Engine.connection.connect("nymea://nymea.nymea.io:2222")
+                        pageStack.push(connectingPage)
                         break;
                     }
                 }
diff --git a/nymea-app/ui/Nymea.qml b/nymea-app/ui/Nymea.qml
index d7a0e680..dd2da443 100644
--- a/nymea-app/ui/Nymea.qml
+++ b/nymea-app/ui/Nymea.qml
@@ -134,7 +134,7 @@ ApplicationWindow {
         }
     }
 
-    property var supportedInterfaces: ["light", "weather", "sensor", "media", "garagegate", "shutter", "garagegate", "button", "notifications", "inputtrigger", "outputtrigger", "gateway"]
+    property var supportedInterfaces: ["light", "weather", "sensor", "media", "garagegate", "awning", "extendedawning", "shutter", "extendedshutter", "blind", "extendedblind", "button", "notifications", "inputtrigger", "outputtrigger", "gateway"]
     function interfaceToString(name) {
         switch(name) {
         case "light":
@@ -160,9 +160,14 @@ ApplicationWindow {
         case "outputtrigger":
             return qsTr("Events");
         case "shutter":
+        case "extendedshutter":
             return qsTr("Shutters");
         case "blind":
+        case "extendedblind":
             return qsTr("Blinds");
+        case "awning":
+        case "extendedawning":
+            return qsTr("Awnings");
         case "garagegate":
             return qsTr("Garage gates");
         case "uncategorized":
@@ -214,11 +219,13 @@ ApplicationWindow {
             return Qt.resolvedUrl("images/attention.svg")
         case "outputtrigger":
             return Qt.resolvedUrl("images/send.svg")
-        case "shutter":
-        case "blind":
+        case "extendedshutter":
+        case "extendedblind":
             return Qt.resolvedUrl("images/sort-listitem.svg")
         case "garagegate":
-            return Qt.resolvedUrl("images/shutter-10.svg")
+            return Qt.resolvedUrl("images/shutter/shutter-100.svg")
+        case "extendedawning":
+            return Qt.resolvedUrl("images/awning/awning-100.svg")
         case "battery":
             return Qt.resolvedUrl("images/battery/battery-050.svg")
         case "uncategorized":
@@ -249,12 +256,14 @@ ApplicationWindow {
             page = "SensorDevicePage.qml";
         } else if (interfaceList.indexOf("inputtrigger") >= 0) {
             page = "InputTriggerDevicePage.qml";
-        } else if (interfaceList.indexOf("shutter") >= 0 ) {
-            page = "ShutterDevicePage.qml";
         } else if (interfaceList.indexOf("garagegate") >= 0 ) {
             page = "GarageGateDevicePage.qml";
         } else if (interfaceList.indexOf("light") >= 0) {
-            page = "ColorLightDevicePage.qml"
+            page = "ColorLightDevicePage.qml";
+        } else if (interfaceList.indexOf("extendedshutter") >= 0 ) {
+            page = "ShutterDevicePage.qml";
+        } else if (interfaceList.indexOf("extendedawning") >= 0) {
+            page = "AwningDevicePage.qml";
         } else {
             page = "GenericDevicePage.qml";
         }
@@ -262,6 +271,11 @@ ApplicationWindow {
         return page;
     }
 
+    function pad(num, size) {
+        var s = "000000000" + num;
+        return s.substr(s.length-size);
+    }
+
     Component {
         id: invalidVersionComponent
         Popup {
diff --git a/nymea-app/ui/components/ShutterControls.qml b/nymea-app/ui/components/ShutterControls.qml
index 3751a058..f1a09f81 100644
--- a/nymea-app/ui/components/ShutterControls.qml
+++ b/nymea-app/ui/components/ShutterControls.qml
@@ -14,6 +14,8 @@ RowLayout {
     readonly property var deviceClass: device ? Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId) : null
     readonly property var openState: device ? device.states.getState(deviceClass.stateTypes.findByName("state").id) : null
 
+    property bool invert: false
+
     Rectangle {
         Layout.preferredWidth: app.iconSize * 2
         Layout.preferredHeight: width
@@ -23,7 +25,7 @@ RowLayout {
         ColorIcon {
             anchors.fill: parent
             anchors.margins: app.margins
-            name: "../images/up.svg"
+            name: root.invert ? "../images/down.svg" : "../images/up.svg"
         }
         MouseArea {
             anchors.fill: parent
@@ -57,7 +59,7 @@ RowLayout {
         ColorIcon {
             anchors.fill: parent
             anchors.margins: app.margins
-            name: "../images/down.svg"
+            name: root.invert ? "../images/up.svg" : "../images/down.svg"
         }
         MouseArea {
             anchors.fill: parent
diff --git a/nymea-app/ui/devicepages/AwningDevicePage.qml b/nymea-app/ui/devicepages/AwningDevicePage.qml
new file mode 100644
index 00000000..1b8e38f3
--- /dev/null
+++ b/nymea-app/ui/devicepages/AwningDevicePage.qml
@@ -0,0 +1,82 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.2
+import QtQuick.Layouts 1.1
+import Nymea 1.0
+import "../components"
+import "../customviews"
+
+DevicePageBase {
+    id: root
+
+    readonly property bool landscape: width > height
+    readonly property bool isExtended: deviceClass.interfaces.indexOf("extendedawning") >= 0
+    readonly property var percentageState: isExtended ? device.states.getState(deviceClass.stateTypes.findByName("percentage").id) : 0
+    readonly property var movingState: isExtended ? device.states.getState(deviceClass.stateTypes.findByName("moving").id) : 0
+
+    GridLayout {
+        anchors.fill: parent
+        columns: root.landscape ? 2 : 1
+
+        ColorIcon {
+            id: shutterImage
+            Layout.preferredWidth: root.landscape ? Math.min(parent.width - shutterControlsContainer.width, parent.height) - app.margins : parent.width
+            Layout.preferredHeight: width
+            name: "../images/awning/awning-" + app.pad(Math.round(root.percentageState.value / 10) * 10, 3) + ".svg"
+            visible: isExtended
+        }
+
+
+        Item {
+            id: shutterControlsContainer
+            Layout.preferredWidth: root.landscape ? Math.max(parent.width / 2, shutterControls.implicitWidth) : parent.width
+            Layout.minimumWidth: shutterControls.implicitWidth
+            Layout.fillHeight: true
+            Layout.minimumHeight: app.iconSize * 2.5
+
+            Column {
+                anchors.centerIn: parent
+                width: parent.width - app.margins * 2
+                spacing: app.margins
+
+                Slider {
+                    id: percentageSlider
+                    width: parent.width
+                    from: 0
+                    to: 100
+                    stepSize: 1
+                    visible: isExtended
+
+                    Binding {
+                        target: percentageSlider
+                        property: "value"
+                        value: root.percentageState.value
+                        when: root.movingState.value === false
+                    }
+
+                    onPressedChanged: {
+                        if (!pressed) {
+                            return
+                        }
+
+                        var actionType = root.deviceClass.actionTypes.findByName("percentage");
+                        var params = [];
+                        var percentageParam = {}
+                        percentageParam["paramTypeId"] = actionType.paramTypes.findByName("percentage").id;
+                        percentageParam["value"] = value
+                        params.push(percentageParam);
+                        Engine.deviceManager.executeAction(root.device.id, actionType.id, params);
+                    }
+                }
+
+                ShutterControls {
+                    id: shutterControls
+                    device: root.device
+                    invert: true
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
+
+        }
+    }
+}
diff --git a/nymea-app/ui/devicepages/GarageGateDevicePage.qml b/nymea-app/ui/devicepages/GarageGateDevicePage.qml
index 2ae01c55..b82b7011 100644
--- a/nymea-app/ui/devicepages/GarageGateDevicePage.qml
+++ b/nymea-app/ui/devicepages/GarageGateDevicePage.qml
@@ -23,9 +23,9 @@ DevicePageBase {
             id: shutterImage
             Layout.preferredWidth: root.landscape ? Math.min(parent.width - shutterControlsContainer.width, parent.height) - app.margins : parent.width
             Layout.preferredHeight: width
-            property int currentImage: root.openState.value === "closed" ? 10 :
-                                    root.openState.value === "open" && root.intermediatePositionState.value === false ? 0 : 5
-            name: "../images/shutter-" + currentImage + ".svg"
+            property string currentImage: root.openState.value === "closed" ? "100" :
+                                    root.openState.value === "open" && root.intermediatePositionState.value === false ? "000" : "050"
+            name: "../images/shutter/shutter-" + currentImage + ".svg"
 
             Item {
                 id: arrows
diff --git a/nymea-app/ui/devicepages/ShutterDevicePage.qml b/nymea-app/ui/devicepages/ShutterDevicePage.qml
index e4bb5c7c..af9cc202 100644
--- a/nymea-app/ui/devicepages/ShutterDevicePage.qml
+++ b/nymea-app/ui/devicepages/ShutterDevicePage.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.2
 import QtQuick.Layouts 1.1
 import Nymea 1.0
 import "../components"
@@ -8,13 +9,71 @@ import "../customviews"
 DevicePageBase {
     id: root
 
+    readonly property bool landscape: width > height
+    readonly property bool isExtended: deviceClass.interfaces.indexOf("extendedshutter") >= 0
+    readonly property var percentageState: isExtended ? device.states.getState(deviceClass.stateTypes.findByName("percentage").id) : 0
+    readonly property var movingState: isExtended ? device.states.getState(deviceClass.stateTypes.findByName("moving").id) : 0
 
-    ShutterControls {
-        anchors {
-            top: parent.top
-            topMargin: app.iconSize
-            horizontalCenter: parent.horizontalCenter
+    GridLayout {
+        anchors.fill: parent
+        columns: root.landscape ? 2 : 1
+
+        ColorIcon {
+            id: shutterImage
+            Layout.preferredWidth: root.landscape ? Math.min(parent.width - shutterControlsContainer.width, parent.height) - app.margins : parent.width
+            Layout.preferredHeight: width
+            name: "../images/shutter/shutter-" + app.pad(Math.round(root.percentageState.value / 10) * 10, 3) + ".svg"
+            visible: isExtended
+        }
+
+        Item {
+            id: shutterControlsContainer
+            Layout.preferredWidth: root.landscape ? Math.max(parent.width / 2, shutterControls.implicitWidth) : parent.width
+            Layout.minimumWidth: shutterControls.implicitWidth
+            Layout.fillHeight: true
+            Layout.minimumHeight: app.iconSize * 2.5
+
+            Column {
+                anchors.centerIn: parent
+                width: parent.width - app.margins * 2
+                spacing: app.margins
+
+                Slider {
+                    id: percentageSlider
+                    width: parent.width
+                    from: 0
+                    to: 100
+                    stepSize: 1
+                    visible: isExtended
+
+                    Binding {
+                        target: percentageSlider
+                        property: "value"
+                        value: root.percentageState.value
+                        when: root.movingState.value === false
+                    }
+
+                    onPressedChanged: {
+                        if (pressed) {
+                            return;
+                        }
+
+                        var actionType = root.deviceClass.actionTypes.findByName("percentage");
+                        var params = [];
+                        var percentageParam = {}
+                        percentageParam["paramTypeId"] = actionType.paramTypes.findByName("percentage").id;
+                        percentageParam["value"] = value
+                        params.push(percentageParam);
+                        Engine.deviceManager.executeAction(root.device.id, actionType.id, params);
+                    }
+                }
+
+                ShutterControls {
+                    id: shutterControls
+                    device: root.device
+                    anchors.horizontalCenter: parent.horizontalCenter
+                }
+            }
         }
-        device: root.device
     }
 }
diff --git a/nymea-app/ui/images/awning/awning-000.svg b/nymea-app/ui/images/awning/awning-000.svg
new file mode 100644
index 00000000..78f1fce6
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-000.svg
@@ -0,0 +1,71 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-010.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="56.041668"
+     inkscape:cx="72.582805"
+     inkscape:cy="69.538211"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.10294,17.5322 c -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.899898,6.531203 -0.0034,2.692903 0.234402,4.774603 0.893062,6.529303 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 32.036191,-0.08721 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.893303,-6.485648 C 79.99942,21.3706 79.7616,19.2869 79.10294,17.5322 Z m -3.737745,11.568998 c -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -31.990191,0.08721 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.639162,-5.124952 0.0034,-2.432053 0.255738,-4.085353 0.645998,-5.124953 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.643798,5.081348 0.0032,2.388447 -0.247193,4.041747 -0.637443,5.081347 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="ccccccccccccccccccccccccccccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-010.svg b/nymea-app/ui/images/awning/awning-010.svg
new file mode 100644
index 00000000..708e9f7f
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-010.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-010.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="39.627444"
+     inkscape:cx="61.990377"
+     inkscape:cy="60.409434"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 -0.798613,3.493452 0.134121,-0.58231 -0.323478,1.363742 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 32.676867,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -0.80907,-3.648505 0.539803,2.458611 -0.330389,-1.312222 z m -3.669571,1.312221 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -32.630867,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 -1.653075,7.173864 -0.664476,2.917394 0.323478,-1.363741 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 0.8149,3.469479 -0.119672,-0.617008 0.330389,1.312221 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccsccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 0.735294 0.735294 0.735294 0.735294 l -0.294118,1.444445 h -2.980391 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     sodipodi:nodetypes="cccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 0.735294 0.735294 0.735294 0.735294 l -0.215686,1.444445 h -2.980392 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 34.764706,24 H 35.5 h 0.735294 0.735294 0.735294 l -0.137255,1.444445 h -2.980392 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     sodipodi:nodetypes="cccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 0.735294 0.735294 0.735294 0.735294 l -0.05882,1.444445 h -2.980379 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 46.529412,24 H 47.264706 48 h 0.735294 0.735294 l 0.01961,1.444445 h -2.980389 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     sodipodi:nodetypes="cccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 0.735294 0.735294 0.735294 0.735294 l 0.09804,1.444445 h -2.980379 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 58.294118,24 H 59.029412 59.764706 60.5 61.235294 l 0.17647,1.444445 h -2.980391 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+  <path
+     sodipodi:nodetypes="cccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 0.735294 0.735294 0.735294 0.735294 l 0.254902,1.444445 h -2.980392 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 70.058824,24 h 0.735294 0.735294 0.735294 H 73 l 0.333333,1.444445 h -2.980391 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="cccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-020.svg b/nymea-app/ui/images/awning/awning-020.svg
new file mode 100644
index 00000000..f844d3a6
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-020.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-020.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="19.813722"
+     inkscape:cx="44.12704"
+     inkscape:cy="64.04843"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 -0.798613,3.493452 -0.6734,2.660639 -1.130999,4.606691 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 34.266674,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 C 80.303025,24.907666 80.869612,27.771833 79.99942,24.001 Z m -2.887285,4.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -34.220674,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 -1.653075,7.173864 0.143045,-0.325555 1.130999,-4.60669 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 0.8149,3.469479 0.662614,2.625941 1.112675,4.55517 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccsccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 h -3.098038 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     sodipodi:nodetypes="ccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 h -3.098039 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 h -3.098038 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     sodipodi:nodetypes="ccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 h -3.098039 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 h -3.098049 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     sodipodi:nodetypes="ccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 h -3.098039 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 h -3.098038 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+  <path
+     sodipodi:nodetypes="ccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 h -3.098039 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 h -3.098038 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-030.svg b/nymea-app/ui/images/awning/awning-030.svg
new file mode 100644
index 00000000..05c2d822
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-030.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-040.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="19.813722"
+     inkscape:cx="44.12704"
+     inkscape:cy="64.04843"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 c -0.747068,3.544984 -0.600882,2.654796 -1.109888,4.828913 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 36.891118,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 C 82,32.662424 81.722415,31.318654 81.332753,29.778778 Z m -1.575063,10.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -36.845118,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 -0.401787,1.988965 -1.180322,5.095325 1.109888,-4.828913 L 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 c 0.80549,3.494209 0.586478,2.614534 1.091564,4.777392 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccsccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 h -3.254902 l 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 h -3.254902 l 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 h -3.254902 l 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 h -3.254902 l 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 h -3.254909 l 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 h -3.254902 l -0.235294,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 h -3.254902 l -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 h -3.254902 l -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 -3.254902,0 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-040.svg b/nymea-app/ui/images/awning/awning-040.svg
new file mode 100644
index 00000000..1b5a8a97
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-040.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-040a.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="19.813722"
+     inkscape:cx="36.436671"
+     inkscape:cy="50.491238"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 -1.333334,5.777778 c -0.845919,3.708689 -0.766471,3.014769 -1.240186,5.051135 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 39.797739,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -0.529487,-1.981047 1.741888,7.753849 -1.201219,-4.999615 l -1.333334,-5.777778 z m -0.132074,16.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -39.751739,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 0.553833,-2.191308 -1.747014,7.893398 1.240186,-5.051135 L 18.665687,29.778777 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 1.333334,5.777778 c 0.824082,3.718717 0.740213,3.021243 1.201219,4.999614 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccsccccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -3.411764,0 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 h -3.411765 l 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 h -3.411764 l 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 h -3.411765 l 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 h -3.411769 l 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 h -3.411765 l -0.235294,-5.777777 -0.235294,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 h -3.411764 l -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 h -3.411765 l -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 h -3.411764 l -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-050.svg b/nymea-app/ui/images/awning/awning-050.svg
new file mode 100644
index 00000000..1f8b86b3
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-050.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-050.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="19.813722"
+     inkscape:cx="48.044788"
+     inkscape:cy="40.397223"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 -1.333334,5.777778 -1.333333,5.777777 c -0.804884,3.654504 -0.644896,2.799183 -1.219075,5.273358 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 42.472653,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -1.191819,-4.926508 1.792117,7.876509 -1.230578,-5.221838 l -1.333333,-5.777777 -1.333334,-5.777778 z m 1.230618,22.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -42.426653,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 1.23818,-5.081723 -1.82231,7.90598 1.219075,-5.273358 L 17.332353,35.556555 18.665687,29.778777 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 1.333334,5.777778 1.333333,5.777777 c 0.788131,3.621143 0.644288,2.694698 1.230578,5.221837 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccsccccccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -3.568627,0 L 19,41.333333 l 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 h -3.568628 l 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 h -3.568627 l 0.705882,-5.777778 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 h -3.568628 l 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 h -3.568629 l 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 h -3.568628 l -0.235294,-5.777778 -0.235294,-5.777777 -0.235294,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 0.705882,5.777778 h -3.568627 l -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 h -3.568628 l -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 l 1.333333,5.777778 h -3.568627 l -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-060.svg b/nymea-app/ui/images/awning/awning-060.svg
new file mode 100644
index 00000000..ceb376c4
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-060.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-060.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="19.813722"
+     inkscape:cx="46.545619"
+     inkscape:cy="40.397223"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 -1.333334,5.777778 -1.333333,5.777777 -1.333333,5.777778 c -0.8907411,4.062036 -0.8530036,3.561979 -1.2989038,5.49558 0,2.6304 0.23782,4.7121 0.8964798,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 45.298977,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -1.478122,-6.448304 1.360334,6.129144 -1.310407,-5.44406 L 83.99942,41.334333 82.666087,35.556556 81.332753,29.778778 Z m 2.64378,28.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -45.252977,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 1.555301,-6.543153 -1.373218,6.08361 1.298904,-5.49558 L 15.99902,41.334332 17.332353,35.556555 18.665687,29.778777 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 1.333334,5.777778 1.333333,5.777777 1.333333,5.777778 c 0.961131,4.109807 0.893507,3.640433 1.310407,5.444059 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccccsccccccccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -1.176471,5.777778 h -3.72549 L 17.666667,47.111111 19,41.333333 l 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 -0.862745,5.777778 h -3.72549 l 1.019607,-5.777778 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 -0.54902,5.777778 h -3.72549 l 0.705883,-5.777778 0.705882,-5.777778 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 -0.235295,5.777778 h -3.725489 l 0.392156,-5.777778 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 0.07843,5.777778 h -3.725489 l 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 0.392156,5.777778 h -3.725489 l -0.235295,-5.777778 -0.235294,-5.777778 -0.235294,-5.777777 -0.235294,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 0.705882,5.777778 0.705883,5.777778 h -3.72549 l -0.54902,-5.777778 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 1.019607,5.777778 h -3.72549 l -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 l 1.333333,5.777778 1.333334,5.777778 h -3.72549 l -1.176471,-5.777778 -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-070.svg b/nymea-app/ui/images/awning/awning-070.svg
new file mode 100644
index 00000000..23880103
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-070.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-070.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="19.813722"
+     inkscape:cx="46.545619"
+     inkscape:cy="40.397223"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 -1.333334,5.777778 -1.333333,5.777777 -1.333333,5.777778 -1.3333337,5.777778 c -0.8827065,3.767425 -0.663298,2.607607 -1.3787322,5.717802 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.8499999,3.1596 3.3554999,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 48.024361,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -1.571672,-6.75448 0.78581,3.325845 -1.289295,-5.666282 L 85.332753,47.112111 83.99942,41.334333 82.666087,35.556556 81.332753,29.778778 Z m 3.956002,34.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -47.978361,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 1.5528,-6.819959 -0.692291,3.256634 1.378732,-5.717802 L 14.665687,47.11211 15.99902,41.334332 17.332353,35.556555 18.665687,29.778777 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 1.333334,5.777778 1.333333,5.777777 1.333333,5.777778 1.333334,5.777778 c 0.859264,3.765524 0.538695,2.420586 1.289295,5.666281 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccccccsccccccccccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -1.176471,5.777778 -1.17647,5.777778 -3.882353,0 1.333333,-5.777778 1.333334,-5.777778 L 19,41.333333 l 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777778 h -3.882353 l 1.019608,-5.777778 1.019607,-5.777778 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 -0.54902,5.777778 -0.549019,5.777778 h -3.882353 l 0.705882,-5.777778 0.705883,-5.777778 0.705882,-5.777778 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 -0.235295,5.777778 -0.235294,5.777778 h -3.882352 l 0.392157,-5.777778 0.392156,-5.777778 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 0.07843,5.777778 0.07843,5.777778 h -3.882349 l 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 0.392156,5.777778 0.392157,5.777778 -3.882352,0 -0.235294,-5.777778 -0.235295,-5.777778 -0.235294,-5.777778 -0.235294,-5.777777 -0.235294,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 0.705882,5.777778 0.705883,5.777778 0.705882,5.777778 h -3.882353 l -0.549019,-5.777778 -0.54902,-5.777778 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 1.019607,5.777778 1.019608,5.777778 h -3.882353 l -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 78.333333,47.111111 79.666667,52.888889 81,58.666667 l -3.882353,0 -1.17647,-5.777778 -1.176471,-5.777778 -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-080.svg b/nymea-app/ui/images/awning/awning-080.svg
new file mode 100644
index 00000000..fc4ef304
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-080.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-080.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="9.9068609"
+     inkscape:cx="59.374555"
+     inkscape:cy="44.96261"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 -1.333334,5.777778 -1.333333,5.777777 -1.333333,5.777778 -1.3333337,5.777778 -1.3333333,5.777778 c -1.0407929,4.460899 -1.0053704,4.412514 -1.3576208,5.940024 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3554998,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 l 50.749745,-0.05152 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -1.189133,-5.12093 0.05219,0.270526 -1.369124,-5.888503 L 86.666087,52.889889 85.332753,47.112111 83.99942,41.334333 82.666087,35.556556 81.332753,29.778778 Z m 5.369164,40.55517 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -50.703745,0.05152 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.541,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 1.184653,-5.20235 -0.04874,0.154209 1.357621,-5.940024 l 1.333333,-5.777778 1.333334,-5.777778 1.333333,-5.777778 1.333333,-5.777777 1.333334,-5.777778 L 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 1.333334,5.777778 1.333333,5.777777 1.333333,5.777778 1.333334,5.777778 1.333333,5.777778 c 1.037033,4.515585 1.06322,4.563353 1.369124,5.888503 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccsccccccccccccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 H 13.666667 L 15,58.666667 16.333333,52.888889 17.666667,47.111111 19,41.333333 l 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 h -4.039216 l 1.019608,-5.777777 1.019608,-5.777778 1.019607,-5.777778 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 H 29.82353 l 0.705882,-5.777777 0.705882,-5.777778 0.705883,-5.777778 0.705882,-5.777778 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 -0.235295,5.777778 -0.235294,5.777778 -0.235294,5.777777 h -4.039215 l 0.392157,-5.777777 0.392157,-5.777778 0.392156,-5.777778 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 h -4.039209 l 0.07843,-5.777777 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 0.392156,5.777778 0.392157,5.777778 0.392157,5.777777 H 54.058824 L 53.82353,58.666667 53.588236,52.888889 53.352941,47.111111 53.117647,41.333333 52.882353,35.555556 52.647059,29.777778 Z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 0.705882,5.777778 0.705883,5.777778 0.705882,5.777778 0.705882,5.777777 h -4.039215 l -0.54902,-5.777777 -0.549019,-5.777778 -0.54902,-5.777778 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 1.019607,5.777778 1.019608,5.777778 1.019608,5.777777 h -4.039216 l -0.862745,-5.777777 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 78.333333,47.111111 79.666667,52.888889 81,58.666667 l 1.333333,5.777777 h -4.039215 l -1.176471,-5.777777 -1.17647,-5.777778 -1.176471,-5.777778 -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-090.svg b/nymea-app/ui/images/awning/awning-090.svg
new file mode 100644
index 00000000..57fb2191
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-090.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-090.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="9.9068609"
+     inkscape:cx="34.183522"
+     inkscape:cy="54.27979"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -1.333333,5.777778 -1.333334,5.777778 -1.333333,5.777777 -1.333333,5.777778 -1.3333337,5.777778 -1.3333333,5.777778 -1.3333333,5.777777 c -0.8888889,3.851852 -0.4915324,2.203332 -1.3804213,6.055184 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.0109996,1.6613 6.6917996,1.4848 11.7249996,1.543 h 0.01172 L 74.692066,82.25335 h 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 -0.888889,-3.851851 -0.459124,-1.956054 -1.348013,-5.807906 L 87.99942,58.667667 86.666087,52.889889 85.332753,47.112111 83.99942,41.334333 82.666087,35.556556 81.332753,29.778778 Z m 6.681386,46.25235 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 l -53.372101,0.247278 h -0.02344 c -5.0383,-0.0588 -8.3519,-0.23688 -9.8164,-1.0449 -0.73364,-0.40478 -1.1508,-0.85296 -1.5409996,-1.8926 -0.39025,-1.0396 -0.64258,-2.6929 -0.64258,-5.0625 0.8888886,-3.851852 0.4915324,-2.203332 1.3804216,-6.055184 l 1.333333,-5.777777 1.333333,-5.777778 1.333334,-5.777778 1.333333,-5.777778 1.333333,-5.777777 1.333334,-5.777778 L 19.99902,24.001 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 l 1.333333,5.777778 1.333334,5.777778 1.333333,5.777777 1.333333,5.777778 1.333334,5.777778 1.333333,5.777778 1.333333,5.777777 c 0.888889,3.851852 0.459124,1.956055 1.348013,5.807906 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccccccccccccccccsccccccccccccccccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -4.196079,0 1.333334,-5.777778 L 15,58.666667 16.333333,52.888889 17.666667,47.111111 19,41.333333 l 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 -4.196079,0 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 1.019607,-5.777778 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 -4.196079,0 0.705883,-5.777778 0.705882,-5.777777 0.705882,-5.777778 0.705883,-5.777778 0.705882,-5.777778 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 -0.235295,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 -4.196078,0 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 0.392156,-5.777778 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 -4.196069,0 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 0.392156,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 -4.196078,0 -0.235294,-5.777778 -0.235294,-5.777777 -0.235294,-5.777778 -0.235295,-5.777778 -0.235294,-5.777778 -0.235294,-5.777777 -0.235294,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 0.705882,5.777778 0.705883,5.777778 0.705882,5.777778 0.705882,5.777777 0.705883,5.777778 -4.196079,0 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 -0.54902,-5.777778 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 1.019607,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 -4.196079,0 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 78.333333,47.111111 79.666667,52.888889 81,58.666667 l 1.333333,5.777777 1.333334,5.777778 h -4.196079 l -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 -1.176471,-5.777778 -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/awning/awning-100.svg b/nymea-app/ui/images/awning/awning-100.svg
new file mode 100644
index 00000000..3a470a26
--- /dev/null
+++ b/nymea-app/ui/images/awning/awning-100.svg
@@ -0,0 +1,125 @@
+<?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#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg4874"
+   height="96"
+   viewBox="0 0 96 96.000001"
+   width="96"
+   version="1.1"
+   sodipodi:docname="awning-100.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs875" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2880"
+     inkscape:window-height="1698"
+     id="namedview873"
+     showgrid="true"
+     inkscape:zoom="14.010417"
+     inkscape:cx="59.258675"
+     inkscape:cy="57.364629"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid3382" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata4879">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <rect
+     x="-2.7465819e-06"
+     y="-96"
+     width="96"
+     height="96"
+     transform="rotate(90)"
+     style="color:#000000;fill:none"
+     id="rect4782" />
+  <path
+     inkscape:connector-curvature="0"
+     d="m 79.99942,24.001 c 0,-2.6304 -0.23782,-4.7141 -0.89648,-6.4688 -0.66,-1.759 -1.851,-3.163 -3.356,-3.994 -3.011,-1.661 -6.692,-1.483 -11.725,-1.541 h -0.01172 -32.023 -0.01172 l 5e-4,0.0038 c -5.0328,0.05818 -8.7136,-0.12028 -11.725,1.541 -1.5055,0.83064 -2.6968,2.2356 -3.3555,3.9902 -0.65866,1.7547 -0.89648,3.8383 -0.89648,6.4688 l -12,52 c 0,2.6304 0.23782,4.7121 0.89648,6.4668 0.65866,1.7546 1.85,3.1596 3.3555,3.9902 3.011,1.6613 6.6918,1.4848 11.725,1.543 h 0.01172 56.023 0.01172 c 5.0328,-0.0582 8.7136,0.11832 11.725,-1.543 1.5055,-0.83064 2.6968,-2.2356 3.3555,-3.9902 0.65866,-1.7547 0.89648,-3.8364 0.89648,-6.4668 z m 8.00004,52 c 0,2.3696 -0.25037,4.0229 -0.64062,5.0625 -0.39025,1.0396 -0.80933,1.4878 -1.543,1.8926 -1.4645,0.80804 -4.7782,0.98616 -9.8164,1.0449 H 20.02244 19.999 C 14.9607,83.9422 11.6471,83.76412 10.1826,82.9561 9.44896,82.55132 9.0318,82.10314 8.6416,81.0635 8.25135,80.0239 7.99902,78.3706 7.99902,76.001 l 12,-52 c 0,-2.3696 0.25232,-4.0229 0.64258,-5.0625 0.39025,-1.0396 0.80738,-1.4878 1.541,-1.8926 1.4645,-0.80804 4.7782,-0.98616 9.8164,-1.0449 h 4.4e-4 32 c 5.0383,0.05877 8.3519,0.23688 9.8164,1.0449 0.73364,0.40478 1.1527,0.85295 1.543,1.8926 0.39025,1.0396 0.64062,2.6929 0.64062,5.0625 z"
+     style="color:#000000;font-variant-ligatures:none;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;text-transform:none;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000000;fill:#808080;color-rendering:auto;image-rendering:auto;shape-rendering:auto"
+     id="path4179"
+     sodipodi:nodetypes="cccccccccccccccccccccccsccccccccccccccccc" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 23,24 h 2.941176 l -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 -1.176471,5.777778 -1.17647,5.777778 -1.176471,5.777777 -1.17647,5.777778 L 15.352941,76 H 11 L 12.333333,70.222222 13.666667,64.444444 15,58.666667 16.333333,52.888889 17.666667,47.111111 19,41.333333 l 1.333333,-5.777777 1.333334,-5.777778 z"
+     id="rect3380"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3403"
+     d="m 28.882353,24 h 2.941176 l -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777778 -0.862745,5.777777 -0.862745,5.777778 L 24.058824,76 h -4.352942 l 1.019608,-5.777778 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 1.019607,-5.777778 1.019608,-5.777778 1.019608,-5.777777 1.019608,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 34.764706,24 h 2.941176 l -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 -0.54902,5.777778 -0.549019,5.777778 -0.54902,5.777777 -0.549019,5.777778 L 32.764706,76 h -4.352941 l 0.705882,-5.777778 0.705883,-5.777778 0.705882,-5.777777 0.705882,-5.777778 0.705883,-5.777778 0.705882,-5.777778 0.705882,-5.777777 0.705883,-5.777778 z"
+     id="path3405"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3407"
+     d="m 40.647059,24 h 2.941176 l -0.235294,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 -0.235295,5.777778 -0.235294,5.777778 -0.235294,5.777777 -0.235294,5.777778 L 41.470588,76 h -4.352941 l 0.392157,-5.777778 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 0.392156,-5.777778 0.392157,-5.777778 0.392157,-5.777777 0.392157,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 46.529412,24 h 2.941176 l 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 0.07843,5.777778 0.07843,5.777778 0.07843,5.777777 0.07843,5.777778 L 50.176471,76 h -4.352942 l 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777778 0.07843,-5.777777 0.07843,-5.777778 z"
+     id="path3409"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3411"
+     d="m 52.411765,24 h 2.941176 l 0.392157,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 0.392156,5.777778 0.392157,5.777778 0.392157,5.777777 0.392157,5.777778 L 58.882353,76 H 54.529412 L 54.294118,70.222222 54.058824,64.444444 53.82353,58.666667 53.588236,52.888889 53.352941,47.111111 53.117647,41.333333 52.882353,35.555556 52.647059,29.777778 Z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 58.294118,24 h 2.941176 l 0.705882,5.777778 0.705883,5.777778 0.705882,5.777777 0.705882,5.777778 0.705883,5.777778 0.705882,5.777778 0.705882,5.777777 0.705883,5.777778 L 67.588235,76 h -4.352941 l -0.54902,-5.777778 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 -0.54902,-5.777778 -0.549019,-5.777778 -0.54902,-5.777777 -0.549019,-5.777778 z"
+     id="path3413"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccc" />
+  <path
+     sodipodi:nodetypes="ccccccccccccccccccccc"
+     inkscape:connector-curvature="0"
+     id="path3415"
+     d="m 64.176471,24 h 2.941176 l 1.019608,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 1.019607,5.777778 1.019608,5.777778 1.019608,5.777777 1.019608,5.777778 L 76.294118,76 h -4.352942 l -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777778 -0.862745,-5.777777 -0.862745,-5.777778 z"
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  <path
+     style="fill:#808080;fill-opacity:1;stroke:none;stroke-width:3.77952766;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 70.058824,24 H 73 l 1.333333,5.777778 1.333334,5.777778 L 77,41.333333 78.333333,47.111111 79.666667,52.888889 81,58.666667 82.333333,64.444444 83.666667,70.222222 85,76 h -4.352941 l -1.176471,-5.777778 -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 -1.176471,-5.777778 -1.17647,-5.777778 -1.176471,-5.777777 -1.17647,-5.777778 z"
+     id="path3417"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccccccccccc" />
+</svg>
diff --git a/nymea-app/ui/images/shutter-0.svg b/nymea-app/ui/images/shutter/shutter-000.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-0.svg
rename to nymea-app/ui/images/shutter/shutter-000.svg
diff --git a/nymea-app/ui/images/shutter-1.svg b/nymea-app/ui/images/shutter/shutter-010.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-1.svg
rename to nymea-app/ui/images/shutter/shutter-010.svg
diff --git a/nymea-app/ui/images/shutter-2.svg b/nymea-app/ui/images/shutter/shutter-020.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-2.svg
rename to nymea-app/ui/images/shutter/shutter-020.svg
diff --git a/nymea-app/ui/images/shutter-3.svg b/nymea-app/ui/images/shutter/shutter-030.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-3.svg
rename to nymea-app/ui/images/shutter/shutter-030.svg
diff --git a/nymea-app/ui/images/shutter-4.svg b/nymea-app/ui/images/shutter/shutter-040.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-4.svg
rename to nymea-app/ui/images/shutter/shutter-040.svg
diff --git a/nymea-app/ui/images/shutter-5.svg b/nymea-app/ui/images/shutter/shutter-050.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-5.svg
rename to nymea-app/ui/images/shutter/shutter-050.svg
diff --git a/nymea-app/ui/images/shutter-6.svg b/nymea-app/ui/images/shutter/shutter-060.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-6.svg
rename to nymea-app/ui/images/shutter/shutter-060.svg
diff --git a/nymea-app/ui/images/shutter-7.svg b/nymea-app/ui/images/shutter/shutter-070.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-7.svg
rename to nymea-app/ui/images/shutter/shutter-070.svg
diff --git a/nymea-app/ui/images/shutter-8.svg b/nymea-app/ui/images/shutter/shutter-080.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-8.svg
rename to nymea-app/ui/images/shutter/shutter-080.svg
diff --git a/nymea-app/ui/images/shutter-9.svg b/nymea-app/ui/images/shutter/shutter-090.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-9.svg
rename to nymea-app/ui/images/shutter/shutter-090.svg
diff --git a/nymea-app/ui/images/shutter-10.svg b/nymea-app/ui/images/shutter/shutter-100.svg
similarity index 100%
rename from nymea-app/ui/images/shutter-10.svg
rename to nymea-app/ui/images/shutter/shutter-100.svg