Rework settings

libnymea-app-core/configuration/nymeaconfiguration.cpp

@@ -14,6 +14,7 @@ NymeaConfiguration::NymeaConfiguration(JsonRpcClient *client, QObject *parent):
     m_client(client),
     m_tcpServerConfigurations(new ServerConfigurations(this)),
     m_webSocketServerConfigurations(new ServerConfigurations(this)),
+    m_webServerConfigurations(new WebServerConfigurations(this)),
     m_mqttServerConfigurations(new ServerConfigurations(this)),
     m_mqttPolicies(new MqttPolicies(this))
 {
@@ -117,6 +118,11 @@ ServerConfigurations *NymeaConfiguration::webSocketServerConfigurations() const
     return m_webSocketServerConfigurations;
 }
 
+WebServerConfigurations *NymeaConfiguration::webServerConfigurations() const
+{
+    return m_webServerConfigurations;
+}
+
 ServerConfigurations *NymeaConfiguration::mqttServerConfigurations() const
 {
     return m_mqttServerConfigurations;
@@ -132,6 +138,13 @@ ServerConfiguration *NymeaConfiguration::createServerConfiguration(const QString
     return new ServerConfiguration(QUuid::createUuid().toString(), QHostAddress(address), port, authEnabled, sslEnabled);
 }
 
+WebServerConfiguration *NymeaConfiguration::createWebServerConfiguration(const QString &address, int port, bool authEnabled, bool sslEnabled, const QString &publicFolder)
+{
+    auto ret = new WebServerConfiguration(QUuid::createUuid().toString(), QHostAddress(address), port, authEnabled, sslEnabled);
+    ret->setPublicFolder(publicFolder);
+    return ret;
+}
+
 MqttPolicy *NymeaConfiguration::createMqttPolicy() const
 {
     return new MqttPolicy(QString(), QString(), QString(), {"#"}, {"#"});
@@ -163,6 +176,20 @@ void NymeaConfiguration::setWebSocketServerConfiguration(ServerConfiguration *co
     m_client->sendCommand("Configuration.SetWebSocketServerConfiguration", params, this, "setWebSocketConfigReply");
 }
 
+void NymeaConfiguration::setWebServerConfiguration(WebServerConfiguration *configuration)
+{
+    QVariantMap params;
+    QVariantMap configurationMap;
+    configurationMap.insert("id", configuration->id());
+    configurationMap.insert("address", configuration->address());
+    configurationMap.insert("port", configuration->port());
+    configurationMap.insert("authenticationEnabled", configuration->authenticationEnabled());
+    configurationMap.insert("sslEnabled", configuration->sslEnabled());
+    configurationMap.insert("publicFolder", configuration->publicFolder());
+    params.insert("configuration", configurationMap);
+    m_client->sendCommand("Configuration.SetWebServerConfiguration", params, this, "setWebConfigReply");
+}
+
 void NymeaConfiguration::setMqttServerConfiguration(ServerConfiguration *configuration)
 {
     QVariantMap params;
@@ -190,6 +217,13 @@ void NymeaConfiguration::deleteWebSocketServerConfiguration(const QString &id)
     m_client->sendCommand("Configuration.DeleteWebSocketServerConfiguration", params, this, "deleteWebSocketConfigReply");
 }
 
+void NymeaConfiguration::deleteWebServerConfiguration(const QString &id)
+{
+    QVariantMap params;
+    params.insert("id", id);
+    m_client->sendCommand("Configuration.DeleteWebServerConfiguration", params, this, "deleteWebConfigReply");
+}
+
 void NymeaConfiguration::deleteMqttServerConfiguration(const QString &id)
 {
     QVariantMap params;
@@ -246,6 +280,15 @@ void NymeaConfiguration::getConfigurationsResponse(const QVariantMap &params)
         ServerConfiguration *config = new ServerConfiguration(websocketConfigMap.value("id").toString(), QHostAddress(websocketConfigMap.value("address").toString()), websocketConfigMap.value("port").toInt(), websocketConfigMap.value("authenticationEnabled").toBool(), websocketConfigMap.value("sslEnabled").toBool());
         m_webSocketServerConfigurations->addConfiguration(config);
     }
+
+    webServerConfigurations()->clear();
+    foreach (const QVariant &webServerVariant, params.value("params").toMap().value("webServerConfigurations").toList()) {
+        QVariantMap webServerConfigMap = webServerVariant.toMap();
+        qDebug() << "**********+ web config" << webServerConfigMap;
+        WebServerConfiguration* config = new WebServerConfiguration(webServerConfigMap.value("id").toString(), QHostAddress(webServerConfigMap.value("address").toString()), webServerConfigMap.value("port").toInt(), webServerConfigMap.value("authenticationEnabled").toBool(), webServerConfigMap.value("sslEnabled").toBool());
+        config->setPublicFolder(webServerConfigMap.value("publicFolder").toString());
+        m_webServerConfigurations->addConfiguration(config);
+    }
 }
 
 void NymeaConfiguration::getAvailableLanguagesResponse(const QVariantMap &params)
@@ -289,7 +332,7 @@ void NymeaConfiguration::setDebugServerEnabledResponse(const QVariantMap &params
 
 void NymeaConfiguration::setTcpConfigReply(const QVariantMap &params)
 {
-
+    qDebug() << "Set TCP server config reply" << params;
 }
 
 void NymeaConfiguration::deleteTcpConfigReply(const QVariantMap &params)
@@ -300,12 +343,22 @@ void NymeaConfiguration::deleteTcpConfigReply(const QVariantMap &params)
 
 void NymeaConfiguration::setWebSocketConfigReply(const QVariantMap &params)
 {
-    qDebug() << "set weboscket config reply" << params;
+    qDebug() << "set websocket config reply" << params;
+}
+
+void NymeaConfiguration::setWebConfigReply(const QVariantMap &params)
+{
+    qDebug() << "set web server config reply" << params;
+}
+
+void NymeaConfiguration::deleteWebConfigReply(const QVariantMap &params)
+{
+    qDebug() << "Delete web server config reply" << params;
 }
 
 void NymeaConfiguration::deleteWebSocketConfigReply(const QVariantMap &params)
 {
-
+    qDebug() << "Delete web socket server config reply" << params;
 }
 
 void NymeaConfiguration::getMqttServerConfigsReply(const QVariantMap &params)
@@ -379,6 +432,8 @@ void NymeaConfiguration::notificationReceived(const QVariantMap &notification)
     }
     if (notif.endsWith("ServerConfigurationChanged")) {
         ServerConfigurations *configModel = nullptr;
+        ServerConfiguration *serverConfig = nullptr;
+
         QVariantMap params;
         if (notif == "Configuration.TcpServerConfigurationChanged") {
             configModel = m_tcpServerConfigurations;
@@ -388,6 +443,10 @@ void NymeaConfiguration::notificationReceived(const QVariantMap &notification)
             configModel = m_webSocketServerConfigurations;
             params = notification.value("params").toMap().value("webSocketServerConfiguration").toMap();
         }
+        if (notif == "Configuration.WebServerConfigurationChanged") {
+            configModel = m_webServerConfigurations;
+            params = notification.value("params").toMap().value("webServerConfiguration").toMap();
+        }
         if (notif == "Configuration.MqttServerConfigurationChanged") {
             configModel = m_mqttServerConfigurations;
             params = notification.value("params").toMap().value("mqttServerConfiguration").toMap();
@@ -396,7 +455,6 @@ void NymeaConfiguration::notificationReceived(const QVariantMap &notification)
             return;
         }
 
-        ServerConfiguration *serverConfig = nullptr;
         for (int i = 0; i < configModel->rowCount(); i++) {
             ServerConfiguration* config = configModel->get(i);
             if (config->id() == params.value("id").toString()) {
@@ -405,13 +463,21 @@ void NymeaConfiguration::notificationReceived(const QVariantMap &notification)
         }
 
         if (!serverConfig) {
-            serverConfig = new ServerConfiguration(params.value("id").toString());
+            if (notif == "Configuration.WebServerConfigurationChanged") {
+                serverConfig = new WebServerConfiguration(params.value("id").toString());
+            } else {
+                serverConfig = new ServerConfiguration(params.value("id").toString());
+            }
             configModel->addConfiguration(serverConfig);
         }
         serverConfig->setAddress(params.value("address").toString());
         serverConfig->setPort(params.value("port").toInt());
         serverConfig->setAuthenticationEnabled(params.value("authenticationEnabled").toBool());
         serverConfig->setSslEnabled(params.value("sslEnabled").toBool());
+        if (notif == "Configuration.WebServerConfigurationChanged") {
+            qobject_cast<WebServerConfiguration*>(serverConfig)->setPublicFolder(params.value("publicFolder").toString());
+        }
+
         return;
     }
     if (notif == "Configuration.TcpServerConfigurationRemoved") {
@@ -422,6 +488,10 @@ void NymeaConfiguration::notificationReceived(const QVariantMap &notification)
         m_webSocketServerConfigurations->removeConfiguration(notification.value("params").toMap().value("id").toString());
         return;
     }
+    if (notif == "Configuration.WebServerConfigurationRemoved") {
+        m_webServerConfigurations->removeConfiguration(notification.value("params").toMap().value("id").toString());
+        return;
+    }
     if (notif == "Configuration.MqttServerConfigurationRemoved") {
         m_mqttServerConfigurations->removeConfiguration(notification.value("params").toMap().value("id").toString());
         return;

libnymea-app-core/configuration/nymeaconfiguration.h

@@ -8,6 +8,8 @@
 class JsonRpcClient;
 class ServerConfiguration;
 class ServerConfigurations;
+class WebServerConfiguration;
+class WebServerConfigurations;
 class MqttPolicy;
 class MqttPolicies;
 
@@ -28,6 +30,7 @@ class NymeaConfiguration : public JsonHandler
 
     Q_PROPERTY(ServerConfigurations* tcpServerConfigurations READ tcpServerConfigurations CONSTANT)
     Q_PROPERTY(ServerConfigurations* webSocketServerConfigurations READ webSocketServerConfigurations CONSTANT)
+    Q_PROPERTY(WebServerConfigurations* webServerConfigurations READ webServerConfigurations CONSTANT)
     Q_PROPERTY(ServerConfigurations* mqttServerConfigurations READ mqttServerConfigurations CONSTANT)
 
     Q_PROPERTY(MqttPolicies* mqttPolicies READ mqttPolicies CONSTANT)
@@ -56,18 +59,22 @@ public:
 
     ServerConfigurations *tcpServerConfigurations() const;
     ServerConfigurations *webSocketServerConfigurations() const;
+    WebServerConfigurations *webServerConfigurations() const;
     ServerConfigurations *mqttServerConfigurations() const;
     MqttPolicies *mqttPolicies() const;
 
     Q_INVOKABLE ServerConfiguration* createServerConfiguration(const QString &address = "0.0.0.0", int port = 0, bool authEnabled = false, bool sslEnabled = false);
+    Q_INVOKABLE WebServerConfiguration* createWebServerConfiguration(const QString &address = "0.0.0.0", int port = 0, bool authEnabled = false, bool sslEnabled = false, const QString &publicFolder = QString());
     Q_INVOKABLE MqttPolicy* createMqttPolicy() const;
 
     Q_INVOKABLE void setTcpServerConfiguration(ServerConfiguration *configuration);
     Q_INVOKABLE void setWebSocketServerConfiguration(ServerConfiguration *configuration);
+    Q_INVOKABLE void setWebServerConfiguration(WebServerConfiguration *configuration);
     Q_INVOKABLE void setMqttServerConfiguration(ServerConfiguration *configuration);
 
     Q_INVOKABLE void deleteTcpServerConfiguration(const QString &id);
     Q_INVOKABLE void deleteWebSocketServerConfiguration(const QString &id);
+    Q_INVOKABLE void deleteWebServerConfiguration(const QString &id);
     Q_INVOKABLE void deleteMqttServerConfiguration(const QString &id);
 
     Q_INVOKABLE void updateMqttPolicy(MqttPolicy* policy);
@@ -87,6 +94,8 @@ private:
     Q_INVOKABLE void deleteTcpConfigReply(const QVariantMap &params);
     Q_INVOKABLE void setWebSocketConfigReply(const QVariantMap &params);
     Q_INVOKABLE void deleteWebSocketConfigReply(const QVariantMap &params);
+    Q_INVOKABLE void setWebConfigReply(const QVariantMap &params);
+    Q_INVOKABLE void deleteWebConfigReply(const QVariantMap &params);
     Q_INVOKABLE void getMqttServerConfigsReply(const QVariantMap &params);
     Q_INVOKABLE void setMqttConfigReply(const QVariantMap &params);
     Q_INVOKABLE void deleteMqttConfigReply(const QVariantMap &params);
@@ -118,6 +127,7 @@ private:
 
     ServerConfigurations *m_tcpServerConfigurations = nullptr;
     ServerConfigurations *m_webSocketServerConfigurations = nullptr;
+    WebServerConfigurations* m_webServerConfigurations = nullptr;
     ServerConfigurations *m_mqttServerConfigurations = nullptr;
     MqttPolicies *m_mqttPolicies = nullptr;
 

libnymea-app-core/configuration/serverconfiguration.cpp

@@ -73,3 +73,23 @@ ServerConfiguration *ServerConfiguration::clone() const
     ServerConfiguration *ret = new ServerConfiguration(m_id, m_hostAddress, m_port, m_authEnabled, m_sslEnabled);
     return ret;
 }
+
+QString WebServerConfiguration::publicFolder() const
+{
+    return m_publicFolder;
+}
+
+void WebServerConfiguration::setPublicFolder(const QString &publicFolder)
+{
+    if (m_publicFolder != publicFolder) {
+        m_publicFolder = publicFolder;
+        emit publicFolderChanged();
+    }
+}
+
+ServerConfiguration *WebServerConfiguration::clone() const
+{
+    WebServerConfiguration *ret = new WebServerConfiguration(id(), QHostAddress(address()), port(), authenticationEnabled(), sslEnabled());
+    ret->setPublicFolder(m_publicFolder);
+    return ret;
+}

libnymea-app-core/configuration/serverconfiguration.h

@@ -31,7 +31,7 @@ public:
     bool sslEnabled() const;
     void setSslEnabled(bool sslEnabled);
 
-    Q_INVOKABLE ServerConfiguration* clone() const;
+    Q_INVOKABLE virtual ServerConfiguration* clone() const;
 
 signals:
     void addressChanged();
@@ -47,4 +47,24 @@ private:
     bool m_sslEnabled;
 };
 
+class WebServerConfiguration: public ServerConfiguration
+{
+    Q_OBJECT
+    Q_PROPERTY(QString publicFolder READ publicFolder NOTIFY publicFolderChanged)
+public:
+    explicit WebServerConfiguration(const QString &id, const QHostAddress &address = QHostAddress(), int port = 0, bool authEnabled = false, bool sslEnabled = false, QObject *parent = nullptr)
+        : ServerConfiguration(id, address, port, authEnabled, sslEnabled, parent) {}
+
+    QString publicFolder() const;
+    void setPublicFolder(const QString &publicFolder);
+
+    Q_INVOKABLE ServerConfiguration* clone() const override;
+
+signals:
+    void publicFolderChanged();
+
+private:
+    QString m_publicFolder;
+};
+
 #endif // SERVERCONFIGURATION_H

libnymea-app-core/configuration/serverconfigurations.h

@@ -4,7 +4,7 @@
 #include <QObject>
 #include <QAbstractListModel>
 
-class ServerConfiguration;
+#include "serverconfiguration.h"
 
 class ServerConfigurations : public QAbstractListModel
 {
@@ -22,6 +22,7 @@ public:
     Q_ENUM(Roles)
 
     explicit ServerConfigurations(QObject *parent = nullptr);
+    virtual ~ServerConfigurations() override = default;
 
     int rowCount(const QModelIndex &parent = QModelIndex()) const override;
     QVariant data(const QModelIndex &index, int role) const override;
@@ -32,13 +33,25 @@ public:
 
     void clear();
 
-    Q_INVOKABLE ServerConfiguration* get(int index) const;
+    Q_INVOKABLE virtual ServerConfiguration* get(int index) const;
 
 signals:
     void countChanged();
 
-private:
+protected:
     QList<ServerConfiguration*> m_list;
 };
 
+
+class WebServerConfigurations: public ServerConfigurations
+{
+    Q_OBJECT
+public:
+    WebServerConfigurations(QObject *parent = nullptr): ServerConfigurations(parent) {}
+
+    Q_INVOKABLE WebServerConfiguration* getWebServerConfiguration(int index) const {
+        return dynamic_cast<WebServerConfiguration*>(m_list.at(index));
+    }
+};
+
 #endif // SERVERCONFIGURATIONS_H

libnymea-app-core/connection/nymeahost.cpp

@@ -228,6 +228,11 @@ QUrl Connection::url() const
     return m_url;
 }
 
+QString Connection::hostAddress() const
+{
+    return m_url.host();
+}
+
 Connection::BearerType Connection::bearerType() const
 {
     return m_bearerType;

libnymea-app-core/connection/nymeahost.h

@@ -32,6 +32,7 @@
 class Connection: public QObject {
     Q_OBJECT
     Q_PROPERTY(QUrl url READ url CONSTANT)
+    Q_PROPERTY(QString hostAddress READ hostAddress CONSTANT)
     Q_PROPERTY(BearerType bearerType READ bearerType CONSTANT)
     Q_PROPERTY(bool secure READ secure CONSTANT)
     Q_PROPERTY(QString displayName READ displayName CONSTANT)
@@ -55,6 +56,7 @@ public:
     ~Connection();
 
     QUrl url() const;
+    QString hostAddress() const;
     BearerType bearerType() const;
     bool secure() const;
     QString displayName() const;

libnymea-app-core/libnymea-app-core.h

@@ -155,6 +155,8 @@ void registerQmlTypes() {
     qmlRegisterUncreatableType<NymeaConfiguration>(uri, 1, 0, "NymeaConfiguration", "Get it from Engine");
     qmlRegisterUncreatableType<ServerConfiguration>(uri, 1, 0, "ServerConfiguration", "Get it from NymeaConfiguration");
     qmlRegisterUncreatableType<ServerConfigurations>(uri, 1, 0, "ServerConfigurations", "Get it from NymeaConfiguration");
+    qmlRegisterUncreatableType<WebServerConfiguration>(uri, 1, 0, "WebServerConfiguration", "Get it from NymeaConfiguration");
+    qmlRegisterUncreatableType<WebServerConfigurations>(uri, 1, 0, "WebServerConfigurations", "Get it from NymeaConfiguration");
     qmlRegisterUncreatableType<MqttPolicy>(uri, 1, 0, "MqttPolicy", "Get it from NymeaConfiguration");
     qmlRegisterUncreatableType<MqttPolicies>(uri, 1, 0, "MqttPolicies", "Get it from NymeaConfiguration");
 

nymea-app/images.qrc

@@ -107,8 +107,8 @@
         <file>ui/images/navigation-menu.svg</file>
         <file>ui/images/network-secure.svg</file>
         <file>ui/images/network-vpn.svg</file>
-        <file>ui/images/network-wifi-symbolic.svg</file>
-        <file>ui/images/network-wired-symbolic.svg</file>
+        <file>ui/images/network-wifi.svg</file>
+        <file>ui/images/network-wired.svg</file>
         <file>ui/images/next.svg</file>
         <file>ui/images/nm-signal-00-secure.svg</file>
         <file>ui/images/nm-signal-00.svg</file>
@@ -172,5 +172,10 @@
         <file>ui/images/dial.svg</file>
         <file>ui/images/ventilation.svg</file>
         <file>ui/images/edit-copy.svg</file>
+        <file>ui/images/stock_website.svg</file>
+        <file>ui/images/sdk.svg</file>
+        <file>ui/images/network-wifi-offline.svg</file>
+        <file>ui/images/network-wired-offline.svg</file>
+        <file>ui/images/preferences-look-and-feel.svg</file>
     </qresource>
 </RCC>

nymea-app/resources.qrc

@@ -172,5 +172,11 @@
         <file>ui/fonts/Oswald-Medium.ttf</file>
         <file>ui/fonts/Oswald-Regular.ttf</file>
         <file>ui/fonts/Oswald-SemiBold.ttf</file>
+        <file>ui/system/WebServerSettingsPage.qml</file>
+        <file>ui/system/WebServerConfigurationDialog.qml</file>
+        <file>ui/system/DeveloperTools.qml</file>
+        <file>ui/system/GeneralSettingsPage.qml</file>
+        <file>ui/components/Imprint.qml</file>
+        <file>ui/appsettings/LookAndFeelSettingsPage.qml</file>
     </qresource>
 </RCC>

nymea-app/ui/Nymea.qml

@@ -179,7 +179,7 @@ ApplicationWindow {
         case "weather":
             return Qt.resolvedUrl("images/weather-app-symbolic.svg")
         case "gateway":
-            return Qt.resolvedUrl("images/network-wired-symbolic.svg")
+            return Qt.resolvedUrl("images/network-wired.svg")
         case "notifications":
             return Qt.resolvedUrl("images/messaging-app-symbolic.svg")
         case "inputtrigger":

nymea-app/ui/SettingsPage.qml

@@ -11,190 +11,186 @@ Page {
         text: qsTr("Box settings")
         backButtonVisible: true
         onBackPressed: pageStack.pop()
+
+        HeaderButton {
+            imageSource: {
+                switch (engine.connection.currentConnection.bearerType) {
+                case Connection.BearerTypeLan:
+                case Connection.BearerTypeWan:
+                    if (engine.connection.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
+                        return "../images/network-wired-offline.svg"
+                    }
+                    return "../images/network-wifi-offline.svg";
+                case Connection.BearerTypeBluetooth:
+                    return "../images/network-wifi-offline.svg";
+                case Connection.BearerTypeCloud:
+                    return "../images/cloud-offline.svg"
+                }
+                return ""
+            }
+            onClicked: {
+                tabSettings.lastConnectedHost = "";
+                engine.connection.disconnect();
+            }
+        }
     }
 
     Flickable {
         anchors.fill: parent
-        contentHeight: settingsColumn.implicitHeight
-        interactive: contentHeight > height
+        contentHeight: layout.implicitHeight
 
-        ColumnLayout {
-            id: settingsColumn
-            anchors { left: parent.left; right: parent.right; top: parent.top }
+        GridLayout {
+            id: layout
+            property bool isGrid: columns > 1
+            anchors { left: parent.left; top: parent.top; right: parent.right; margins: isGrid ? app.margins : 0 }
+            columns: Math.max(1, Math.floor(parent.width / 300))
+            rowSpacing: isGrid ? app.margins : 0
+            columnSpacing: isGrid ? app.margins : 0
 
-            ColumnLayout {
+            Pane {
                 Layout.fillWidth: true
-                Layout.margins: app.margins
-
-                Label {
-                    Layout.fillWidth: true
-                    text: qsTr("Connected to:")
-                    color: Material.accent
-                }
-                RowLayout {
-                    Layout.fillWidth: true
-
-                    Label {
-                        Layout.fillWidth: true
-                        elide: Text.ElideMiddle
-                        text: engine.connection.currentConnection.url
-                    }
-                    Button {
-                        text: qsTr("Disconnect")
-                        onClicked: {
-                            tabSettings.lastConnectedHost = "";
-                            engine.connection.disconnect();
-                        }
-                    }
+                Material.elevation: layout.isGrid ? 1 : 0
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/configure.svg"
+                    text: qsTr("General")
+                    subText: qsTr("Change system name and time zone")
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/GeneralSettingsPage.qml"))
                 }
             }
 
-            ThinDivider {}
-
-            RowLayout {
+            Pane {
                 Layout.fillWidth: true
-                Layout.leftMargin: app.margins
-                Layout.rightMargin: app.margins
-                spacing: app.margins
-                Label {
-                    text: qsTr("Name")
-                }
-                TextField {
-                    id: nameTextField
-                    Layout.fillWidth: true
-                    text: engine.nymeaConfiguration.serverName
-                }
-                Button {
-                    text: qsTr("OK")
-                    visible: nameTextField.displayText !== engine.nymeaConfiguration.serverName
-                    onClicked: engine.nymeaConfiguration.serverName = nameTextField.displayText
+                Material.elevation: layout.isGrid ? 1 : 0
+
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/logs.svg"
+                    text: qsTr("Log viewer")
+                    subText: qsTr("View system log")
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/LogViewerPage.qml"))
                 }
             }
 
-            RowLayout {
+            Pane {
                 Layout.fillWidth: true
-                Layout.leftMargin: app.margins
-                Layout.rightMargin: app.margins
-                spacing: app.margins
-                visible: !engine.jsonRpcClient.ensureServerVersion("1.14")
+                Material.elevation: layout.isGrid ? 1 : 0
 
-                Label {
-                    Layout.fillWidth: true
-                    text: qsTr("Language")
-                }
-                ComboBox {
-                    id: languageBox
-                    Layout.fillWidth: true
-                    model: engine.nymeaConfiguration.availableLanguages
-                    currentIndex: model.indexOf(engine.nymeaConfiguration.language)
-                    contentItem: Label {
-                        leftPadding: app.margins / 2
-                        text: Qt.locale(languageBox.displayText).nativeLanguageName + " (" + Qt.locale(languageBox.displayText).nativeCountryName + ")"
-                        elide: Text.ElideRight
-                        verticalAlignment: Text.AlignVCenter
-                    }
-
-                    delegate: ItemDelegate {
-                        width: languageBox.width
-                        contentItem: Label {
-                            text: Qt.locale(modelData).nativeLanguageName + " (" + Qt.locale(modelData).nativeCountryName + ")"
-                            elide: Text.ElideRight
-                            verticalAlignment: Text.AlignVCenter
-                        }
-                        highlighted: languageBox.highlightedIndex === index
-                    }
-                    onActivated: {
-                        engine.nymeaConfiguration.language = currentText;
-                    }
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/cloud.svg"
+                    text: qsTr("Cloud")
+                    subText: qsTr("Connect this box to %1:cloud").arg(app.systemName)
+                    prominentSubText: false
+                    wrapTexts: false
+                    visible: engine.jsonRpcClient.ensureServerVersion("1.9")
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/CloudSettingsPage.qml"))
                 }
             }
 
-            RowLayout {
+            Pane {
                 Layout.fillWidth: true
-                Layout.leftMargin: app.margins
-                Layout.rightMargin: app.margins
-                spacing: app.margins
-                Label {
-                    Layout.fillWidth: true
-                    text: qsTr("Time zone")
-                }
-                ComboBox {
-                    Layout.minimumWidth: 200
-                    model: engine.nymeaConfiguration.timezones
-                    currentIndex: model.indexOf(engine.nymeaConfiguration.timezone)
-                    onActivated: {
-                        engine.nymeaConfiguration.timezone = currentText;
-                    }
+                Material.elevation: layout.isGrid ? 1 : 0
+
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/network-vpn.svg"
+                    text: qsTr("API interfaces")
+                    prominentSubText: false
+                    wrapTexts: false
+                    subText: qsTr("Configure how clients interact with this box")
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/ConnectionInterfacesPage.qml"))
                 }
             }
 
-            ColumnLayout {
+            Pane {
                 Layout.fillWidth: true
+                Material.elevation: layout.isGrid ? 1 : 0
 
-                RowLayout {
-                    Layout.fillWidth: true
-                    Layout.leftMargin: app.margins
-                    Layout.rightMargin: app.margins
-                    spacing: app.margins
-                    Label {
-                        text: qsTr("Debug server enabled")
-                        Layout.fillWidth: true
-                    }
-                    Switch {
-                        id: debugServerEnabledSwitch
-                        checked: engine.nymeaConfiguration.debugServerEnabled
-                        onClicked: engine.nymeaConfiguration.debugServerEnabled = checked
-                    }
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/mqtt.svg"
+                    text: qsTr("MQTT broker")
+                    subText: qsTr("Configure the MQTT broker")
+                    prominentSubText: false
+                    wrapTexts: false
+                    visible: engine.jsonRpcClient.ensureServerVersion("1.11")
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/MqttBrokerSettingsPage.qml"))
                 }
+            }
 
-                Button {
-                    id: debugServerButton
-                    Layout.fillWidth: true
-                    Layout.margins: app.margins
-                    visible: debugServerEnabledSwitch.checked
-                    text: qsTr("Open debug interface")
-                    onClicked: Qt.openUrlExternally("http://" + engine.connection.hostAddress + "/debug")
+            Pane {
+                Layout.fillWidth: true
+                Material.elevation: layout.isGrid ? 1 : 0
+
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/stock_website.svg"
+                    text: qsTr("Web server")
+                    subText: qsTr("Configure the web server")
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/WebServerSettingsPage.qml"))
                 }
 
             }
 
-            MeaListItemDelegate {
+            Pane {
                 Layout.fillWidth: true
-                iconName: "../images/logs.svg"
-                text: qsTr("Log viewer")
-                onClicked: pageStack.push(Qt.resolvedUrl("system/LogViewerPage.qml"))
+                Material.elevation: layout.isGrid ? 1 : 0
+
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/plugin.svg"
+                    text: qsTr("Plugins")
+                    subText: qsTr("List and cofigure installed plugins")
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked:pageStack.push(Qt.resolvedUrl("system/PluginsPage.qml"))
+                }
             }
-            MeaListItemDelegate {
+
+            Pane {
                 Layout.fillWidth: true
-                iconName: "../images/cloud.svg"
-                text: qsTr("Cloud")
-                visible: engine.jsonRpcClient.ensureServerVersion("1.9")
-                onClicked: pageStack.push(Qt.resolvedUrl("system/CloudSettingsPage.qml"))
+                Material.elevation: layout.isGrid ? 1 : 0
+
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/sdk.svg"
+                    text: qsTr("Developer tools")
+                    subText: qsTr("Access tools for debugging and error reporting")
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/DeveloperTools.qml"))
+                }
             }
-            MeaListItemDelegate {
+
+            Pane {
                 Layout.fillWidth: true
-                iconName: "../images/network-vpn.svg"
-                text: qsTr("Server interfaces")
-                onClicked: pageStack.push(Qt.resolvedUrl("system/ConnectionInterfacesPage.qml"))
-            }
-            MeaListItemDelegate {
-                Layout.fillWidth: true
-                iconName: "../images/mqtt.svg"
-                text: qsTr("MQTT broker")
-                visible: engine.jsonRpcClient.ensureServerVersion("1.11")
-                onClicked: pageStack.push(Qt.resolvedUrl("system/MqttBrokerSettingsPage.qml"))
-            }
-            MeaListItemDelegate {
-                Layout.fillWidth: true
-                iconName: "../images/plugin.svg"
-                text: qsTr("Plugins")
-                onClicked:pageStack.push(Qt.resolvedUrl("system/PluginsPage.qml"))
-            }
-            MeaListItemDelegate {
-                Layout.fillWidth: true
-                iconName: "../images/info.svg"
-                text: qsTr("About %1:core").arg(app.systemName)
-                onClicked: pageStack.push(Qt.resolvedUrl("system/AboutNymeaPage.qml"))
+                Material.elevation: layout.isGrid ? 1 : 0
+
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    iconName: "../images/info.svg"
+                    text: qsTr("About %1:core").arg(app.systemName)
+                    subText: qsTr("Find server UUID and versions")
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("system/AboutNymeaPage.qml"))
+                }
             }
         }
     }

nymea-app/ui/appsettings/AboutPage.qml

@@ -15,188 +15,27 @@ Page {
 
     Flickable {
         anchors.fill: parent
-        contentHeight: aboutColumn.implicitHeight
+        contentHeight: imprint.implicitHeight
 
-        ColumnLayout {
-            id: aboutColumn
+        Imprint {
+            id: imprint
             width: parent.width
+            title: app.appName
+            githubLink: "https://github.com/guh/nymea-app"
 
-            RowLayout {
+            MeaListItemDelegate {
                 Layout.fillWidth: true
-                Layout.margins: app.margins
-                spacing: app.margins
-
-                Image {
-                    id: logo
-                    Layout.preferredHeight: app.iconSize * 2
-                    Layout.preferredWidth: height
-                    fillMode: Image.PreserveAspectFit
-                    source: "qrc:/styles/%1/logo.svg".arg(styleController.currentStyle)
-
-                    MouseArea {
-                        anchors.fill: parent
-                        property int clickCounter: 0
-                        onClicked: {
-                            clickCounter++;
-                            if (clickCounter >= 10) {
-                                settings.showHiddenOptions = !settings.showHiddenOptions
-                                var dialog = Qt.createComponent(Qt.resolvedUrl("../components/MeaDialog.qml"));
-                                var text = settings.showHiddenOptions
-                                        ? qsTr("Developer options are now enabled. If you have found this by accident, it is most likely not of any use for you. It will just enable some nerdy developer gibberish in the app. Tap the icon another 10 times to disable it again.")
-                                        : qsTr("Developer options are now disabled.")
-                                var popup = dialog.createObject(app, {headerIcon: "../images/dialog-warning-symbolic.svg", title: qsTr("Howdy cowboy!"), text: text})
-                                popup.open();
-                                clickCounter = 0;
-                            }
-                        }
-                    }
-                }
-
-                GridLayout {
-                    Layout.fillWidth: true
-                    columns: 2
-
-                    Label {
-                        text: qsTr("App version:")
-                    }
-                    Label {
-                        text: appVersion
-                    }
-                    Label {
-                        text: qsTr("Qt version:")
-                    }
-                    Label {
-                        text: qtVersion
-                    }
-                }
-            }
-
-            ThinDivider {}
-
-            Label {
-                Layout.fillWidth: true
-                Layout.topMargin: app.margins
-                Layout.leftMargin: app.margins
-                Layout.rightMargin: app.margins
-                wrapMode: Text.WordWrap
-                font.bold: true
-                text: "Copyright (C) 2019 guh GmbH"
-            }
-
-            Label {
-                Layout.fillWidth: true
-                Layout.leftMargin: app.margins
-                Layout.rightMargin: app.margins
-                wrapMode: Text.WordWrap
-                text: qsTr("nymea is a registered trademark of guh GmbH.")
-            }
-
-            Label {
-                Layout.fillWidth: true
-                Layout.leftMargin: app.margins
-                Layout.rightMargin: app.margins
-                wrapMode: Text.WordWrap
-                text: qsTr("Licensed under the terms of the GNU general public license, version 2. Please visit the GitHub page for source code and build instructions.")
-            }
-
-            ColumnLayout {
-                Layout.fillWidth: true
-
-                MeaListItemDelegate {
-                    Layout.fillWidth: true
-                    text: qsTr("Visit the nymea website")
-                    onClicked: {
-                        Qt.openUrlExternally("https://nymea.io")
-                    }
-                }
-
-                MeaListItemDelegate {
-                    Layout.fillWidth: true
-                    text: qsTr("Visit GitHub page")
-                    onClicked: {
-                        Qt.openUrlExternally("https://github.com/guh/nymea-app")
-                    }
-                }
-
-                MeaListItemDelegate {
-                    Layout.fillWidth: true
-                    text: qsTr("View license text")
-                    onClicked: {
-                        pageStack.push(licenseTextComponent)
-                    }
-                }
-                MeaListItemDelegate {
-                    Layout.fillWidth: true
-                    text: qsTr("Privacy policy")
-                    onClicked: {
-                        Qt.openUrlExternally(app.privacyPolicyUrl)
-                    }
-                }
-            }
-
-
-            ThinDivider { }
-
-            RowLayout {
-                Layout.fillWidth: true
-                Layout.margins: app.margins
-                spacing: app.margins
-
-                Image {
-                    Layout.preferredHeight: app.iconSize * 2
-                    Layout.preferredWidth: height
-                    fillMode: Image.PreserveAspectFit
-                    source: "qrc:/ui/images/Built_with_Qt_RGB_logo_vertical.svg"
-                    sourceSize.width: app.iconSize * 2
-                    sourceSize.height: app.iconSize * 2
-                }
-
-                Label {
-                    Layout.fillWidth: true
-                    text: qsTr("Qt is a registered trademark of The Qt Company Ltd. and its subsidiaries.")
-                    wrapMode: Text.WordWrap
-                }
+                text: qsTr("App version:")
+                subText: appVersion
+                progressive: false
+                prominentSubText: false
             }
             MeaListItemDelegate {
                 Layout.fillWidth: true
-                text: qsTr("Visit the Qt website")
-                onClicked: {
-                    Qt.openUrlExternally("https://www.qt.io")
-                }
-            }
-        }
-    }
-
-
-    Component {
-        id: licenseTextComponent
-        Page {
-            header: GuhHeader {
-                text: qsTr("License text")
-                onBackPressed: pageStack.pop()
-            }
-            Flickable {
-                anchors.fill: parent
-                contentHeight: licenseText.implicitHeight
-                clip: true
-                ScrollBar.vertical: ScrollBar {}
-                TextArea {
-                    id: licenseText
-                    wrapMode: Text.WordWrap
-                    font.pixelSize: app.smallFont
-                    anchors { left: parent.left; right: parent.right; margins: app.margins }
-                    readOnly: true
-                    Component.onCompleted: {
-                        var xhr = new XMLHttpRequest;
-                        xhr.open("GET", "../../LICENSE");
-                        xhr.onreadystatechange = function() {
-                            if (xhr.readyState === XMLHttpRequest.DONE) {
-                                text = xhr.responseText.replace(/(^\ *)/gm, "").replace(/(\n\n)/gm,"\t").replace(/(\n)/gm, " ").replace(/(\t)/gm, "\n\n");
-                            }
-                        };
-                        xhr.send();
-                    }
-                }
+                text: qsTr("Qt version:")
+                subText: qtVersion
+                progressive: false
+                prominentSubText: false
             }
         }
     }

nymea-app/ui/appsettings/AppSettingsPage.qml

@@ -15,131 +15,72 @@ Page {
 
     Flickable {
         anchors.fill: parent
-        contentHeight: contentColumn.implicitHeight
-        interactive: contentHeight > height
+        contentHeight: layout.implicitHeight
 
-        ColumnLayout {
-            id: contentColumn
-            width: parent.width
+        GridLayout {
+            id: layout
+            property bool isGrid: columns > 1
+            anchors { left: parent.left; top: parent.top; right: parent.right; margins: isGrid ? app.margins : 0 }
+            columns: Math.max(1, Math.floor(parent.width / 300))
+            rowSpacing: isGrid ? app.margins : 0
+            columnSpacing: isGrid ? app.margins : 0
 
-            RowLayout {
-                Layout.fillWidth: true; Layout.leftMargin: app.margins; Layout.rightMargin: app.margins; Layout.topMargin: app.margins
-                Label {
-                    Layout.fillWidth: true
-                    text: qsTr("View mode")
-                }
-                ComboBox {
-                    model: [qsTr("Windowed"), qsTr("Maximized"), qsTr("Fullscreen")]
-                    currentIndex: {
-                        switch (settings.viewMode) {
-                        case ApplicationWindow.Windowed:
-                            return 0;
-                        case ApplicationWindow.Maximized:
-                            return 1;
-                        case ApplicationWindow.FullScreen:
-                            return 2;
-                        }
-                    }
-
-                    onCurrentIndexChanged: {
-                        switch (currentIndex) {
-                        case 0:
-                            settings.viewMode = ApplicationWindow.Windowed;
-                            break;
-                        case 1:
-                            settings.viewMode = ApplicationWindow.Maximized;
-                            break;
-                        case 2:
-                            settings.viewMode = ApplicationWindow.FullScreen;
-                        }
-                    }
+            Pane {
+                Layout.fillWidth: true
+                Material.elevation: layout.isGrid ? 1 : 0
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    text: qsTr("Look & feel")
+                    subText: qsTr("Customize the app's look and behavior")
+                    iconName: "../images/preferences-look-and-feel.svg"
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("LookAndFeelSettingsPage.qml"))
                 }
             }
 
-            RowLayout {
-                Layout.fillWidth: true; Layout.leftMargin: app.margins; Layout.rightMargin: app.margins
-                visible: appBranding.length === 0
-                Label {
-                    Layout.fillWidth: true
-                    text: "Style"
-                }
-                ComboBox {
-                    model: styleController.allStyles
-                    currentIndex: styleController.allStyles.indexOf(styleController.currentStyle)
-
-                    onActivated: {
-                        styleController.currentStyle = model[index]
-                    }
-                }
-
-                Connections {
-                    target: styleController
-                    onCurrentStyleChanged: {
-                        var popup = styleChangedDialog.createObject(root)
-                        popup.open()
-                    }
+            Pane {
+                Layout.fillWidth: true
+                Material.elevation: layout.isGrid ? 1 : 0
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    text: qsTr("Cloud login")
+                    subText: qsTr("Log into %1:cloud and manage connected boxes").arg(app.systemName)
+                    iconName: "../images/cloud.svg"
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("CloudLoginPage.qml"))
                 }
             }
-
-            CheckDelegate {
+            Pane {
                 Layout.fillWidth: true
-                text: qsTr("Return to home on idle")
-                checked: settings.returnToHome
-                onClicked: settings.returnToHome = checked
+                Material.elevation: layout.isGrid ? 1 : 0
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    visible: settings.showHiddenOptions
+                    text: qsTr("Developer options")
+                    subText: qsTr("Yeehaaa!")
+                    iconName: "../images/sdk.svg"
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("DeveloperOptionsPage.qml"))
+                }
             }
-            CheckDelegate {
+            Pane {
                 Layout.fillWidth: true
-                text: qsTr("Show connection tabs")
-                checked: settings.showConnectionTabs
-                onClicked: settings.showConnectionTabs = checked
-            }
-            ThinDivider {}
-            MeaListItemDelegate {
-                Layout.fillWidth: true
-                text: qsTr("Cloud login")
-                iconName: "../images/cloud.svg"
-                onClicked: pageStack.push(Qt.resolvedUrl("CloudLoginPage.qml"))
-            }
-            MeaListItemDelegate {
-                Layout.fillWidth: true
-                text: qsTr("About %1").arg(app.appName)
-                iconName: "../images/info.svg"
-                onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
-            }
-            MeaListItemDelegate {
-                Layout.fillWidth: true
-                Layout.bottomMargin: app.margins
-                visible: settings.showHiddenOptions
-                text: qsTr("Developer options")
-                iconName: "../images/configure.svg"
-                onClicked: pageStack.push(Qt.resolvedUrl("DeveloperOptionsPage.qml"))
-            }
-        }
-    }
-
-
-
-    Component {
-        id: styleChangedDialog
-        Dialog {
-            width: Math.min(parent.width * .8, contentLabel.implicitWidth)
-            x: (parent.width - width) / 2
-            y: (parent.height - height) / 2
-            modal: true
-
-            title: qsTr("Style changed")
-
-            standardButtons: Dialog.Ok
-
-            ColumnLayout {
-                id: content
-                anchors { left: parent.left; top: parent.top; right: parent.right }
-
-                Label {
-                    id: contentLabel
-                    Layout.fillWidth: true
-                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
-                    text: qsTr("The application needs to be restarted for style changes to take effect.")
+                Material.elevation: layout.isGrid ? 1 : 0
+                padding: 0
+                MeaListItemDelegate {
+                    width: parent.width
+                    text: qsTr("About %1").arg(app.appName)
+                    subText: qsTr("Find app versions and licence information")
+                    iconName: "../images/info.svg"
+                    prominentSubText: false
+                    wrapTexts: false
+                    onClicked: pageStack.push(Qt.resolvedUrl("AboutPage.qml"))
                 }
             }
         }

nymea-app/ui/appsettings/LookAndFeelSettingsPage.qml

@@ -0,0 +1,118 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.1
+import QtQuick.Layouts 1.1
+import Nymea 1.0
+import "../components"
+
+Page {
+    id: root
+    header: GuhHeader {
+        text: qsTr("Look and feel")
+        backButtonVisible: true
+        onBackPressed: pageStack.pop()
+    }
+
+    ColumnLayout {
+        id: contentColumn
+        width: parent.width
+
+        RowLayout {
+            Layout.fillWidth: true; Layout.leftMargin: app.margins; Layout.rightMargin: app.margins; Layout.topMargin: app.margins
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("View mode")
+            }
+            ComboBox {
+                model: [qsTr("Windowed"), qsTr("Maximized"), qsTr("Fullscreen")]
+                currentIndex: {
+                    switch (settings.viewMode) {
+                    case ApplicationWindow.Windowed:
+                        return 0;
+                    case ApplicationWindow.Maximized:
+                        return 1;
+                    case ApplicationWindow.FullScreen:
+                        return 2;
+                    }
+                }
+
+                onCurrentIndexChanged: {
+                    switch (currentIndex) {
+                    case 0:
+                        settings.viewMode = ApplicationWindow.Windowed;
+                        break;
+                    case 1:
+                        settings.viewMode = ApplicationWindow.Maximized;
+                        break;
+                    case 2:
+                        settings.viewMode = ApplicationWindow.FullScreen;
+                    }
+                }
+            }
+        }
+
+        RowLayout {
+            Layout.fillWidth: true; Layout.leftMargin: app.margins; Layout.rightMargin: app.margins
+            visible: appBranding.length === 0
+            Label {
+                Layout.fillWidth: true
+                text: "Style"
+            }
+            ComboBox {
+                model: styleController.allStyles
+                currentIndex: styleController.allStyles.indexOf(styleController.currentStyle)
+
+                onActivated: {
+                    styleController.currentStyle = model[index]
+                }
+            }
+
+            Connections {
+                target: styleController
+                onCurrentStyleChanged: {
+                    var popup = styleChangedDialog.createObject(root)
+                    popup.open()
+                }
+            }
+        }
+
+        CheckDelegate {
+            Layout.fillWidth: true
+            text: qsTr("Return to home on idle")
+            checked: settings.returnToHome
+            onClicked: settings.returnToHome = checked
+        }
+        CheckDelegate {
+            Layout.fillWidth: true
+            text: qsTr("Show connection tabs")
+            checked: settings.showConnectionTabs
+            onClicked: settings.showConnectionTabs = checked
+        }
+    }
+
+    Component {
+        id: styleChangedDialog
+        Dialog {
+            width: Math.min(parent.width * .8, contentLabel.implicitWidth)
+            x: (parent.width - width) / 2
+            y: (parent.height - height) / 2
+            modal: true
+
+            title: qsTr("Style changed")
+
+            standardButtons: Dialog.Ok
+
+            ColumnLayout {
+                id: content
+                anchors { left: parent.left; top: parent.top; right: parent.right }
+
+                Label {
+                    id: contentLabel
+                    Layout.fillWidth: true
+                    wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+                    text: qsTr("The application needs to be restarted for style changes to take effect.")
+                }
+            }
+        }
+    }
+}

nymea-app/ui/components/Imprint.qml

@@ -0,0 +1,214 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Nymea 1.0
+
+Item {
+    id: root
+    implicitHeight: aboutColumn.implicitHeight
+
+    property alias title: titleLabel.text
+    property url githubLink
+    default property alias content: contentGrid.data
+
+    ColumnLayout {
+        id: aboutColumn
+        anchors { left: parent.left; right: parent.right; top: parent.top }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.margins: app.margins
+            spacing: app.margins
+
+            Image {
+                id: logo
+                Layout.preferredHeight: app.iconSize * 2
+                Layout.preferredWidth: height
+                fillMode: Image.PreserveAspectFit
+                source: "qrc:/styles/%1/logo.svg".arg(styleController.currentStyle)
+
+                MouseArea {
+                    anchors.fill: parent
+                    property int clickCounter: 0
+                    onClicked: {
+                        clickCounter++;
+                        if (clickCounter >= 10) {
+                            settings.showHiddenOptions = !settings.showHiddenOptions
+                            var dialog = Qt.createComponent(Qt.resolvedUrl("../components/MeaDialog.qml"));
+                            var text = settings.showHiddenOptions
+                                    ? qsTr("Developer options are now enabled. If you have found this by accident, it is most likely not of any use for you. It will just enable some nerdy developer gibberish in the app. Tap the icon another 10 times to disable it again.")
+                                    : qsTr("Developer options are now disabled.")
+                            var popup = dialog.createObject(app, {headerIcon: "../images/dialog-warning-symbolic.svg", title: qsTr("Howdy cowboy!"), text: text})
+                            popup.open();
+                            clickCounter = 0;
+                        }
+                    }
+                }
+            }
+
+            Label {
+                id: titleLabel
+                font.pixelSize: app.largeFont
+            }
+        }
+
+        ThinDivider {}
+
+        GridLayout {
+            id: contentGrid
+            Layout.fillWidth: true
+            columns: Math.max(1, root.width / 300)
+        }
+
+        ThinDivider {}
+
+        Label {
+            Layout.fillWidth: true
+            Layout.topMargin: app.margins
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            wrapMode: Text.WordWrap
+            font.bold: true
+            text: "Copyright (C) 2019 guh GmbH"
+        }
+
+        Label {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            wrapMode: Text.WordWrap
+            text: qsTr("nymea is a registered trademark of guh GmbH.")
+        }
+
+        Label {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            wrapMode: Text.WordWrap
+            font.pixelSize: app.smallFont
+            text: qsTr("Licensed under the terms of the GNU general public license, version 2. Please visit the GitHub page for source code and build instructions.")
+        }
+
+        ColumnLayout {
+            Layout.fillWidth: true
+
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                iconName: "../images/stock_website.svg"
+                text: qsTr("Visit the nymea website")
+                subText: "https://nymea.io"
+                prominentSubText: false
+                wrapTexts: false
+                onClicked: {
+                    Qt.openUrlExternally("https://nymea.io")
+                }
+            }
+
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                iconName: "../images/stock_website.svg"
+                text: qsTr("Visit GitHub page")
+                subText: root.githubLink
+                prominentSubText: false
+                wrapTexts: false
+                onClicked: {
+                    Qt.openUrlExternally(root.githubLink)
+                }
+            }
+
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                text: qsTr("View privacy policy")
+                iconName: "../images/stock_website.svg"
+                subText: app.privacyPolicyUrl
+                prominentSubText: false
+                wrapTexts: false
+                onClicked: {
+                    Qt.openUrlExternally(app.privacyPolicyUrl)
+                }
+            }
+
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                text: qsTr("View license text")
+                iconName: "../images/logs.svg"
+                subText: "GNU General Public License v2"
+                prominentSubText: false
+                wrapTexts: false
+                onClicked: {
+                    pageStack.push(licenseTextComponent)
+                }
+            }
+        }
+
+
+        ThinDivider { }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.margins: app.margins
+            spacing: app.margins
+
+            Image {
+                Layout.preferredHeight: app.iconSize * 2
+                Layout.preferredWidth: height
+                fillMode: Image.PreserveAspectFit
+                source: "qrc:/ui/images/Built_with_Qt_RGB_logo_vertical.svg"
+                sourceSize.width: app.iconSize * 2
+                sourceSize.height: app.iconSize * 2
+            }
+
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Qt is a registered trademark of The Qt Company Ltd. and its subsidiaries.")
+                wrapMode: Text.WordWrap
+            }
+        }
+        MeaListItemDelegate {
+            Layout.fillWidth: true
+            iconName: "../images/stock_website.svg"
+            text: qsTr("Visit the Qt website")
+            subText: "https://www.qt.io"
+            prominentSubText: false
+            wrapTexts: false
+            onClicked: {
+                Qt.openUrlExternally("https://www.qt.io")
+            }
+        }
+    }
+
+
+    Component {
+        id: licenseTextComponent
+        Page {
+            header: GuhHeader {
+                text: qsTr("License text")
+                onBackPressed: pageStack.pop()
+            }
+            Flickable {
+                anchors.fill: parent
+                contentHeight: licenseText.implicitHeight
+                clip: true
+                ScrollBar.vertical: ScrollBar {}
+                TextArea {
+                    id: licenseText
+                    wrapMode: Text.WordWrap
+                    font.pixelSize: app.smallFont
+                    anchors { left: parent.left; right: parent.right; margins: app.margins }
+                    readOnly: true
+                    Component.onCompleted: {
+                        var xhr = new XMLHttpRequest;
+                        xhr.open("GET", "../../LICENSE");
+                        xhr.onreadystatechange = function() {
+                            if (xhr.readyState === XMLHttpRequest.DONE) {
+                                text = xhr.responseText.replace(/(^\ *)/gm, "").replace(/(\n\n)/gm,"\t").replace(/(\n)/gm, " ").replace(/(\t)/gm, "\n\n");
+                            }
+                        };
+                        xhr.send();
+                    }
+                }
+            }
+        }
+    }
+}
+

nymea-app/ui/connection/ConnectPage.qml

@@ -148,9 +148,9 @@ Page {
                             case Connection.BearerTypeLan:
                             case Connection.BearerTypeWan:
                                 if (engine.connection.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
-                                    return "../images/network-wired-symbolic.svg"
+                                    return "../images/network-wired.svg"
                                 }
-                                return "../images/network-wifi-symbolic.svg";
+                                return "../images/network-wifi.svg";
                             case Connection.BearerTypeBluetooth:
                                 return "../images/bluetooth.svg";
                             case Connection.BearerTypeCloud:
@@ -369,9 +369,9 @@ Page {
                                     case Connection.BearerTypeLan:
                                     case Connection.BearerTypeWan:
                                         if (engine.connection.availableBearerTypes & NymeaConnection.BearerTypeEthernet != NymeaConnection.BearerTypeNone) {
-                                            return "../images/network-wired-symbolic.svg"
+                                            return "../images/network-wired.svg"
                                         }
-                                        return "../images/network-wifi-symbolic.svg";
+                                        return "../images/network-wifi.svg";
                                     case Connection.BearerTypeBluetooth:
                                         return "../images/bluetooth.svg";
                                     case Connection.BearerTypeCloud:

nymea-app/ui/images/cloud-offline.svg

@@ -13,9 +13,9 @@
    height="90"
    id="svg6138"
    version="1.1"
-   inkscape:version="0.91+devel r"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
    viewBox="0 0 90 90.000001"
-   sodipodi:docname="sync-offline.svg">
+   sodipodi:docname="cloud-offline.svg">
   <defs
      id="defs6140" />
   <sodipodi:namedview
@@ -25,9 +25,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="5.0931703"
-     inkscape:cx="-81.39135"
-     inkscape:cy="23.804422"
+     inkscape:zoom="11.313709"
+     inkscape:cx="57.298728"
+     inkscape:cy="35.158136"
      inkscape:document-units="px"
      inkscape:current-layer="g6253"
      showgrid="true"
@@ -50,7 +50,12 @@
      inkscape:snap-object-midpoints="true"
      inkscape:snap-center="true"
      showguides="true"
-     inkscape:guide-bbox="true">
+     inkscape:guide-bbox="true"
+     inkscape:window-width="2792"
+     inkscape:window-height="1698"
+     inkscape:window-x="88"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1">
     <inkscape:grid
        type="xygrid"
        id="grid6700"
@@ -58,51 +63,63 @@
     <sodipodi:guide
        orientation="0,1"
        position="62,87"
-       id="guide4084" />
+       id="guide4084"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="0,1"
        position="63,84"
-       id="guide4086" />
+       id="guide4086"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="0,1"
        position="63,81"
-       id="guide4088" />
+       id="guide4088"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="1,0"
        position="3,70"
-       id="guide4090" />
+       id="guide4090"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="1,0"
        position="6,66"
-       id="guide4092" />
+       id="guide4092"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="1,0"
        position="9,59"
-       id="guide4094" />
+       id="guide4094"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="1,0"
        position="87,63"
-       id="guide4096" />
+       id="guide4096"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="1,0"
        position="84,64"
-       id="guide4098" />
+       id="guide4098"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="1,0"
        position="81,55"
-       id="guide4100" />
+       id="guide4100"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="0,1"
        position="60,3"
-       id="guide4102" />
+       id="guide4102"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="0,1"
        position="61,6"
-       id="guide4104" />
+       id="guide4104"
+       inkscape:locked="false" />
     <sodipodi:guide
        orientation="0,1"
        position="62,9"
-       id="guide4106" />
+       id="guide4106"
+       inkscape:locked="false" />
   </sodipodi:namedview>
   <metadata
      id="metadata6143">
@@ -135,10 +152,17 @@
          x="174"
          y="1700.3622" />
       <path
-         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;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-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:0.5;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
-         d="m 212.5,1714.3613 c -11.29815,0 -20.5,9.2019 -20.5,20.5 l 0,0.01 0,0.01 c 0.002,0.2497 0.0454,0.4967 0.0566,0.7461 -10.15029,1.2279 -18.0494,9.7961 -18.05664,20.2363 0,11.2982 9.20185,20.5 20.5,20.5 l 49,0 c 11.29815,0 20.5,-9.2018 20.5,-20.5 l 0,-0 c -0.0116,-8.9301 -5.844,-16.696 -14.21094,-19.4063 0.0644,-0.5317 0.21041,-1.0527 0.21094,-1.5898 l 0,-0 c 0,-7.4321 -6.06785,-13.5 -13.5,-13.5 l -0.002,0 -0.002,0 c -2.55665,0 -4.93658,0.9271 -7.07421,2.2754 -3.76777,-5.6712 -10.02107,-9.2653 -16.91993,-9.2754 l -0.002,0 z m -0.002,4 0.002,0 c 6.1355,0.01 11.75025,3.4089 14.59766,8.8418 l 1.18945,2.2676 1.91211,-1.7031 c 1.73553,-1.5457 3.97683,-2.4018 6.30078,-2.4063 5.27039,0 9.5,4.2296 9.5,9.5 -0.001,0.8309 -0.11279,1.6591 -0.33008,2.4629 l -0.54297,2.0117 2.03125,0.461 c 7.51333,1.7082 12.82999,8.3597 12.8418,16.0644 0,7e-4 0,0 0,0 0,6e-4 0,0 0,0 -0.002,9.1346 -7.36493,16.4961 -16.5,16.4961 l -49,0 c -9.13573,0 -16.49893,-7.3625 -16.5,-16.498 l 0,-0 c 0.007,-9.023 7.2045,-16.3348 16.22656,-16.4843 l 2.27539,-0.037 -0.33007,-2.25 c -0.10801,-0.7397 -0.16511,-1.4866 -0.17188,-2.2343 0.003,-9.133 7.36456,-16.4931 16.49805,-16.4942 z"
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;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-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 179.17619,1750.3777 c 2.23579,-6.3117 7.96514,-10.8852 15.05037,-11.0026 l 2.27539,-0.037 -0.33007,-2.25 c -0.10801,-0.7397 -0.16511,-1.4866 -0.17188,-2.2343 0.003,-9.133 7.36456,-16.4931 16.49805,-16.4942 h -5e-5 0.002 c 6.1355,0.01 11.75025,3.4089 14.59766,8.8418 l 1.18945,2.2676 1.91211,-1.7031 c 1.73553,-1.5457 3.97683,-2.4018 6.30078,-2.4063 5.27039,0 9.5,4.2296 9.5,9.5 -0.001,0.8309 -0.11279,1.6591 -0.33008,2.4629 l -0.54297,2.0117 2.03125,0.461 c 7.51333,1.7082 12.82999,8.3597 12.8418,16.0644 0,7e-4 0,0 0,0 0,6e-4 0,0 0,0 -0.002,9.1346 -7.36493,16.4961 -16.5,16.4961 h -31.47157 l -0.0294,4.0063 h 31.50098 c 11.29815,0 20.5,-9.2018 20.5,-20.5 v 0 c -0.0116,-8.9301 -5.844,-16.696 -14.21094,-19.4063 0.0644,-0.5317 0.21041,-1.0527 0.21094,-1.5898 v 0 c 0,-7.4321 -6.06785,-13.5 -13.5,-13.5 h -0.002 -0.002 c -2.55665,0 -4.93658,0.9271 -7.07421,2.2754 -3.76777,-5.6712 -10.02107,-9.2653 -16.91993,-9.2754 h -0.002 l 1.8e-4,-0.01 c -11.29815,0 -20.5,9.2019 -20.5,20.5 v 0.01 0.01 c 0.002,0.2497 0.0454,0.4967 0.0566,0.7461 -8.28396,1.0021 -14.83786,6.9323 -17.05666,14.7402 2,0 3,0 4.1762,0.015 z"
          id="path4154"
-         inkscape:connector-curvature="0" />
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="cccccccccccccccccccsccscccccscsccccsccccc" />
+      <path
+         style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+         d="m 203.15569,1756.3622 2.8443,2.8443 -13.15669,13.1566 13.15669,13.1567 -2.8443,2.8424 -13.15669,-13.1567 -13.15472,13.1567 -2.84429,-2.8424 13.15668,-13.1567 -13.15668,-13.1566 2.84429,-2.8443 13.15472,13.1567 z"
+         id="path4177"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ccccccccccccc" />
     </g>
   </g>
 </svg>

nymea-app/ui/images/network-wifi-offline.svg

@@ -0,0 +1,78 @@
+<?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="network-wifi-offline.svg"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+  <defs
+     id="defs9" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2792"
+     inkscape:window-height="1698"
+     id="namedview7"
+     showgrid="true"
+     inkscape:zoom="45.254836"
+     inkscape:cx="60.870832"
+     inkscape:cy="32.964658"
+     inkscape:window-x="88"
+     inkscape:window-y="44"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg4874">
+    <inkscape:grid
+       type="xygrid"
+       id="grid819" />
+  </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 />
+      </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 48,12.016 c -16.384,0 -32.768,6.242 -45.254,18.728 l 3.5352,3.535 c 23.062,-23.062 60.376,-23.062 83.438,0 l 3.537,-3.535 C 80.7702,18.258 64.3842,12.016 48.0002,12.016 Z m 0,14 c -12.801,0 -25.603,4.876 -35.355,14.629 l 3.535,3.535 c 17.594,-17.595 46.046,-17.595 63.64,0 l 3.535,-3.535 C 73.603,30.892 60.801,26.016 48,26.016 Z m 0,14 c -9.218,0 -18.436,3.508 -25.455,10.527 l 3.535,3.535 c 12.127,-12.127 31.713,-12.127 43.84,0 l 3.537,-3.535 C 66.438,43.524 57.218,40.016 48,40.016 Z m 0,14 c -5.636,0 -11.271,2.142 -15.557,6.427 l 3.536,3.536 C 42.002407,57.954689 51.351849,57.379676 58.010188,62.253961 58,60.62798 58,58.272385 58.003178,56.405501 54.872902,54.812425 51.436637,54.016 48,54.016 Z M 48,68 c -4.418278,0 -8,3.581722 -8,8 0,4.418278 3.581722,8 8,8 4.418278,0 8,-3.581722 8,-8 0,-4.418278 -3.581722,-8 -8,-8 z"
+     style="color:#000000;fill:#808080;fill-opacity:0.98933333"
+     id="path4197"
+     clip-path="none"
+     sodipodi:nodetypes="sccccsssccccssccccssccccssssss" />
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3.99999976;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 66.844296,62.000021 -2.8443,2.844295 13.15669,13.156674 -13.15669,13.156685 2.8443,2.842335 13.15669,-13.156684 13.15472,13.156684 2.84429,-2.842335 -13.15668,-13.156685 13.15668,-13.156674 -2.84429,-2.844295 -13.15472,13.156674 z"
+     id="path4177"
+     inkscape:connector-curvature="0"
+     sodipodi:nodetypes="ccccccccccccc" />
+</svg>

nymea-app/ui/images/network-wired-offline.svg

@@ -0,0 +1,175 @@
+<?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"
+   width="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="network-wired-offline.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="13.720702"
+     inkscape:cx="41.368144"
+     inkscape:cy="15.177786"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-8.0000001"
+       id="guide4080" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172" />
+    <sodipodi:guide
+       position="92,-8.0000001"
+       orientation="1,0"
+       id="guide4760" />
+  </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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             d="M 23.976562,8.0019531 C 18.943803,8.0601301 15.26124,7.881546 12.25,9.5429688 10.74438,10.37368 9.5531414,11.778707 8.8945312,13.533203 8.2359314,15.287699 7.9980469,17.369641 7.9980469,20 l 0,56 c 0,2.630359 0.2378845,4.714254 0.8964843,6.46875 C 9.5531414,84.223246 10.74438,85.62632 12.25,86.457031 15.26124,88.118454 18.943803,87.941823 23.976562,88 l 0.01172,0 L 58,88 58,84 24.021484,84 24,84 C 18.96042,83.941223 15.648104,83.763108 14.183594,82.955078 13.450074,82.550368 13.030935,82.102279 12.640625,81.0625 12.250305,80.022711 12,78.369642 12,76 l 0,-56 c 0,-2.369642 0.250305,-4.022721 0.640625,-5.0625 0.39031,-1.039789 0.809449,-1.487868 1.542969,-1.892578 1.46703,-0.80943 4.78371,-0.986445 9.83789,-1.044922 l 47.976563,0 c 5.03826,0.05878 8.352116,0.237002 9.816406,1.044922 0.73352,0.40471 1.152659,0.852789 1.542969,1.892578 0.39032,1.039779 0.640625,2.692858 0.640625,5.0625 l 0,36 L 88,56 88,20 C 88,17.369641 87.762116,15.287699 87.103516,13.533203 86.444916,11.778707 85.253667,10.37368 83.748047,9.5429688 80.736807,7.881546 77.054244,8.0601301 72.021484,8.0019531 l -0.01172,0 -48.021485,0 z"
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             id="path4184"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="cssssssccccccsssscsccscsccssscccc" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00000048;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             d="m 36,25 0,5 -12,0 0,40 34,0 0,-3.998047 -30,0 0,-32.003906 12,0 0,-5 15.998047,0 0,5 12,0 0,22.001953 L 72,56 72,30 60,30 60,25 Z"
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             id="path4297"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="ccccccccccccccccccc" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079107;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             d="m 375.9779,374.51792 -2.84542,2.8443 -13.16188,-13.15669 -13.16189,13.15669 -2.84346,-2.8443 13.16189,-13.15669 -13.16189,-13.15472 2.84346,-2.84429 13.16189,13.15668 13.16188,-13.15668 2.84542,2.84429 -13.16188,13.15472 z"
+             id="path4177"
+             inkscape:connector-curvature="0"
+             sodipodi:nodetypes="ccccccccccccc" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

nymea-app/ui/images/preferences-look-and-feel.svg

@@ -0,0 +1,160 @@
+<?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"
+   width="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="preferences-desktop-wallpaper-symbolic.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="4.4959994"
+     inkscape:cx="-9.6530349"
+     inkscape:cy="15.157891"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="true"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-8.0000001"
+       id="guide4080" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172" />
+    <sodipodi:guide
+       position="92,-8.0000001"
+       orientation="1,0"
+       id="guide4760" />
+  </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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;marker:none;enable-background:accumulate"
+             d="M 49.732422 4.0136719 C 47.263957 3.8499142 44.558317 5.2405084 40.916016 8.8828125 L 39.929688 9.8671875 C 39.920791 9.8581751 39.913238 9.8488451 39.904297 9.8398438 L 39.851562 9.7871094 C 38.456522 8.3920512 37.121484 7.4783329 35.871094 6.9960938 L 35.861328 6.9921875 L 35.851562 6.9882812 C 34.909783 6.6023839 34.011526 6.4207832 33.134766 6.4257812 C 32.843846 6.4275806 32.552989 6.450158 32.261719 6.4941406 L 32.246094 6.4980469 L 32.228516 6.5 C 31.054546 6.636426 29.86958 7.0825235 28.65625 7.875 L 28.646484 7.8808594 L 28.634766 7.8886719 C 27.393416 8.6559083 26.154322 9.6562254 24.914062 10.896484 L 22.101562 13.708984 C 20.860823 14.949723 19.858187 16.188807 19.091797 17.429688 L 19.083984 17.441406 L 19.078125 17.451172 C 18.286035 18.663912 17.841618 19.848501 17.705078 21.023438 L 17.703125 21.041016 L 17.699219 21.056641 C 17.524019 22.216242 17.678959 23.391101 18.193359 24.646484 L 18.197266 24.65625 L 18.201172 24.666016 C 18.683532 25.916681 19.597458 27.253708 20.992188 28.648438 C 21.076977 28.733234 21.204616 28.835475 21.378906 29.009766 L 22.085938 29.716797 L 22.072266 29.730469 L 42.953125 50.611328 L 36.951172 56.613281 L 35.337891 55 C 31.968637 57.197857 28.697371 59.493579 25.523438 61.886719 C 22.308497 64.320749 18.981495 67.256786 15.542969 70.695312 L 4 82.238281 L 13.761719 92 L 25.304688 80.457031 C 28.743214 77.018512 31.679261 73.69149 34.113281 70.476562 C 36.506375 67.302565 38.80208 64.03131 41 60.662109 L 39.386719 59.048828 L 44.974609 53.460938 L 44.976562 53.460938 L 47.826172 50.609375 L 44.683594 47.466797 L 23.078125 25.601562 C 22.564705 25.015434 22.007068 24.461959 21.742188 23.740234 C 21.440836 22.918579 21.291594 21.991016 21.527344 21.029297 C 21.707224 20.113069 22.151687 19.216594 22.810547 18.308594 C 23.425757 17.395875 24.251422 16.430226 25.294922 15.386719 L 26.529297 14.152344 C 27.572357 13.109276 28.535956 12.285258 29.447266 11.669922 C 30.356876 11.009243 31.254385 10.564754 32.171875 10.384766 C 33.092485 10.157975 34.049949 10.244437 34.917969 10.623047 C 35.777989 10.951927 36.586888 11.514629 37.361328 12.289062 C 37.383565 12.311299 37.407324 12.343987 37.429688 12.367188 L 36.388672 13.408203 C 28.063412 21.733459 31.501543 25.171465 38.376953 32.046875 L 63.953125 57.623047 C 70.828535 64.498447 74.266527 67.936594 82.591797 59.611328 L 87.117188 55.083984 C 95.442448 46.758718 92.004306 43.320713 85.128906 36.445312 L 59.552734 10.871094 C 55.685322 7.003681 52.906163 4.2242175 49.732422 4.0136719 z M 49.097656 7.9707031 C 49.358784 7.9383834 49.564777 7.9786891 49.826172 8.0429688 C 50.871762 8.300077 53.298538 10.247757 56.736328 13.685547 L 82.3125 39.261719 C 84.46115 41.410369 86.151597 43.149116 87.060547 44.435547 C 87.969487 45.721978 88.076573 46.238691 88.001953 46.884766 C 87.912423 47.660039 87.131931 49.438381 84.300781 52.269531 L 79.773438 56.796875 C 77.885958 58.684348 76.409674 59.72593 75.458984 60.166016 C 74.508284 60.606102 74.200524 60.579721 73.677734 60.451172 C 72.632154 60.194054 70.205368 58.24443 66.767578 54.806641 L 41.193359 29.230469 C 37.755549 25.792659 35.808091 23.368961 35.550781 22.322266 C 35.422131 21.798923 35.393574 21.490227 35.833984 20.539062 C 36.274384 19.587899 37.317528 18.112153 39.205078 16.224609 A 3.9834012 3.981826 0 0 0 39.207031 16.222656 L 43.730469 11.697266 C 45.617939 9.8097919 47.094232 8.7682109 48.044922 8.328125 C 48.520267 8.1080871 48.836529 8.0030228 49.097656 7.9707031 z M 71.986328 70.460938 C 68.747628 76.767792 66.515611 83.799285 66.363281 84.283203 C 66.341681 84.340031 66.324588 84.399454 66.304688 84.457031 C 66.109568 85.023897 66 85.628182 66 86.257812 C 66 89.428196 68.678526 91.998976 71.980469 92 C 75.282402 91.998976 77.958984 89.430149 77.958984 86.259766 C 77.958984 85.630535 77.853023 85.02551 77.658203 84.458984 L 77.660156 84.458984 C 77.660156 84.458984 75.46036 77.358888 72 70.470703 C 71.999 70.470703 71.997094 70.46947 71.996094 70.46875 L 71.992188 70.464844 C 71.991188 70.462845 71.991234 70.461657 71.990234 70.460938 C 71.989234 70.460418 71.987058 70.460938 71.986328 70.460938 z "
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             id="rect4448" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

nymea-app/ui/images/sdk.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg id="svg4874" width="96" height="96" version="1.1" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+ <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/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g id="layer1" transform="translate(67.857 -78.505)">
+  <path id="text4185" d="m-10.804 85.691-4.51 0.83311v14.702c-0.64012-0.38115-1.2742-0.75854-2.3108-1.141-1.4094-0.57045-3.0609-0.84658-4.9506-0.84658-2.083 0-3.9656 0.37193-5.6278 1.1275l-2e-3 2e-3h-2e-3c-1.6172 0.75219-2.9992 1.8131-4.129 3.1689-1.1287 1.3545-1.9888 2.9676-2.584 4.8274l-2e-3 4e-3v4e-3c-0.55844 1.8242-0.83504 3.8266-0.83504 6.0011 0 2.3243 0.33133 4.4241 1.0044 6.2936l2e-3 4e-3 2e-3 6e-3c0.70692 1.8603 1.6798 3.4556 2.9207 4.7716l0.0038 2e-3 2e-3 2e-3c1.2754 1.3129 2.7823 2.3307 4.5042 3.0419l0.0118 4e-3c1.7611 0.67447 3.7021 1.0082 5.8145 1.0082 2.5157 0 4.604-0.16157 6.2782-0.49641 1.6412-0.32823 2.9976-0.67636 4.0771-1.0486l0.33286-0.11352v-0.3521-41.802-0.0019zm12.905 0-4.51 0.83311v42.329h4.51v-13.611c0.84319 0.57797 1.6898 1.1682 2.6032 1.9433l0.00383 4e-3 0.00197 2e-3c1.2139 0.99969 2.413 2.1078 3.5941 3.3248l0.00394 8e-3c1.2137 1.2137 2.3568 2.5163 3.4287 3.9097l0.0038 6e-3 0.0059 6e-3c1.1065 1.3563 2.0851 2.7466 2.9399 4.1713l0.1443 0.23858h5.3123l-0.43291-0.74075c-0.77016-1.3203-1.7202-2.7081-2.8476-4.1636-1.0926-1.4932-2.2763-2.932-3.5499-4.3156-1.2392-1.4214-2.5165-2.7354-3.8308-3.9404-1.1197-1.0557-2.1658-1.8757-3.1843-2.6032l2.6533-2.6533c1.1225-1.1225 2.2447-2.2643 3.3671-3.4229l3.3074-3.4152h2e-3c1.0487-1.0849 1.9886-2.0621 2.8207-2.9303l0.79848-0.83312h-5.6086l-0.14644 0.1692c-0.71789 0.82557-1.5824 1.7797-2.5917 2.8611-1.0079 1.0799-2.0889 2.1966-3.242 3.3498l-0.00197 2e-3 -0.00383 4e-3c-1.1188 1.1549-2.2368 2.2906-3.3555 3.4094-0.81058 0.81057-1.4992 1.4796-2.1953 2.1568v-26.096-0.0019zm-51.286 13.493c-3.0776 0-5.5723 0.72675-7.4153 2.2242l-4e-3 4e-3c-1.7993 1.493-2.7264 3.5088-2.7264 5.9088 0 1.2526 0.22764 2.348 0.70613 3.2651 0.46268 0.8868 1.0834 1.6625 1.8529 2.3166l0.0118 0.012c0.75348 0.60278 1.6151 1.1442 2.5821 1.6278l0.0077 4e-3 0.0059 4e-3c0.94592 0.43657 1.9463 0.8725 2.9996 1.3084 1.2978 0.54074 2.3783 1.0085 3.2382 1.4026l0.0038 2e-3 2e-3 2e-3c0.87654 0.38566 1.5653 0.78316 2.0607 1.1794 0.48908 0.39126 0.80781 0.8093 0.98896 1.2622l0.0118 0.0268c0.2158 0.46243 0.33286 1.0388 0.33286 1.7432 0 1.4497-0.53838 2.3584-1.7336 2.9746h-2e-3c-1.2098 0.60451-2.797 0.92547-4.7678 0.92547-1.0994 0-2.0678-0.0728-2.9015-0.21165-0.81108-0.1412-1.5113-0.299-2.0991-0.47139-0.59444-0.21017-1.0659-0.38348-1.4123-0.52166-0.33874-0.17012-0.57873-0.30436-0.63301-0.34056l-0.5599-0.37326-1.2218 4.2406 0.36557 0.18278c0.49986 0.24992 1.3668 0.55101 2.6667 0.94856 9.1e-4 3e-4 0.0029-3.1e-4 0.0038 0 1.3894 0.46257 3.3059 0.67534 5.7914 0.67534 3.3527 0 6.041-0.66123 8.031-2.0376 2.0387-1.3848 3.09-3.5003 3.09-6.155 0-1.3938-0.24453-2.5781-0.76385-3.5383-0.49777-0.95569-1.1536-1.7685-1.9625-2.4243-0.79906-0.68393-1.7274-1.2505-2.7783-1.7009l0.02116 8e-3c-0.98514-0.47433-2.025-0.92912-3.117-1.3661l-0.0059-2e-3c-1.041-0.43078-1.9727-0.82663-2.7976-1.1852-0.76607-0.34821-1.4189-0.71006-1.9645-1.0832-0.49204-0.39562-0.85921-0.8284-1.1121-1.3026-0.24428-0.45802-0.37711-1.0235-0.37711-1.7201 0-0.68878 0.14506-1.2197 0.40982-1.6316l0.0076-0.012c0.28559-0.47598 0.65728-0.84767 1.1333-1.1333l0.0097-6e-3 0.0097-8e-3c0.4876-0.32506 1.0406-0.55394 1.672-0.68688l0.0097-4e-3 0.0077-2e-3c0.68176-0.17043 1.4008-0.25589 2.1588-0.25589 1.9584 0 3.4189 0.18657 4.3349 0.51371h2e-3l0.0038 2e-3c1.0394 0.35843 1.7729 0.64786 2.1626 0.84273l0.54451 0.2713 1.0659-4.1194-0.35595-0.17894c-0.57657-0.28829-1.4747-0.57391-2.7514-0.90238-1.2903-0.34154-2.899-0.5041-4.8428-0.5041zm26.935 4.2387c0.79575 0 1.5507 0.0846 2.2704 0.25589l0.01154 4e-3 0.01154 2e-3c0.73267 0.13956 1.408 0.33037 2.0279 0.57144 0.62895 0.2446 1.1627 0.50385 1.6008 0.77347l0.0077 6e-3 0.0077 4e-3c0.41289 0.23594 0.72079 0.44752 0.99858 0.65032v18.973c-0.49697 0.14457-1.1091 0.29367-2.0241 0.44637-1.0112 0.13894-2.3827 0.21165-4.1001 0.21165-2.9289 0-5.2069-0.91746-6.9574-2.7687l-2e-3 -2e-3c-1.7393-1.8768-2.6321-4.5732-2.6321-8.1772 0-1.52 0.15757-2.9459 0.47332-4.2791l2e-3 -2e-3c0.31318-1.3571 0.81263-2.5049 1.4931-3.4575l2e-3 -6e-3 2e-3 -4e-3c0.67882-0.9843 1.5537-1.7577 2.6456-2.3377 1.1056-0.5683 2.4873-0.8639 4.1617-0.8639z" style="fill:#808080"/>
+  <rect id="rect4782" transform="rotate(90)" x="78.505" y="-28.143" width="96" height="96" style="color:#000000;fill:none"/>
+  <path id="path4328" d="m5.8573 134.71c-5.8175 4e-5 -10.893 3.199-13.611 7.9503l-43.802-2e-5c-4.5991 9e-5 -8.3012 3.5444-8.3011 7.9468 0 4.4026 3.7021 7.947 8.3011 7.947l43.802-9e-5c2.7176 4.7515 7.7934 7.9514 13.611 7.9508 6.3365 7e-5 11.798-3.8109 14.286-9.2736l-11.666-2e-5 1.025e-4 -13.248 11.666 1e-5c-2.4874-5.4625-7.9492-9.2734-14.286-9.2735zm-57.747 12.792a3.0703 3.1053 0 0 1 3.0705 3.1052 3.0703 3.1053 0 0 1-3.0705 3.1055 3.0703 3.1053 0 0 1-3.0705-3.1055 3.0703 3.1053 0 0 1 3.0705-3.1052z" style="enable-background:new;fill:#808080"/>
+ </g>
+</svg>

nymea-app/ui/images/stock_website.svg

@@ -0,0 +1,192 @@
+<?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"
+   width="96"
+   height="96"
+   id="svg4874"
+   version="1.1"
+   inkscape:version="0.91+devel r"
+   viewBox="0 0 96 96.000001"
+   sodipodi:docname="stock_website.svg">
+  <defs
+     id="defs4876" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="3.5967995"
+     inkscape:cx="-6.2277702"
+     inkscape:cy="27.079593"
+     inkscape:document-units="px"
+     inkscape:current-layer="g4780"
+     showgrid="false"
+     showborder="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:object-paths="true"
+     inkscape:snap-intersection-paths="true"
+     inkscape:object-nodes="true"
+     inkscape:snap-smooth-nodes="true"
+     inkscape:snap-midpoints="true"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-global="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="92,-8.0000001"
+       id="guide4075" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,12"
+       id="guide4078" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-9.0000001"
+       id="guide4080" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172" />
+  </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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(67.857146,-78.50504)">
+    <g
+       transform="matrix(0,-1,-1,0,373.50506,516.50504)"
+       id="g4845"
+       style="display:inline">
+      <g
+         inkscape:export-ydpi="90"
+         inkscape:export-xdpi="90"
+         inkscape:export-filename="next01.png"
+         transform="matrix(-0.9996045,0,0,1,575.94296,-611.00001)"
+         id="g4778"
+         inkscape:label="Layer 1">
+        <g
+           transform="matrix(-1,0,0,1,575.99999,611)"
+           id="g4780"
+           style="display:inline">
+          <rect
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;stroke:none;stroke-width:4;marker:none;enable-background:accumulate"
+             id="rect4782"
+             width="96.037987"
+             height="96"
+             x="-438.00244"
+             y="345.36221"
+             transform="scale(-1,1)" />
+          <path
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 364.0904,368.96573 c -0.0215,-0.0161 -0.0354,-0.0404 -0.0567,-0.0566 -0.0253,-0.0201 -0.057,-0.0305 -0.0821,-0.0508 z"
+             id="path4157" />
+          <path
+             style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 364.07673,417.80167 -0.13873,0.10742 c 0.0251,-0.0203 0.0569,-0.0307 0.0821,-0.0508 0.0214,-0.0162 0.0353,-0.0405 0.0567,-0.0566 z"
+             id="path4344" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079107;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+             d="m 432,393.36133 c 0,23.17236 -18.83538,42 -42.01562,42 -23.18025,0 -42.01563,-18.82764 -42.01563,-42 0,-23.17236 18.83538,-42 42.01563,-42 23.18024,0 42.01562,18.82764 42.01562,42 z m -4.00195,0 c 0,-21.00932 -16.99476,-37.99805 -38.01367,-37.99805 -21.01892,0 -38.01563,16.98873 -38.01563,37.99805 0,21.00931 16.99671,37.99804 38.01563,37.99805 21.01891,0 38.01367,-16.98874 38.01367,-37.99805 z"
+             id="path4116"
+             inkscape:connector-curvature="0" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             d="m 425.62746,411.82485 -3.73813,-3.38078 2.8481,-8.00712 -4.98418,-2.66904 -6.05222,9.78648 -8.3663,6.76156 2.31409,3.91459 -2.13608,4.09253 -3.91614,-2.31317 1.24604,-2.66904 -6.94225,-4.62633 2.31409,-3.91459 -4.45016,-9.43061 -8.18829,-8.71886 -8.1883,3.73665 -12.10443,8.71887 -6.58624,-1.42349 3.20412,5.16014 17.80063,2.84698 6.58624,4.80427 8.01029,0.17793 5.5182,7.47331 1.60205,5.69396 4.45016,1.06761 11.57042,-6.22776 z"
+             id="path4176"
+             inkscape:connector-curvature="0" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             d="m 429.00958,393.49744 -5.5182,0.17794 -0.71202,-4.80427 5.34019,-5.51602 z"
+             id="path4178"
+             inkscape:connector-curvature="0" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             d="m 424.55942,375.34798 -3.73813,2.31316 -2.8481,-3.20284 -2.6701,3.20284 -3.20411,-1.24555 3.38212,-7.11744 -3.38212,-4.4484 4.45016,-1.42348 6.76424,8.89679 z"
+             id="path4180"
+             inkscape:connector-curvature="0" />
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;opacity:1;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:4.00079155;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+             d="m 409.42888,359.51167 -1.24604,6.93951 2.8481,2.66904 -0.53402,8.18505 -7.83228,4.98221 -8.3663,-3.38078 -3.38212,-11.03204 -12.99447,-2.13523 -6.76424,-2.66904 3.56013,-6.22776 12.99446,-4.62633 12.63845,2.66904 z"
+             id="path4182"
+             inkscape:connector-curvature="0" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

nymea-app/ui/system/AboutNymeaPage.qml

@@ -8,32 +8,48 @@ Page {
 
     id: root
     header: GuhHeader {
-        text: qsTr("About %1").arg(app.systemName)
+        text: qsTr("About %1:core").arg(app.systemName)
         onBackPressed: pageStack.pop()
     }
 
-    ColumnLayout {
-        anchors { left: parent.left; top: parent.top; right: parent.right }
+    Flickable {
+        anchors.fill: parent
+        contentHeight: imprint.implicitHeight
 
-        MeaListItemDelegate {
-            Layout.fillWidth: true
-            text: qsTr("Server UUID:")
-            subText: engine.jsonRpcClient.serverUuid
-            progressive: false
-        }
+        Imprint {
+            id: imprint
+            width: parent.width
+            title: qsTr("%1:core").arg(app.systemName)
+            githubLink: "https://github.com/guh/nymea"
 
-        MeaListItemDelegate {
-            Layout.fillWidth: true
-            text: qsTr("Server version:")
-            subText: engine.jsonRpcClient.serverVersion
-            progressive: false
-        }
-
-        MeaListItemDelegate {
-            Layout.fillWidth: true
-            text: qsTr("Protocol version:")
-            subText: engine.jsonRpcClient.jsonRpcVersion
-            progressive: false
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                text: qsTr("Connection:")
+                subText: engine.connection.currentConnection.url
+                progressive: false
+                prominentSubText: false
+            }
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                text: qsTr("Server UUID:")
+                subText: engine.jsonRpcClient.serverUuid
+                progressive: false
+                prominentSubText: false
+            }
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                text: qsTr("Server version:")
+                subText: engine.jsonRpcClient.serverVersion
+                progressive: false
+                prominentSubText: false
+            }
+            MeaListItemDelegate {
+                Layout.fillWidth: true
+                text: qsTr("JSON-RPC version:")
+                subText: engine.jsonRpcClient.jsonRpcVersion
+                progressive: false
+                prominentSubText: false
+            }
         }
     }
 }

nymea-app/ui/system/ConnectionInterfacesPage.qml

@@ -25,7 +25,7 @@ Page {
                 Layout.leftMargin: app.margins
                 Layout.rightMargin: app.margins
                 Layout.topMargin: app.margins
-                text: qsTr("TCP Server Interfaces")
+                text: qsTr("TCP server interfaces")
                 wrapMode: Text.WordWrap
                 color: app.accentColor
             }
@@ -78,7 +78,7 @@ Page {
                 Layout.leftMargin: app.margins
                 Layout.rightMargin: app.margins
                 Layout.topMargin: app.margins
-                text: qsTr("WebSocket Server Interfaces")
+                text: qsTr("WebSocket server interfaces")
                 wrapMode: Text.WordWrap
                 color: app.accentColor
             }

nymea-app/ui/system/DeveloperTools.qml

@@ -0,0 +1,98 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Nymea 1.0
+import "../components"
+
+Page {
+    id: root
+    header: GuhHeader {
+        text: qsTr("Developer tools")
+        onBackPressed: pageStack.pop();
+    }
+
+    property WebServerConfiguration usedConfig: {
+        var config = null
+        for (var i = 0; i < engine.nymeaConfiguration.webServerConfigurations.count; i++) {
+            var tmp = engine.nymeaConfiguration.webServerConfigurations.get(i)
+            print("checking config:", tmp.id, tmp.address, tmp.port, tmp.sslEnabled)
+            if (tmp.address === engine.connection.currentConnection.hostAddress || tmp.address === "0.0.0.0") {
+                if (config === null || (!config.sslEnabled && tmp.sslEnabled)) {
+                    config = tmp;
+
+                }
+                continue;
+            }
+        }
+        return config;
+    }
+
+    ColumnLayout {
+        anchors { left: parent.left; top: parent.top; right: parent.right }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            spacing: app.margins
+            Label {
+                text: qsTr("Debug server enabled")
+                Layout.fillWidth: true
+            }
+            Switch {
+                id: debugServerEnabledSwitch
+                checked: engine.nymeaConfiguration.debugServerEnabled
+                onClicked: engine.nymeaConfiguration.debugServerEnabled = checked
+            }
+        }
+
+        Label {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            text: qsTr("In order to access the debug interface, please enable the web server.")
+            font.pixelSize: app.smallFont
+            color: "red"
+            wrapMode: Text.WordWrap
+            visible: engine.nymeaConfiguration.webServerConfigurations.count === 0
+        }
+
+        Label {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            text: qsTr("The web server cannot be reached on %1.").arg(engine.connection.currentConnection.hostAddress)
+            wrapMode: Text.WordWrap
+            font.pixelSize: app.smallFont
+            color: "red"
+            visible: engine.nymeaConfiguration.webServerConfigurations.count > 0 && root.usedConfig === null
+        }
+
+        Label {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            text: qsTr("Please enable the web server to be accessed on this address.")
+            wrapMode: Text.WordWrap
+            font.pixelSize: app.smallFont
+            visible: engine.nymeaConfiguration.webServerConfigurations.count > 0 && root.usedConfig === null
+        }
+
+        Button {
+            id: debugServerButton
+            Layout.fillWidth: true
+            Layout.margins: app.margins
+            visible: debugServerEnabledSwitch.checked
+            enabled: root.usedConfig !== null && engine.nymeaConfiguration.webServerConfigurations.count > 0
+            text: qsTr("Open debug interface")
+            onClicked: {
+                print("opening:", engine.connection.currentConnection.url)
+
+                var proto = "http" + (root.usedConfig.sslEnabled ? "s" : "") + "://"
+                var path = engine.connection.currentConnection.hostAddress + ":" + root.usedConfig.port + "/debug"
+                print("opening:", proto + path)
+                Qt.openUrlExternally(proto + path)
+            }
+        }
+    }
+}

nymea-app/ui/system/GeneralSettingsPage.qml

@@ -0,0 +1,97 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.1
+import QtQuick.Layouts 1.1
+import Nymea 1.0
+import "../components"
+
+Page {
+    id: root
+    header: GuhHeader {
+        text: qsTr("Box settings")
+        backButtonVisible: true
+        onBackPressed: pageStack.pop()
+    }
+
+    ColumnLayout {
+        id: settingsColumn
+        anchors { left: parent.left; right: parent.right; top: parent.top }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.topMargin: app.margins
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            spacing: app.margins
+            Label {
+                text: qsTr("Name")
+            }
+            TextField {
+                id: nameTextField
+                Layout.fillWidth: true
+                text: engine.nymeaConfiguration.serverName
+            }
+            Button {
+                text: qsTr("OK")
+                visible: nameTextField.displayText !== engine.nymeaConfiguration.serverName
+                onClicked: engine.nymeaConfiguration.serverName = nameTextField.displayText
+            }
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            spacing: app.margins
+
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Language")
+            }
+            ComboBox {
+                id: languageBox
+                Layout.fillWidth: true
+                model: engine.nymeaConfiguration.availableLanguages
+                currentIndex: model.indexOf(engine.nymeaConfiguration.language)
+                contentItem: Label {
+                    leftPadding: app.margins / 2
+                    text: Qt.locale(languageBox.displayText).nativeLanguageName + " (" + Qt.locale(languageBox.displayText).nativeCountryName + ")"
+                    elide: Text.ElideRight
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+                delegate: ItemDelegate {
+                    width: languageBox.width
+                    contentItem: Label {
+                        text: Qt.locale(modelData).nativeLanguageName + " (" + Qt.locale(modelData).nativeCountryName + ")"
+                        elide: Text.ElideRight
+                        verticalAlignment: Text.AlignVCenter
+                    }
+                    highlighted: languageBox.highlightedIndex === index
+                }
+                onActivated: {
+                    engine.nymeaConfiguration.language = currentText;
+                }
+            }
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: app.margins
+            Layout.rightMargin: app.margins
+            spacing: app.margins
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Time zone")
+            }
+            ComboBox {
+                Layout.minimumWidth: 200
+                model: engine.nymeaConfiguration.timezones
+                currentIndex: model.indexOf(engine.nymeaConfiguration.timezone)
+                onActivated: {
+                    engine.nymeaConfiguration.timezone = currentText;
+                }
+            }
+        }
+    }
+}

nymea-app/ui/system/LogViewerPage.qml

@@ -68,6 +68,11 @@ Page {
 
         ScrollBar.vertical: ScrollBar {}
 
+        BusyIndicator {
+            anchors.centerIn: parent
+            visible: listView.model.busy
+        }
+
         onContentYChanged: {
             if (!engine.jsonRpcClient.ensureServerVersion("1.10")) {
                 if (!logsModel.busy && contentY - originY < 5 * height) {

nymea-app/ui/system/WebServerConfigurationDialog.qml

@@ -0,0 +1,105 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.1
+import QtQuick.Layouts 1.1
+import Nymea 1.0
+
+Dialog {
+    id: root
+    title: qsTr("Server configuration")
+    width: parent.width * .8
+    x: (parent.width - width) / 2
+    y: (parent.height - height) / 2
+
+    property WebServerConfiguration serverConfiguration: null
+    standardButtons: Dialog.Ok | Dialog.Cancel
+
+    ColumnLayout {
+        anchors { left: parent.left; top: parent.top; right: parent.right }
+        RowLayout {
+            Label {
+                text: qsTr("Interface")
+                Layout.fillWidth: true
+            }
+            ComboBox {
+                id: interfaceCombobox
+                model: [qsTr("Any"), qsTr("Localhost"), qsTr("Custom")]
+                Layout.fillWidth: true
+                currentIndex: !root.serverConfiguration
+                              ? 0 : root.serverConfiguration.address === "0.0.0.0"
+                                ? 0
+                                : root.serverConfiguration.address === "127.0.0.1"
+                                  ? 1 : 2
+                onActivated: {
+                    switch (index) {
+                    case 0:
+                        root.serverConfiguration.address = "0.0.0.0";
+                        break;
+                    case 1:
+                        root.serverConfiguration.address = "127.0.0.1";
+                        break;
+                    }
+                }
+            }
+        }
+        RowLayout {
+            visible: interfaceCombobox.currentIndex === 2
+            Label {
+                text: qsTr("Address:")
+                Layout.fillWidth: true
+            }
+            TextField {
+                id: addressTextField
+                Layout.fillWidth: true
+                inputMethodHints: Qt.ImhPreferNumbers
+                inputMask: "000.000.000.000"
+                text: root.serverConfiguration ? root.serverConfiguration.address : ""
+                onEditingFinished: root.serverConfiguration.address = text
+            }
+        }
+
+        RowLayout {
+            Label {
+                text: qsTr("Port:")
+                Layout.fillWidth: true
+            }
+            TextField {
+                inputMethodHints: Qt.ImhDigitsOnly
+                text: root.serverConfiguration ? root.serverConfiguration.port : 0
+                validator: IntValidator { bottom: 0; top: 65535 }
+                onEditingFinished: root.serverConfiguration.port = text
+            }
+        }
+
+        RowLayout {
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("SSL enabled")
+            }
+            CheckBox {
+                checkState: root.serverConfiguration && root.serverConfiguration.sslEnabled ? Qt.Checked : Qt.Unchecked
+                onClicked: root.serverConfiguration.sslEnabled = checked
+            }
+        }
+        RowLayout {
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Login required")
+            }
+            CheckBox {
+                checkState: root.serverConfiguration && root.serverConfiguration.authenticationEnabled ? Qt.Checked : Qt.Unchecked
+                onClicked: root.serverConfiguration.authenticationEnabled = checked
+            }
+        }
+        RowLayout {
+            Label {
+                Layout.fillWidth: true
+                text: qsTr("Public folder")
+            }
+            TextField {
+                text: root.serverConfiguration ? root.serverConfiguration.publicFolder : ""
+                onEditingFinished: root.serverConfiguration.publicFolder = text
+            }
+        }
+    }
+}

nymea-app/ui/system/WebServerSettingsPage.qml

@@ -0,0 +1,76 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+import Nymea 1.0
+import "../components"
+
+Page {
+    id: root
+    header: GuhHeader {
+        text: qsTr("Web server")
+        onBackPressed: pageStack.pop();
+    }
+
+    Flickable {
+        anchors.fill: parent
+        contentHeight: connectionsColumn.implicitHeight
+        interactive: contentHeight > height
+
+        ColumnLayout {
+            id: connectionsColumn
+            anchors { left: parent.left; top: parent.top; right: parent.right }
+
+            Label {
+                Layout.fillWidth: true
+                Layout.leftMargin: app.margins
+                Layout.rightMargin: app.margins
+                Layout.topMargin: app.margins
+                text: qsTr("Web server interfaces")
+                wrapMode: Text.WordWrap
+                color: app.accentColor
+            }
+
+            Repeater {
+                model: engine.nymeaConfiguration.webServerConfigurations
+                delegate: ConnectionInterfaceDelegate {
+                    Layout.fillWidth: true
+                    canDelete: true
+                    onClicked: {
+                        var component = Qt.createComponent(Qt.resolvedUrl("WebServerConfigurationDialog.qml"));
+                        var popup = component.createObject(root, { serverConfiguration: engine.nymeaConfiguration.webServerConfigurations.get(index).clone() });
+                        popup.accepted.connect(function() {
+                            engine.nymeaConfiguration.setWebServerConfiguration(popup.serverConfiguration)
+                            popup.serverConfiguration.destroy();
+                        })
+                        popup.rejected.connect(function() {
+                            popup.serverConfiguration.destroy();
+                        })
+                        popup.open()
+                    }
+                    onDeleteClicked: {
+                        print("should delete")
+                        engine.nymeaConfiguration.deleteWebServerConfiguration(model.id)
+                    }
+                }
+            }
+            Button {
+                Layout.fillWidth: true
+                Layout.margins: app.margins
+                text: qsTr("Add")
+                onClicked: {
+                    var config = engine.nymeaConfiguration.createWebServerConfiguration("0.0.0.0", 80 + engine.nymeaConfiguration.webServerConfigurations.count, false, false, "/var/www/");
+                    var component = Qt.createComponent(Qt.resolvedUrl("WebServerConfigurationDialog.qml"));
+                    var popup = component.createObject(root, { serverConfiguration: config });
+                    popup.accepted.connect(function() {
+                        engine.nymeaConfiguration.setWebServerConfiguration(popup.serverConfiguration)
+                        popup.serverConfiguration.destroy();
+                    })
+                    popup.rejected.connect(function() {
+                        popup.serverConfiguration.destroy();
+                    })
+                    popup.open()
+                }
+            }
+        }
+    }
+}