35 task qt fully functional UI app display

ui/CircularProgressBar.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.9
+
+Item {
+    id: root
+
+    property int size: 150
+    property int lineWidth: 5
+    property real value: 0
+
+    property color primaryColor: "#29b6f6"
+    property color secondaryColor: "#e0e0e0"
+
+    property int animationDuration: 1000
+
+    width: size
+    height: size
+
+    onValueChanged: {
+        canvas.degree = value * 360;
+    }
+
+    Canvas {
+        id: canvas
+
+        property real degree: 0
+
+        anchors.fill: parent
+        antialiasing: true
+
+        onDegreeChanged: {
+            requestPaint();
+        }
+
+        onPaint: {
+            var ctx = getContext("2d");
+
+            var x = root.width/2;
+            var y = root.height/2;
+
+            var radius = root.size/2 - root.lineWidth
+            var startAngle = (Math.PI/180) * 270;
+            var fullAngle = (Math.PI/180) * (270 + 360);
+            var progressAngle = (Math.PI/180) * (270 + degree);
+
+            ctx.reset()
+
+            ctx.lineCap = 'round';
+            ctx.lineWidth = root.lineWidth;
+
+            ctx.beginPath();
+            ctx.arc(x, y, radius, startAngle, fullAngle);
+            ctx.strokeStyle = root.secondaryColor;
+            ctx.stroke();
+
+            ctx.beginPath();
+            ctx.arc(x, y, radius, startAngle, progressAngle);
+            ctx.strokeStyle = root.primaryColor;
+            ctx.stroke();
+        }
+
+        Behavior on degree {
+            NumberAnimation {
+                duration: root.animationDuration
+            }
+        }
+    }
+}

ui/FootbarInfo.qml

@@ -5,73 +5,26 @@ Row {
     height: 50
     spacing: 30
     padding: 10
-    Column {
-
-        // Row {
-
-        //     anchors.verticalCenterOffset: -10
-        //     Image {
-        //         id: batteryLevel
-        //         // source: {
-        //         //     if (canBusHandler.battery >= 80) {
-        //         //         "qrc:/assets/icons/battery-5.png"
-        //         //     } else if (canBusHandler.battery >= 60) {
-        //         //         "qrc:/assets/icons/battery-4.png"
-        //         //     } else if (canBusHandler.battery >= 40) {
-        //         //         "qrc:/assets/icons/battery-3.png"
-        //         //     } else if (canBusHandler.battery >= 20) {
-        //         //         "qrc:/assets/icons/battery-2.png"
-        //         //     } else {
-        //         //         "qrc:/assets/icons/battery-1.png"
-        //         //     }
-        //         // }
-        //         width: 80
-        //         visible: true
-        //         fillMode: Image.PreserveAspectFit
-        //         source: "qrc:/assets/icons/battery-4.png" 
-        //         // Adjust this value to move the image up or down
-        //     }
-        // }
-        Row {
-            spacing: 5
-
-            Text {
-                font.family: "Open Sans"
-                text: instrumentCluster.battery.percentage
-                font.pixelSize: app.letterSize
-                color: "white"
-            }
-            Text {
-                font.family: "Open Sans"
-                text: "%"
-                font.pixelSize: app.letterSize
-                color: "gray"
-            }
-        }
-    }
 
     Column {
-
         Row {
             spacing: 5
-            Text {
-                font.family: "Open Sans"
-                text: instrumentCluster.battery.autonomy
-                font.pixelSize: app.letterSize
-                color: "white"
+
+            Image {
+                id: cloudIcon
+                source: "qrc:/assets/icons/cloud.png"
+                width: app.iconWidth - 5
+                height: app.iconHeight - 5
+                visible: true
+                fillMode: Image.PreserveAspectFit
             }
-            Text {
-                font.family: "Open Sans"
-                text: "mi"
-                font.pixelSize: app.letterSize
-                color: "gray"
+
+            Rectangle {
+                width: 7 // Adjust the width to set the desired space
+                height: 1
+                color: "transparent"
             }
-        }
-    }
-    Column {
 
-        Row {
-            spacing: 5
             Text {
                 font.family: "Open Sans"
                 text: "22°"

ui/GearShiftInfo.qml

@@ -1,31 +1,35 @@
 import QtQuick 2.15
 // import com.example.gearPosition 1.0
 
-Column {
-    spacing: 10
+Row {
+    spacing: 20
 
     Text {
         font.family: "Open Sans"
         text: "P"
-        font.pixelSize: app.letterSize
+        font.pixelSize: instrumentCluster.gear.park ? app.letterSizeLoaded : app.letterSize
         color: instrumentCluster.gear.park ? "blue" : "white"
+        y: instrumentCluster.gear.park ? gearOffset : 0
     }
     Text {
         font.family: "Open Sans"
         text: "R"
-        font.pixelSize: app.letterSize
+        font.pixelSize: instrumentCluster.gear.reverse ? app.letterSizeLoaded : app.letterSize
         color: instrumentCluster.gear.reverse ? "blue" : "white"
+        y: instrumentCluster.gear.reverse ? gearOffset : 0
     }
     Text {
         font.family: "Open Sans"
         text: "N"
-        font.pixelSize: app.letterSize
+        font.pixelSize: instrumentCluster.gear.neutral ? app.letterSizeLoaded : app.letterSize
         color: instrumentCluster.gear.neutral ? "blue" : "white"
+        y: instrumentCluster.gear.neutral ? gearOffset : 0
     }
     Text {
         font.family: "Open Sans"
         text: "D"
-        font.pixelSize: app.letterSize
+        font.pixelSize: instrumentCluster.gear.drive ? app.letterSizeLoaded : app.letterSize
         color: instrumentCluster.gear.drive ? "blue" : "white"
+        y: instrumentCluster.gear.drive ? gearOffset : 0
     }
 }

ui/LightInfo.qml

@@ -1,45 +1,81 @@
 import QtQuick 2.15
 
-Column {
-    spacing: 10
+Row {
+    spacing: 20
 
-    Image {
-        id: lowBeamSignal
-        source: "qrc:/assets/icons/low_beam_on.png"
+    Rectangle {
         width: app.iconWidth
         height: app.iconHeight
-        visible: instrumentCluster.lights.lowBeam
+        color: "transparent" // Keeps the placeholder invisible
+        Image {
+            id: lowBeamSignal
+            anchors.centerIn: parent
+            width: parent.width
+            height: parent.height
+            source: "qrc:/assets/icons/low_beam_on.png"
+            // visible: instrumentCluster.lights.lowBeam
+            visible: true
+
+        }
     }
 
-    Image {
-        id: highBeamSignal
-        source: "qrc:/assets/icons/high_beam_on.png"
+    Rectangle {
         width: app.iconWidth
         height: app.iconHeight
-        visible: instrumentCluster.lights.highBeam
+        color: "transparent"
+        Image {
+            id: highBeamSignal
+            anchors.centerIn: parent
+            width: parent.width
+            height: parent.height
+            source: "qrc:/assets/icons/high_beam_on.png"
+            // visible: instrumentCluster.lights.highBeam
+            visible: true
+        }
     }
 
-    Image {
-        id: frontFogSignal
-        source: "qrc:/assets/icons/front_fog_on.png"
+    Rectangle {
         width: app.iconWidth
         height: app.iconHeight
-        visible: instrumentCluster.lights.frontFogLight
+        color: "transparent"
+        Image {
+            id: frontFogSignal
+            anchors.centerIn: parent
+             width: parent.width
+            height: parent.height
+            source: "qrc:/assets/icons/front_fog_on.png"
+            // visible: instrumentCluster.lights.frontFogLight
+            visible: true
+        }
     }
 
-    Image {
-        id: parkingLightsSignal
-        source: "qrc:/assets/icons/parking_lights_on.png"
+    Rectangle {
         width: app.iconWidth
         height: app.iconHeight
-        visible: instrumentCluster.lights.parkingLight
+        color: "transparent"
+        Image {
+            id: parkingLightsSignal
+            anchors.centerIn: parent
+             width: parent.width
+            height: parent.height
+            source: "qrc:/assets/icons/parking_lights_on.png"
+            // visible: instrumentCluster.lights.parkingLight
+            visible: true
+        }
     }
 
-    Image {
-        id: backFogSignal
-        source: "qrc:/assets/icons/back_fog_on.png"
+    Rectangle {
         width: app.iconWidth
         height: app.iconHeight
-        visible: instrumentCluster.lights.rearFogLight
+        color: "transparent"
+        Image {
+            id: backFogSignal
+            anchors.centerIn: parent
+             width: parent.width
+            height: parent.height
+            source: "qrc:/assets/icons/back_fog_on.png"
+            // visible: instrumentCluster.lights.rearFogLight
+            visible: true
+        }
     }
 }