some improvements

guh-control/jsonrpc/devicehandler.cpp

@@ -73,7 +73,7 @@ void DeviceHandler::processGetSupportedDevices(const QVariantMap &params)
         QVariantList deviceClassList = params.value("params").toMap().value("deviceClasses").toList();
         foreach (QVariant deviceClassVariant, deviceClassList) {
             DeviceClass *deviceClass = JsonTypes::unpackDeviceClass(deviceClassVariant.toMap(), Engine::instance()->deviceManager()->deviceClasses());
-            qDebug() << "Server has device class:" << deviceClass->name();
+            qDebug() << "Server has device class:" << deviceClass->name() << deviceClass->id();
             Engine::instance()->deviceManager()->deviceClasses()->addDeviceClass(deviceClass);
         }
     }

guh-control/resources.qrc

@@ -1,7 +1,6 @@
 <RCC>
     <qresource prefix="/">
         <file>ui/ConnectPage.qml</file>
-        <file>ui/DevicePage.qml</file>
         <file>ui/DevicesPage.qml</file>
         <file>ui/main.qml</file>
         <file>ui/NewDeviceWizard.qml</file>
@@ -43,5 +42,13 @@
         <file>ui/customviews/MediaControllerView.qml</file>
         <file>ui/LoginPage.qml</file>
         <file>ui/customviews/SensorView.qml</file>
+        <file>ui/devicepages/GenericDevicePage.qml</file>
+        <file>ui/devicepages/MediaDevicePage.qml</file>
+        <file>ui/devicelistpages/GenericDeviceListPage.qml</file>
+        <file>ui/devicelistpages/LightsDeviceListPage.qml</file>
+        <file>ui/customviews/ExtendedVolumeController.qml</file>
+        <file>ui/components/ColorIcon.qml</file>
+        <file>ui/images/torch-on.svg</file>
+        <file>ui/images/media-preview-start.svg</file>
     </qresource>
 </RCC>

guh-control/ui/DevicesPage.qml

@@ -18,19 +18,6 @@ Page {
         }
     }
 
-    function interfaceToString(name) {
-        switch(name) {
-        case "light":
-            return "Lighting"
-        case "weather":
-            return "Weather"
-        case "sensor":
-            return "Sensor"
-        case "media":
-            return "Media"
-        }
-    }
-
     SwipeView {
         anchors.fill: parent
         clip: true
@@ -61,25 +48,38 @@ Page {
                         anchors.fill: parent
                         anchors.margins: app.margins
 //                        color: "#22000000"
-                        Material.elevation: 2
+                        Material.elevation: 1
-                        Label {
+                        Column {
                             anchors.centerIn: parent
-                            text: root.interfaceToString(model.name)
+                            spacing: app.margins
+                            ColorIcon {
+                                height: app.iconSize * 2
+                                width: height
+                                color: app.guhAccent
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                name: interfaceToIcon(model.name)
+                            }
+
+                            Label {
+                                text: interfaceToString(model.name).toUpperCase()
+                                anchors.horizontalCenter: parent.horizontalCenter
+                            }
+
                         }
+
                         MouseArea {
                             anchors.fill: parent
                             onClicked: {
-                                print("kkkkklick", model.name)
                                 var page;
                                 switch (model.name) {
                                 case "light":
-                                    page = lightsPageComponent;
+                                    page = "LightsDeviceListPage.qml"
                                     break;
                                 default:
-                                    page = subPageComponent
+                                    page = "GenericDeviceListPage.qml"
                                 }
 
-                                pageStack.push(page, {filterInterface: model.name})
+                                pageStack.push(Qt.resolvedUrl("devicelistpages/" + page), {filterInterface: model.name})
                             }
                         }
                     }
@@ -122,7 +122,7 @@ Page {
                         MouseArea {
                             anchors.fill: parent
                             onClicked: {
-                                pageStack.push(subPageComponent, {filterTag: model.tag})
+                                pageStack.push(Qt.resolvedUrl("devicelistpages/GenericDeviceListPage.qml"), {filterTag: model.tag})
                             }
                         }
                     }
@@ -141,155 +141,4 @@ Page {
             }
         }
     }
-
-    Component {
-        id: lightsPageComponent
-
-
-        Page {
-            property alias filterInterface: devicesProxy.filterInterface
-            header: GuhHeader {
-                text: "Lights"
-                onBackPressed: pageStack.pop()
-            }
-            ColumnLayout {
-                anchors.fill: parent
-                RowLayout {
-                    Layout.fillWidth: true
-                    Layout.margins: 10
-                    Label {
-                        text: "All"
-                        Layout.fillWidth: true
-                    }
-                    Button {
-                        text: "off"
-                        onClicked: {
-                            for (var i = 0; i < devicesProxy.count; i++) {
-                                var device = devicesProxy.get(i);
-                                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
-                                var actionType = deviceClass.actionTypes.findByName("power");
-
-                                var params = [];
-                                var param1 = {};
-                                param1["paramTypeId"] = actionType.paramTypes.get(0).id;
-                                param1["value"] = checked;
-                                params.push(param1)
-                                Engine.jsonRpcClient.executeAction(device.id, actionType.id, params)
-
-
-                            }
-                        }
-                    }
-                }
-
-                ListView {
-                    Layout.fillHeight: true
-                    Layout.fillWidth: true
-                    model: DevicesProxy {
-                        id: devicesProxy
-                        devices: Engine.deviceManager.devices
-                    }
-
-                    delegate: ItemDelegate {
-                        width: parent.width
-                        height: childrenRect.height
-                        property var device: devicesProxy.get(index);
-                        property var deviceClass: Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
-
-                        ColumnLayout {
-                            anchors { left: parent.left; right: parent.right; top: parent.top }
-                            RowLayout {
-                                Layout.fillWidth: true
-                                Layout.margins: 10
-                                Label {
-                                    Layout.fillWidth: true
-                                    text: model.name
-                                    verticalAlignment: Text.AlignVCenter
-                                }
-                                Slider {
-                                    visible: model.interfaces.indexOf("dimmablelight") >= 0
-                                    property var stateType: deviceClass.stateTypes.findByName("brightnes");
-                                    property var actionType: deviceClass.actionTypes.findByName("brightness");
-                                    from: 0; to: 100
-                                    value: device.stateValue(stateType.id)
-                                    onValueChanged: {
-                                        if (pressed) {
-                                            var params = [];
-                                            var param1 = {};
-                                            param1["paramTypeId"] = actionType.paramTypes.get(0).id;
-                                            param1["value"] = value;
-                                            params.push(param1)
-                                            Engine.jsonRpcClient.executeAction(device.id, actionType.id, params)
-                                        }
-                                    }
-                                }
-                                Switch {
-                                    property var stateType: deviceClass.stateTypes.findByName("power");
-                                    property var actionType: deviceClass.actionTypes.findByName("power");
-                                    checked: device.stateValue(stateType.id) === true
-                                    onClicked: {
-                                        var params = [];
-                                        var param1 = {};
-                                        param1["paramTypeId"] = actionType.paramTypes.get(0).id;
-                                        param1["value"] = checked;
-                                        params.push(param1)
-                                        Engine.jsonRpcClient.executeAction(device.id, actionType.id, params)
-                                    }
-
-                                }
-                            }
-                        }
-
-
-                        onClicked: {
-                            pageStack.push(Qt.resolvedUrl("DevicePage.qml"), {device: devicesProxy.get(index)})
-                        }
-                    }
-
-                }
-            }
-        }
-    }
-
-    Component {
-        id: subPageComponent
-        Page {
-            id: subPage
-            property alias filterTag: devicesProxy.filterTag
-            property alias filterInterface: devicesProxy.filterInterface
-
-            header: GuhHeader {
-                text: {
-                    if (subPage.filterTag != DeviceClass.BasicTagNone) {
-                        return qsTr("My %1 things").arg(devicesBasicTagsModel.basicTagToString(subPage.filterTag))
-                    } else if (subPage.filterInterface.length > 0) {
-                        return qsTr("My %1 things").arg(root.interfaceToString(subPage.filterInterface))
-                    }
-                    return qsTr("All my things")
-                }
-
-                onBackPressed: pageStack.pop()
-            }
-
-            ListView {
-                anchors.fill: parent
-                model: DevicesProxy {
-                    id: devicesProxy
-                    devices: Engine.deviceManager.devices
-                }
-                delegate: ItemDelegate {
-                    width: parent.width
-                    Label {
-                        anchors { fill: parent; leftMargin: app.margins; rightMargin: app.margins }
-                        text: model.name
-                        verticalAlignment: Text.AlignVCenter
-                    }
-
-                    onClicked: {
-                        pageStack.push(Qt.resolvedUrl("DevicePage.qml"), {device: devicesProxy.get(index)})
-                    }
-                }
-            }
-        }
-    }
 }

guh-control/ui/MainPage.qml

@@ -1,9 +1,11 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
+import QtQuick.Controls.Material 2.2
 
 Page {
     id: root
     footer: TabBar {
+        Material.elevation: 2
         TabButton {
             text: "Things"
             onClicked: mainSwipeView.currentIndex = 0

guh-control/ui/components/ColorIcon.qml

@@ -0,0 +1,124 @@
+/*
+ * Copyright (C) 2013 Canonical, Ltd.
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; version 3.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.4
+
+/*!
+    \qmltype Icon
+    \inqmlmodule Ubuntu.Components 0.1
+    \ingroup ubuntu
+    \brief The Icon component displays an icon from the icon theme.
+
+    The icon theme contains a set of standard icons referred to by their name.
+    Using icons whenever possible enhances consistency accross applications.
+    Each icon has a name and can have different visual representations depending
+    on the size requested.
+
+    Icons can also be colorized. Setting the \l color property will make all pixels
+    with the \l keyColor (by default #808080) colored.
+
+    Example:
+    \qml
+    Icon {
+        width: 64
+        height: 64
+        name: "search"
+    }
+    \endqml
+
+    Example of colorization:
+    \qml
+    Icon {
+        width: 64
+        height: 64
+        name: "search"
+        color: UbuntuColors.warmGrey
+    }
+    \endqml
+
+    Icon themes are created following the
+    \l{http://standards.freedesktop.org/icon-theme-spec/icon-theme-spec-latest.html}{Freedesktop Icon Theme Specification}.
+*/
+Item {
+    id: icon
+
+    /*!
+       The name of the icon to display.
+       \qmlproperty string name
+    */
+    property string name
+
+    /*!
+       The color that all pixels that originally are of color \l keyColor should take.
+       \qmlproperty color color
+    */
+    property alias color: colorizedImage.keyColorOut
+
+    /*!
+       The color of the pixels that should be colorized.
+       By default it is set to #808080.
+       \qmlproperty color keyColor
+    */
+    property alias keyColor: colorizedImage.keyColorIn
+
+    property int margins: 0
+
+    Image {
+        id: image
+
+        /* Necessary so that icons are not loaded before a size is set. */
+        property bool ready: false
+        Component.onCompleted: ready = true
+
+        anchors.fill: parent
+        anchors.margins: parent.margins
+        source: ready && width > 0 && height > 0 && icon.name ? icon.name : ""
+        sourceSize {
+            width: width
+            height: height
+        }
+        cache: true
+        visible: !colorizedImage.active
+    }
+
+    ShaderEffect {
+        id: colorizedImage
+
+        anchors.fill: parent
+        anchors.margins: parent.margins
+        visible: active && image.status == Image.Ready
+
+        // Whether or not a color has been set.
+        property bool active: keyColorOut != Qt.rgba(0.0, 0.0, 0.0, 0.0)
+
+        property Image source: image
+        property color keyColorOut: Qt.rgba(0.0, 0.0, 0.0, 0.0)
+        property color keyColorIn: "#808080"
+        property real threshold: 0.1
+
+        fragmentShader: "
+            varying highp vec2 qt_TexCoord0;
+            uniform sampler2D source;
+            uniform highp vec4 keyColorOut;
+            uniform highp vec4 keyColorIn;
+            uniform lowp float threshold;
+            uniform lowp float qt_Opacity;
+            void main() {
+                lowp vec4 sourceColor = texture2D(source, qt_TexCoord0);
+                gl_FragColor = mix(vec4(keyColorOut.rgb, 1.0) * sourceColor.a, sourceColor, step(threshold, distance(sourceColor.rgb / sourceColor.a, keyColorIn.rgb))) * qt_Opacity;
+            }"
+    }
+}

guh-control/ui/components/GuhHeader.qml

@@ -1,16 +1,23 @@
 import QtQuick 2.5
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.1
+import QtQuick.Controls.Material 2.2
 
 ToolBar {
     id: root
+    Material.elevation: 1
 
-    property alias text: label.text
+    property string text
     property alias backButtonVisible: backButton.visible
     default property alias data: layout.data
 
     signal backPressed();
 
+    Rectangle {
+        anchors.fill: parent
+        color: "#fefefe"
+    }
+
     RowLayout {
         id: layout
         anchors { fill: parent; leftMargin: app.margins; rightMargin: app.margins }
@@ -26,6 +33,8 @@ ToolBar {
             Layout.fillHeight: true
             verticalAlignment: Text.AlignVCenter
             font.pixelSize: app.largeFont
+            color: "#333"
+            text: root.text.toUpperCase()
         }
     }
 }

guh-control/ui/customviews/ExtendedVolumeController.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.5
+import QtQuick.Layouts 1.1
+import QtQuick.Controls 2.1
+import Guh 1.0
+
+CustomViewBase {
+    id: root
+    height: row.implicitHeight + app.margins * 2
+
+    RowLayout {
+        id: row
+        anchors { left: parent.left; top: parent.top; right: parent.right; margins: app.margins }
+        Button {
+            property var muteState: root.device.states.getState(deviceClass.stateTypes.findByName("mute").id)
+            property bool isMuted: muteState.value
+            text: isMuted ? "unmute" : "mute"
+            onClicked: {
+                var paramList = []
+                var muteParam = {}
+                muteParam["paramTypeId"] = deviceClass.stateTypes.findByName("mute").id
+                muteParam["value"] = !isMuted
+                paramList.push(muteParam)
+                Engine.jsonRpcClient.executeAction(root.device.id, deviceClass.actionTypes.findByName("mute").id, paramList)
+            }
+        }
+
+        Slider {
+            Layout.fillWidth: true
+            value: root.device.stateValue(deviceClass.stateTypes.findByName("volume").id)
+            from: 0
+            to: 100
+            onValueChanged: {
+                if (pressed) {
+                    var paramList = []
+                    var muteParam = {}
+                    muteParam["paramTypeId"] = deviceClass.stateTypes.findByName("volume").id
+                    muteParam["value"] = value
+                    paramList.push(muteParam)
+                    Engine.jsonRpcClient.executeAction(root.device.id, deviceClass.actionTypes.findByName("volume").id, paramList)
+                }
+            }
+        }
+    }
+}

guh-control/ui/customviews/MediaControllerView.qml

@@ -13,6 +13,8 @@ CustomViewBase {
         Engine.jsonRpcClient.executeAction(device.id, actionTypeId)
     }
 
+    property var playbackState: device.states.getState(deviceClass.stateTypes.findByName("playbackStatus").id)
+
     ColumnLayout {
         id: column
         anchors { left: parent.left; right: parent.right }
@@ -32,19 +34,21 @@ CustomViewBase {
                 }
             }
             Button {
-                text: "X"
+                text: "X"+ playbackState.value
                 onClicked: {
                     executeAction("stop")
                 }
             }
             Button {
                 text: ">"
+                visible: playbackState.value == "PAUSED"
                 onClicked: {
                     executeAction("play")
                 }
             }
             Button {
                 text: "||"
+                visible: playbackState.value == "PLAYING"
                 onClicked: {
                     executeAction("pause")
                 }

guh-control/ui/devicelistpages/GenericDeviceListPage.qml

@@ -0,0 +1,51 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.Layouts 1.1
+import Guh 1.0
+import "../components"
+
+Page {
+    id: subPage
+    property alias filterTag: devicesProxy.filterTag
+    property alias filterInterface: devicesProxy.filterInterface
+
+    header: GuhHeader {
+        text: {
+            if (subPage.filterTag != DeviceClass.BasicTagNone) {
+                return qsTr("My %1 things").arg(devicesBasicTagsModel.basicTagToString(subPage.filterTag))
+            } else if (subPage.filterInterface.length > 0) {
+                return qsTr("My %1 things").arg(interfaceToString(subPage.filterInterface))
+            }
+            return qsTr("All my things")
+        }
+
+        onBackPressed: pageStack.pop()
+    }
+
+    ListView {
+        anchors.fill: parent
+        model: DevicesProxy {
+            id: devicesProxy
+            devices: Engine.deviceManager.devices
+        }
+        delegate: ItemDelegate {
+            width: parent.width
+            Label {
+                anchors { fill: parent; leftMargin: app.margins; rightMargin: app.margins }
+                text: model.name
+                verticalAlignment: Text.AlignVCenter
+            }
+
+            onClicked: {
+                var device = devicesProxy.get(index);
+                var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                print("clicked", deviceClass.interfaces)
+                if (deviceClass.interfaces.indexOf("media") >= 0) {
+                    pageStack.push(Qt.resolvedUrl("../devicepages/MediaDevicePage.qml"), {device: devicesProxy.get(index)})
+                } else {
+                    pageStack.push(Qt.resolvedUrl("../devicepages/GenericDevicePage.qml"), {device: devicesProxy.get(index)})
+                }
+            }
+        }
+    }
+}

guh-control/ui/devicelistpages/LightsDeviceListPage.qml

@@ -0,0 +1,107 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.Layouts 1.1
+import Guh 1.0
+import "../components"
+
+Page {
+    property alias filterInterface: devicesProxy.filterInterface
+    header: GuhHeader {
+        text: "Lights"
+        onBackPressed: pageStack.pop()
+    }
+    ColumnLayout {
+        anchors.fill: parent
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.margins: 10
+            Label {
+                text: "All"
+                Layout.fillWidth: true
+            }
+            Button {
+                text: "off"
+                onClicked: {
+                    for (var i = 0; i < devicesProxy.count; i++) {
+                        var device = devicesProxy.get(i);
+                        var deviceClass = Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+                        var actionType = deviceClass.actionTypes.findByName("power");
+
+                        var params = [];
+                        var param1 = {};
+                        param1["paramTypeId"] = actionType.paramTypes.get(0).id;
+                        param1["value"] = checked;
+                        params.push(param1)
+                        Engine.jsonRpcClient.executeAction(device.id, actionType.id, params)
+                    }
+                }
+            }
+        }
+
+        ListView {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            model: DevicesProxy {
+                id: devicesProxy
+                devices: Engine.deviceManager.devices
+            }
+
+            delegate: ItemDelegate {
+                width: parent.width
+                height: childrenRect.height
+                property var device: devicesProxy.get(index);
+                property var deviceClass: Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId);
+
+                ColumnLayout {
+                    anchors { left: parent.left; right: parent.right; top: parent.top }
+                    RowLayout {
+                        Layout.fillWidth: true
+                        Layout.margins: 10
+                        Label {
+                            Layout.fillWidth: true
+                            text: model.name
+                            verticalAlignment: Text.AlignVCenter
+                        }
+                        Slider {
+                            visible: model.interfaces.indexOf("dimmablelight") >= 0
+                            property var stateType: deviceClass.stateTypes.findByName("brightness");
+                            property var actionType: deviceClass.actionTypes.findByName("brightness");
+                            from: 0; to: 100
+                            value: device.stateValue(stateType.id)
+                            onValueChanged: {
+                                if (pressed) {
+                                    var params = [];
+                                    var param1 = {};
+                                    param1["paramTypeId"] = actionType.paramTypes.get(0).id;
+                                    param1["value"] = value;
+                                    params.push(param1)
+                                    Engine.jsonRpcClient.executeAction(device.id, actionType.id, params)
+                                }
+                            }
+                        }
+                        Switch {
+                            property var stateType: deviceClass.stateTypes.findByName("power");
+                            property var actionType: deviceClass.actionTypes.findByName("power");
+                            checked: device.stateValue(stateType.id) === true
+                            onClicked: {
+                                var params = [];
+                                var param1 = {};
+                                param1["paramTypeId"] = actionType.paramTypes.get(0).id;
+                                param1["value"] = checked;
+                                params.push(param1)
+                                Engine.jsonRpcClient.executeAction(device.id, actionType.id, params)
+                            }
+
+                        }
+                    }
+                }
+
+
+                onClicked: {
+                    pageStack.push(Qt.resolvedUrl("../devicepages/GenericDevicePage.qml"), {device: devicesProxy.get(index)})
+                }
+            }
+
+        }
+    }
+}

guh-control/ui/devicepages/GenericDevicePage.qml

@@ -2,7 +2,7 @@ import QtQuick 2.5
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.1
 import Guh 1.0
-import "components"
+import "../components"
 
 Page {
     id: root
@@ -15,7 +15,7 @@ Page {
         onBackPressed: pageStack.pop()
 
         HeaderButton {
-            imageSource: "images/info.svg"
+            imageSource: "../images/info.svg"
             onClicked: pageStack.push(deviceStateDetailsPage)
         }
     }
@@ -43,16 +43,16 @@ Page {
                     var src = "";
                     print("**** devicetags", deviceClass.basicTags)
                     if (deviceClass.interfaces.indexOf("weather") >= 0) {
-                        src = "customviews/WeatherView.qml";
+                        src = "WeatherView.qml";
                     }
                     if (deviceClass.interfaces.indexOf("mediacontroller") >= 0) {
-                        src = "customviews/MediaControllerView.qml"
+                        src = "MediaControllerView.qml"
                     }
                     if (deviceClass.interfaces.indexOf("sensor") >= 0) {
-                        src = "customviews/SensorView.qml"
+                        src = "SensorView.qml"
                     }
 
-                    return Qt.resolvedUrl(src);
+                    return Qt.resolvedUrl("../customviews/" + src);
                 }
                 Binding {
                     target: stateViewLoader.item ? stateViewLoader.item : null
@@ -99,7 +99,7 @@ Page {
                                     delegate = "ActionDelegateStringFromStringList.qml";
                                 }
                             }
-                            return Qt.resolvedUrl("actiondelegates/" + delegate);
+                            return Qt.resolvedUrl("../actiondelegates/" + delegate);
                         }
 
                         Binding {

guh-control/ui/devicepages/MediaDevicePage.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.5
+import QtQuick.Controls 2.1
+import QtQuick.Layouts 1.1
+import Guh 1.0
+import "../components"
+import "../customviews"
+
+Page {
+    id: root
+    property var device: null
+    readonly property var deviceClass: Engine.deviceManager.deviceClasses.getDeviceClass(device.deviceClassId)
+
+
+    header: GuhHeader {
+        text: device.name
+        onBackPressed: pageStack.pop()
+
+        HeaderButton {
+            imageSource: "../images/info.svg"
+            onClicked: pageStack.push(deviceStateDetailsPage)
+        }
+    }
+
+
+    ColumnLayout {
+        id: contentColumn
+        anchors.fill: parent
+        spacing: app.margins
+
+        ExtendedVolumeController {
+            Layout.fillWidth: true
+            device: root.device
+            deviceClass: root.deviceClass
+//            visible: deviceClass.interfaces.indexOf("extendedvolumecontroller") >= 0
+        }
+
+        MediaControllerView {
+            Layout.fillWidth: true
+            device: root.device
+            deviceClass: root.deviceClass
+            visible: root.deviceClass.interfaces.indexOf("mediacontroller") >= 0
+        }
+    }
+}

guh-control/ui/images/media-preview-start.svg

@@ -0,0 +1,183 @@
+<?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="media-preview-start.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.6893488"
+     inkscape:cx="-85.550172"
+     inkscape:cy="52.466228"
+     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="false"
+     inkscape:snap-smooth-nodes="false"
+     inkscape:snap-midpoints="false"
+     inkscape:snap-object-midpoints="true"
+     inkscape:snap-center="true"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-others="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid5451"
+       empspacing="8" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="8,-8.0000001"
+       id="guide4063"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="4,-8.0000001"
+       id="guide4065"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,88.000001"
+       id="guide4067"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,92.000001"
+       id="guide4069"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="104,4"
+       id="guide4071"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,8.0000001"
+       id="guide4073"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="92,-8.0000001"
+       id="guide4075"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="88,-8.0000001"
+       id="guide4077"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-8,84.000001"
+       id="guide4074"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="12,-8.0000001"
+       id="guide4076"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="-5,12"
+       id="guide4078"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       orientation="1,0"
+       position="84,-9.0000001"
+       id="guide4080"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="48,-8.0000001"
+       orientation="1,0"
+       id="guide4170"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="-8,48"
+       orientation="0,1"
+       id="guide4172"
+       inkscape:locked="false" />
+  </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">
+          <path
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
+             d="m 412.49269,407.36028 h -45.01455 c 0,0 10.62657,-23.74835 22.50606,-39.99806 11.87947,16.24971 22.50849,39.99806 22.50849,39.99806 z"
+             id="path4205"
+             inkscape:connector-curvature="0" />
+          <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)" />
+        </g>
+        <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;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.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 143.99999,1004.3613 c 0,23.1727 18.83506,42 42.01562,42 23.18057,0 42.01758,-18.8273 42.01758,-42 0,-23.17263 -18.83701,-41.99995 -42.01758,-41.99995 -23.18056,0 -42.01562,18.82732 -42.01562,41.99995 z m 4.00195,0 c 0,-21.00959 16.99444,-37.998 38.01367,-37.998 21.01924,0 38.01563,16.98841 38.01563,37.998 0,21.0096 -16.99639,38 -38.01563,38 -21.01923,0 -38.01367,-16.9904 -38.01367,-38 z"
+           id="path4116"
+           inkscape:connector-curvature="0" />
+      </g>
+    </g>
+  </g>
+</svg>

guh-control/ui/images/torch-on.svg

@@ -0,0 +1,234 @@
+<?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="torch-on.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="-27.468874"
+     inkscape:cy="59.858737"
+     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="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="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)" />
+          <rect
+             y="-349.96762"
+             x="-401.36221"
+             height="4.0015826"
+             width="15.999994"
+             id="rect4577"
+             style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#808080;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;enable-background:accumulate"
+             transform="matrix(0,-1,-1,0,0,0)" />
+          <path
+             style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:normal;font-family:sans-serif;-inkscape-font-specification:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;color-interpolation:sRGB;color-interpolation-filters:linearRGB;fill:#808080;fill-opacity:1;stroke:none;stroke-width:5.25000048;marker:none;enable-background:accumulate"
+             d="M 48 21 C 33.12385 21 21 33.097419 21 47.941406 C 21 57.252822 25.77425 65.458306 33 70.294922 L 33 75.019531 C 33 76.682513 33.10727 78.098921 33.59375 79.478516 C 34.08023 80.85823 35.1461 82.174071 36.4375 82.876953 C 39.02031 84.282707 41.5 84 45 84 L 51 84 C 54.5 84 56.9797 84.282707 59.5625 82.876953 C 60.8539 82.174071 61.91977 80.85823 62.40625 79.478516 C 62.89273 78.098921 63 76.682513 63 75.019531 L 63 70.294922 C 70.22575 65.458306 75 57.252822 75 47.941406 C 75 33.097419 62.87615 21 48 21 z M 48 25 C 60.70479 25 71 35.267049 71 47.945312 C 71 56.615463 66.10833 64.02326 59 67.917969 L 59 73.3125 L 59 75.007812 C 59.00001 75.978489 58.84292 76.919658 58.34375 77.759766 C 57.84458 78.599873 57.006669 79.196066 56.199219 79.498047 C 54.584309 80.102028 53.00001 80 51 80 L 45 80 C 43.00001 80 41.413738 80.102028 39.798828 79.498047 C 38.991378 79.196066 38.153467 78.599863 37.654297 77.759766 C 37.155127 76.919668 36.998047 75.978489 36.998047 75.007812 L 36.998047 73.3125 L 36.998047 67.917969 C 29.889717 64.02326 24.998047 56.615463 24.998047 47.945312 C 24.998047 35.267049 35.29521 25 48 25 z "
+             transform="matrix(0,-1,-1.0003957,0,438.00245,441.36222)"
+             id="path4721" />
+          <path
+             style="display:inline;fill:#808080"
+             id="path3851-2"
+             sodipodi:nodetypes="ccccccc"
+             inkscape:connector-curvature="0"
+             d="m 369.11161,391.86282 21.00831,9.59939 0,-7.28819 15.00595,0.6894 -21.00833,-9.60119 0,7.38899 z" />
+          <path
+             inkscape:connector-curvature="0"
+             id="path5579"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 436.00168,390.36222 -2.31751,0 q -2.27116,0 -4.7741,0.37114 -2.45656,0.37111 -4.91314,0.92782 l 0,3.40208 q 2.45658,0.55671 4.91314,0.92782 2.50294,0.37114 4.82044,0.37114 l 2.27117,0 0,-6 z"
+             inkscape:transform-center-y="-40.000019" />
+          <path
+             inkscape:transform-center-y="-34.965771"
+             d="m 428.33581,367.76413 -2.00702,1.1583 q -1.96688,1.13513 -3.94885,2.70752 -1.94181,1.54919 -3.79081,3.25912 l 1.70172,2.94629 q 2.40592,-0.74568 4.71899,-1.65209 2.35326,-0.92956 4.36027,-2.08785 l 1.96689,-1.13513 -3.00119,-5.19616 z"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             id="path4702"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="-20.562475" />
+          <path
+             inkscape:transform-center-x="-34.965775"
+             inkscape:connector-curvature="0"
+             id="path4704"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 410.39346,352.02503 -1.15875,2.00623 q -1.13558,1.96611 -2.06551,4.31843 -0.90675,2.31216 -1.65273,4.71713 l 2.94746,1.70104 q 1.7106,-1.84826 3.26039,-3.78931 1.57302,-1.98119 2.73177,-3.9874 l 1.13559,-1.96611 -5.19822,-3.00001 z"
+             inkscape:transform-center-y="-20.56248" />
+          <path
+             d="m 386.98227,347.3622 0,2.31659 q 0,2.27027 0.37129,4.77222 0.37126,2.45558 0.92819,4.91119 l 3.40343,0 q 0.55693,-2.4556 0.92818,-4.91119 0.37128,-2.50196 0.37129,-4.81854 l 1e-5,-2.27027 -6.00239,0 z"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             id="path4706"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="-40.00002" />
+          <path
+             inkscape:transform-center-x="-34.965775"
+             inkscape:connector-curvature="0"
+             id="path4708"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 364.37524,355.02504 1.15876,2.00622 q 1.13558,1.96612 2.7086,3.9473 1.54979,1.94103 3.2604,3.7893 l 2.94746,-1.70104 q -0.74597,-2.40497 -1.65274,-4.71712 -0.92994,-2.35233 -2.08868,-4.35855 l -1.13557,-1.96612 -5.19823,3.00001 z"
+             inkscape:transform-center-y="20.56248" />
+          <path
+             inkscape:transform-center-y="-34.965771"
+             d="m 431.337,413.76415 -2.00702,-1.15829 q -1.96688,-1.13513 -4.32014,-2.06469 -2.31307,-0.90641 -4.71899,-1.65209 l -1.70172,2.94629 q 1.849,1.70993 3.79081,3.25912 1.98197,1.57239 3.98898,2.73068 l 1.96689,1.13514 3.00119,-5.19616 z"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             id="path4710"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="20.562475" />
+          <path
+             inkscape:transform-center-x="34.965775"
+             inkscape:connector-curvature="0"
+             id="path4712"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 415.59168,431.6994 -1.15876,-2.00622 q -1.13558,-1.9661 -2.7086,-3.94729 -1.54979,-1.94105 -3.26039,-3.78931 l -2.94746,1.70104 q 0.74598,2.40497 1.65273,4.71713 0.92993,2.35232 2.08868,4.35854 l 1.13558,1.96612 5.19822,-3.00001 z"
+             inkscape:transform-center-y="-20.56248" />
+          <path
+             d="m 392.98466,439.36224 -1e-5,-2.31659 q -10e-6,-2.27026 -0.37129,-4.77222 -0.37125,-2.45559 -0.92818,-4.91119 l -3.40343,0 q -0.55693,2.45561 -0.92819,4.91119 -0.37129,2.50195 -0.37129,4.81854 l 0,2.27027 6.00239,0 z"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             id="path4714"
+             inkscape:connector-curvature="0"
+             inkscape:transform-center-x="40.00002" />
+          <path
+             inkscape:transform-center-x="34.965775"
+             inkscape:connector-curvature="0"
+             id="path4716"
+             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:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;display:inline;fill:#808080;fill-opacity:1;stroke:none"
+             d="m 369.57347,434.69941 1.15874,-2.00623 q 1.13557,-1.96611 2.06551,-4.31844 0.90677,-2.31215 1.65274,-4.71712 l -2.94746,-1.70104 q -1.71061,1.84827 -3.2604,3.7893 -1.57302,1.98118 -2.73177,3.98741 l -1.13559,1.96611 5.19823,3.00001 z"
+             inkscape:transform-center-y="20.56248" />
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>

guh-control/ui/main.qml

@@ -10,14 +10,16 @@ ApplicationWindow {
     width: 270 * 1.5
     height: 480 * 1.5
 
+    property color guhAccent: "#ff57baae"
 //    Material.primary: "#ff57baae"
     Material.primary: "white"
-    Material.accent: "#ff57baae"
+    Material.accent: guhAccent
 
     property int margins: 10
     property int bigMargins: 20
     property int smallFont: 10
     property int largeFont: 20
+    property int iconSize: 30
     property int delegateHeight: 60
 
     Settings {
@@ -74,6 +76,28 @@ ApplicationWindow {
         id: discovery
     }
 
+    function interfaceToString(name) {
+        switch(name) {
+        case "light":
+            return "Lighting"
+        case "weather":
+            return "Weather"
+        case "sensor":
+            return "Sensor"
+        case "media":
+            return "Media"
+        }
+    }
+
+    function interfaceToIcon(name) {
+        switch (name) {
+        case "light":
+            return Qt.resolvedUrl("images/torch-on.svg")
+        case "media":
+            return Qt.resolvedUrl("images/media-preview-start.svg")
+        }
+    }
+
 //    ZeroconfDiscovery {
 //        id: discovery
 //    }