Update thermometer component in QML

Northeastern-Electric-Racing · Oct 30, 2024 · d31125c · d31125c
1 parent 86366fa
commit d31125c
Showing 1 changed file with 99 additions and 33 deletions.
diff --git a/NERODesign/content/Thermometer.qml b/NERODesign/content/Thermometer.qml
@@ -6,74 +6,140 @@ Item {
     id: thermometer
     property bool regen: false
     property int value: 0
-    property int horizontalPadding: width / 20
     property int maxValue: 65
     property int minValue: -15
     property string color: regen ? "red" : value > maxValue - ((Math.abs(maxValue) + Math.abs(
                                                                     minValue)) / 5) ? "red" : value > maxValue - (((Math.abs(maxValue) + Math.abs(minValue)) / 5) * 2) ? "orange" : value > maxValue - (((Math.abs(maxValue) + Math.abs(minValue)) / 5) * 3) ? "#FFF500" : value > maxValue - (((Math.abs(maxValue) + Math.abs(minValue)) / 5) * 4) ? "blue" : "purple"
     height: 500
-    width: 600
+    width: 200
+
+    property real intersectPoint: 0.2
+    property real totalFillPercentage: (Math.max(0, value - minValue) / (maxValue - minValue))
+    property real circleFillPercentage: Math.min(1, totalFillPercentage / intersectPoint)
+    property real tubeFillPercentage: Math.max(0, (totalFillPercentage - intersectPoint) / (1 - intersectPoint))
+    property bool increasing: value > previousValue
+    property int previousValue: value
+
+    onValueChanged: {
+        increasing = value > previousValue;
+        previousValue = value;
+    }
 
     Rectangle {
         visible: thermometer.regen
         id: lightningBackground
         width: parent.width / 3
-        height: parent.height / 4
-        color: "white"
+        height: parent.height / 3
+        color: "black"
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         anchors.verticalCenterOffset: -parent.height / 20
-        radius: 20
+        radius: 0
         rotation: -45
         anchors.centerIn: parent
     }
 
     Rectangle {
         id: topSemiCircle
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.horizontalCenter: outerRectangle.horizontalCenter
         anchors.top: parent.top
-        width: parent.width / 4
-        height: parent.width / 4
-        radius: parent.width / 4
-        color: "white"
-    }
-
-    Rectangle {
-        id: outerRectangle
-        anchors.top: topSemiCircle.verticalCenter
-        anchors.bottom: bottomOuterCircle.verticalCenter
-        anchors.horizontalCenter: parent.horizontalCenter
-        width: parent.width / 4
-        height: parent.height / 2
-        color: "white"
+        width: parent.width / 3
+        height: parent.width / 5
+        radius: parent.width / 10
+        color: thermometer.color
     }
 
     Rectangle {
-        id: bottomOuterCircle
+        id: bottomCircle
         anchors.horizontalCenter: parent.horizontalCenter
+        anchors.baselineOffset: outerRectangle.bottom - 400
         y: parent.height / 2
         width: thermometer.width / 2
         height: thermometer.width / 2
-        radius: thermometer.width / 2
-        color: "white"
+        radius: width / 2
+        color: "black"
+        border.width: width * 0.15
+        border.color: thermometer.color
+        clip: true
 
         Rectangle {
-            id: fillBottomCircle
+            id: innerFillCircle
+            width: parent.width - parent.border.width * 2
+            height: parent.height - parent.border.width * 2
+            radius: (parent.width - parent.border.width * 2) / 2
             anchors.centerIn: parent
-            width: parent.width * 0.8
-            height: parent.height * 0.8
-            radius: parent.radius
-            color: thermometer.color
+            color: "black"
+            clip: true
+
+            Rectangle {
+                id: gradientFill
+                width: parent.width
+                height: innerFillCircle.height * circleFillPercentage
+                anchors.bottom: innerFillCircle.bottom
+                radius: innerFillCircle.radius
+                gradient: Gradient {
+                    GradientStop { position: 0.0; color: thermometer.color }
+                    GradientStop { position: 0.5; color: Qt.darker(thermometer.color, 1.5) }
+                    GradientStop { position: 1.0; color: Qt.darker(thermometer.color, 2.5) }
+                }
+            }
         }
     }
 
     Rectangle {
-        id: fillRectangle
-        anchors.fill: outerRectangle
-
-        anchors.leftMargin: thermometer.horizontalPadding
-        anchors.rightMargin: thermometer.horizontalPadding
+        id: outerRectangle
+        anchors.top: topSemiCircle.verticalCenter
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width / 3
+        height: parent.height * .5
         color: thermometer.color
+
+        Rectangle {
+            id: innerRectangle
+            width: parent.width / 1.75
+            height: parent.height
+            anchors {
+                centerIn: parent
+                verticalCenterOffset: topSemiCircle.height / 100
+            }
+            color: "black"
+            clip: true
+        }
+
+        Rectangle {
+            id: thermometerFill
+            width: innerRectangle.width
+            height: innerRectangle.height
+            anchors {
+                centerIn: innerRectangle
+            }
+            clip: true
+            color: "black"
+
+            Rectangle {
+                id: fillElement
+                width: parent.width
+                height: parent.height * tubeFillPercentage
+                anchors.bottom: parent.bottom
+                color: thermometer.color
+
+                Behavior on height {
+                    NumberAnimation {
+                        duration: 1000
+                        easing.type: Easing.OutQuad
+                        running: thermometer.totalFillPercentage > thermometer.intersectPoint && increasing
+                    }
+                }
+
+                Behavior on height {
+                    NumberAnimation {
+                        duration: 1000
+                        easing.type: Easing.InOutQuad
+                        running: thermometer.totalFillPercentage <= thermometer.intersectPoint && !increasing
+                    }
+                }
+            }
+        }
     }
 
     Lightning {