iot-sensortag: Visual style updated for most of the charts

    - Updated appearance and graphics of ambient and object temperature, air pressure, humidity and light charts.
    - Removed AirPressure chart
    - Added Altitude chart
    - Added altitude information to SensorTagData and derived classes

Change-Id: Ief8eb9dd4f87f967b037eed3e9a4dd12c3c6efc9
Reviewed-by: Titta Heikkala <titta.heikkala@qt.io>

1 files changed, 61 insertions, 52 deletions

diff --git a/tradeshow/iot-sensortag/resources/base/CircularGauge.qml b/tradeshow/iot-sensortag/resources/base/CircularGauge.qml
index 5ee5b53..a26e9dd 100644
--- a/tradeshow/iot-sensortag/resources/base/CircularGauge.qml
+++ b/tradeshow/iot-sensortag/resources/base/CircularGauge.qml
@@ -48,7 +48,6 @@
 **
 ****************************************************************************/
 import QtQuick 2.0
-import QtGraphicalEffects 1.0
 
 Item {
     id: gauge
@@ -57,76 +56,86 @@ Item {
     property real max: 360
     property real value: 20
     property real stepCount: 18
-    property bool discreteSteps: true
 
-    property alias background: bgLoader.sourceComponent
-    property alias foreground: fgLoader.sourceComponent
+    property real increment: (max - min) / stepCount
+    property real prevValue: min
+
+    property int currentColorSection
+    property int nextColorSection
+    property var colorSections: ["ObjectTemperature/objTemp_display_obj_blue.png",
+                                 "ObjectTemperature/objTemp_display_obj_green.png",
+                                 "ObjectTemperature/objTemp_display_obj_orange.png",
+                                 "ObjectTemperature/objTemp_display_obj_red.png"]
+
+    onValueChanged: {
+        currentColorSection = Math.floor((prevValue - min) / (max - min) * 3);
+        if (currentColorSection < 0)
+            currentColorSection = 0;
+
+        if (value > prevValue) {
+            prevValue = value;
+            rotateAnimation.from = 0;
+            rotateAnimation.to = 360;
+            rotateAnimation.start();
+        }
+        else {
+            prevValue = value;
+            rotateAnimation.from = 360;
+            rotateAnimation.to = 0;
+            rotateAnimation.start();
+        }
 
-    property real increment: 360 / stepCount
+        nextColorSection = Math.floor((value - min) / (max - min) * 3);
+        if (nextColorSection < 0)
+            nextColorSection = 0;
 
-    function incrementStep() {
-        if (value < max - increment)
-            value += increment
     }
 
-    function decrementStep() {
-        if (value > min + increment)
-            value -= increment;
-    }
+    width: bg.width
+    height: bg.height
 
-    width: bgLoader.item.width
-    height: bgLoader.item.height
-    onValueChanged: maskCanvas.requestPaint()
+    Image {
+        id: bg
 
-    Loader {
-        id: bgLoader
+        source: pathPrefix + "ObjectTemperature/objTemp_outer_inner_ring.png"
     }
 
-    Loader {
-        id: fgLoader
+    Image {
+        id: fg
 
-        visible: false
+        anchors.centerIn: bg
+        source: pathPrefix + colorSections[currentColorSection]
     }
 
-    Item {
-        id: mask
+    Image {
+        id: fgNext
 
-        property real range: max - min
-        property real offsetAngle: -77
-        property real startAngle: mask.offsetAngle / 360 * Math.PI * 2
-        property real angleStep: Math.PI * 2 / stepCount
+        anchors.centerIn: bg
+        source: pathPrefix + colorSections[nextColorSection]
+        rotation: fg.rotation
+        onSourceChanged: visible = true
+        opacity: fg.rotation / 360
+    }
 
-        width: fgLoader.item.width
-        height: fgLoader.item.height
-        visible: false
+    SequentialAnimation {
+        id: rotateAnimation
 
-        Canvas {
-            id: maskCanvas
+        property alias from: rot.from
+        property alias to: rot.to
 
-            anchors.fill: parent
-            onPaint: {
-                var ctx = getContext("2d");
+        PropertyAnimation {
+            id: rot
 
-                // could optimize this by clearing only when decrementing value
-                ctx.clearRect(0, 0, width, height);
+            target: fg
+            property: "rotation"
+            duration: 500
+        }
 
-                var endAngle = mask.startAngle + (value - min) / mask.range * Math.PI * 2;
-                if (discreteSteps)
-                    endAngle = Math.floor(endAngle / mask.angleStep) * mask.angleStep;
-                ctx.beginPath();
-                ctx.arc(Math.floor(width / 2), Math.floor(height / 2), mask.width / 2, mask.startAngle, endAngle);
-                ctx.lineTo(mask.width / 2, mask.height / 2)
-                ctx.closePath();
-                ctx.fill();
+        ScriptAction {
+            script: {
+                fg.source = fgNext.source
+                fgNext.visible = false;
             }
         }
     }
-
-    OpacityMask {
-        width: mask.width
-        height: mask.height
-        source: fgLoader.item
-        maskSource: mask
-        anchors.centerIn: gauge
-    }
 }