From cf2ec248f2c8d6fabc539f2acef4df5d3c0e8b6c Mon Sep 17 00:00:00 2001 From: Maurice Kalinowski Date: Wed, 20 Sep 2017 09:35:56 +0200 Subject: 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 --- .../iot-sensortag/resources/base/BaseChart.qml | 2 +- .../iot-sensortag/resources/base/GyroChart.qml | 1 - .../iot-sensortag/resources/base/HumidityChart.qml | 2 - .../resources/base/MagnetometerChart.qml | 1 - .../iot-sensortag/resources/base/RotationPage.qml | 2 +- .../resources/base/SensorSettings.qml | 258 +++++++++++---------- .../iot-sensortag/resources/base/TopToolbar.qml | 55 +---- tradeshow/iot-sensortag/resources/base/main.qml | 16 +- 8 files changed, 153 insertions(+), 184 deletions(-) (limited to 'tradeshow/iot-sensortag/resources/base') 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++; } -- cgit v1.2.3