Merge branch 'master' into redesign-ui

2018-07-16 18:44:35 +03:00 · 2018-07-16 18:44:35 +03:00 · 46bdda7e8d
commit 46bdda7e8d
parent 4c08017616 2b67bec375
80 changed files with 2998 additions and 271 deletions
--- a/libnymea-app-core/devicemanager.cpp
+++ b/libnymea-app-core/devicemanager.cpp
@ -150,6 +150,7 @@ void DeviceManager::getVendorsResponse(const QVariantMap &params)

 void DeviceManager::getSupportedDevicesResponse(const QVariantMap &params)
 {
+    qDebug() << "DeviceClass received:" << qUtf8Printable(QJsonDocument::fromVariant(params).toJson(QJsonDocument::Indented));
    if (params.value("params").toMap().keys().contains("deviceClasses")) {
        QVariantList deviceClassList = params.value("params").toMap().value("deviceClasses").toList();
        foreach (QVariant deviceClassVariant, deviceClassList) {
--- 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()));
--- a/libnymea-app-core/jsonrpc/jsontypes.cpp
+++ b/libnymea-app-core/jsonrpc/jsontypes.cpp
@ -157,7 +157,9 @@ StateType *JsonTypes::unpackStateType(const QVariantMap &stateTypeMap, QObject *
    stateType->setDisplayName(stateTypeMap.value("displayName").toString());
    stateType->setIndex(stateTypeMap.value("index").toInt());
    stateType->setDefaultValue(stateTypeMap.value("defaultValue"));
+    stateType->setAllowedValues(stateTypeMap.value("possibleValues").toList());
    stateType->setType(stateTypeMap.value("type").toString());
+
    QPair<Types::Unit, QString> unit = stringToUnit(stateTypeMap.value("unit").toString());
    stateType->setUnit(unit.first);
    stateType->setUnitString(unit.second);
--- a/libnymea-app-core/libnymea-app-core.h
+++ b/libnymea-app-core/libnymea-app-core.h
@ -43,6 +43,12 @@
 #include "tagsmanager.h"
 #include "models/tagsproxymodel.h"
 #include "types/tag.h"
+#include "ruletemplates/ruletemplates.h"
+#include "ruletemplates/ruletemplate.h"
+#include "ruletemplates/eventdescriptortemplate.h"
+#include "ruletemplates/stateevaluatortemplate.h"
+#include "ruletemplates/statedescriptortemplate.h"
+#include "ruletemplates/ruleactiontemplate.h"

 static QObject* interfacesModel_provider(QQmlEngine *engine, QJSEngine *scriptEngine)
 {
@ -162,6 +168,15 @@ void registerQmlTypes() {
    qmlRegisterUncreatableType<WirelessAccessPoints>(uri, 1, 0, "WirelessAccessPoints", "Can't create this in QML. Get it from the Engine instance.");
    qmlRegisterUncreatableType<WirelessAccessPointsProxy>(uri, 1, 0, "WirelessAccessPoints", "Can't create this in QML. Get it from the Engine instance.");

+    qmlRegisterType<RuleTemplates>(uri, 1, 0, "RuleTemplates");
+    qmlRegisterType<RuleTemplatesFilterModel>(uri, 1, 0, "RuleTemplatesFilterModel");
+    qmlRegisterUncreatableType<RuleTemplate>(uri, 1, 0, "RuleTemplate", "Get them from RuleTemplates");
+    qmlRegisterUncreatableType<EventDescriptorTemplates>(uri, 1, 0, "EventDescriptorTemplates", "Get it from RuleTemplate");
+    qmlRegisterUncreatableType<EventDescriptorTemplate>(uri, 1, 0, "EventDescriptorTemplate", "Get it from EventDescriptorTemplates");
+    qmlRegisterUncreatableType<StateEvaluatorTemplate>(uri, 1, 0, "StateEvaluatorTemplate", "Get it from RuleTemplate");
+    qmlRegisterUncreatableType<StateDescriptorTemplate>(uri, 1, 0, "StateDescriptorTemplate", "Get it from StateEvaluatorTemplate");
+    qmlRegisterUncreatableType<RuleActionTemplates>(uri, 1, 0, "RuleActionTemplates", "Get it from RuleTemplate");
+    qmlRegisterUncreatableType<RuleActionTemplate>(uri, 1, 0, "RuleActionTemplate", "Get it from RuleActionTemplates");
 }

 #endif // LIBNYMEAAPPCORE_H
--- a/libnymea-app-core/libnymea-app-core.pro
+++ b/libnymea-app-core/libnymea-app-core.pro
@ -61,6 +61,13 @@ SOURCES += \
    models/tagsproxymodel.cpp \
    tagsmanager.cpp \
    wifisetup/wirelessaccesspointsproxy.cpp \
+    models/tagsproxymodel.cpp \
+    ruletemplates/ruletemplate.cpp \
+    ruletemplates/ruletemplates.cpp \
+    ruletemplates/eventdescriptortemplate.cpp \
+    ruletemplates/ruleactiontemplate.cpp \
+    ruletemplates/stateevaluatortemplate.cpp \
+    ruletemplates/statedescriptortemplate.cpp

 HEADERS += \
    engine.h \
@ -107,7 +114,13 @@ HEADERS += \
    models/interfacesproxy.h \
    tagsmanager.h \
    models/tagsproxymodel.h \
-    wifisetup/wirelessaccesspointsproxy.h
+    wifisetup/wirelessaccesspointsproxy.h \
+    ruletemplates/ruletemplate.h \
+    ruletemplates/ruletemplates.h \
+    ruletemplates/eventdescriptortemplate.h \
+    ruletemplates/ruleactiontemplate.h \
+    ruletemplates/stateevaluatortemplate.h \
+    ruletemplates/statedescriptortemplate.h

 unix {
    target.path = /usr/lib
--- a/libnymea-app-core/rulemanager.cpp
+++ b/libnymea-app-core/rulemanager.cpp
@ -51,7 +51,7 @@ Rules *RuleManager::rules() const

 Rule *RuleManager::createNewRule()
 {
-    return new Rule();
+    return new Rule(QUuid(), this);
 }

 void RuleManager::addRule(const QVariantMap params)
@ -154,7 +154,7 @@ void RuleManager::getRuleDetailsReply(const QVariantMap &params)
        qDebug() << "Got rule details for a rule we don't know";
        return;
    }
-//    qDebug() << "got rule details for rule" << ruleMap;
+//    qDebug() << "got rule details for rule" << qUtf8Printable(QJsonDocument::fromVariant(ruleMap).toJson());
    parseEventDescriptors(ruleMap.value("eventDescriptors").toList(), rule);
    parseRuleActions(ruleMap.value("actions").toList(), rule);
    parseRuleExitActions(ruleMap.value("exitActions").toList(), rule);
@ -222,6 +222,7 @@ void RuleManager::parseEventDescriptors(const QVariantList &eventDescriptorList,
            paramDescriptor->setOperatorType((ParamDescriptor::ValueOperator)operatorEnum.keyToValue(paramDescriptorVariant.toMap().value("operator").toString().toLocal8Bit()));
            eventDescriptor->paramDescriptors()->addParamDescriptor(paramDescriptor);
        }
+        qDebug() << "Adding eventdescriptor" << eventDescriptor->deviceId() << eventDescriptor->eventTypeId();
        rule->eventDescriptors()->addEventDescriptor(eventDescriptor);
    }
 }
@ -242,7 +243,6 @@ StateEvaluator *RuleManager::parseStateEvaluator(const QVariantMap &stateEvaluat
    } else {
        sd = new StateDescriptor(sdMap.value("interface").toString(), sdMap.value("interfaceState").toString(), op, sdMap.value("value"), stateEvaluator);
    }
-    qDebug() << "Created StateDescriptor:" << sd->interfaceName() << sd->interfaceState() << sd->deviceId() << sd->stateTypeId();
    stateEvaluator->setStateDescriptor(sd);

    foreach (const QVariant &childEvaluatorVariant, stateEvaluatorMap.value("childEvaluators").toList()) {
--- a/libnymea-app-core/ruletemplates/eventdescriptortemplate.cpp
+++ b/libnymea-app-core/ruletemplates/eventdescriptortemplate.cpp
@ -0,0 +1,31 @@
+#include "eventdescriptortemplate.h"
+
+EventDescriptorTemplate::EventDescriptorTemplate(const QString &interfaceName, const QString &interfaceEvent, int selectionId, SelectionMode selectionMode, QObject *parent):
+    QObject(parent),
+    m_interfaceName(interfaceName),
+    m_interfaceEvent(interfaceEvent),
+    m_selectionId(selectionId),
+    m_selectionMode(selectionMode)
+{
+
+}
+
+QString EventDescriptorTemplate::interfaceName() const
+{
+    return m_interfaceName;
+}
+
+QString EventDescriptorTemplate::interfaceEvent() const
+{
+    return m_interfaceEvent;
+}
+
+int EventDescriptorTemplate::selectionId() const
+{
+    return m_selectionId;
+}
+
+EventDescriptorTemplate::SelectionMode EventDescriptorTemplate::selectionMode() const
+{
+    return m_selectionMode;
+}
--- a/libnymea-app-core/ruletemplates/eventdescriptortemplate.h
+++ b/libnymea-app-core/ruletemplates/eventdescriptortemplate.h
@ -0,0 +1,68 @@
+#ifndef EVENTDESCRIPTORTEMPLATE_H
+#define EVENTDESCRIPTORTEMPLATE_H
+
+#include <QObject>
+
+class EventDescriptorTemplate : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QString interfaceName READ interfaceName CONSTANT)
+    Q_PROPERTY(QString interfaceEvent READ interfaceEvent CONSTANT)
+    Q_PROPERTY(int selectionId READ selectionId CONSTANT)
+    Q_PROPERTY(SelectionMode selectionMode READ selectionMode CONSTANT)
+public:
+    enum SelectionMode {
+        SelectionModeAny,
+        SelectionModeDevice,
+        SelectionModeInterface,
+    };
+    Q_ENUM(SelectionMode)
+
+    explicit EventDescriptorTemplate(const QString &interfaceName, const QString &interfaceEvent, int selectionId, SelectionMode selectionMode = SelectionModeAny, QObject *parent = nullptr);
+
+    QString interfaceName() const;
+    QString interfaceEvent() const;
+    int selectionId() const;
+    SelectionMode selectionMode() const;
+
+private:
+    QString m_interfaceName;
+    QString m_interfaceEvent;
+    int m_selectionId = 0;
+    SelectionMode m_selectionMode = SelectionModeAny;
+};
+
+#include <QAbstractListModel>
+
+class EventDescriptorTemplates: public QAbstractListModel
+{
+    Q_OBJECT
+    Q_PROPERTY(int count READ rowCount NOTIFY countChanged)
+public:
+    EventDescriptorTemplates(QObject *parent = nullptr): QAbstractListModel(parent) {}
+
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override { Q_UNUSED(parent); return m_list.count(); }
+    QVariant data(const QModelIndex &index, int role) const override { Q_UNUSED(index); Q_UNUSED(role); return QVariant(); }
+
+    void addEventDescriptorTemplate(EventDescriptorTemplate *eventDescriptorTemplate) {
+        eventDescriptorTemplate->setParent(this);
+        beginInsertRows(QModelIndex(), m_list.count(), m_list.count());
+        m_list.append(eventDescriptorTemplate);
+        endInsertRows();
+        emit countChanged();
+    }
+
+    Q_INVOKABLE EventDescriptorTemplate* get(int index) const {
+        if (index < 0 || index >= m_list.count()) {
+            return nullptr;
+        }
+        return m_list.at(index);
+    }
+
+signals:
+    void countChanged();
+
+private:
+    QList<EventDescriptorTemplate*> m_list;
+};
+#endif // EVENTDESCRIPTORTEMPLATE_H
--- a/libnymea-app-core/ruletemplates/ruleactiontemplate.cpp
+++ b/libnymea-app-core/ruletemplates/ruleactiontemplate.cpp
@ -0,0 +1,38 @@
+#include "ruleactiontemplate.h"
+
+
+RuleActionTemplate::RuleActionTemplate(const QString &interfaceName, const QString &interfaceAction, int selectionId, SelectionMode selectionMode, QObject *parent):
+    QObject(parent),
+    m_interfaceName(interfaceName),
+    m_interfaceAction(interfaceAction),
+    m_selectionId(selectionId),
+    m_selectionMode(selectionMode),
+    m_ruleActionParams(new RuleActionParams(this))
+{
+
+}
+
+QString RuleActionTemplate::interfaceName() const
+{
+    return m_interfaceName;
+}
+
+QString RuleActionTemplate::interfaceAction() const
+{
+    return m_interfaceAction;
+}
+
+int RuleActionTemplate::selectionId() const
+{
+    return m_selectionId;
+}
+
+RuleActionTemplate::SelectionMode RuleActionTemplate::selectionMode() const
+{
+    return m_selectionMode;
+}
+
+RuleActionParams *RuleActionTemplate::ruleActionParams() const
+{
+    return m_ruleActionParams;
+}
--- a/libnymea-app-core/ruletemplates/ruleactiontemplate.h
+++ b/libnymea-app-core/ruletemplates/ruleactiontemplate.h
@ -0,0 +1,74 @@
+#ifndef RULEACTIONTEMPLATE_H
+#define RULEACTIONTEMPLATE_H
+
+#include "types/ruleactionparams.h"
+
+#include <QObject>
+
+class RuleActionTemplate : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QString interfaceName READ interfaceName CONSTANT)
+    Q_PROPERTY(QString interfaceAction READ interfaceAction CONSTANT)
+    Q_PROPERTY(int selectionId READ selectionId CONSTANT)
+    Q_PROPERTY(SelectionMode selectionMode READ selectionMode CONSTANT)
+    Q_PROPERTY(RuleActionParams* ruleActionParams READ ruleActionParams CONSTANT)
+
+public:
+    enum SelectionMode {
+        SelectionModeAny,
+        SelectionModeDevice,
+        SelectionModeInterface
+    };
+    Q_ENUM(SelectionMode)
+
+    explicit RuleActionTemplate(const QString &interfaceName, const QString &interfaceAction, int selectionId, SelectionMode selectionMode = SelectionModeAny, QObject *parent = nullptr);
+
+    QString interfaceName() const;
+    QString interfaceAction() const;
+    int selectionId() const;
+    SelectionMode selectionMode() const;
+    RuleActionParams* ruleActionParams() const;
+
+private:
+    QString m_interfaceName;
+    QString m_interfaceAction;
+    int m_selectionId = 0;
+    SelectionMode m_selectionMode = SelectionModeAny;
+    RuleActionParams* m_ruleActionParams = nullptr;
+};
+
+#include <QAbstractListModel>
+
+class RuleActionTemplates: public QAbstractListModel
+{
+    Q_OBJECT
+    Q_PROPERTY(int count READ rowCount NOTIFY countChanged)
+public:
+    RuleActionTemplates(QObject *parent = nullptr): QAbstractListModel(parent) {}
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override { Q_UNUSED(parent); return m_list.count(); }
+    QVariant data(const QModelIndex &index, int role) const override { Q_UNUSED(index); Q_UNUSED(role); return QVariant(); }
+
+    void addRuleActionTemplate(RuleActionTemplate* ruleActionTemplate) {
+        ruleActionTemplate->setParent(this);
+        beginInsertRows(QModelIndex(), m_list.count(), m_list.count());
+        m_list.append(ruleActionTemplate);
+        endInsertRows();
+        emit countChanged();
+    }
+
+    Q_INVOKABLE RuleActionTemplate* get(int index) const {
+        if (index < 0 || index >= m_list.count()) {
+            return nullptr;
+        }
+        return m_list.at(index);
+    }
+
+signals:
+    void countChanged();
+
+private:
+    QList<RuleActionTemplate*> m_list;
+};
+
+#endif // RULEACTIONTEMPLATE_H
--- a/libnymea-app-core/ruletemplates/ruletemplate.cpp
+++ b/libnymea-app-core/ruletemplates/ruletemplate.cpp
@ -0,0 +1,53 @@
+#include "ruletemplate.h"
+#include "eventdescriptortemplate.h"
+#include "stateevaluatortemplate.h"
+#include "ruleactiontemplate.h"
+
+RuleTemplate::RuleTemplate(const QString &description, const QString &ruleNameTemplate, QObject *parent):
+    QObject(parent),
+    m_description(description),
+    m_ruleNameTemplate(ruleNameTemplate),
+    m_eventDescriptorTemplates(new EventDescriptorTemplates(this)),
+    m_ruleActionTemplates(new RuleActionTemplates(this)),
+    m_ruleExitActionTemplates(new RuleActionTemplates(this))
+{
+}
+
+QString RuleTemplate::description() const
+{
+    return m_description;
+}
+
+QString RuleTemplate::ruleNameTemplate() const
+{
+    return m_ruleNameTemplate;
+}
+
+EventDescriptorTemplates *RuleTemplate::eventDescriptorTemplates() const
+{
+    return m_eventDescriptorTemplates;
+}
+
+StateEvaluatorTemplate *RuleTemplate::stateEvaluatorTemplate() const
+{
+    return m_stateEvaluatorTemplate;
+}
+
+void RuleTemplate::setStateEvaluatorTemplate(StateEvaluatorTemplate *stateEvaluatorTemplate)
+{
+    if (m_stateEvaluatorTemplate) {
+        m_stateEvaluatorTemplate->deleteLater();
+    }
+    stateEvaluatorTemplate->setParent(this);
+    m_stateEvaluatorTemplate = stateEvaluatorTemplate;
+}
+
+RuleActionTemplates *RuleTemplate::ruleActionTemplates() const
+{
+    return m_ruleActionTemplates;
+}
+
+RuleActionTemplates *RuleTemplate::ruleExitActionTemplates() const
+{
+    return m_ruleExitActionTemplates;
+}
--- a/libnymea-app-core/ruletemplates/ruletemplate.h
+++ b/libnymea-app-core/ruletemplates/ruletemplate.h
@ -0,0 +1,41 @@
+#ifndef RULETEMPLATE_H
+#define RULETEMPLATE_H
+
+#include <QObject>
+
+class EventDescriptorTemplates;
+class RuleActionTemplates;
+class StateEvaluatorTemplate;
+
+class RuleTemplate : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QString description READ description CONSTANT)
+    Q_PROPERTY(QString ruleNameTemplate READ ruleNameTemplate CONSTANT)
+    Q_PROPERTY(EventDescriptorTemplates* eventDescriptorTemplates READ eventDescriptorTemplates CONSTANT)
+    Q_PROPERTY(StateEvaluatorTemplate* stateEvaluatorTemplate READ stateEvaluatorTemplate CONSTANT)
+    Q_PROPERTY(RuleActionTemplates* ruleActionTemplates READ ruleActionTemplates CONSTANT)
+    Q_PROPERTY(RuleActionTemplates* ruleExitActionTemplates READ ruleExitActionTemplates CONSTANT)
+
+public:
+    explicit RuleTemplate(const QString &description, const QString &ruleNameTemplate, QObject *parent = nullptr);
+
+    QString description() const;
+    QString ruleNameTemplate() const;
+
+    EventDescriptorTemplates* eventDescriptorTemplates() const;
+    StateEvaluatorTemplate* stateEvaluatorTemplate() const;
+    void setStateEvaluatorTemplate(StateEvaluatorTemplate *stateEvaluatorTemplate);
+    RuleActionTemplates* ruleActionTemplates() const;
+    RuleActionTemplates* ruleExitActionTemplates() const;
+
+private:
+    QString m_description;
+    QString m_ruleNameTemplate;
+    EventDescriptorTemplates* m_eventDescriptorTemplates = nullptr;
+    StateEvaluatorTemplate* m_stateEvaluatorTemplate = nullptr;
+    RuleActionTemplates *m_ruleActionTemplates = nullptr;
+    RuleActionTemplates *m_ruleExitActionTemplates = nullptr;
+};
+
+#endif // RULETEMPLATE_H
--- a/libnymea-app-core/ruletemplates/ruletemplates.cpp
+++ b/libnymea-app-core/ruletemplates/ruletemplates.cpp
@ -0,0 +1,141 @@
+#include "ruletemplates.h"
+
+#include "ruletemplate.h"
+#include "eventdescriptortemplate.h"
+#include "ruleactiontemplate.h"
+#include "stateevaluatortemplate.h"
+
+#include "types/ruleactionparam.h"
+#include "types/ruleactionparams.h"
+
+#include <QDebug>
+
+RuleTemplates::RuleTemplates(QObject *parent) : QAbstractListModel(parent)
+{
+    RuleTemplate* t;
+    EventDescriptorTemplate* evt;
+    StateEvaluatorTemplate* set;
+    RuleActionTemplate* rat;
+    RuleActionTemplate* reat; // exit
+
+    t = new RuleTemplate("Switch a light", "%0 switches %1", this);
+    evt = new EventDescriptorTemplate("button", "pressed", 0, EventDescriptorTemplate::SelectionModeDevice);
+    t->eventDescriptorTemplates()->addEventDescriptorTemplate(evt);
+    set = new StateEvaluatorTemplate(new StateDescriptorTemplate("light", "power", 1, StateDescriptorTemplate::ValueOperatorEquals, false));
+    t->setStateEvaluatorTemplate(set);
+    rat = new RuleActionTemplate("light", "power", 1, RuleActionTemplate::SelectionModeDevice);
+    rat->ruleActionParams()->setRuleActionParamByName("power", true);
+    t->ruleActionTemplates()->addRuleActionTemplate(rat);
+    reat = new RuleActionTemplate("light", "power", 1, RuleActionTemplate::SelectionModeDevice);
+    reat->ruleActionParams()->setRuleActionParamByName("power", false);
+    t->ruleExitActionTemplates()->addRuleActionTemplate(reat);
+    m_list.append(t);
+
+    t = new RuleTemplate("Intelligent blinds", "Intelligent blinds %1", this);
+    set = new StateEvaluatorTemplate(new StateDescriptorTemplate("temperaturesensor", "temperature", 0, StateDescriptorTemplate::ValueOperatorGreater, 20));
+    t->setStateEvaluatorTemplate(set);
+    rat = new RuleActionTemplate("simpleclosable", "close", 1, RuleActionTemplate::SelectionModeDevice);
+    t->ruleActionTemplates()->addRuleActionTemplate(rat);
+    reat = new RuleActionTemplate("simpleclosable", "open", 1, RuleActionTemplate::SelectionModeDevice);
+    t->ruleExitActionTemplates()->addRuleActionTemplate(reat);
+    m_list.append(t);
+
+    t = new RuleTemplate("Leave home - This will turn of everything when you press a button.", "Leave home", this);
+    evt = new EventDescriptorTemplate("button", "pressed", 0, EventDescriptorTemplate::SelectionModeDevice);
+    t->eventDescriptorTemplates()->addEventDescriptorTemplate(evt);
+    rat = new RuleActionTemplate("power", "power", 1, RuleActionTemplate::SelectionModeInterface);
+    t->ruleActionTemplates()->addRuleActionTemplate(rat);
+    m_list.append(t);
+
+
+    t = new RuleTemplate("Remind me to water my plant", "Remind me to water my %0 plant",  this);
+    evt = new EventDescriptorTemplate("humiditysensor", "humidity", 0, EventDescriptorTemplate::SelectionModeDevice);
+    t->eventDescriptorTemplates()->addEventDescriptorTemplate(evt);
+    m_list.append(t);
+
+}
+
+int RuleTemplates::rowCount(const QModelIndex &parent) const
+{
+    Q_UNUSED(parent)
+    return m_list.count();
+}
+
+QVariant RuleTemplates::data(const QModelIndex &index, int role) const
+{
+    switch (role) {
+    case RoleDescription:
+        return m_list.at(index.row())->description();
+    }
+    return QVariant();
+}
+
+QHash<int, QByteArray> RuleTemplates::roleNames() const
+{
+    QHash<int, QByteArray> roles;
+    roles.insert(RoleDescription, "description");
+    return roles;
+}
+
+RuleTemplate *RuleTemplates::get(int index) const
+{
+    if (index < 0 || index >= m_list.count()) {
+        return nullptr;
+    }
+    return m_list.at(index);
+}
+
+bool RuleTemplatesFilterModel::filterAcceptsRow(int source_row, const QModelIndex &source_parent) const
+{
+    Q_UNUSED(source_parent)
+    if (!m_ruleTemplates) {
+        return false;
+    }
+    RuleTemplate *t = m_ruleTemplates->get(source_row);
+    qDebug() << "---------------" << t->description() << m_filterInterfaceNames;
+    if (!m_filterInterfaceNames.isEmpty()) {
+        bool found = false;
+        for (int i = 0; i < t->eventDescriptorTemplates()->rowCount(); i++) {
+            if (m_filterInterfaceNames.contains(t->eventDescriptorTemplates()->get(i)->interfaceName())) {
+                found = true;
+                break;
+            }
+        }
+        if (!found && t->stateEvaluatorTemplate() && stateEvaluatorTemplateContainsInterface(t->stateEvaluatorTemplate(), m_filterInterfaceNames)) {
+            found = true;
+        }
+        if (!found) {
+            for (int i = 0; i < t->ruleActionTemplates()->rowCount(); i++) {
+                if (m_filterInterfaceNames.contains(t->ruleActionTemplates()->get(i)->interfaceName())) {
+                    found = true;
+                    break;
+                }
+            }
+        }
+        if (!found) {
+            for (int i = 0; i < t->ruleExitActionTemplates()->rowCount(); i++) {
+                if (m_filterInterfaceNames.contains(t->ruleExitActionTemplates()->get(i)->interfaceName())) {
+                    found = true;
+                    break;
+                }
+            }
+        }
+        if (!found) {
+            return false;
+        }
+    }
+    return true;
+}
+
+bool RuleTemplatesFilterModel::stateEvaluatorTemplateContainsInterface(StateEvaluatorTemplate *stateEvaluatorTemplate, const QStringList &interfaceNames) const
+{
+    if (interfaceNames.contains(stateEvaluatorTemplate->stateDescriptorTemplate()->interfaceName())) {
+        return true;
+    }
+    for (int i = 0; i < stateEvaluatorTemplate->childEvaluatorTemplates()->rowCount(); i++) {
+        if (stateEvaluatorTemplateContainsInterface(stateEvaluatorTemplate->childEvaluatorTemplates()->get(i), interfaceNames)) {
+            return true;
+        }
+    }
+    return false;
+}
--- a/libnymea-app-core/ruletemplates/ruletemplates.h
+++ b/libnymea-app-core/ruletemplates/ruletemplates.h
@ -0,0 +1,64 @@
+#ifndef RULETEMPLATES_H
+#define RULETEMPLATES_H
+
+#include <QAbstractListModel>
+
+class RuleTemplate;
+class StateEvaluatorTemplate;
+
+class RuleTemplates : public QAbstractListModel
+{
+    Q_OBJECT
+    Q_PROPERTY(int count READ rowCount NOTIFY countChanged)
+public:
+    enum Roles {
+        RoleDescription
+    };
+    Q_ENUM(Roles)
+
+    explicit RuleTemplates(QObject *parent = nullptr);
+
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
+    QVariant data(const QModelIndex &index, int role) const override;
+    QHash<int, QByteArray> roleNames() const override;
+    Q_INVOKABLE RuleTemplate* get(int index) const;
+
+signals:
+    void countChanged();
+
+private:
+    QList<RuleTemplate*> m_list;
+
+};
+
+#include <QSortFilterProxyModel>
+
+class RuleTemplatesFilterModel: public QSortFilterProxyModel
+{
+    Q_OBJECT
+    Q_PROPERTY(RuleTemplates* ruleTemplates READ ruleTemplates WRITE setRuleTemplates NOTIFY ruleTemplatesChanged)
+    Q_PROPERTY(QStringList filterInterfaceNames READ filterInterfaceNames WRITE setFilterInterfaceNames NOTIFY filterInterfaceNamesChanged)
+public:
+    RuleTemplatesFilterModel(QObject *parent = nullptr): QSortFilterProxyModel(parent) {}
+    RuleTemplates* ruleTemplates() const { return m_ruleTemplates; }
+    void setRuleTemplates(RuleTemplates* ruleTemplates) { if (m_ruleTemplates != ruleTemplates) { m_ruleTemplates = ruleTemplates; setSourceModel(ruleTemplates); emit ruleTemplatesChanged(); invalidateFilter();}}
+    QStringList filterInterfaceNames() const { return m_filterInterfaceNames; }
+    void setFilterInterfaceNames(const QStringList &filterInterfaceNames) { if (m_filterInterfaceNames != filterInterfaceNames) m_filterInterfaceNames = filterInterfaceNames; emit filterInterfaceNamesChanged(); invalidateFilter();}
+    Q_INVOKABLE RuleTemplate* get(int index) {
+        if (index < 0 || index >= rowCount()) {
+            return nullptr;
+        }
+        return m_ruleTemplates->get(mapToSource(this->index(index, 0)).row());
+    }
+protected:
+    bool filterAcceptsRow(int source_row, const QModelIndex &source_parent) const override;
+    bool stateEvaluatorTemplateContainsInterface(StateEvaluatorTemplate *stateEvaluatorTemplate, const QStringList &interfaceNames) const;
+signals:
+    void ruleTemplatesChanged();
+    void filterInterfaceNamesChanged();
+private:
+    RuleTemplates* m_ruleTemplates = nullptr;
+    QStringList m_filterInterfaceNames;
+};
+
+#endif // RULETEMPLATES_H
--- a/libnymea-app-core/ruletemplates/statedescriptortemplate.cpp
+++ b/libnymea-app-core/ruletemplates/statedescriptortemplate.cpp
@ -0,0 +1,37 @@
+#include "statedescriptortemplate.h"
+
+StateDescriptorTemplate::StateDescriptorTemplate(const QString &interfaceName, const QString &interfaceState, int selectionId, StateDescriptorTemplate::ValueOperator valueOperator, const QVariant &value, QObject *parent):
+    QObject(parent),
+    m_interfaceName(interfaceName),
+    m_interfaceState(interfaceState),
+    m_selectionId(selectionId),
+    m_valueOperator(valueOperator),
+    m_value(value)
+{
+
+}
+
+QString StateDescriptorTemplate::interfaceName() const
+{
+    return m_interfaceName;
+}
+
+QString StateDescriptorTemplate::interfaceState() const
+{
+    return m_interfaceState;
+}
+
+int StateDescriptorTemplate::selectionId() const
+{
+    return m_selectionId;
+}
+
+StateDescriptorTemplate::ValueOperator StateDescriptorTemplate::valueOperator() const
+{
+    return m_valueOperator;
+}
+
+QVariant StateDescriptorTemplate::value() const
+{
+    return m_value;
+}
--- a/libnymea-app-core/ruletemplates/statedescriptortemplate.h
+++ b/libnymea-app-core/ruletemplates/statedescriptortemplate.h
@ -0,0 +1,43 @@
+#ifndef STATEDESCRIPTORTEMPLATE_H
+#define STATEDESCRIPTORTEMPLATE_H
+
+#include <QObject>
+#include <QVariant>
+
+class StateDescriptorTemplate : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(QString interfaceName READ interfaceName CONSTANT)
+    Q_PROPERTY(QString interfaceState READ interfaceState CONSTANT)
+    Q_PROPERTY(int selectionId READ selectionId CONSTANT)
+    Q_PROPERTY(ValueOperator valueOperator READ valueOperator CONSTANT)
+    Q_PROPERTY(QVariant value READ value CONSTANT)
+
+public:
+    enum ValueOperator {
+        ValueOperatorEquals,
+        ValueOperatorNotEquals,
+        ValueOperatorLess,
+        ValueOperatorGreater,
+        ValueOperatorLessOrEqual,
+        ValueOperatorGreaterOrEqual
+    };
+    Q_ENUM(ValueOperator)
+
+    explicit StateDescriptorTemplate(const QString &interfaceName, const QString &interfaceState, int selectionId, ValueOperator valueOperator = ValueOperatorEquals, const QVariant &value = QVariant(), QObject *parent = nullptr);
+
+    QString interfaceName() const;
+    QString interfaceState() const;
+    int selectionId() const;
+    ValueOperator valueOperator() const;
+    QVariant value() const;
+
+private:
+    QString m_interfaceName;
+    QString m_interfaceState;
+    ValueOperator m_valueOperator = ValueOperatorEquals;
+    QVariant m_value;
+    int m_selectionId = 0;
+};
+
+#endif // STATEDESCRIPTORTEMPLATE_H
--- a/libnymea-app-core/ruletemplates/stateevaluatortemplate.cpp
+++ b/libnymea-app-core/ruletemplates/stateevaluatortemplate.cpp
@ -0,0 +1,25 @@
+#include "stateevaluatortemplate.h"
+
+StateEvaluatorTemplate::StateEvaluatorTemplate(StateDescriptorTemplate *stateDescriptorTemplate, StateOperator stateOperator, QObject *parent):
+    QObject(parent),
+    m_stateDescriptorTemplate(stateDescriptorTemplate),
+    m_stateOperator(stateOperator),
+    m_childEvaluatorTemplates(new StateEvaluatorTemplates(this))
+{
+    stateDescriptorTemplate->setParent(this);
+}
+
+StateDescriptorTemplate *StateEvaluatorTemplate::stateDescriptorTemplate() const
+{
+    return m_stateDescriptorTemplate;
+}
+
+StateEvaluatorTemplate::StateOperator StateEvaluatorTemplate::stateOperator() const
+{
+    return m_stateOperator;
+}
+
+StateEvaluatorTemplates *StateEvaluatorTemplate::childEvaluatorTemplates() const
+{
+    return m_childEvaluatorTemplates;
+}
--- a/libnymea-app-core/ruletemplates/stateevaluatortemplate.h
+++ b/libnymea-app-core/ruletemplates/stateevaluatortemplate.h
@ -0,0 +1,65 @@
+#ifndef STATEEVALUATORTEMPLATE_H
+#define STATEEVALUATORTEMPLATE_H
+
+#include "statedescriptortemplate.h"
+
+#include <QObject>
+
+class StateEvaluatorTemplates;
+
+class StateEvaluatorTemplate : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY(StateDescriptorTemplate* stateDescriptorTemplate READ stateDescriptorTemplate CONSTANT)
+    Q_PROPERTY(StateOperator stateOperator READ stateOperator CONSTANT)
+    Q_PROPERTY(StateEvaluatorTemplates* childEvaluatorTemplates READ childEvaluatorTemplates CONSTANT)
+
+public:
+    enum StateOperator {
+        StateOperatorAnd,
+        StateOperatorOr
+    };
+    Q_ENUM(StateOperator)
+
+    explicit StateEvaluatorTemplate(StateDescriptorTemplate* stateDescriptorTemplate, StateOperator stateOperator = StateOperatorAnd, QObject *parent = nullptr);
+
+    StateDescriptorTemplate* stateDescriptorTemplate() const;
+    StateOperator stateOperator() const;
+    StateEvaluatorTemplates* childEvaluatorTemplates() const;
+
+private:
+    StateDescriptorTemplate* m_stateDescriptorTemplate = nullptr;
+    StateOperator m_stateOperator = StateOperatorAnd;
+    StateEvaluatorTemplates *m_childEvaluatorTemplates = nullptr;
+};
+
+#include <QAbstractListModel>
+
+class StateEvaluatorTemplates: public QAbstractListModel
+{
+    Q_OBJECT
+    Q_PROPERTY(int count READ rowCount CONSTANT)
+
+public:
+    StateEvaluatorTemplates(QObject *parent = nullptr): QAbstractListModel(parent) {}
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override { Q_UNUSED(parent); return m_list.count(); }
+    QVariant data(const QModelIndex &index, int role) const override { Q_UNUSED(index); Q_UNUSED(role); return QVariant(); }
+
+    Q_INVOKABLE StateEvaluatorTemplate* get(int index) const {
+        if (index < 0 || index >= m_list.count()) {
+            return nullptr;
+        }
+        return m_list.at(index);
+    }
+
+    void addStateEvaluatorTemplate(StateEvaluatorTemplate *stateEvaluatorTemplate) {
+        stateEvaluatorTemplate->setParent(this);
+        beginInsertRows(QModelIndex(), m_list.count(), m_list.count());
+        m_list.append(stateEvaluatorTemplate);
+        endInsertRows();
+    }
+private:
+    QList<StateEvaluatorTemplate*> m_list;
+};
+
+#endif // STATEEVALUATORTEMPLATE_H
--- a/libnymea-app-core/tagsmanager.cpp
+++ b/libnymea-app-core/tagsmanager.cpp
@ -111,7 +111,6 @@ void TagsManager::handleTagsNotification(const QVariantMap &params)

 void TagsManager::getTagsReply(const QVariantMap &params)
 {
-    qDebug() << "Have tags" << params;
    foreach (const QVariant &tagVariant, params.value("params").toMap().value("tags").toList()) {
        addTagInternal(tagVariant.toMap());
    }
--- a/libnymea-common/types/actiontype.cpp
+++ b/libnymea-common/types/actiontype.cpp
@ -74,6 +74,10 @@ ParamTypes *ActionType::paramTypes() const

 void ActionType::setParamTypes(ParamTypes *paramTypes)
 {
+    if (m_paramTypes && m_paramTypes->parent() == this) {
+        m_paramTypes->deleteLater();
+    }
    m_paramTypes = paramTypes;
+    m_paramTypes->setParent(this);
    emit paramTypesChanged();
 }
--- a/libnymea-common/types/actiontype.h
+++ b/libnymea-common/types/actiontype.h
@ -60,7 +60,7 @@ private:
    QString m_name;
    QString m_displayName;
    int m_index;
-    ParamTypes *m_paramTypes;
+    ParamTypes *m_paramTypes = nullptr;

 signals:
    void paramTypesChanged();
--- a/libnymea-common/types/eventdescriptors.cpp
+++ b/libnymea-common/types/eventdescriptors.cpp
@ -42,7 +42,7 @@ EventDescriptor *EventDescriptors::get(int index) const

 EventDescriptor *EventDescriptors::createNewEventDescriptor()
 {
-    return new EventDescriptor();
+    return new EventDescriptor(this);
 }

 void EventDescriptors::addEventDescriptor(EventDescriptor *eventDescriptor)
--- a/libnymea-common/types/interfaces.cpp
+++ b/libnymea-common/types/interfaces.cpp
@ -38,6 +38,9 @@ Interfaces::Interfaces(QObject *parent) : QAbstractListModel(parent)
    addStateType("temperaturesensor", "temperature", QVariant::Double, false,
                 tr("Temperature"),
                 tr("Temperature has changed"));
+
+    addInterface("simpleclosable", tr("Closable things"));
+    addActionType("simpleclosable", "close", "Close", new ParamTypes());
 }

 int Interfaces::rowCount(const QModelIndex &parent) const
--- a/libnymea-common/types/paramtype.cpp
+++ b/libnymea-common/types/paramtype.cpp
@ -147,7 +147,7 @@ void ParamType::setUnit(const Types::Unit &unit)
    m_unit = unit;
 }

-QList<QVariant> ParamType::allowedValues() const
+QVariantList ParamType::allowedValues() const
 {
    return m_allowedValues;
 }
--- a/libnymea-common/types/paramtype.h
+++ b/libnymea-common/types/paramtype.h
@ -83,7 +83,7 @@ public:
    QString unitString() const;
    void setUnitString(const QString &unitString);

-    QList<QVariant> allowedValues() const;
+    QVariantList allowedValues() const;
    void setAllowedValues(const QList<QVariant> allowedValues);

    bool readOnly() const;
--- a/libnymea-common/types/statetype.cpp
+++ b/libnymea-common/types/statetype.cpp
@ -92,6 +92,16 @@ void StateType::setDefaultValue(const QVariant &defaultValue)
    m_defaultValue = defaultValue;
 }

+QVariantList StateType::allowedValues() const
+{
+    return m_allowedValues;
+}
+
+void StateType::setAllowedValues(const QVariantList &allowedValues)
+{
+    m_allowedValues = allowedValues;
+}
+
 Types::Unit StateType::unit() const
 {
    return m_unit;
--- a/libnymea-common/types/statetype.h
+++ b/libnymea-common/types/statetype.h
@ -38,6 +38,7 @@ class StateType : public QObject
    Q_PROPERTY(QString type READ type CONSTANT)
    Q_PROPERTY(int index READ index CONSTANT)
    Q_PROPERTY(QVariant defaultValue READ defaultValue CONSTANT)
+    Q_PROPERTY(QVariantList allowedValues READ allowedValues WRITE setAllowedValues CONSTANT)
    Q_PROPERTY(Types::Unit unit READ unit CONSTANT)
    Q_PROPERTY(QString unitString READ unitString CONSTANT)

@ -63,6 +64,9 @@ public:
    QVariant defaultValue() const;
    void setDefaultValue(const QVariant &defaultValue);

+    QVariantList allowedValues() const;
+    void setAllowedValues(const QVariantList &allowedValues);
+
    Types::Unit unit() const;
    void setUnit(const Types::Unit &unit);

@ -76,6 +80,7 @@ private:
    QString m_type;
    int m_index;
    QVariant m_defaultValue;
+    QVariantList m_allowedValues;
    Types::Unit m_unit;
    QString m_unitString;

--- a/libnymea-common/types/statetypes.cpp
+++ b/libnymea-common/types/statetypes.cpp
@ -103,7 +103,6 @@ StateType *StateTypes::findByName(const QString &name) const
 void StateTypes::clearModel()
 {
    beginResetModel();
-    qDebug() << "StateTypes: delete all stateTypes";
    qDeleteAll(m_stateTypes);
    m_stateTypes.clear();
    endResetModel();
--- a/nymea-app/nymea-app.pro
+++ b/nymea-app/nymea-app.pro
@ -66,7 +66,7 @@ macx: {
 ios: {
    message("iOS build")
    QMAKE_TARGET_BUNDLE_PREFIX = io.guh
-    QMAKE_BUNDLE = $$TARGET
+    QMAKE_BUNDLE = nymeaApp
    # Configure generated xcode project to have our bundle id
    xcode_product_bundle_identifier_setting.value = $${QMAKE_TARGET_BUNDLE_PREFIX}.$${QMAKE_BUNDLE}
    plist.input = ../packaging/ios/Info.plist.in
@ -90,3 +90,6 @@ BR=$$BRANDING

 target.path = /usr/bin
 INSTALLS += target
+
+DISTFILES += \
+    ui/magic/NewThingMagicPage.qml
--- a/nymea-app/resources.qrc
+++ b/nymea-app/resources.qrc
@ -24,7 +24,8 @@
        <file>ui/devicelistpages/LightsDeviceListPage.qml</file>
        <file>ui/customviews/ExtendedVolumeController.qml</file>
        <file>ui/components/ColorIcon.qml</file>
-        <file>ui/images/torch-on.svg</file>
+        <file>ui/images/light-on.svg</file>
+        <file>ui/images/light-off.svg</file>
        <file>ui/images/media-preview-start.svg</file>
        <file>ui/MagicPage.qml</file>
        <file>ui/images/mediaplayer-app-symbolic.svg</file>
@ -59,7 +60,6 @@
        <file>ui/images/weathericons/wind.svg</file>
        <file>ui/devicepages/WeatherDevicePage.qml</file>
        <file>ui/devicepages/ColorLightDevicePage.qml</file>
-        <file>ui/images/torch-off.svg</file>
        <file>ui/components/ThrottledSlider.qml</file>
        <file>ui/components/ColorPickerCt.qml</file>
        <file>ui/images/navigation-menu.svg</file>
@ -130,13 +130,12 @@
        <file>ui/PushButtonAuthPage.qml</file>
        <file>ui/images/dialog-error-symbolic.svg</file>
        <file>ui/images/send.svg</file>
-        <file>ui/images/mail-mark-important.svg</file>
+        <file>ui/images/attention.svg</file>
        <file>ui/devicepages/InputTriggerDevicePage.qml</file>
        <file>ui/images/clock-app-symbolic.svg</file>
        <file>ui/devicepages/StateLogPage.qml</file>
        <file>ui/customviews/GenericTypeLogView.qml</file>
        <file>qtquickcontrols2.conf</file>
-        <file>ui/BluetoothDiscoveryPage.qml</file>
        <file>ui/images/bluetooth.svg</file>
        <file>ui/images/refresh.svg</file>
        <file>ui/WirelessControlerPage.qml</file>
@ -161,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>
@ -213,5 +212,22 @@
        <file>ui/components/EmptyViewPlaceholder.qml</file>
        <file>ui/components/RemoveDeviceMethodDialog.qml</file>
        <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>
+        <file>ui/magic/NewThingMagicPage.qml</file>
+        <file>ui/images/DeviceIconBlind.svg</file>
+        <file>ui/images/DeviceIconRollerShutter.svg</file>
    </qresource>
 </RCC>
--- a/nymea-app/ui/ConnectPage.qml
+++ b/nymea-app/ui/ConnectPage.qml
@ -76,11 +76,27 @@ Page {

        Page {
            objectName: "discoveryPage"
-            header: GuhHeader {
-                text: qsTr("Connect %1").arg(app.systemName)
-                backButtonVisible: false
-                menuButtonVisible: true
-                onMenuPressed: connectionMenu.open()
+            header: FancyHeader {
+                title: qsTr("Connect %1").arg(app.systemName)
+                model: ListModel {
+                    ListElement { iconSource: "../images/network-vpn.svg"; text: qsTr("Manual connection"); page: "connection/ManualConnectPage.qml" }
+                    ListElement { iconSource: "../images/bluetooth.svg"; text: qsTr("Wireless setup"); page: "connection/BluetoothDiscoveryPage.qml" }
+                    ListElement { iconSource: "../images/private-browsing.svg"; text: qsTr("Demo mode"); page: "" }
+                    ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "AppSettingsPage.qml" }
+                }
+                onClicked: {
+                    switch (index) {
+                    case 0:
+                    case 1:
+                    case 3:
+                        pageStack.push(model.get(index).page);
+                        break;
+                    case 2:
+                        Engine.connection.connect("nymea://nymea.nymea.io:2222")
+                        pageStack.push(connectingPage)
+                        break;
+                    }
+                }
            }

            Timer {
@ -90,41 +106,6 @@ Page {
                running: true
            }

-            Menu {
-                id: connectionMenu
-                objectName: "connectionMenu"
-                width: implicitWidth + app.margins
-
-                IconMenuItem {
-                    objectName: "manualConnectMenuItem"
-                    iconSource: "../images/network-vpn.svg"
-                    text: qsTr("Manual connection")
-                    onTriggered: pageStack.push(manualConnectPage)
-                }
-
-                IconMenuItem {
-                    iconSource: "../images/bluetooth.svg"
-                    text: qsTr("Wireless setup")
-                    onTriggered: pageStack.push(Qt.resolvedUrl("BluetoothDiscoveryPage.qml"))
-                }
-
-                IconMenuItem {
-                    iconSource: "../images/private-browsing.svg"
-                    text: qsTr("Demo mode")
-                    onTriggered: {
-                        pageStack.push(connectingPage)
-                        Engine.connection.connect("nymea://nymea.nymea.io:2222")
-                    }
-                }
-
-                MenuSeparator { }
-
-                IconMenuItem {
-                    iconSource: "../images/stock_application.svg"
-                    text: qsTr("App settings")
-                    onTriggered: pageStack.push(Qt.resolvedUrl("AppSettingsPage.qml"))
-                }
-            }

            ColumnLayout {
                anchors.fill: parent
@ -304,107 +285,6 @@ Page {
        }
    }

-
-    Component {
-        id: manualConnectPage
-
-        Page {
-            objectName: "manualConnectPage"
-            header: GuhHeader {
-                text: qsTr("Manual connection")
-                onBackPressed: pageStack.pop()
-            }
-
-            ColumnLayout {
-                anchors { left: parent.left; top: parent.top; right: parent.right }
-                anchors.margins: app.margins
-                spacing: app.margins
-
-                GridLayout {
-                    columns: 2
-
-                    Label {
-                        text: qsTr("Protocol")
-                    }
-
-                    ComboBox {
-                        id: connectionTypeComboBox
-                        Layout.fillWidth: true
-                        model: [ qsTr("TCP"), qsTr("Websocket") ]
-                    }
-
-                    Label { text: qsTr("Address:") }
-                    TextField {
-                        id: addressTextInput
-                        objectName: "addressTextInput"
-                        Layout.fillWidth: true
-                        placeholderText: "127.0.0.1"
-                    }
-
-                    Label { text: qsTr("Port:") }
-                    TextField {
-                        id: portTextInput
-                        Layout.fillWidth: true
-                        placeholderText: connectionTypeComboBox.currentIndex === 0 ? "2222" : "4444"
-                        validator: IntValidator{bottom: 1; top: 65535;}
-                    }
-
-                    Label {
-                        Layout.fillWidth: true
-                        text: qsTr("Encrypted connection:")
-                    }
-                    CheckBox {
-                        id: secureCheckBox
-                        checked: true
-                    }
-                }
-
-
-                Button {
-                    text: qsTr("Connect")
-                    objectName: "connectButton"
-                    Layout.fillWidth: true
-                    onClicked: {
-                        var rpcUrl
-                        var hostAddress
-                        var port
-
-                        // Set default to placeholder
-                        if (addressTextInput.text === "") {
-                            hostAddress = addressTextInput.placeholderText
-                        } else {
-                            hostAddress = addressTextInput.text
-                        }
-
-                        if (portTextInput.text === "") {
-                            port = portTextInput.placeholderText
-                        } else {
-                            port = portTextInput.text
-                        }
-
-                        if (connectionTypeComboBox.currentIndex == 0) {
-                            if (secureCheckBox.checked) {
-                                rpcUrl = "nymeas://" + hostAddress + ":" + port
-                            } else {
-                                rpcUrl = "nymea://" + hostAddress + ":" + port
-                            }
-                        } else if (connectionTypeComboBox.currentIndex == 1) {
-                            if (secureCheckBox.checked) {
-                                rpcUrl = "wss://" + hostAddress + ":" + port
-                            } else {
-                                rpcUrl = "ws://" + hostAddress + ":" + port
-                            }
-                        }
-
-                        print("Try to connect ", rpcUrl)
-                        Engine.connection.connect(rpcUrl)
-                        pageStack.push(connectingPage)
-                    }
-                }
-            }
-        }
-    }
-
    Component {
        id: connectingPage
        Page {
--- a/nymea-app/ui/MainPage.qml
+++ b/nymea-app/ui/MainPage.qml
@ -14,10 +14,14 @@ Page {
        title: swipeView.currentItem.title

        model: ListModel {
-            ListElement { iconSource: "../images/share.svg"; text: qsTr("Configure things"); page: "../EditDevicesPage.qml" }
-            ListElement { iconSource: "../images/magic.svg"; text: qsTr("Magic"); page: "../MagicPage.qml" }
-            ListElement { iconSource: "../images/settings.svg"; text: qsTr("System settings"); page: "../SettingsPage.qml" }
-            ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "../AppSettingsPage.qml" }
+            ListElement { iconSource: "../images/share.svg"; text: qsTr("Configure things"); page: "EditDevicesPage.qml" }
+            ListElement { iconSource: "../images/magic.svg"; text: qsTr("Magic"); page: "MagicPage.qml" }
+            ListElement { iconSource: "../images/settings.svg"; text: qsTr("System settings"); page: "SettingsPage.qml" }
+            ListElement { iconSource: "../images/stock_application.svg"; text: qsTr("App settings"); page: "AppSettingsPage.qml" }
+        }
+
+        onClicked: {
+            pageStack.push(model.get(index).page)
        }
    }

--- a/nymea-app/ui/NewDeviceWizard.qml
+++ b/nymea-app/ui/NewDeviceWizard.qml
@ -97,6 +97,7 @@ Page {
                    deviceClasses: Engine.deviceManager.deviceClasses
                }
                delegate: MeaListItemDelegate {
+                    id: deviceClassDelegate
                    width: parent.width
                    text: model.displayName
                    iconName: app.interfacesToIcon(deviceClass.interfaces)
@ -118,6 +119,27 @@ Page {

                        print("should setup", deviceClass.name, deviceClass.setupMethod, deviceClass.createMethods, deviceClass["discoveryParamTypes"].count)
                    }
+
+                    swipe.enabled: deviceClass.createMethods.indexOf("CreateMethodUser") !== -1
+                    swipe.right: MouseArea {
+                        height: deviceClassDelegate.height
+                        width: height
+                        anchors.right: parent.right
+                        Rectangle {
+                            anchors.fill: parent
+                            color: "transparent"
+                        }
+
+                        ColorIcon {
+                            anchors.fill: parent
+                            anchors.margins: app.margins
+                            name: "../images/add.svg"
+                        }
+                        onClicked: {
+                            d.deviceClass = deviceClass
+                            internalPageStack.push(paramsPage)
+                        }
+                    }
                }
            }
        }
--- a/nymea-app/ui/Nymea.qml
+++ b/nymea-app/ui/Nymea.qml
@ -110,6 +110,9 @@ ApplicationWindow {
        objectName: "pageStack"
        anchors.fill: parent
        initialItem: Page {}
+        onDepthChanged: {
+            print("stackview depth changed", pageStack.depth)
+        }
    }

    onClosing: {
@ -135,7 +138,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", "extendedawning", "extendedshutter", "extendedblind", "button", "notifications", "inputtrigger", "outputtrigger", "gateway"]
    function interfaceToString(name) {
        switch(name) {
        case "light":
@ -161,9 +164,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":
@ -186,7 +194,7 @@ ApplicationWindow {
        case "light":
        case "colorlight":
        case "dimmablelight":
-            return Qt.resolvedUrl("images/torch-on.svg")
+            return Qt.resolvedUrl("images/light-on.svg")
        case "sensor":
        case "temperaturesensor":
        case "humiditysensor":
@ -212,18 +220,27 @@ ApplicationWindow {
        case "connectable":
            return Qt.resolvedUrl("images/stock_link.svg")
        case "inputtrigger":
-            return Qt.resolvedUrl("images/mail-mark-important.svg")
+            return Qt.resolvedUrl("images/attention.svg")
        case "outputtrigger":
            return Qt.resolvedUrl("images/send.svg")
        case "shutter":
+        case "extendedshutter":
+            return Qt.resolvedUrl("images/DeviceIconRollerShutter.svg")
        case "blind":
-            return Qt.resolvedUrl("images/sort-listitem.svg")
+        case "extendedblind":
+            return Qt.resolvedUrl("images/DeviceIconBlind.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":
            return Qt.resolvedUrl("images/select-none.svg")
+        case "simpleclosable":
+            return Qt.resolvedUrl("images/sort-listitem.svg")
+        default:
+            console.warn("InterfaceToIcon: Unhandled interface", name)
        }
        return "";
    }
@ -238,6 +255,17 @@ ApplicationWindow {
        return "grey";
    }

+    function interfaceToDisplayName(name) {
+        switch (name) {
+        case "light":
+            return qsTr("light")
+        case "button":
+            return "button";
+        case "sensor":
+            return qsTr("sensor")
+        }
+    }
+
    function interfaceListToDevicePage(interfaceList) {
        var page;
        if (interfaceList.indexOf("media") >= 0) {
@ -250,12 +278,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";
        }
@ -263,6 +293,11 @@ ApplicationWindow {
        return page;
    }

+    function pad(num, size) {
+        var s = "000000000" + num;
+        return s.substr(s.length-size);
+    }
+
    Component {
        id: invalidVersionComponent
        Popup {
--- a/nymea-app/ui/components/ColorIcon.qml
+++ b/nymea-app/ui/components/ColorIcon.qml
@ -76,6 +76,8 @@ Item {

    property int margins: 0

+    property alias status: image.status
+
    Image {
        id: image

--- a/nymea-app/ui/components/FancyHeader.qml
+++ b/nymea-app/ui/components/FancyHeader.qml
@ -10,6 +10,8 @@ ToolBar {
    property string title
    property alias model: menuRepeater.model

+    signal clicked(int index);
+
    QtObject {
        id: d
        property bool menuOpen: false
@ -87,7 +89,7 @@ ToolBar {

                    onClicked: {
                        d.menuOpen = false
-                        pageStack.push(model.page)
+                        root.clicked(index)
                    }

                    Rectangle {
--- a/nymea-app/ui/components/ShutterControls.qml
+++ b/nymea-app/ui/components/ShutterControls.qml
@ -14,54 +14,46 @@ 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

-    Rectangle {
+    property bool invert: false
+
+    ItemDelegate {
        Layout.preferredWidth: app.iconSize * 2
        Layout.preferredHeight: width
-        color: root.openState && root.openState.value === "opening" ? Material.accent : Material.foreground
-        radius: height / 2

        ColorIcon {
            anchors.fill: parent
            anchors.margins: app.margins
-            name: "../images/up.svg"
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: Engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("open").id)
+            name: root.invert ? "../images/down.svg" : "../images/up.svg"
+            color: root.openState && root.openState.value === "opening" ? Material.accent : keyColor
        }
+        onClicked: Engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("open").id)
    }

-    Rectangle {
+
+   ItemDelegate {
        Layout.preferredWidth: app.iconSize * 2
        Layout.preferredHeight: width
-        color: Material.foreground
-        radius: height / 2
+//        color: Material.foreground
+//        radius: height / 2

        ColorIcon {
            anchors.fill: parent
            anchors.margins: app.margins
-            name: "../images/remove.svg"
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: Engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("stop").id)
+            name: "../images/media-playback-stop.svg"
        }
+        onClicked: Engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("stop").id)
    }

-    Rectangle {
+    ItemDelegate {
        Layout.preferredWidth: app.iconSize * 2
        Layout.preferredHeight: width
-        color: root.openState && root.openState.value === "closing" ? Material.accent : Material.foreground
-        radius: height / 2

        ColorIcon {
            anchors.fill: parent
            anchors.margins: app.margins
-            name: "../images/down.svg"
-        }
-        MouseArea {
-            anchors.fill: parent
-            onClicked: Engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("close").id)
+            name: root.invert ? "../images/up.svg" : "../images/down.svg"
+            color: root.openState && root.openState.value === "closing" ? Material.accent : keyColor
        }
+        onClicked: Engine.deviceManager.executeAction(root.device.id, root.deviceClass.actionTypes.findByName("close").id)
    }
 }
--- a/nymea-app/ui/connection/BluetoothDiscoveryPage.qml
+++ b/nymea-app/ui/connection/BluetoothDiscoveryPage.qml
@ -1,7 +1,7 @@
 import QtQuick 2.4
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.2
-import "components"
+import "../components"
 import Nymea 1.0


@ -12,7 +12,7 @@ Page {
        onBackPressed: pageStack.pop()

        HeaderButton {
-            imageSource: Qt.resolvedUrl("images/refresh.svg")
+            imageSource: Qt.resolvedUrl("../images/refresh.svg")
            onClicked: Engine.bluetoothDiscovery.start()
        }
    }
@ -68,7 +68,7 @@ Page {

            delegate: MeaListItemDelegate {
                width: parent.width
-                iconName: Qt.resolvedUrl("images/bluetooth.svg")
+                iconName: Qt.resolvedUrl("../images/bluetooth.svg")
                text: model.name
                subText: model.address

@ -138,7 +138,7 @@ Page {
                        sourceSize.height: 540
                        fillMode: Image.PreserveAspectFit
                        Layout.alignment: Qt.AlignHCenter
-                        source: "images/rpi-setup.svg"
+                        source: "../images/rpi-setup.svg"
                    }
                    ThinDivider {}
                    Label {
@ -164,7 +164,7 @@ Page {
                        sourceSize.height: width
                        fillMode: Image.PreserveAspectFit
                        Layout.alignment: Qt.AlignHCenter
-                        source: "images/nymea-box-setup.svg"
+                        source: "../images/nymea-box-setup.svg"
                    }
                }
            }
--- a/nymea-app/ui/connection/ManualConnectPage.qml
+++ b/nymea-app/ui/connection/ManualConnectPage.qml
@ -0,0 +1,101 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Nymea 1.0
+import "../components"
+
+Page {
+    objectName: "manualConnectPage"
+    header: GuhHeader {
+        text: qsTr("Manual connection")
+        onBackPressed: pageStack.pop()
+    }
+
+    ColumnLayout {
+        anchors { left: parent.left; top: parent.top; right: parent.right }
+        anchors.margins: app.margins
+        spacing: app.margins
+
+        GridLayout {
+            columns: 2
+
+            Label {
+                text: qsTr("Protocol")
+            }
+
+            ComboBox {
+                id: connectionTypeComboBox
+                Layout.fillWidth: true
+                model: [ qsTr("TCP"), qsTr("Websocket") ]
+            }
+
+            Label { text: qsTr("Address:") }
+            TextField {
+                id: addressTextInput
+                objectName: "addressTextInput"
+                Layout.fillWidth: true
+                placeholderText: "127.0.0.1"
+            }
+
+            Label { text: qsTr("Port:") }
+            TextField {
+                id: portTextInput
+                Layout.fillWidth: true
+                placeholderText: connectionTypeComboBox.currentIndex === 0 ? "2222" : "4444"
+                validator: IntValidator{bottom: 1; top: 65535;}
+            }
+
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Encrypted connection:")
+            }
+            CheckBox {
+                id: secureCheckBox
+                checked: true
+            }
+        }
+
+
+        Button {
+            text: qsTr("Connect")
+            objectName: "connectButton"
+            Layout.fillWidth: true
+            onClicked: {
+                var rpcUrl
+                var hostAddress
+                var port
+
+                // Set default to placeholder
+                if (addressTextInput.text === "") {
+                    hostAddress = addressTextInput.placeholderText
+                } else {
+                    hostAddress = addressTextInput.text
+                }
+
+                if (portTextInput.text === "") {
+                    port = portTextInput.placeholderText
+                } else {
+                    port = portTextInput.text
+                }
+
+                if (connectionTypeComboBox.currentIndex == 0) {
+                    if (secureCheckBox.checked) {
+                        rpcUrl = "nymeas://" + hostAddress + ":" + port
+                    } else {
+                        rpcUrl = "nymea://" + hostAddress + ":" + port
+                    }
+                } else if (connectionTypeComboBox.currentIndex == 1) {
+                    if (secureCheckBox.checked) {
+                        rpcUrl = "wss://" + hostAddress + ":" + port
+                    } else {
+                        rpcUrl = "ws://" + hostAddress + ":" + port
+                    }
+                }
+
+                print("Try to connect ", rpcUrl)
+                Engine.connection.connect(rpcUrl)
+                pageStack.push(connectingPage)
+            }
+        }
+    }
+}
--- a/nymea-app/ui/customviews/MediaControllerView.qml
+++ b/nymea-app/ui/customviews/MediaControllerView.qml
@ -25,10 +25,10 @@ CustomViewBase {
        controlsModel.append({image: "../images/media-skip-backward.svg", action: "skipBack"})
        controlsModel.append({image: "../images/media-seek-backward.svg", action: "rewind"})
        controlsModel.append({image: "../images/media-playback-stop.svg", action: "stop"})
-        if (playbackState.value === "PAUSED" || playbackState.value === "STOPPED") {
+        if (playbackState.value === "Paused" || playbackState.value === "Stopped") {
            controlsModel.append({image: "../images/media-playback-start.svg", action: "play"})
        }
-        if (playbackState.value === "PLAYING") {
+        if (playbackState.value === "Playing") {
            controlsModel.append({image: "../images/media-playback-pause.svg", action: "pause"})
        }

--- a/nymea-app/ui/delegates/ParamDescriptorDelegate.qml
+++ b/nymea-app/ui/delegates/ParamDescriptorDelegate.qml
@ -24,6 +24,7 @@ ItemDelegate {
                    case "bool":
                    case "string":
                    case "qstring":
+                    case "color":
                        return [qsTr("is"), qsTr("is not")];
                    case "int":
                    case "double":
@ -61,7 +62,7 @@ ItemDelegate {
                Layout.fillWidth: true

                sourceComponent: {
-                    print("Datatye is:", paramType.type, paramType.minValue, paramType.maxValue, paramType.allowedValues)
+                    print("Datatye is:", paramType.name, paramType.type, paramType.minValue, paramType.maxValue, paramType.allowedValues)
                    switch (paramType.type.toLowerCase()) {
                    case "bool":
                        return boolComponent;
@ -73,6 +74,7 @@ ItemDelegate {
                        return textFieldComponent;
                    case "string":
                    case "qstring":
+                    case "color":
                        if (paramType.allowedValues.length > 0) {
                            return comboBoxComponent
                        }
--- a/nymea-app/ui/devicepages/AwningDevicePage.qml
+++ 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
+                }
+            }
+
+        }
+    }
+}
--- a/nymea-app/ui/devicepages/ColorLightDevicePage.qml
+++ b/nymea-app/ui/devicepages/ColorLightDevicePage.qml
@ -28,7 +28,7 @@ DevicePageBase {
                height: width
                ColorIcon {
                    anchors.fill: parent
-                    name: "../images/torch-off.svg"
+                    name: "../images/light-off.svg"
                    color: powerRow.powerState.value === true ? keyColor : app.guhAccent
                }
                onClicked: {
@ -62,7 +62,7 @@ DevicePageBase {
                height: width
                ColorIcon {
                    anchors.fill: parent
-                    name: "../images/torch-on.svg"
+                    name: "../images/light-on.svg"
                    color: powerRow.powerState.value === true ? app.guhAccent : keyColor
                }
                onClicked: {
--- 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
@ -85,29 +85,25 @@ DevicePageBase {
                device: root.device
                anchors.centerIn: parent

-                Rectangle {
+                ItemDelegate {
                    Layout.preferredWidth: app.iconSize * 2
                    Layout.preferredHeight: width
-                    color: root.lightState && root.lightState.value === true ? Material.accent : Material.foreground
-                    radius: height / 2
                    visible: root.lightStateType !== null

                    ColorIcon {
                        anchors.fill: parent
                        anchors.margins: app.margins
-                        name: "../images/torch-" + (root.lightState && root.lightState.value === true ? "on" : "off") + ".svg"
+                        name: "../images/light-" + (root.lightState && root.lightState.value === true ? "on" : "off") + ".svg"
+                        color: root.lightState && root.lightState.value === true ? Material.accent : keyColor
                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            print("blabla", root.lightState, root.lightState.value, root.lightStateType.name, root.lightState.stateTypeId, root.lightStateType.id)
-                            var params = [];
-                            var param = {};
-                            param["paramTypeId"] = root.lightStateType.id;
-                            param["value"] = !root.lightState.value;
-                            params.push(param)
-                            Engine.deviceManager.executeAction(root.device.id, root.lightStateType.id, params)
-                        }
+                    onClicked: {
+                        print("blabla", root.lightState, root.lightState.value, root.lightStateType.name, root.lightState.stateTypeId, root.lightStateType.id)
+                        var params = [];
+                        var param = {};
+                        param["paramTypeId"] = root.lightStateType.id;
+                        param["value"] = !root.lightState.value;
+                        params.push(param)
+                        Engine.deviceManager.executeAction(root.device.id, root.lightStateType.id, params)
                    }
                }
            }
--- 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
    }
 }
--- a/nymea-app/ui/images/DeviceIconBlind.svg
+++ b/nymea-app/ui/images/DeviceIconBlind.svg
@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   width="128"
+   height="128"
+   viewBox="0 0 128 128"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="DeviceIconBlind.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <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="namedview8"
+     showgrid="false"
+     inkscape:zoom="7.375"
+     inkscape:cx="42.855773"
+     inkscape:cy="47.171326"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg6" />
+  <path
+     d="M118.432 11.977l-8.098 8.198-100.78-.18 7.918-8.02 100.96.002m9.572-4H15.8l-15.8 16 112.003.2 16-16.2zM118.432 35.778l-8.098 8.198-100.78-.18 7.918-8.018h100.96m9.572-4H15.8l-15.8 16 112.003.2 16-16.2zM118.432 59.98l-8.097 8.196-100.78-.18 7.917-8.018h100.96m9.572-4H15.8L0 71.98l112.003.202 16-16.2zM118.432 83.98l-8.098 8.198-100.78-.18 7.918-8.02h100.96m9.572-4H15.8L0 95.98l112.003.2 16-16.2zM118.432 107.98l-8.097 8.197-100.78-.18 7.917-8.02h100.96m9.572-3.997H15.8l-15.8 16 112.003.2 16-16.2z"
+     id="path2"
+     style="fill-opacity:1;fill:#808080" />
+  <path
+     d="m 95.02,24.044 h 2 v 16 h -2 z m 0,-23.951 h 2 v 16 h -2 z m 0,47.927 h 2 v 16 h -2 z m 0,24.01 h 2 v 16 h -2 z m 0,23.926 h 2 v 16.002 h -2 z m 0,24.009 h 2 V 128 h -2 z m -64,-95.921 h 2 v 16 h -2 z m 0,-23.951 h 2 v 16 h -2 z m 0,47.927 h 2 v 16 h -2 z m 0,24.01 h 2 v 16 h -2 z m 0,23.926 h 2 v 16.002 h -2 z m 0,24.009 h 2 V 128 h -2 z"
+     id="path4"
+     inkscape:connector-curvature="0"
+     style="fill:#808080;fill-opacity:1" />
+</svg>
--- a/nymea-app/ui/images/DeviceIconRollerShutter.svg
+++ b/nymea-app/ui/images/DeviceIconRollerShutter.svg
@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<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"
+   width="128"
+   height="128"
+   viewBox="0 0 128 128"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="DeviceIconRollerShutter.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <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="namedview12"
+     showgrid="false"
+     inkscape:zoom="5.2149125"
+     inkscape:cx="139.1504"
+     inkscape:cy="-3.0965549"
+     inkscape:window-x="0"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg10" />
+  <g
+     fill="#1D1D1B"
+     id="g8"
+     style="fill:#808080;fill-opacity:1">
+    <path
+       d="M111 20H17V0h94v20zm-90-4h86V4H21v12zM111 128H17v-12h94v12zm-90-4h86v-4H21v4z"
+       id="path2"
+       style="fill:#808080;fill-opacity:1" />
+    <path
+       d="M22 18h4v100h-4zM102 18h4v100h-4z"
+       id="path4"
+       style="fill:#808080;fill-opacity:1" />
+    <path
+       d="M24 31h80v2H24zM24 23h80v2H24zM24 39h80v2H24zM24 47h80v2H24zM24 55h80v2H24zM24.5 63h79v2h-79zM24 71h80v2H24z"
+       id="path6"
+       style="fill:#808080;fill-opacity:1" />
+  </g>
+</svg>
--- a/nymea-app/ui/images/mail-mark-important.svg
+++ b/nymea-app/ui/images/mail-mark-important.svg
--- a/nymea-app/ui/images/awning/awning-000.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-010.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-020.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-030.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-040.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-050.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-060.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-070.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-080.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-090.svg
+++ 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>
--- a/nymea-app/ui/images/awning/awning-100.svg
+++ 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>
--- a/nymea-app/ui/images/light-off.svg
+++ b/nymea-app/ui/images/light-off.svg
--- a/nymea-app/ui/images/light-on.svg
+++ b/nymea-app/ui/images/light-on.svg
--- a/nymea-app/ui/images/shutter/shutter-000.svg
+++ b/nymea-app/ui/images/shutter/shutter-000.svg
--- a/nymea-app/ui/images/shutter/shutter-010.svg
+++ b/nymea-app/ui/images/shutter/shutter-010.svg
--- a/nymea-app/ui/images/shutter/shutter-020.svg
+++ b/nymea-app/ui/images/shutter/shutter-020.svg
--- a/nymea-app/ui/images/shutter/shutter-030.svg
+++ b/nymea-app/ui/images/shutter/shutter-030.svg
--- a/nymea-app/ui/images/shutter/shutter-040.svg
+++ b/nymea-app/ui/images/shutter/shutter-040.svg
--- a/nymea-app/ui/images/shutter/shutter-050.svg
+++ b/nymea-app/ui/images/shutter/shutter-050.svg
--- a/nymea-app/ui/images/shutter/shutter-060.svg
+++ b/nymea-app/ui/images/shutter/shutter-060.svg
--- a/nymea-app/ui/images/shutter/shutter-070.svg
+++ b/nymea-app/ui/images/shutter/shutter-070.svg
--- a/nymea-app/ui/images/shutter/shutter-080.svg
+++ b/nymea-app/ui/images/shutter/shutter-080.svg
--- a/nymea-app/ui/images/shutter/shutter-090.svg
+++ b/nymea-app/ui/images/shutter/shutter-090.svg
--- a/nymea-app/ui/images/shutter/shutter-100.svg
+++ b/nymea-app/ui/images/shutter/shutter-100.svg
--- a/nymea-app/ui/magic/DeviceRulesPage.qml
+++ b/nymea-app/ui/magic/DeviceRulesPage.qml
@ -9,6 +9,9 @@ Page {

    property var device: null

+    Component.onCompleted: print("+++ created devicerulespage")
+    Component.onDestruction: print("--- destroying devicerulespage")
+
    header: GuhHeader {
        text: qsTr("Magic involving %1").arg(root.device.name)
        onBackPressed: pageStack.pop()
@ -24,7 +27,14 @@ Page {
    // This Page will take ownership of the rule and delete it eventually.
    function addRule(rule) {
        if (rule === null || rule === undefined) {
-            rule = Engine.ruleManager.createNewRule();
+            d.editRulePage = pageStack.push(Qt.resolvedUrl("NewThingMagicPage.qml"), {device: root.device});
+            d.editRulePage.manualCreation.connect(function() {
+                pageStack.pop();
+                rule = Engine.ruleManager.createNewRule();
+                addRule(rule)
+            })
+            d.editRulePage.done.connect(function() {pageStack.pop(root);});
+            return;
        }
        d.editRulePage = pageStack.push(Qt.resolvedUrl("EditRulePage.qml"), {rule: rule});
        d.editRulePage.StackView.onRemoved.connect(function() {
@ -95,8 +105,11 @@ Page {

            onDeleteClicked: Engine.ruleManager.removeRule(model.id)
            onClicked: {
+                print("clicked")
                var newRule = rulesFilterModel.get(index).clone();
+                print("rule cloned")
                d.editRulePage = pageStack.push(Qt.resolvedUrl("EditRulePage.qml"), {rule: newRule })
+                print("page pushed")
                d.editRulePage.StackView.onRemoved.connect(function() {
                    newRule.destroy();
                })
--- a/nymea-app/ui/magic/EditRulePage.qml
+++ b/nymea-app/ui/magic/EditRulePage.qml
@ -13,7 +13,7 @@ Page {
    readonly property bool isEventBased: rule.eventDescriptors.count > 0 || rule.timeDescriptor.timeEventItems.count > 0
    readonly property bool isStateBased: (rule.stateEvaluator !== null || rule.timeDescriptor.calendarItems.count > 0) && !isEventBased
    readonly property bool actionsVisible: true
-    readonly property bool exitActionsVisible: actionsVisible && isStateBased
+    readonly property bool exitActionsVisible: (Engine.jsonRpcClient.ensureServerVersion(1.7) && !isEmpty) || isStateBased
    readonly property bool hasActions: rule.actions.count > 0
    readonly property bool hasExitActions: rule.exitActions.count > 0
    readonly property bool isEmpty: !isEventBased && !isStateBased && !hasActions
@ -24,6 +24,9 @@ Page {
    signal accept();
    signal cancel();

+    Component.onCompleted: print("+++ created editrulepage")
+    Component.onDestruction: print("--- destroying editrulepage")
+
    function addEventDescriptor(interfaceMode) {
        if (interfaceMode === undefined) {
            interfaceMode = false;
@ -335,8 +338,7 @@ Page {
                        }
                    }
                    Repeater {
-                        model: ["torch-on", "torch-off", "alarm-clock", "media-preview-start", "network-secure", "notification", "sensors", "shutter-10", "mail-mark-important", "eye"]
-
+                        model: ["light-on", "light-off", "alarm-clock", "media-play", "network-secure", "notification", "sensors", "shutter-10", "attention", "eye"]
                        delegate: Item {
                            Layout.fillWidth: true
                            Layout.preferredHeight: app.iconSize + app.margins
@ -397,9 +399,10 @@ Page {

            Repeater {
                id: eventsRepeater
-                model: root.hasExitActions ? null : root.rule.eventDescriptors
+                model: root.rule.eventDescriptors
                delegate: EventDescriptorDelegate {
                    Layout.fillWidth: true
+                    implicitWidth: parent.width
                    eventDescriptor: root.rule.eventDescriptors.get(index)
                    onRemoveEventDescriptor: root.rule.eventDescriptors.removeEventDescriptor(index)
                }
@ -553,6 +556,7 @@ Page {
                model: root.actionsVisible ? root.rule.actions : null
                delegate: RuleActionDelegate {
                    Layout.fillWidth: true
+                    implicitWidth: parent.width
                    ruleAction: root.rule.actions.get(index)
                    onRemoveRuleAction: root.rule.actions.removeRuleAction(index)
                }
@ -575,7 +579,8 @@ Page {
            ThinDivider { visible: root.exitActionsVisible }

            Label {
-                text: qsTr("...isn't met any more, execute those actions:")
+                text: root.isStateBased ? qsTr("...isn't met any more, execute those actions:") :
+                                          qsTr("If the condition isn't met, execute those actions instead:")
                Layout.fillWidth: true
                Layout.margins: app.margins
                wrapMode: Text.WordWrap
@ -590,6 +595,7 @@ Page {
                model: root.exitActionsVisible ? root.rule.exitActions : null
                delegate: RuleActionDelegate {
                    Layout.fillWidth: true
+                    implicitWidth: parent.width
                    ruleAction: root.rule.exitActions.get(index)
                    onClicked: root.rule.exitActions.removeRuleAction(index)
                }
--- a/nymea-app/ui/magic/NewThingMagicPage.qml
+++ b/nymea-app/ui/magic/NewThingMagicPage.qml
@ -0,0 +1,297 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Nymea 1.0
+import "../components"
+
+Page {
+    id: root
+
+    property var device: null
+    readonly property var deviceClass: device ? Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId) : null
+    property bool busy: false
+
+    signal done();
+    signal manualCreation();
+
+    function fillRuleFromTemplate(rule, ruleTemplate, selectedThings) {
+        if (selectedThings === undefined) {
+            selectedThings = [];
+        }
+
+        // Fill in all EventDescriptors
+        for (var i = rule.eventDescriptors.count; i < ruleTemplate.eventDescriptorTemplates.count; i++) {
+            var eventDescriptorTemplate = ruleTemplate.eventDescriptorTemplates.get(i);
+            // If we already have a thing selected for this selectionIndex, use that
+            if (selectedThings.length > eventDescriptorTemplate.selectionId) {
+                var device = Engine.deviceManager.devices.getDevice(selectedThings[eventDescriptorTemplate.selectionId]);
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                var eventDescriptor = rule.eventDescriptors.createNewEventDescriptor();
+                eventDescriptor.deviceId = device.id
+                eventDescriptor.eventTypeId = deviceClass.eventTypes.findByName(eventDescriptorTemplate.interfaceEvent).id
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            }
+            // Ok, we didn't pick a thing for this selectionId before. Did we already use the one we opened this page from?
+            if (selectedThings.indexOf(root.device.id) === -1 && root.deviceClass.interfaces.indexOf(eventDescriptorTemplate.interfaceName) >= 0) {
+                var eventDescriptor = rule.eventDescriptors.createNewEventDescriptor();
+                eventDescriptor.deviceId = root.device.id;
+                eventDescriptor.eventTypeId = root.deviceClass.eventTypes.findByName(eventDescriptorTemplate.interfaceEvent).id
+                rule.eventDescriptors.addEventDescriptor(eventDescriptor);
+                selectedThings.push(root.device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            }
+
+            // We need to pick a thing
+            var page = pageStack.push(Qt.resolvedUrl("SelectThingPage.qml"), {shownInterfaces: [eventDescriptorTemplate.interfaceName]});
+            page.thingSelected.connect(function(device) {
+                var eventDescriptor = rule.eventDescriptors.createNewEventDescriptor();
+                eventDescriptor.deviceId = device.id;
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                eventDescriptor.eventTypeId = deviceClass.eventTypes.findByName(eventDescriptorTemplate.interfaceEvent).id;
+                rule.eventDescriptors.addEventDescriptor(eventDescriptor);
+                selectedThings.push(device.id);
+                fullRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            })
+            page.backPressed.connect(function() {rule.destroy(); root.done();})
+            return;
+        }
+
+        // Fill in StateEvaluator
+        if (ruleTemplate.stateEvaluatorTemplate !== null) {
+            if (rule.stateEvaluator === null) {
+                var stateEvaluator = rule.createStateEvaluator();
+                rule.setStateEvaluator(stateEvaluator);
+                fillStateEvaluatorFromTemplate(rule, ruleTemplate, stateEvaluator, ruleTemplate.stateEvaluatorTemplate, selectedThings);
+                return;
+            }
+            var more = fillStateEvaluatorFromTemplate(rule, ruleTemplate, rule.stateEvaluator, ruleTemplate.stateEvaluatorTemplate, selectedThings);
+            if (more) {
+                return;
+            }
+        }
+
+        for (var i = rule.actions.count; i < ruleTemplate.ruleActionTemplates.count; i++) {
+            var ruleActionTemplate = ruleTemplate.ruleActionTemplates.get(i);
+
+            // Did we pick a thing for this index before?
+            if (selectedThings.length > ruleActionTemplate.selectionId) {
+                var ruleAction = rule.actions.createNewRuleAction();
+                var deviceId = selectedThings[ruleActionTemplate.selectionId];
+                var device = Engine.deviceManager.devices.getDevice(deviceId);
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                ruleAction.deviceId = deviceId;
+                ruleAction.actionTypeId = deviceClass.actionTypes.findByName(ruleActionTemplate.interfaceAction).id
+                for (var j = 0; j < ruleActionTemplate.ruleActionParams.count; j++) {
+                    var ruleActionParam = ruleActionTemplate.ruleActionParams.get(j)
+                    var actionType = deviceClass.actionTypes.getActionType(ruleAction.actionTypeId);
+                    var paramType = actionType.paramTypes.findByName(ruleActionParam.paramName);
+                    ruleAction.ruleActionParams.setRuleActionParam(paramType.id, ruleActionParam.value)
+                }
+                rule.actions.addRuleAction(ruleAction);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            }
+
+            // Did we already use the thing we opened this page from?
+            if (selectedThings.indexOf(root.device.id) === -1 && root.deviceClass.interfaces.indexOf(ruleActionTemplate.interfaceName) >= 0) {
+                var ruleAction = rule.actions.createNewRuleAction();
+                ruleAction.deviceId = root.device.id;
+                ruleAction.actionTypeId = root.deviceClass.actionTypes.findByName(ruleActionTemplate.interfaceAction).id
+                for (var j = 0; j < ruleActionTemplate.ruleActionParams.count; j++) {
+                    var ruleActionParam = ruleActionTemplate.ruleActionParams.get(j)
+                    var actionType = deviceClass.actionTypes.getActionType(ruleAction.actionTypeId);
+                    var paramType = actionType.paramTypes.findByName(ruleActionParam.paramName);
+                    ruleAction.ruleActionParams.setRuleActionParam(paramType.id, ruleActionParam.value)
+                }
+                rule.actions.addRuleAction(ruleAction);
+                selectedThings.push(root.device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            }
+
+            // Ok, we need to pick a thing
+            var page = pageStack.push(Qt.resolvedUrl("SelectThingPage.qml"), {shownInterfaces: [ruleActionTemplate.interfaceName]});
+            page.thingSelected.connect(function(device) {
+                var ruleAction = rule.actions.createNewRuleAction();
+                ruleAction.deviceId = device.id;
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                ruleAction.actionTypeId = deviceClass.actionTypes.findByName(ruleActionTemplate.interfaceAction).id;
+                for (var j = 0; j < ruleActionTemplate.ruleActionParams.count; j++) {
+                    var ruleActionParam = ruleActionTemplate.ruleActionParams.get(j)
+                    var actionType = deviceClass.actionTypes.getActionType(ruleAction.actionTypeId);
+                    var paramType = actionType.paramTypes.findByName(ruleActionParam.paramName);
+                    ruleAction.ruleActionParams.setRuleActionParam(paramType.id, ruleActionParam.value)
+                }
+                rule.actions.addRuleAction(ruleAction);
+                selectedThings.push(device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            })
+            page.backPressed.connect(function() {rule.destroy(); root.done();})
+            return;
+        }
+
+
+        for (var i = rule.exitActions.count; i < ruleTemplate.ruleExitActionTemplates.count; i++) {
+            var ruleExitActionTemplate = ruleTemplate.ruleExitActionTemplates.get(i);
+
+            // Did we pick a thing for this index before?
+            if (selectedThings.length > ruleExitActionTemplate.selectionId) {
+                var ruleAction = rule.exitActions.createNewRuleAction();
+                var deviceId = selectedThings[ruleExitActionTemplate.selectionId];
+                var device = Engine.deviceManager.devices.getDevice(deviceId);
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                ruleAction.deviceId = deviceId;
+                ruleAction.actionTypeId = deviceClass.actionTypes.findByName(ruleExitActionTemplate.interfaceAction).id
+                for (var j = 0; j < ruleExitActionTemplate.ruleActionParams.count; j++) {
+                    var ruleActionParam = ruleExitActionTemplate.ruleActionParams.get(j)
+                    var actionType = deviceClass.actionTypes.getActionType(ruleAction.actionTypeId);
+                    var paramType = actionType.paramTypes.findByName(ruleActionParam.paramName);
+                    ruleAction.ruleActionParams.setRuleActionParam(paramType.id, ruleActionParam.value)
+                }
+                rule.exitActions.addRuleAction(ruleAction);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            }
+
+            // Did we already use the thing we opened this page from?
+            if (selectedThings.indexOf(root.device.id) === -1 && root.deviceClass.interfaces.indexOf(ruleExitActionTemplate.interfaceName) >= 0) {
+                var ruleAction = rule.exitActions.createNewRuleAction();
+                ruleAction.deviceId = root.device.id;
+                ruleAction.actionTypeId = root.deviceClass.actionTypes.findByName(ruleExitActionTemplate.interfaceAction).id
+                for (var j = 0; j < ruleExitActionTemplate.ruleActionParams.count; j++) {
+                    var ruleActionParam = ruleExitActionTemplate.ruleActionParams.get(j)
+                    var actionType = deviceClass.actionTypes.getActionType(ruleAction.actionTypeId);
+                    var paramType = actionType.paramTypes.findByName(ruleActionParam.paramName);
+                    ruleAction.ruleActionParams.setRuleActionParam(paramType.id, ruleActionParam.value)
+                }
+                rule.exitActions.addRuleAction(ruleAction);
+                selectedThings.push(root.device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            }
+
+            // Ok, we need to pick a thing
+            var page = pageStack.push(Qt.resolvedUrl("SelectThingPage.qml"), {shownInterfaces: [ruleExitActionTemplate.interfaceName]});
+            page.thingSelected.connect(function(device) {
+                var ruleAction = rule.exitActions.createNewRuleAction();
+                ruleAction.deviceId = device.id;
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                ruleAction.actionTypeId = deviceClass.actionTypes.findByName(ruleExitActionTemplate.interfaceAction).id;
+                for (var j = 0; j < ruleExitActionTemplate.ruleActionParams.count; j++) {
+                    var ruleActionParam = ruleExitActionTemplate.ruleActionParams.get(j)
+                    var actionType = deviceClass.actionTypes.getActionType(ruleAction.actionTypeId);
+                    var paramType = actionType.paramTypes.findByName(ruleActionParam.paramName);
+                    ruleAction.ruleActionParams.setRuleActionParam(paramType.id, ruleActionParam.value)
+                }
+                rule.exitActions.addRuleAction(ruleAction);
+                selectedThings.push(device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return;
+            })
+            page.backPressed.connect(function() {rule.destroy(); root.done();})
+            return;
+        }
+
+
+        rule.name = ruleTemplate.ruleNameTemplate;
+        for (var i = 0; i < selectedThings.length; i++) {
+            var device = Engine.deviceManager.devices.getDevice(selectedThings[i]);
+            rule.name = rule.name.arg(device.name)
+        }
+
+        print("Rule complete!")
+        Engine.ruleManager.addRule(rule);
+        rule.destroy();
+        root.done();
+    }
+
+    function fillStateEvaluatorFromTemplate(rule, ruleTemplate, stateEvaluator, stateEvaluatorTemplate, selectedThings) {
+        if (stateEvaluatorTemplate.stateDescriptorTemplate !== null && selectedThings.indexOf(stateEvaluator.stateDescriptor.deviceId) === -1) {
+            // need to fill stateDescriptor
+            // did we pick a thing for this index before?
+            if (selectedThings.length > stateEvaluatorTemplate.stateDescriptorTemplate.selectionId) {
+                var deviceId = selectedThings[stateEvaluatorTemplate.stateDescriptorTemplate.selectionId]
+                var device = Engine.deviceManager.devices.getDevice(deviceId)
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                stateEvaluator.stateDescriptor.deviceId = deviceId;
+                stateEvaluator.stateDescriptor.stateTypeId = deviceClass.stateTypes.findByName(stateEvaluatorTemplate.stateDescriptorTemplate.interfaceState).id
+                stateEvaluator.stateDescriptor.valueOperator = stateEvaluatorTemplate.stateDescriptorTemplate.valueOperator;
+                stateEvaluator.stateDescriptor.value = stateEvaluatorTemplate.stateDescriptorTemplate.value;
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return true;
+            }
+            if (selectedThings.indexOf(root.device.id) === -1 && root.deviceClass.interfaces.indexOf(stateEvaluatorTemplate.stateDescriptorTemplate.interfaceName) >= 0) {
+                stateEvaluator.stateDescriptor.deviceId = root.device.id;
+                stateEvaluator.stateDescriptor.stateTypeId = root.deviceClass.stateTypes.findByName(stateEvaluatorTemplate.stateDescriptorTemplate.interfaceState).id
+                stateEvaluator.stateDescriptor.valueOperator = stateEvaluatorTemplate.stateDescriptorTemplate.valueOperator;
+                stateEvaluator.stateDescriptor.value = stateEvaluatorTemplate.stateDescriptorTemplate.value;
+                selectedThings.push(root.device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings);
+                return true;
+            }
+            var page = pageStack.push(Qt.resolvedUrl("SelectThingPage.qml"), {shownInterfaces: [stateEvaluatorTemplate.stateDescriptorTemplate.interfaceName]});
+            page.thingSelected.connect(function(device) {
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                stateEvaluator.stateDescriptor.deviceId = device.id;
+                stateEvaluator.stateDescriptor.stateTypeId = deviceClass.stateTypes.findByName(stateEvaluatorTemplate.stateDescriptorTemplate.interfaceState).id;
+                stateEvaluator.stateDescriptor.valueOperator = stateEvaluatorTemplate.stateDescriptorTemplate.valueOperator;
+                stateEvaluator.stateDescriptor.value = stateEvaluatorTemplate.stateDescriptorTemplate.value;
+                selectedThings.push(device.id);
+                fillRuleFromTemplate(rule, ruleTemplate, selectedThings)
+            })
+            page.backPressed.connect(function() {rule.destroy(); root.done();})
+            return true;
+        }
+        stateEvaluator.stateOperator = stateEvaluatorTemplate.stateOperator;
+        if (stateEvaluatorTemplate.childEvaluatorTemplates.count > stateEvaluator.childEvaluators.count) {
+            var childEvaluator = rule.createStateEvaluator();
+            var more = fillStateEvaluatorFromTemplate(rule, ruleTemplate, childEvaluator, stateEvaluatorTemplate.childEvaluatorTemplates.get(stateEvaluator.childEvaluators.count))
+            stateEvaluator.childEvaluators.addStateEvaluator(childEvaluator);
+            return more;
+        }
+        return false;
+    }
+
+    header: GuhHeader {
+        text: qsTr("New magic")
+        onBackPressed: root.done()
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        ListView {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            model: RuleTemplatesFilterModel {
+                id: ruleTemplatesModel
+                ruleTemplates: RuleTemplates {}
+                filterInterfaceNames: root.deviceClass ? root.deviceClass.interfaces : []
+            }
+            delegate: MeaListItemDelegate {
+                width: parent.width
+                text: model.description
+
+                onClicked: {
+                    var ruleTemplate = ruleTemplatesModel.get(index);
+                    var rule = Engine.ruleManager.createNewRule();
+                    root.fillRuleFromTemplate(rule, ruleTemplate)
+                }
+            }
+        }
+
+        ThinDivider {}
+
+        Button {
+            Layout.fillWidth: true
+            Layout.margins: app.margins
+            text: qsTr("Create some magic manually")
+            onClicked: {
+                root.manualCreation();
+            }
+        }
+    }
+}
--- a/nymea-app/ui/magic/SelectThingPage.qml
+++ b/nymea-app/ui/magic/SelectThingPage.qml
@ -15,9 +15,12 @@ Page {
    property alias showEvents: interfacesProxy.showEvents
    property alias showActions: interfacesProxy.showActions
    property alias showStates: interfacesProxy.showStates
+    property alias shownInterfaces: devicesProxy.shownInterfaces

    header: GuhHeader {
-        text: root.selectInterface ? qsTr("Select a kind of things") : qsTr("Select a thing")
+        text: root.selectInterface ?
+                  qsTr("Select a kind of things") :
+                  root.shownInterfaces.length > 0 ? qsTr("Select a %1").arg(app.interfaceToDisplayName(root.shownInterfaces[0])) : qsTr("Select a thing")
        onBackPressed: root.backPressed()
    }

@ -26,13 +29,18 @@ Page {
        devicesFilter: Engine.deviceManager.devices
    }

+    DevicesProxy {
+        id: devicesProxy
+        devices: Engine.deviceManager.devices
+    }
+
    ColumnLayout {
        anchors.fill: parent

        ListView {
            Layout.fillWidth: true
            Layout.fillHeight: true
-            model: root.selectInterface ? interfacesProxy : Engine.deviceManager.devices
+            model: root.selectInterface ? interfacesProxy : devicesProxy
            clip: true
            delegate: MeaListItemDelegate {
                width: parent.width
@ -42,7 +50,7 @@ Page {
                    if (root.selectInterface) {
                        root.interfaceSelected(interfacesProxy.get(index).name)
                    } else {
-                        root.thingSelected(Engine.deviceManager.devices.get(index))
+                        root.thingSelected(devicesProxy.get(index))
                    }
                }
            }
--- a/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml
+++ b/nymea-app/ui/magic/SimpleStateEvaluatorDelegate.qml
@ -40,6 +40,7 @@ SwipeDelegate {
            Label {
                Layout.fillWidth: true
                font.pixelSize: childEvaluatorsRepeater.count > 0 ? app.smallFont : app.mediumFont
+                wrapMode: Text.WordWrap
                property string operatorString: {
                    if (!root.stateEvaluator) {
                        return "";
--- a/nymea-app/ui/mainviews/DevicesPageDelegate.qml
+++ b/nymea-app/ui/mainviews/DevicesPageDelegate.qml
@ -90,9 +90,15 @@ Item {
                case "light":
                case "media":
                case "garagegate":
-                case "shutter":
                case "blind":
+                case "extendedblind":
+                case "shutter":
+                case "extendedshutter":
+                case "awning":
+                case "extendedawning":
                    return buttonComponent
+                default:
+                    console.warn("DevicesPageDelegate, inlineControl: Unhandled interface", model.name)
                }
            }
        }
@ -138,10 +144,10 @@ Item {

                    var actionName
                    switch (state.value) {
-                    case "PLAYING":
+                    case "Playing":
                        actionName = "pause";
                        break;
-                    case "PAUSED":
+                    case "Paused":
                        actionName = "play";
                        break;
                    }
@ -152,7 +158,12 @@ Item {
                    Engine.deviceManager.executeAction(device.id, actionTypeId)
                case "garagegate":
                case "shutter":
+                case "extendedshutter":
                case "blind":
+                case "extendedblind":
+                case "awning":
+                case "extendedawning":
+                case "simpleclosable":
                    for (var i = 0; i < devicesProxy.count; i++) {
                        var device = devicesProxy.get(i);
                        var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
@ -160,6 +171,8 @@ Item {
                        Engine.deviceManager.executeAction(device.id, actionType.id)
                    }

+                default:
+                    console.warn("DevicesPageDelegate, inlineButtonControl clicked: Unhandled interface", model.name)
                }
            }

@ -195,10 +208,15 @@ Item {
                                }
                            }
                            return count === 0 ? qsTr("All closed") : qsTr("%1 open").arg(count)
+                        case "blind":
+                        case "extendedblind":
+                        case "awning":
+                        case "extendedawning":
                        case "shutter":
+                        case "extendedshutter":
                            return qsTr("%1 installed").arg(devicesProxy.count)
                        }
-                        console.warn("Unhandled interface", model.name)
+                        console.warn("DevicesPageDelegate, inlineButtonControl: Unhandled interface", model.name)
                    }
                    font.pixelSize: app.smallFont
                    elide: Text.ElideRight
@ -216,15 +234,21 @@ Item {
                            var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
                            var stateType = deviceClass.stateTypes.findByName("playbackStatus");
                            var state = device.states.getState(stateType.id)
-                            return state.value === "PLAYING" ? "../images/media-playback-pause.svg" :
+                            return state.value === "Playing" ? "../images/media-playback-pause.svg" :
                                                               state.value === "PAUSED" ? "../images/media-playback-start.svg" :
                                                                                          ""
                        case "light":
                            return "../images/system-shutdown.svg"
                        case "garagegate":
-                        case "shutter":
                        case "blind":
+                        case "extendedblind":
+                        case "awning":
+                        case "extendedawning":
+                        case "shutter":
+                        case "extendedshutter":
                            return "../images/down.svg"
+                        default:
+                            console.warn("DevicesPageDelegate, inlineButtonControl image: Unhandled interface", model.name)
                        }
                    }
                }
--- a/nymea-app/ui/mainviews/ScenesView.qml
+++ b/nymea-app/ui/mainviews/ScenesView.qml
@ -44,26 +44,31 @@ Item {
                anchors.fill: parent
                anchors.margins: app.margins / 2
                Material.elevation: 1
-
-                MouseArea {
+                padding: 0
+                ItemDelegate {
                    anchors.fill: parent
                    onClicked: {
                        Engine.ruleManager.executeActions(model.id)
                    }
-                }
+                    contentItem: ColumnLayout {
+                        width: parent.width
+                        anchors.centerIn: parent
+                        spacing: app.margins

-                ColumnLayout {
-                    width: parent.width
-                    anchors.centerIn: parent
-                    spacing: app.margins
+                        ColorIcon {
+                            Layout.preferredHeight: app.iconSize * 2
+                            Layout.preferredWidth: height
+                            Layout.alignment: Qt.AlignHCenter
+                            name: scenesDelegate.iconTag ? "../images/" + scenesDelegate.iconTag.value + ".svg" : "../images/slideshow.svg";
+                            color: scenesDelegate.colorTag ? scenesDelegate.colorTag.value : app.guhAccent;

-                    ColorIcon {
-                        Layout.preferredHeight: app.iconSize * 2
-                        Layout.preferredWidth: height
-                        Layout.alignment: Qt.AlignHCenter
-                        name: scenesDelegate.iconTag ? "../images/" + scenesDelegate.iconTag.value + ".svg" : "../images/slideshow.svg";
-                        color: scenesDelegate.colorTag ? scenesDelegate.colorTag.value : app.guhAccent;
-                    }
+                            ColorIcon {
+                                anchors.fill: parent
+                                name: "../images/slideshow.svg"
+                                color: app.guhAccent
+                                visible: parent.status === Image.Error
+                            }
+                        }

                    Label {
                        Layout.fillWidth: true
@ -80,5 +85,4 @@ Item {
            }
        }
    }
-
 }
--- a/version.txt
+++ b/version.txt
@ -1,2 +1,2 @@
-1.0.36
-2
+1.0.42
+8