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>

26 files changed, 189 insertions, 205 deletions

diff --git a/tradeshow/iot-sensortag/resources/base/AirPressureChart.qml b/tradeshow/iot-sensortag/resources/base/AltitudeChart.qml
index df10674..b9394d2 100644
--- a/tradeshow/iot-sensortag/resources/base/AirPressureChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/AltitudeChart.qml
@@ -49,15 +49,32 @@
 ****************************************************************************/
 import QtQuick 2.5
 import SensorTag.DataProvider 1.0
+import QtGraphicalEffects 1.0
 
 BaseChart {
-    property string airPressureTxt
+    property real altitude
+    property real altitudeRounded
+    property real maxAltitude
+
+    readonly property real maxValueOnBar: 3
 
     antialiasing: true
-    title: qsTr("Air Pressure")
+    title: qsTr("Altitude")
+
+    onClicked: {
+        if (sensor) {
+            maxAltitude = 0;
+            sensor.recalibrate();
+        }
+    }
 
     onSensorChanged: if (sensor) {
-                         sensor.barometer_hPaChanged.connect(this, function() { airPressureTxt = sensor.barometerHPa.toFixed(1); });
+                         sensor.altitudeChanged.connect(this, function() {
+                            altitude = sensor.altitude;
+                             altitudeRounded = Math.floor(altitude + 0.5).toFixed(0);
+                             if (altitudeRounded > maxAltitude)
+                                 maxAltitude = altitudeRounded;
+                         });
                      }
 
     content: Item {
@@ -66,15 +83,77 @@ BaseChart {
         anchors.fill: parent
 
         Image {
-            source: pathPrefix + "AirPressure/AirPre_base_gauge.png"
-            anchors.centerIn: parent
+            id: maxAltBar
+
+            source: pathPrefix + "Altitude/Height_bar.png"
+            anchors.verticalCenter: gauge.verticalCenter
+            anchors.right: gauge.left
+            width: 10
+            height: 100
+            visible: false
+        }
+
+        Item {
+            id: mask
+
+            anchors.fill: maxAltBar
+            visible: false
+
+            Rectangle {
+                width: parent.width
+                anchors.bottom: parent.bottom
+                height: maxAltitude ? (altitude / maxAltitude) * parent.height : 0
+            }
+        }
+
+        OpacityMask {
+            anchors.fill: maxAltBar
+            source: maxAltBar
+            maskSource: mask
+        }
+
+        Image {
+            id: gauge
+
+            source: pathPrefix + "Altitude/Altitude_base_gauge_outer.png"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+
+            Image {
+                source: pathPrefix + "Altitude/Altitude_base_gauge.png"
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                anchors.leftMargin: 30
+
+                Column {
+                    anchors.centerIn: parent
+                    spacing: -10
+
+                    Text {
+                        id: pressureText
+
+                        text: altitudeRounded
+                        horizontalAlignment: Text.AlignHCenter
+                        color: "white"
+                        font.pixelSize: 26
+                    }
+
+                    Text {
+                        text: "m"
+                        color: "white"
+                        horizontalAlignment: Text.AlignHCenter
+                        font.pixelSize: 16
+                    }
+                }
+            }
 
             Text {
-                id: pressureText
+                id: maxPressureText
 
-                text: airPressureTxt + "\nhPa"
+                text: "Max\n" + maxAltitude
                 horizontalAlignment: Text.AlignHCenter
                 anchors.centerIn: parent
+                anchors.horizontalCenterOffset: 74
                 color: "white"
             }
         }
diff --git a/tradeshow/iot-sensortag/resources/base/BaseChart.qml b/tradeshow/iot-sensortag/resources/base/BaseChart.qml
index d148acf..58549b5 100644
--- a/tradeshow/iot-sensortag/resources/base/BaseChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/BaseChart.qml
@@ -110,10 +110,4 @@ Item {
         anchors.fill: parent
         onClicked: baseChart.clicked()
     }
-
-    Rectangle {
-        anchors.fill: parent
-        visible: baseChart.sensor ? baseChart.sensor.state !== SensorTagData.Connected : true
-        opacity: 0.3
-    }
 }
diff --git a/tradeshow/iot-sensortag/resources/base/BottomToolbar.qml b/tradeshow/iot-sensortag/resources/base/BottomToolbar.qml
deleted file mode 100644
index 1c6f2f1..0000000
--- a/tradeshow/iot-sensortag/resources/base/BottomToolbar.qml
+++ /dev/null
@@ -1,54 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2017 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of the examples of Qt for Device Creation.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** BSD License Usage
-** Alternatively, you may use this file under the terms of the BSD license
-** as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of The Qt Company Ltd nor the names of its
-**     contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-import QtQuick 2.0
-
-Item {
-
-}
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
-    }
 }
diff --git a/tradeshow/iot-sensortag/resources/base/HumidityChart.qml b/tradeshow/iot-sensortag/resources/base/HumidityChart.qml
index c94448f..2b0d4de 100644
--- a/tradeshow/iot-sensortag/resources/base/HumidityChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/HumidityChart.qml
@@ -90,72 +90,42 @@ BaseChart {
         Image {
             id: humidityMainImg
 
-            source: pathPrefix + "Humidity/humidity_base_gauge.png"
+            source: pathPrefix + "Humidity/Hum_combined_all.png"
             anchors.left: parent.left
-            anchors.leftMargin: 8
+            anchors.leftMargin: 16
             anchors.top: parent.top
-            anchors.topMargin: 8
-            anchors.bottom: parent.bottom
-            width: height
+            anchors.topMargin: -8
 
             Text {
                 id: humidityMainText
 
                 anchors.centerIn: parent
+                anchors.horizontalCenterOffset: - 42
                 color: "white"
-                text: humidityValue.toFixed(1) + " %"
+                text: humidityValue.toFixed(0)
+                font.pixelSize: 26
             }
         }
 
-        Image {
-            source: pathPrefix + "Humidity/humidity_min_hum.png"
-            anchors.left: humidityMainImg.right
-            anchors.leftMargin: -7
-            anchors.bottom: humidityMainImg.bottom
-
-            Text {
-                anchors.bottom: parent.top
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.horizontalCenterOffset: -10
-                text: "min"
-                color: "white"
-            }
 
-            Text{
-                anchors.right: parent.right
-                anchors.rightMargin: 10
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.verticalCenterOffset: 10
-                text: minHumi.toFixed(1) + " %"
-                font.pixelSize: 12
-                horizontalAlignment: Text.AlignRight
-                color: "white"
-            }
+        Text {
+            anchors.left: humidityMainImg.right
+            anchors.top: humidityMainImg.top
+            anchors.topMargin: 47
+            text: "Max\n" + maxHumi.toFixed(0) + " %"
+            lineHeight: 0.8
+            font.pixelSize: 16
+            color: "white"
         }
 
-        Image {
-            source: pathPrefix + "Humidity/humidity_max_hum.png"
+        Text {
             anchors.left: humidityMainImg.right
-            anchors.leftMargin: -18
-            anchors.top: parent.top
-
-            Text {
-                anchors.top: parent.top
-                anchors.horizontalCenter: parent.horizontalCenter
-                anchors.horizontalCenterOffset: -10
-                text: "max"
-                color: "white"
-            }
-
-            Text{
-                anchors.right: parent.right
-                anchors.rightMargin: 10
-                anchors.verticalCenter: parent.verticalCenter
-                text: maxHumi.toFixed(1) + "%"
-                font.pixelSize: 14
-                horizontalAlignment: Text.AlignRight
-                color: "white"
-            }
+            anchors.bottom: humidityMainImg.bottom
+            anchors.bottomMargin: 53
+            text: "Min\n" + minHumi.toFixed(0) + " %"
+            lineHeight: 0.8
+            font.pixelSize: 16
+            color: "white"
         }
     }
 }
diff --git a/tradeshow/iot-sensortag/resources/base/LightChart.qml b/tradeshow/iot-sensortag/resources/base/LightChart.qml
index 34da38a..f170e81 100644
--- a/tradeshow/iot-sensortag/resources/base/LightChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/LightChart.qml
@@ -112,9 +112,7 @@ BaseChart {
             id: brightnessImg
 
             source: pathPrefix + "Light/light_brightness.png"
-            anchors.left: lightMainImg.right
-            anchors.leftMargin: 24
-            anchors.verticalCenter: lightMainImg.verticalCenter
+            anchors.right: parent.right
 
             Behavior on opacity {
                 NumberAnimation {
diff --git a/tradeshow/iot-sensortag/resources/base/ObjectTemperatureChart.qml b/tradeshow/iot-sensortag/resources/base/ObjectTemperatureChart.qml
index 770684e..5c1cfc7 100644
--- a/tradeshow/iot-sensortag/resources/base/ObjectTemperatureChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/ObjectTemperatureChart.qml
@@ -83,12 +83,6 @@ BaseChart {
             max: 40
             value: objTempHolderRect.value
             anchors.centerIn: parent
-            background: Image {
-                    source: pathPrefix + "ObjectTemperature/objTemp_base_circle.png"
-                }
-            foreground: Image {
-                    source: pathPrefix + "ObjectTemperature/objTemp_display_obj.png"
-                }
         }
 
         Text {
@@ -97,16 +91,16 @@ BaseChart {
             width: 60
             horizontalAlignment: Text.Center
             color: "white"
-            anchors.bottom: gauge.bottom
-            anchors.bottomMargin: 24
-            anchors.right: gauge.left
-            anchors.rightMargin: 12
+            anchors.centerIn: gauge
+            anchors.horizontalCenterOffset: -120
+            anchors.verticalCenterOffset: 60
         }
 
         Text {
             text: value
             color: "white"
             anchors.centerIn: gauge
+            font.pixelSize: 26
         }
 
         Text {
@@ -115,11 +109,9 @@ BaseChart {
             width: 60
             horizontalAlignment: Text.Center
             color: "white"
-            anchors.top: gauge.top
-            anchors.topMargin: 24
-            anchors.left: gauge.right
-            anchors.leftMargin: 12
+            anchors.centerIn: gauge
+            anchors.horizontalCenterOffset: 120
+            anchors.verticalCenterOffset: -30
         }
-
     }
 }
diff --git a/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml b/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml
index efe3830..1482856 100644
--- a/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml
+++ b/tradeshow/iot-sensortag/resources/base/TemperatureChart.qml
@@ -60,7 +60,7 @@ BaseChart {
     property real minimum: 10
     property real maximum: 40
 
-    property real defaultAvgValue: 25
+    property real defaultAvgValue: maximum - minimum
     property real minValue: defaultAvgValue
     property real maxValue: defaultAvgValue
     readonly property real avgValue: (maxValue - minValue) / 2
@@ -118,7 +118,7 @@ BaseChart {
             Text {
                 id: highValue
 
-                text: "Highest\n" + (maxValue !== Number.MIN_VALUE ? maxValue : "--")
+                text: "Highest\n" + (maxValue !== Number.MIN_VALUE ? maxValue.toFixed(1) : "--")
                 lineHeight: 0.7
                 width: contentWidth
                 height: contentHeight
@@ -136,14 +136,16 @@ BaseChart {
 
                 Text {
                     anchors.centerIn: parent
-                    text: sensor ? sensor.infraredAmbientTemperature : ""
+                    text: sensor ? sensor.infraredAmbientTemperature.toFixed(1) : ""
                     color: "white"
                     font.pixelSize: 26
                 }
             }
 
             Text {
-                text: (minValue !== Number.MAX_VALUE ? minValue : "--") + "\nLowest"
+                id: lowValue
+
+                text: (minValue !== Number.MAX_VALUE ? minValue.toFixed(1) : "--") + "\nLowest"
                 lineHeight: 0.8
                 width: contentWidth
                 horizontalAlignment: Text.Center
@@ -181,8 +183,11 @@ BaseChart {
         ChartView {
             id: chartView
 
-            anchors.top: parent.top
-            anchors.bottom: parent.bottom
+            anchors.top: valueReading.top
+            anchors.topMargin: 34
+            height: reading.height
+            anchors.bottom: valueReading.bottom
+            anchors.bottomMargin: 34
             anchors.left: parent.left
             anchors.leftMargin: 15
             anchors.right: valueReading.left
diff --git a/tradeshow/iot-sensortag/resources/small/MainSmall.qml b/tradeshow/iot-sensortag/resources/small/MainSmall.qml
index 6d87009..f3d49a8 100644
--- a/tradeshow/iot-sensortag/resources/small/MainSmall.qml
+++ b/tradeshow/iot-sensortag/resources/small/MainSmall.qml
@@ -107,7 +107,7 @@ Item {
             height: leftPane.indicatorHeight
        }
 
-        AirPressureChart {
+        AltitudeChart {
             id: airPressure
 
             width: leftPane.width
@@ -180,7 +180,7 @@ Item {
         anchors.leftMargin: 32
         anchors.right: rightPane.left
         anchors.rightMargin: 32
-        anchors.bottom: bottomToolbar.top
+        anchors.bottom: parent.bottom
     }
 
 
@@ -191,13 +191,4 @@ Item {
         anchors.left: main.left
         anchors.right: main.right
     }
-
-    BottomToolbar {
-        id: bottomToolbar
-
-        anchors.left: leftPane.right
-        anchors.right: rightPane.left
-        anchors.bottom: main.bottom
-        height: 30
-    }
 }
diff --git a/tradeshow/iot-sensortag/resources/small/images/AirPressure/AirPre_base_gauge.png b/tradeshow/iot-sensortag/resources/small/images/AirPressure/AirPre_base_gauge.png
deleted file mode 100644
index 16b819b..0000000
--- a/tradeshow/iot-sensortag/resources/small/images/AirPressure/AirPre_base_gauge.png
+++ /dev/null
diff --git a/tradeshow/iot-sensortag/resources/small/images/Altitude/Altitude_base_gauge.png b/tradeshow/iot-sensortag/resources/small/images/Altitude/Altitude_base_gauge.png
new file mode 100644
index 0000000..296079f
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/Altitude/Altitude_base_gauge.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/Altitude/Altitude_base_gauge_outer.png b/tradeshow/iot-sensortag/resources/small/images/Altitude/Altitude_base_gauge_outer.png
new file mode 100644
index 0000000..b47b140
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/Altitude/Altitude_base_gauge_outer.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/Altitude/Height_bar.png b/tradeshow/iot-sensortag/resources/small/images/Altitude/Height_bar.png
new file mode 100644
index 0000000..aa2cab6
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/Altitude/Height_bar.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/Humidity/Hum_combined_all.png b/tradeshow/iot-sensortag/resources/small/images/Humidity/Hum_combined_all.png
new file mode 100644
index 0000000..b58297b
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/Humidity/Hum_combined_all.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_base_gauge.png b/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_base_gauge.png
deleted file mode 100644
index 3ecd62d..0000000
--- a/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_base_gauge.png
+++ /dev/null
diff --git a/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_max_hum.png b/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_max_hum.png
deleted file mode 100644
index 8bff102..0000000
--- a/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_max_hum.png
+++ /dev/null
diff --git a/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_min_hum.png b/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_min_hum.png
deleted file mode 100644
index 416e376..0000000
--- a/tradeshow/iot-sensortag/resources/small/images/Humidity/humidity_min_hum.png
+++ /dev/null
diff --git a/tradeshow/iot-sensortag/resources/small/images/Light/light_base_gauge.png b/tradeshow/iot-sensortag/resources/small/images/Light/light_base_gauge.png
index 8bc33a9..3ae8cfb 100644
--- a/tradeshow/iot-sensortag/resources/small/images/Light/light_base_gauge.png
+++ b/tradeshow/iot-sensortag/resources/small/images/Light/light_base_gauge.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/Light/light_brightness.png b/tradeshow/iot-sensortag/resources/small/images/Light/light_brightness.png
index e47ce5f..710be6c 100644
--- a/tradeshow/iot-sensortag/resources/small/images/Light/light_brightness.png
+++ b/tradeshow/iot-sensortag/resources/small/images/Light/light_brightness.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_base_circle.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_base_circle.png
deleted file mode 100644
index cdf7961..0000000
--- a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_base_circle.png
+++ /dev/null
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj.png
deleted file mode 100644
index 53ac672..0000000
--- a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj.png
+++ /dev/null
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_blue.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_blue.png
new file mode 100644
index 0000000..b19269e
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_blue.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_green.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_green.png
new file mode 100644
index 0000000..72bedea
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_green.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_orange.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_orange.png
new file mode 100644
index 0000000..6120949
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_orange.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_red.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_red.png
new file mode 100644
index 0000000..721a21c
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_display_obj_red.png
diff --git a/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_outer_inner_ring.png b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_outer_inner_ring.png
new file mode 100644
index 0000000..2a81b5e
--- /dev/null
+++ b/tradeshow/iot-sensortag/resources/small/images/ObjectTemperature/objTemp_outer_inner_ring.png