iot-sensortag: Redesign of example

The updated version switches the focus from having multiple sensors
locally towards showing one sensor from a list. This list can display
local or remote sensors and switch on runtime.

Also incorporated many style fixes and cleanups.

Change-Id: If7b8acbb2a784ebba95d467176e76728721c82f7
Reviewed-by: Oliver Wolff <oliver.wolff@qt.io>

8 files changed, 153 insertions, 184 deletions

diff --git a/tradeshow/iot-sensortag/resources/base/BaseChart.qml b/tradeshow/iot-sensortag/resources/base/BaseChart.qml
index d144916..7c846a5 100644
--- a/tradeshow/iot-sensortag/resources/base/BaseChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/BaseChart.qml
@@ -54,7 +54,7 @@ import SensorTag.DataProvider 1.0
 Item {
     id: baseChart
 
-    property var sensor: null
+    property var sensor: singleSensorSource
     property string title
     property alias contentItem: loader.item
     property alias content: loader.sourceComponent
diff --git a/tradeshow/iot-sensortag/resources/base/GyroChart.qml b/tradeshow/iot-sensortag/resources/base/GyroChart.qml
index 78ee163..63a9122 100644
--- a/tradeshow/iot-sensortag/resources/base/GyroChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/GyroChart.qml
@@ -92,7 +92,6 @@ BaseChart {
             anchors.left: parent.left
             anchors.leftMargin: -20
             anchors.right: parent.right
-            anchors.rightMargin: -15
             antialiasing: true
             backgroundColor: "transparent"
             legend.visible: false
diff --git a/tradeshow/iot-sensortag/resources/base/HumidityChart.qml b/tradeshow/iot-sensortag/resources/base/HumidityChart.qml
index 60d1ee7..582128f 100644
--- a/tradeshow/iot-sensortag/resources/base/HumidityChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/HumidityChart.qml
@@ -48,8 +48,6 @@
 **
 ****************************************************************************/
 import QtQuick 2.5
-import QtQuick.Controls 2.0
-import QtQuick.Controls.Styles 1.4
 import QtCharts 2.1
 import SensorTag.DataProvider 1.0
 import QtQuick.Extras 1.4
diff --git a/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml b/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml
index cf4a409..6f0d3c7 100644
--- a/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml
@@ -57,7 +57,6 @@ BaseChart {
 
     property int maxNumOfMagnReadings: 24
 
-    readonly property color chartColor: "#15bdff"
     readonly property string xColor: "#4db300"
     readonly property string yColor: "white"
     readonly property string zColor: "#f64405"
diff --git a/tradeshow/iot-sensortag/resources/base/RotationPage.qml b/tradeshow/iot-sensortag/resources/base/RotationPage.qml
index eee47c1..a153c80 100644
--- a/tradeshow/iot-sensortag/resources/base/RotationPage.qml
+++ b/tradeshow/iot-sensortag/resources/base/RotationPage.qml
@@ -53,7 +53,7 @@ import SensorTag.DataProvider 1.0
 Item {
     id: dialerRoot
 
-    property var sensor
+    property var sensor : singleSensorSource
     property var rotationUpdateInterval: sensor ? sensor.rotationUpdateInterval : 0
 
     property int sensorState: sensor ? sensor.state : SensorTagData.Disconnected
diff --git a/tradeshow/iot-sensortag/resources/base/SensorSettings.qml b/tradeshow/iot-sensortag/resources/base/SensorSettings.qml
index c9c326a..7661325 100644
--- a/tradeshow/iot-sensortag/resources/base/SensorSettings.qml
+++ b/tradeshow/iot-sensortag/resources/base/SensorSettings.qml
@@ -53,152 +53,156 @@ import Style 1.0
 import SensorTag.DataProvider 1.0
 
 Rectangle {
-    id: mainRect
+    id: sourceSelector
+    property alias sensorCount : sensorListView.count
+    property color selectedBackgroundColor : "#15bdff"
+    property color deselectedBackgroundColor: "transparent"
 
-    property alias listModelCount: list.count
+    color: "transparent"
+    width: 800
+    height: 800
+    anchors.horizontalCenter: parent.horizontalCenter
 
-    width: 620
-    height: 480
-    color: "black"
+    Image {
+        source: "images/bg_blue.jpg"
+        anchors.fill: parent
+    }
 
-    Text {
-        id: titleText
-        color: "white"
-        text: "SENSOR SETTINGS"
-        font.pixelSize: Style.indicatorTitleFontSize
-        anchors.horizontalCenter: parent.horizontalCenter
+    Image {
+        id: separator
+        source: pathPrefix + "General/separator.png"
         anchors.top: parent.top
-        anchors.topMargin: 8
+        width: parent.width
+        transform: Rotation {
+            origin.x: separator.width / 2
+            origin.y: separator.height / 2
+            angle: 180
+        }
     }
 
-    Image {
-        id: icon
+    Rectangle {
+        id: buttonRect
+        anchors.top: separator.bottom
+        anchors.margins: 20
+        color: "transparent"
+        width: parent.width - 20
+        height: 40
+
+        Rectangle {
+            border.color: "white"
+            color: localSelected ? sourceSelector.selectedBackgroundColor : sourceSelector.deselectedBackgroundColor
+            anchors.top: parent.top
+            anchors.left: parent.left
+            width: parent.width / 2
+            height: 30
+            Text {
+                text: "Local"
+                anchors.centerIn: parent
+                color: "white"
+                font.pixelSize: 26
+            }
+        }
 
-        anchors.top: titleText.bottom
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.margins: 8
-        source: pathPrefix + "Toolbar/icon_topbar_sensor.png"
+        Rectangle {
+            border.color: "white"
+            color: !localSelected ? sourceSelector.selectedBackgroundColor : sourceSelector.deselectedBackgroundColor
+            anchors.top: parent.top
+            anchors.right: parent.right
+            width: parent.width / 2
+            height: 30
+            Text {
+                text: "Remote"
+                anchors.centerIn: parent
+                color: "white"
+                font.pixelSize: 26
+            }
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: localSelected = !localSelected
+        }
     }
 
     ListView {
-        id: list
-        anchors.top: icon.bottom
-        anchors.topMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 30
-        anchors.right: parent.right
-        anchors.rightMargin: 30
-        orientation: ListView.Horizontal
-        model: dataProviderPool.dataProviders
-        height: parent.height
+        id: sensorListView
+        model: localSelected ? (localProviderPool ? localProviderPool.dataProviders : 0)
+                                            : (remoteProviderPool ? remoteProviderPool.dataProviders : 0)
+
+        width: buttonRect.width
+        anchors.top: buttonRect.bottom
+        anchors.bottom: connectButton.top
+        focus: true
         clip: true
-        snapMode: ListView.SnapToItem
-        boundsBehavior: Flickable.StopAtBounds
-
-        function getTagTypeStr(tagType) {
-            var tagStr = "";
-            if (tagType & SensorTagData.AmbientTemperature)
-                tagStr += "Ambient Temperature\n";
-            if (tagType & SensorTagData.ObjectTemperature)
-                tagStr += "Object Temperature\n";
-            if (tagType & SensorTagData.Humidity)
-                tagStr += "Humidity\n";
-            if (tagType & SensorTagData.Altitude)
-                tagStr += "Altitude\n";
-            if (tagType & SensorTagData.Light)
-                tagStr += "Light\n";
-            if (tagType & SensorTagData.Rotation)
-                tagStr += "Gyroscope\n";
-            if (tagType & SensorTagData.Magnetometer)
-                tagStr += "Magnetometer\n";
-            if (tagType & SensorTagData.Accelometer)
-                tagStr += "Accelometer\n";
-
-            return tagStr;
-        }
 
-        delegate: Item {
-            id: listItem
-            width: mainRect.width / 3
-            height: childrenRect.height
-
-            ColumnLayout {
-                spacing: 8
-
-                Text {
-                    anchors.top: parent.top
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    horizontalAlignment: Text.AlignHCenter
-                    text: providerId
-                    color: "white"
-                    font.pixelSize: 16
-                    elide: Text.ElideMiddle
-                }
-
-                BlinkingIcon {
-                    id: sensorIcon
-
-                    property bool canBlink: modelData.state === SensorTagData.Scanning
-
-                    onCanBlinkChanged: {
-                            if (canBlink)
-                                sensorIcon.startBlinking();
-                             else
-                                sensorIcon.stopBlinking();
-                    }
-
-                    source: pathPrefix + "Toolbar/icon_topbar_sensor.png"
-                    anchors.horizontalCenter: parent.horizontalCenter
-
-                    Component.onDestruction: {
-                        sensorIcon.stopBlinking()
-                    }
-
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: {
-                            if (modelData.state === SensorTagData.Connected)
-                                dataProviderPool.disconnectProvider(modelData.providerId);
-                            else if (modelData.state === SensorTagData.NotFound)
-                                dataProviderPool.startScanning();
-                            else if (modelData.state === SensorTagData.Scanning)
-                                dataProviderPool.disconnectProvider(modelData.providerId)
-                            else
-                                modelData.startServiceScan();
-                        }
-                    }
-                }
+        delegate: Rectangle {
+            border.color: "white"
+            color: ListView.isCurrentItem ? sourceSelector.selectedBackgroundColor
+                                          : sourceSelector.deselectedBackgroundColor
+            radius: 5
+            height: 30
+            width: parent.width
+            Text {
+                text: providerId
+                anchors.centerIn: parent
+                color: "white"
+                font.pixelSize: 26
+            }
+            MouseArea {
+                anchors.fill: parent
+                onClicked: sensorListView.currentIndex = index
+            }
+        }
+    }
 
-                Text {
-                    Layout.alignment: Qt.AlignHCenter
-                    text: modelData.state === SensorTagData.NotFound ? "\nNOT FOUND"
-                          : (modelData.state === SensorTagData.Disconnected) ? "\nDISCONNECTED"
-                          : (modelData.state === SensorTagData.Scanning) ? "\nCONNECTING"
-                          : (modelData.state === SensorTagData.Connected) ? "\nCONNECTED"
-                          : "Error"
-                    color: "white"
-                    font.pixelSize: 14
+    Rectangle {
+        id: connectButton
+        width: buttonRect.width / 2
+        height: 30
+        anchors.bottom: bottomSeparator.top
+        anchors.right: parent.right
+        color: sensorListView.currentIndex != -1 ? sourceSelector.selectedBackgroundColor : "transparent"
+        border.color: "white"
+        Text {
+            text: "Connect"
+            anchors.centerIn: parent
+            color: "white"
+            font.pixelSize: 26
+        }
+        MouseArea {
+            id: connectButtonArea
+            anchors.fill: parent
+            enabled: sensorListView.currentIndex != -1
+            onClicked: {
+                clickBait.deactivate()
+
+                var currentPool = getCurrentPool();
+                if (currentPool.dataProviders[sensorListView.currentIndex] === singleSensorSource) {
+                    console.log("Same data provider selected, nothing to change...")
+                    return;
                 }
 
-                Item {
-                    height: 30
-                    width: 10
-                }
+                if (singleSensorSource)
+                    singleSensorSource.endDataFetching();
+                // UI gets information about the intended setup of the
+                // sensor even though they have not been really discovered yet
+                if (currentPool) {
+                    singleSensorSource = currentPool.dataProviders[sensorListView.currentIndex]
+                    currentPool.currentProviderIndex = sensorListView.currentIndex
 
-                Text {
-                    color: "white"
-                    text: "Provides data for:"
-                    font.pixelSize: 14
-                }
+                    seriesStorage.setDataProviderPool(currentPool);
+                    seriesStorage.dataProviderPoolChanged();
 
-                Text {
-                    color: "white"
-                    lineHeight: 0.7
-                    text: list.getTagTypeStr(modelData.tagType())
-                    font.pixelSize: 14
+                    singleSensorSource.startDataFetching()
                 }
             }
         }
     }
+
+    Image {
+        id: bottomSeparator
+        source: pathPrefix + "General/separator.png"
+        anchors.bottom: parent.bottom
+        width: parent.width
+    }
 }
diff --git a/tradeshow/iot-sensortag/resources/base/TopToolbar.qml b/tradeshow/iot-sensortag/resources/base/TopToolbar.qml
index fd5054d..0d15ce1 100644
--- a/tradeshow/iot-sensortag/resources/base/TopToolbar.qml
+++ b/tradeshow/iot-sensortag/resources/base/TopToolbar.qml
@@ -57,63 +57,22 @@ Item {
     height: 100
     width: implicitWidth
 
-    CloudSettings {
-        id: cloudSettings
-
-        x: cloudItem.x
-        y: topToolbar.height
-        visible: false
-    }
-
     SensorSettings {
         id: sensorList
 
         x: sensorItem.x
         y: topToolbar.height
-        visible: false
-    }
-
-    Item {
-        id: cloudItem
-
-        height: topToolbar.height
-        anchors.top: parent.top
-        anchors.left: parent.left
-        anchors.leftMargin: 8
-        width: icon.width + cloudText.width + 3 * anchors.leftMargin
-        opacity: dataProviderPool.name === "Cloud" || dataProviderPool.name === "Demo" ? 1.0 : 0.0
-
-        Image {
-            id: icon
-            width: 58
-            height: 40
-            anchors.top: parent.top
-            anchors.margins: 8
-            source: pathPrefix + "Toolbar/icon_topbar_cloud.png"
-        }
-
-        Text {
-            id: cloudText
-            color: "white"
-            text: "CLOUD"
-            width: contentWidth
-            font.pixelSize: Style.topToolbarSmallFontSize
-            anchors.verticalCenter: icon.verticalCenter
-            anchors.left: icon.right
-            anchors.margins: 8
-        }
-
-        MouseArea {
-            anchors.fill: parent
-            onClicked: clickBait.activate(cloudSettings)
-        }
+        width: Math.min(mainWindow.width, 800)
+        height: mainWindow.height - topToolbar.height
+        visible: true
     }
 
     Item {
         id: sensorItem
         height: topToolbar.height
         anchors.top: parent.top
-        anchors.left: cloudItem.right
+        anchors.left: parent.left //cloudItem.right
+        anchors.leftMargin:  8
         width: sensorIcon.width + sensorButton.width + 3 * anchors.leftMargin
 
         Image {
@@ -127,7 +86,7 @@ Item {
 
             Text {
                 anchors.centerIn: parent
-                text: sensorList.listModelCount
+                text: sensorList.sensorCount
                 color: "white"
                 font.pixelSize: Style.topToolbarSmallFontSize
             }
@@ -233,4 +192,6 @@ Item {
                 deactivate();
         }
     }
+
+    Component.onCompleted: clickBait.activate(sensorList)
 }
diff --git a/tradeshow/iot-sensortag/resources/base/main.qml b/tradeshow/iot-sensortag/resources/base/main.qml
index 6d492d5..caa8617 100644
--- a/tradeshow/iot-sensortag/resources/base/main.qml
+++ b/tradeshow/iot-sensortag/resources/base/main.qml
@@ -55,11 +55,21 @@ import SensorTag.SeriesStorage 1.0
 Window {
     id: mainWindow
 
+    property var singleSensorSource : null
     property alias contentFile: contentLoader.source
-    property DataProviderPool dataProviderPool
+    property DataProviderPool localProviderPool
+    property DataProviderPool remoteProviderPool
     property SeriesStorage seriesStorage
     property real globalBlinkOpacity: 1.0
     property string addresses : ""
+    property bool localSelected : true
+
+    function getCurrentPool() {
+        if (localSelected)
+            return localProviderPool
+        else
+            return remoteProviderPool
+    }
 
     // Size defaults to the small display
     width: 1920
@@ -74,13 +84,11 @@ Window {
 
     Loader {
         id: contentLoader
-
+        visible: true
         anchors.fill: parent
         anchors.centerIn: parent
     }
 
-
-
     function startBlink() {
         flash.blinkers++;
     }