Start working on "experience" support

nymea-app/resources.qrc

@@ -164,5 +164,6 @@
         <file>ui/thingconfiguration/EditThingsPage.qml</file>
         <file>ui/thingconfiguration/ConfigureThingPage.qml</file>
         <file>ui/connection/CertificateDialog.qml</file>
+        <file>ui/experiences/garagegates/Main.qml</file>
     </qresource>
 </RCC>

nymea-app/ui/MainPage.qml

@@ -94,12 +94,23 @@ Page {
                     if (engine.jsonRpcClient.ensureServerVersion(1.6)) {
                         swipeView.insertItem(0, favoritesViewComponent.createObject(swipeView))
                     }
+                    swipeView.insertItem(0, experienceViewComponent.createObject(swipeView))
                     root.swipeViewReady = true;
                 }
                 onCurrentIndexChanged: {
                     root.currentViewIndex = currentIndex
                 }
 
+                Component {
+                    id: experienceViewComponent
+                    Loader {
+                        width: swipeView.width
+                        height: swipeView.height
+                        source: "experiences/garagegates/Main.qml"
+                        clip: true
+                    }
+                }
+
                 Component {
                     id: favoritesViewComponent
                     FavoritesView {
@@ -212,6 +223,7 @@ Page {
         // has troubles dealing with that. For now, let's manually fill it and use a timer to initialize the currentIndex.
         Component.onCompleted: {
             var pi = 0;
+            tabEntryComponent.createObject(tabBar, {text: qsTr("UX"), iconSource: "../images/starred.svg", pageIndex: pi++})
             if (engine.jsonRpcClient.ensureServerVersion(1.6)) {
                 tabEntryComponent.createObject(tabBar, {text: qsTr("Favorites"), iconSource: "../images/starred.svg", pageIndex: pi++})
             }

nymea-app/ui/RootItem.qml

@@ -98,10 +98,9 @@ Item {
                     }
 
                     Binding {
-                        target: _discovey
+                        target: _discovery
                         property: "discovering"
-                        when: engine.connection.currentHost === null
+                        value: engine.connection.currentHost === null
-                        value: true
                     }
 
                     Component.onCompleted: {

nymea-app/ui/components/ShutterControls.qml

@@ -6,7 +6,7 @@ import Nymea 1.0
 
 RowLayout {
     id: root
-    spacing: (parent.width - app.iconSize*2*children.length) / 4
+    spacing: (parent.width - app.iconSize*2*children.length) / children.length
 //    implicitWidth: app.iconSize * 2 * children.length + spacing * (children.length - 1)
     implicitWidth: childrenRect.width
 

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

@@ -0,0 +1,66 @@
+import QtQuick 2.3
+import QtQuick.Layouts 1.2
+import QtQuick.Controls 2.2
+import "qrc:/ui/components"
+import Nymea 1.0
+
+Item {
+
+    DevicesProxy {
+        id: garagesFilterModel
+        engine: _engine
+        shownInterfaces: ["garagegate"]
+    }
+
+    SwipeView {
+        id: swipeView
+        anchors.fill: parent
+
+        Repeater {
+            model: garagesFilterModel
+
+            Item {
+                id: garageGateView
+                width: swipeView.width
+                height: swipeView.height
+
+                readonly property Device device: garagesFilterModel.get(index)
+
+                readonly property StateType openStateType: device.deviceClass.stateTypes.findByName("state")
+                readonly property State openState: openStateType ? device.states.getState(openStateType.id) : null
+
+                readonly property StateType intermediatePositionStateType: device.deviceClass.stateTypes.findByName("intermediatePosition")
+                readonly property State intermediatePositionState: intermediatePositionStateType ? device.states.getState(intermediatePositionStateType.id) : null
+
+                ColumnLayout {
+                    anchors.fill: parent
+                    anchors.margins: app.margins
+
+                    Label {
+                        text: garageGateView.device.name
+                        font.pixelSize: app.largeFont
+                        Layout.fillWidth: true
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+
+                    ColorIcon {
+                        name: "qrc:/ui/images/shutter/shutter-" + currentImage + ".svg"
+                        Layout.fillWidth: true
+                        Layout.preferredHeight: width
+
+                        property string currentImage: garageGateView.openState.value === "closed" ? "100" :
+                                                garageGateView.openState.value === "open" && garageGateView.intermediatePositionState.value === false ? "000" : "050"
+
+                    }
+
+                    ShutterControls {
+                        id: controls
+                        Layout.fillWidth: true
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        device: garageGateView.device
+                    }
+                }
+            }
+        }
+    }
+}