From 5186e98744a945df4252dc12a2fc36f8af6b87e0 Mon Sep 17 00:00:00 2001 From: Titta Heikkala Date: Mon, 6 Feb 2017 14:39:16 +0200 Subject: iot-sensortag: Update Gyro, Magnetometer and Ambient Temperature charts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated appearance and graphics of gyro, magnetometer and ambient temperature charts. Change-Id: I72c6c7b3d10692b838828a63551876dbe6918152 Reviewed-by: Kari Hautamäki --- .../iot-sensortag/resources/base/GyroChart.qml | 77 ++++++++--------- .../resources/base/MagnetometerChart.qml | 95 ++++++++++++--------- .../resources/base/TemperatureChart.qml | 5 +- .../resources/small/images/Magnetometer/grid.png | Bin 0 -> 41105 bytes tradeshow/iot-sensortag/uismall.qrc | 1 + 5 files changed, 91 insertions(+), 87 deletions(-) create mode 100644 tradeshow/iot-sensortag/resources/small/images/Magnetometer/grid.png (limited to 'tradeshow/iot-sensortag') diff --git a/tradeshow/iot-sensortag/resources/base/GyroChart.qml b/tradeshow/iot-sensortag/resources/base/GyroChart.qml index 2fb175c..e14bc62 100644 --- a/tradeshow/iot-sensortag/resources/base/GyroChart.qml +++ b/tradeshow/iot-sensortag/resources/base/GyroChart.qml @@ -61,7 +61,7 @@ BaseChart { readonly property string xColor: "#15bdff" readonly property string yColor: "white" - readonly property string zColor: "fuchsia" + readonly property string zColor: "red" readonly property color textColor: "white" onSensorChanged: { @@ -93,9 +93,9 @@ BaseChart { Glow { anchors.fill: chartView - radius: 30 + radius: 18 samples: 30 - color: "orange" + color: "#e91632" source: chartView } @@ -118,78 +118,71 @@ BaseChart { // Hide the value axis labels; labels are drawn separately. ValueAxis { id: valueAxisX - labelsVisible: false min: 0 max: maxGyroReadings + 1 - tickCount: 13 visible: false } ValueAxis { id: valueAxisY - labelsVisible: false min: 0 max: 360 - tickCount: 11 visible: false } - ScatterSeries { + SplineSeries { id: gyroSeriesX axisX: valueAxisX axisY: valueAxisY color: xColor - borderColor: xColor - markerSize: 8 name: "Gyro X" } - ScatterSeries { + SplineSeries { id: gyroSeriesY axisX: valueAxisX axisY: valueAxisY color: yColor - borderColor: yColor - markerSize: 8 name: "Gyro Y" } - ScatterSeries { + SplineSeries { id: gyroSeriesZ axisX: valueAxisX axisY: valueAxisY color: zColor - borderColor: zColor - markerSize: 8 name: "Gyro Z" } } Row { id: xLabelRow - anchors.bottom: parent.bottom - anchors.bottomMargin: 4 - anchors.left: parent.left - anchors.leftMargin: chartView.plotArea.x - 40 - anchors.right: parent.right - - Text { - id: xLabel - horizontalAlignment: Text.AlignHCenter - text: "Roll
" + (sensor ? sensor.rotationX.toFixed(0) : 0) - lineHeight: 0.7 - width: (gyroHolderRect.width - xLabelRow.x) / 3 - } - - Text { - horizontalAlignment: Text.AlignHCenter - text: "Pitch
" + (sensor ? sensor.rotationY.toFixed(0) : 0) - lineHeight: 0.7 - width: xLabel.width - } - - Text { - horizontalAlignment: Text.AlignHCenter - text: "Yaw
" + (sensor ? sensor.rotationZ.toFixed(0) : 0) - lineHeight: 0.7 - width: xLabel.width + anchors.fill: parent + anchors.leftMargin: 16 + + Repeater { + model: 3 + + Item { + height: xLabelRow.height + width: xLabelRow.width / 3 + + Text { + id: coordText + text: (index == 0) ? "X" : ((index == 1) ? "Y" : "Z") + color: "white" + anchors.left: parent.left + anchors.bottom: parent.bottom + } + + Text { + text: sensor ? ((index == 0) ? sensor.rotationX.toFixed(0) : + ((index == 1) ? sensor.rotationY.toFixed(0) : + sensor.rotationZ.toFixed(0))) : + "" + color: (index == 0) ? xColor : ((index == 1) ? yColor : zColor) + anchors.left: coordText.right + anchors.leftMargin: 16 + anchors.bottom: parent.bottom + } + } } } } diff --git a/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml b/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml index 6e3af9d..05919b9 100644 --- a/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml +++ b/tradeshow/iot-sensortag/resources/base/MagnetometerChart.qml @@ -59,9 +59,9 @@ BaseChart { property int maxNumOfMagnReadings: 24 readonly property color chartColor: "#15bdff" - readonly property string xColor: "green" - readonly property string yColor: "purple" - readonly property string zColor: "yellow" + readonly property string xColor: "#15bdff" + readonly property string yColor: "white" + readonly property string zColor: "red" readonly property color textColor: "white" onSensorChanged: if (sensor) sensor.magnetometerMicroTChanged.connect(contentItem.updateMagneticGraph) @@ -88,11 +88,16 @@ BaseChart { magneticSeriesIndex++; } + Image { + anchors.fill: parent + source: pathPrefix + "Magnetometer/grid.png" + } + Glow { anchors.fill: chartView radius: 18 samples: 30 - color: "#15bdff" + color: "red" source: chartView } @@ -105,8 +110,9 @@ BaseChart { anchors.bottom: parent.bottom anchors.bottomMargin: -10 anchors.left: parent.left - anchors.leftMargin: -15 + anchors.leftMargin: -60 anchors.right: parent.right + anchors.rightMargin: 30 antialiasing: true backgroundColor: "transparent" legend.visible: false @@ -116,12 +122,8 @@ BaseChart { // Hide the value axis labels; labels are drawn separately. ValueAxis { id: valueAxisX - labelsVisible: false - gridVisible: false min: 0 max: maxNumOfMagnReadings - tickCount: 2 - color: chartColor visible: false } @@ -130,8 +132,6 @@ BaseChart { min: -1000 max: 1000 - color: chartColor - labelsVisible: false visible: false } @@ -139,7 +139,6 @@ BaseChart { id: magnSeriesX axisX: valueAxisX axisY: valueAxisY - width: 2 color: xColor name: "Magnet X" } @@ -147,7 +146,6 @@ BaseChart { id: magnSeriesY axisX: valueAxisX axisY: valueAxisY - width: 2 color: yColor name: "Magnet Y" } @@ -155,41 +153,54 @@ BaseChart { id: magnSeriesZ axisX: valueAxisX axisY: valueAxisY - width: 2 color: zColor name: "Magnet Z" } } - Text { - id: xLabel - anchors.left: parent.left - anchors.leftMargin: 20 - anchors.top: parent.top - anchors.topMargin: 20 - horizontalAlignment: Text.AlignHCenter - text: "X
" + (sensor ? sensor.magnetometerMicroT_xAxis : 0) - lineHeight: 0.7 - } - - Text { - anchors.left: parent.left - anchors.leftMargin: 20 - anchors.bottom: parent.bottom - anchors.bottomMargin: 28 - horizontalAlignment: Text.AlignHCenter - text: "Y
" + (sensor ? sensor.magnetometerMicroT_yAxis : 0) - lineHeight: 0.7 - } - - Text { - anchors.right: parent.right + Column { + id: labelColumn + anchors.fill: parent anchors.rightMargin: 20 - anchors.bottom: parent.bottom - anchors.bottomMargin: 28 - horizontalAlignment: Text.AlignHCenter - text: "Z
" + (sensor ? sensor.magnetometerMicroT_zAxis : 0) - lineHeight: 0.7 + + Repeater { + model: 3 + + Item { + height: labelColumn.height / 3 + width: labelColumn.width + + Text { + id: coordText + text: (index == 0) ? "X" : ((index == 1) ? "Y" : "Z") + color: "white" + anchors.right: parent.right + anchors.top: parent.top + horizontalAlignment: Text.AlignRight + width: contentWidth + } + + Rectangle { + color: (index == 0) ? xColor : ((index == 1) ? yColor : zColor) + anchors.right: parent.right + anchors.top: coordText.bottom + height: 1 + width: parent.width / 8 + } + + Text { + text: sensor ? ((index == 0) ? sensor.magnetometerMicroT_xAxis : + ((index == 1) ? sensor.magnetometerMicroT_yAxis : + sensor.magnetometerMicroT_zAxis) ) : + "" + color: "white" + anchors.right: parent.right + anchors.top: coordText.bottom + horizontalAlignment: Text.AlignRight + width: contentWidth + } + } + } } } } diff --git a/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml b/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml index d578a04..efe3830 100644 --- a/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml +++ b/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml @@ -130,8 +130,7 @@ BaseChart { Image { id: reading - - source: pathPrefix + "AmbientTemperature/temp_ring.png" + source: pathPrefix + "Accelometer/outer_ring.png" anchors.verticalCenter: parent.verticalCenter anchors.right: avgText.left @@ -187,7 +186,7 @@ BaseChart { anchors.left: parent.left anchors.leftMargin: 15 anchors.right: valueReading.left - anchors.rightMargin: 106 + anchors.rightMargin: 112 antialiasing: true backgroundColor: "transparent" legend.visible: false diff --git a/tradeshow/iot-sensortag/resources/small/images/Magnetometer/grid.png b/tradeshow/iot-sensortag/resources/small/images/Magnetometer/grid.png new file mode 100644 index 0000000..314ca99 Binary files /dev/null and b/tradeshow/iot-sensortag/resources/small/images/Magnetometer/grid.png differ diff --git a/tradeshow/iot-sensortag/uismall.qrc b/tradeshow/iot-sensortag/uismall.qrc index 9d2d3b5..bed3596 100644 --- a/tradeshow/iot-sensortag/uismall.qrc +++ b/tradeshow/iot-sensortag/uismall.qrc @@ -24,5 +24,6 @@ resources/small/images/Gyro/particle.png resources/small/images/AmbientTemperature/temp_ring.png resources/small/images/AmbientTemperature/temp_sensor.png + resources/small/images/Magnetometer/grid.png -- cgit v1.2.3