#44 Finishing Touches

Northeastern-Electric-Racing · Jan 31, 2024 · 8ba2b1d · 8ba2b1d
1 parent 156ca40
commit 8ba2b1d
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 8 deletions.
diff --git a/NERODesign/content/DetailDisplay.qml b/NERODesign/content/DetailDisplay.qml
@@ -0,0 +1,89 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Particles
+
+Rectangle {
+    id: detailDisplay
+    property string shutdownFlowTask: "Task"
+    property string status: "CLEAR"
+    property bool ok: true
+    property bool clear: false
+    property bool highlight: true
+    height: 50
+    width: 200
+    color: "black"
+
+    Row {
+        id: row
+        width: parent.width
+        height: parent.height
+        anchors.centerIn: parent
+
+        Rectangle {
+            id: taskDisplay
+            Rectangle{
+                id: gradientBackground
+                rotation: -90
+                visible: highlight
+                anchors.centerIn: parent
+                width: parent.height
+                height: parent.width
+                radius: 10
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0.0
+                        SequentialAnimation on color {
+                            loops: Animation.Infinite
+                            ColorAnimation { from: "black"; to: "#969696"; duration: 1500 }
+                            ColorAnimation { from: "#969696"; to: "black"; duration: 3000 }
+                        }
+                    }
+
+
+                    GradientStop {
+                        position: 1.0
+                        SequentialAnimation on color {
+                            loops: Animation.Infinite
+                            ColorAnimation { from: "black"; to: "black"; duration: 1500 }
+                            ColorAnimation { from: "black"; to: "#969696"; duration: 1500 }
+                            ColorAnimation { from: "#969696"; to: "black"; duration: 1500 }
+                        }
+                    }
+                }
+            }
+
+            border.color: "transparent"
+            width: parent.width * 0.5
+            height: parent.height
+            radius: 10
+
+            LabelText {
+                id: taskText
+                color: "white"
+                text: detailDisplay.shutdownFlowTask
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.left: parent.left
+                font.bold: false
+                leftPadding: 10
+            }
+        }
+
+        Rectangle {
+            id: statusDisplay
+            color: clear ? "transparent" : (ok === true ? "#14FF00" : (ok === false ? "#FF0000" : "transparent"))
+            width: Math.max(parent.width * 0.5, statusText.implicitWidth + 20) // Ensure minimum width
+            height: parent.height
+            radius: 10
+            border.color: clear ? "white" : "transparent"
+            border.width: clear ? 3 : 0
+
+            LabelText {
+                id: statusText
+                visible: !clear
+                color: "black"
+                text: detailDisplay.status
+                anchors.centerIn: parent
+            }
+        }
+    }
+}
diff --git a/NERODevelopment/content/CMakeLists.txt b/NERODevelopment/content/CMakeLists.txt
@@ -14,6 +14,7 @@ qt6_add_qml_module(content
         ValueText.qml
         LabelText.qml
         DirectionView.qml
+        DetailDisplay.qml
 
     RESOURCES
         fonts/fonts.txt

diff --git a/NERODevelopment/content/DetailDisplay.qml b/NERODevelopment/content/DetailDisplay.qml
@@ -7,9 +7,10 @@ Rectangle {
     property string shutdownFlowTask: "Task"
     property string status: "CLEAR"
     property bool ok: true
-    property bool clear: true
+    property bool clear: false
     property bool highlight: true
     height: 50
+    width: 200
     color: "black"
 
     Row {
@@ -33,25 +34,26 @@ Rectangle {
                         position: 0.0
                         SequentialAnimation on color {
                             loops: Animation.Infinite
-                            ColorAnimation { from: "#969696"; to: "black"; duration: 5000 }
-                            //ColorAnimation { from: "#0E1533"; to: "#14148c"; duration: 5000 }
-                            ColorAnimation { from: "black"; to: "#969696"; duration: 5000 }
+                            ColorAnimation { from: "black"; to: "#969696"; duration: 1500 }
+                            ColorAnimation { from: "#969696"; to: "black"; duration: 3000 }
                         }
                     }
+
+
                     GradientStop {
                         position: 1.0
                         SequentialAnimation on color {
                             loops: Animation.Infinite
-                            ColorAnimation { from: "black"; to: "#969696"; duration: 5000 }
-                            //ColorAnimation { from: "#437284"; to: "#14aaff"; duration: 5000 }
-                            ColorAnimation { from: "#969696"; to: "black"; duration: 5000 }
+                            ColorAnimation { from: "black"; to: "black"; duration: 1500 }
+                            ColorAnimation { from: "black"; to: "#969696"; duration: 1500 }
+                            ColorAnimation { from: "#969696"; to: "black"; duration: 1500 }
                         }
                     }
                 }
             }
 
             border.color: "transparent"
-            width: parent.width * 0.6
+            width: parent.width * 0.5
             height: parent.height
             radius: 10
 
@@ -61,6 +63,30 @@ Rectangle {
                 text: detailDisplay.shutdownFlowTask
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
+                font.bold: false
+                leftPadding: 10
+            }
+        }
+
+        Rectangle {
+            id: statusDisplay
+            color: clear ? "transparent" : (ok === true ? "#14FF00" : (ok === false ? "#FF0000" : "transparent"))
+            width: Math.max(parent.width * 0.5, statusText.implicitWidth + 20) // Ensure minimum width
+            height: parent.height
+            radius: 10
+            border.color: clear ? "white" : "transparent"
+            border.width: clear ? 3 : 0
+
+            LabelText {
+                id: statusText
+                visible: !clear
+                color: "black"
+                text: detailDisplay.status
+                anchors.centerIn: parent
+            }
+        }
+    }
+}
                 font.bold: false
                 font.family: "Roboto"
                 leftPadding: 10