Uniform Styling

Northeastern-Electric-Racing · Feb 4, 2025 · 24cafc7 · 24cafc7
1 parent 4cfce9b
commit 24cafc7
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 20 deletions.
diff --git a/NERODevelopment/content/BatteryValueComponent.qml b/NERODevelopment/content/BatteryValueComponent.qml
@@ -3,12 +3,15 @@ import QtQuick.Layouts
 
 Item {
     id: batteryComponent
-    property int batteryValue: 0
+    property int batteryValue
     property string title: "Charge State"
     property int horizontalIconSpacing: width * 0.1
     property int labelVerticalSpacing: height * 0.1
     property string labelColor: "#47AFFF"
     property int horizontalPadding: width * 0.1
+    property int radius
+    property int valueFontSize
+    property int labelFontSize
 
     LabeledComponent {
         anchors.fill: parent
@@ -22,5 +25,8 @@ Item {
         labelColor: batteryComponent.labelColor
         horizontalPadding: batteryComponent.horizontalPadding
         valueUnit: "%"
+        radius: batteryComponent.radius
+        valueFontSize: batteryComponent.valueFontSize
+        labelFontSize: batteryComponent.labelFontSize
     }
 }
diff --git a/NERODevelopment/content/LabeledComponent.qml b/NERODevelopment/content/LabeledComponent.qml
@@ -10,6 +10,8 @@ Rectangle {
     property int horizontalPadding
     property Component icon
     property string valueUnit
+    property int valueFontSize
+    property int labelFontSize
 
     gradient: Gradient {
         stops: [
@@ -23,9 +25,6 @@ Rectangle {
             }
         ]
     }
-
-    radius: height / 8
-
     height: 100
     width: 100
 
@@ -36,7 +35,7 @@ Rectangle {
         anchors.topMargin: labelComponent.labelVerticalSpacing
 
         text: title
-        font.pixelSize: 0.15 * parent.width
+        font.pixelSize: labelComponent.labelFontSize
         color: labelComponent.labelColor
     }
 
@@ -68,20 +67,20 @@ Rectangle {
 
         ValueText {
             id: valueText
-            text: value
-            font.pixelSize: 0.8 * parent.height
+            text: labelComponent.value
+            font.pixelSize: labelComponent.valueFontSize
             anchors.left: componentContainer.item ? componentContainer.item.right : componentContainer.right
             anchors.leftMargin: labelComponent.horizontalIconSpacing
-            anchors.top: parent.top
+            anchors.verticalCenter: parent.verticalCenter
             anchors.bottom: parent.bottom
         }
 
         LabelText {
-            text: valueUnit
+            text: labelComponent.valueUnit
             anchors.left: valueText.right
             anchors.top: parent.top
             color: "#777777"
-            font.pixelSize: 0.8 * parent.height
+            font.pixelSize: labelComponent.valueFontSize
         }
     }
 }
diff --git a/NERODevelopment/content/Radial.qml b/NERODevelopment/content/Radial.qml
@@ -8,19 +8,20 @@ Item {
     property double maxValue: 100
     property int verticalPadding: gauge.height / 10
     property int horizontalPadding: gauge.width / 10
-    property int innerStrokeWidth: 3
+    property int innerStrokeWidth: 5
     property int outerStrokeWidth: 30
     property int mainTextTopPadding: 0
     property int heightOffset: 100
     property string label: "mph"
     property string color: "purple"
     property string unitLabel: ""
+    property int valueFontSize: width / 10
 
     Text {
         id: valueText
         text: Math.round(gauge.value) + unitLabel
         anchors.horizontalCenter: parent.horizontalCenter
-        font.pixelSize: gauge.width / 5
+        font.pixelSize: gauge.valueFontSize
         font.family: webFont.name
         color: "white"
 
@@ -60,10 +61,6 @@ Item {
         property double step: ((gauge.value - gauge.minValue)
                                / (gauge.maxValue - gauge.minValue) * (endAngle - startAngle))
 
-        Component.onCompleted: {
-            console.log('radius: ', ringRadius)
-        }
-
         onPaint: {
             const context = getContext("2d")
             context.reset()
@@ -99,7 +96,7 @@ Item {
         text: gauge.label
         color: "gray"
         font.family: webFont.name
-        font.pixelSize: gauge.width / 10
+        font.pixelSize: gauge.valueFontSize / 2
         anchors.top: valueText.bottom
         anchors.horizontalCenter: valueText.horizontalCenter
     }

diff --git a/NERODevelopment/content/SpeedMode.qml b/NERODevelopment/content/SpeedMode.qml
@@ -22,6 +22,9 @@ Item {
     property int xMargin: width / 20
     property int yMargin: height / 20
     property int verticalSpacing: height / 40
+    property int borderRadii: 10
+    property int valueFontSize: Math.min(height / 8, width / 8)
+    property int labelFontSize: Math.min(height / 20, width / 20)
 
     Keys.onPressed: event => {
                         if (event.key === Qt.Key_Return
@@ -69,6 +72,7 @@ Item {
         currentRunTime: speedMode.timerValue
         lastRunTime: speedMode.lastRunTime
         fastestRunTime: speedMode.fastestRunTime
+        radius: speedMode.borderRadii
     }
 
     RowLayout {
@@ -97,6 +101,9 @@ Item {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 Layout.preferredHeight: 1
+                radius: speedMode.borderRadii
+                valueFontSize: speedMode.valueFontSize
+                labelFontSize: speedMode.labelFontSize
             }
 
             ThermometerValueComponent {
@@ -105,6 +112,9 @@ Item {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 Layout.preferredHeight: 1
+                radius: speedMode.borderRadii
+                valueFontSize: speedMode.valueFontSize
+                labelFontSize: speedMode.labelFontSize
             }
         }
 
@@ -121,6 +131,7 @@ Item {
                 Layout.fillHeight: true
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
+                font.pixelSize: speedMode.labelFontSize
             }
 
             Radial {
@@ -129,6 +140,7 @@ Item {
                 Layout.fillHeight: true
                 Layout.fillWidth: true
                 color: "blue"
+                valueFontSize: speedMode.valueFontSize
             }
         }
 
@@ -146,6 +158,7 @@ Item {
                 Layout.fillHeight: true
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
+                font.pixelSize: speedMode.labelFontSize
             }
 
             Radial {
@@ -156,6 +169,7 @@ Item {
                 maxValue: 400
                 label: "DCL: " + speedMode.dcl
                 unitLabel: 'A'
+                valueFontSize: speedMode.valueFontSize
             }
         }
     }

diff --git a/NERODevelopment/content/ThermometerValueComponent.qml b/NERODevelopment/content/ThermometerValueComponent.qml
@@ -3,13 +3,16 @@ import QtQuick.Layouts
 
 Item {
     id: thermometerComponent
-    property int thermometerValue: 0
+    property int thermometerValue
     property string title: "MOTOR TEMP"
     property int horizontalIconSpacing: width * 0.1
     property int labelVerticalSpacing: height * 0.1
     property bool regen: false
     property string labelColor: "#47A7FF"
     property int horizontalPadding: width * 0.1
+    property int radius
+    property int valueFontSize
+    property int labelFontSize
 
     LabeledComponent {
         anchors.fill: parent
@@ -25,5 +28,8 @@ Item {
         labelColor: thermometerComponent.labelColor
         horizontalPadding: thermometerComponent.horizontalPadding
         valueUnit: "°"
+        radius: thermometerComponent.radius
+        valueFontSize: thermometerComponent.valueFontSize
+        labelFontSize: thermometerComponent.labelFontSize
     }
 }
diff --git a/NERODevelopment/content/TimerDisplay.qml b/NERODevelopment/content/TimerDisplay.qml
@@ -7,6 +7,8 @@ Item {
     property int currentRunTime: 0
     property int lastRunTime: 0
     property int fastestRunTime: 0
+    property int radius: Math.min(timerDisplay.height / 7,
+                                  timerDisplay.width / 20)
 
     RowLayout {
         width: timerDisplay.width
@@ -27,7 +29,7 @@ Item {
             backgroundColor: "#47A7FF"
             label: "CURRENT RUN"
             value: timerDisplay.currentRunTime
-            radius: Math.min(timerDisplay.height / 7, timerDisplay.width / 20)
+            radius: timerDisplay.radius
             isLeft: true
         }
 
@@ -51,7 +53,7 @@ Item {
             backgroundColor: "#AD00FF"
             label: "FASTEST RUN"
             value: timerDisplay.fastestRunTime
-            radius: Math.min(timerDisplay.height / 7, timerDisplay.width / 20)
+            radius: timerDisplay.radius
             isRight: true
         }
     }