diff --git a/assets/icons/cloud.png b/assets/icons/cloud.png
new file mode 100644
index 0000000..bf33132
Binary files /dev/null and b/assets/icons/cloud.png differ
diff --git a/assets/icons/watch.png b/assets/icons/watch.png
new file mode 100644
index 0000000..d10bfb5
Binary files /dev/null and b/assets/icons/watch.png differ
diff --git a/assets/images/car-background.png b/assets/images/car-background.png
deleted file mode 100644
index 3239bdb..0000000
Binary files a/assets/images/car-background.png and /dev/null differ
diff --git a/assets/images/car.png b/assets/images/car.png
new file mode 100644
index 0000000..8c7fa69
Binary files /dev/null and b/assets/images/car.png differ
diff --git a/ui/CircularProgressBar.qml b/ui/CircularProgressBar.qml
new file mode 100644
index 0000000..f3446ab
--- /dev/null
+++ b/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
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/ui/FootbarInfo.qml b/ui/FootbarInfo.qml
index 76cf380..c6cc028 100644
--- a/ui/FootbarInfo.qml
+++ b/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°"
diff --git a/ui/GearShiftInfo.qml b/ui/GearShiftInfo.qml
index d449032..c00bfa4 100644
--- a/ui/GearShiftInfo.qml
+++ b/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
}
}
\ No newline at end of file
diff --git a/ui/LightInfo.qml b/ui/LightInfo.qml
index 190d533..2cf13e1 100644
--- a/ui/LightInfo.qml
+++ b/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
+ }
}
}
diff --git a/ui/Main.qml b/ui/Main.qml
index e11d741..dafbfb4 100644
--- a/ui/Main.qml
+++ b/ui/Main.qml
@@ -1,5 +1,6 @@
import QtQuick 2.15
-import QtQuick.Controls 2.15
+import QtQuick.Window 2.2
+import QtQuick.Controls 2.4
ApplicationWindow {
id: app
@@ -10,6 +11,8 @@ ApplicationWindow {
visibility: Window.FullScreen // Add this line
property int letterSize: 25
+ property int letterSizeLoaded: 35
+ property int gearOffset: -5
property int iconWidth: 40
property int iconHeight: 40
property bool carClusterVisible: true
@@ -24,56 +27,102 @@ ApplicationWindow {
anchors.fill: parent
visible: app.carClusterVisible
- // Background Image
- Image {
- source: "qrc:/assets/images/car-background.png"
- // fillMode: Image.PreserveAspectCrop
- anchors.fill: parent
+ gradient: Gradient {
+ GradientStop { position: 0.0; color: "#000000" }
+ GradientStop { position: 0.5; color: "#153441" } // Turquoise color
+ GradientStop { position: 1.0; color: "#000000" }
}
-
- Row {
+ Rectangle {
anchors.verticalCenter: parent.verticalCenter
- anchors.verticalCenterOffset: -110
anchors.horizontalCenter: parent.horizontalCenter
- anchors.leftMargin: 3
+ width: 420
+ height: 420
+ color: "transparent"
+ Image {
+ id: car
+ anchors.centerIn: parent
+ width: parent.width
+ height: parent.height
+ source: "qrc:/assets/images/car.png"
+ visible: true
+ fillMode: Image.PreserveAspectFit
+ }
+ }
+ Row {
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.left: parent.left
+ anchors.leftMargin: 120
spacing: 10
- // Left Turn Signal
TurnSignalLeft {}
-
- // Speed Display (example)
SpeedDisplay {}
-
- // Right Turn Signal
TurnSignalRight {}
}
- GearShiftInfo {
+ Row {
+
+ anchors.right: parent.right
+ anchors.rightMargin: 105
anchors.verticalCenter: parent.verticalCenter
- anchors.verticalCenterOffset: -10
- anchors.left: parent.left
- anchors.leftMargin: 20
+ spacing: 15
+ CircularProgressBar {
+ id: batteryPercentage
+ lineWidth: 10
+ value: 0.1
+ size: 150
+ secondaryColor: "#ffffff"
+ primaryColor: "#1b43c7"
+
+ Text {
+ text: parseInt(batteryPercentage.value * 100) + "%"
+ anchors.centerIn: parent
+ font.pixelSize: 25
+ color: "#ffffff"
+ }
+ }
+
+ CircularProgressBar {
+ id: batteryAutonomy
+ lineWidth: 10
+ value: 0.2
+ size: 120
+ secondaryColor: "#ffffff"
+ primaryColor: "#1ba5c7"
+
+ Text {
+ text: parseInt(batteryAutonomy.value * 100) + "km"
+ anchors.centerIn: parent
+ font.pixelSize: 15
+ color: "#ffffff"
+ }
+ }
+
+ }
+
+ GearShiftInfo {
+ anchors.bottom: parent.bottom
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.bottomMargin: 15
}
LightInfo {
- anchors.verticalCenter: parent.verticalCenter
- anchors.verticalCenterOffset: -10
- anchors.right: parent.right
- anchors.rightMargin: 20
+ anchors.top: parent.top
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.topMargin: 15
}
FootbarInfo {
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 0
+ anchors.top: parent.top
+ anchors.topMargin: 10
anchors.left: parent.left
- anchors.leftMargin: 20
+ anchors.leftMargin: 30
}
TimeInfo {
- anchors.bottom: parent.bottom
- anchors.bottomMargin: 5
+ anchors.top: parent.top
+ anchors.topMargin: 10
anchors.right: parent.right
- anchors.rightMargin: 20
+ anchors.rightMargin: 30
}
}
diff --git a/ui/SpeedDisplay.qml b/ui/SpeedDisplay.qml
index 65ee66d..1f0cf1b 100644
--- a/ui/SpeedDisplay.qml
+++ b/ui/SpeedDisplay.qml
@@ -1,5 +1,6 @@
import QtQuick 2.15
+
Column {
spacing: 3
diff --git a/ui/TimeInfo.qml b/ui/TimeInfo.qml
index af12b9b..06a95b7 100644
--- a/ui/TimeInfo.qml
+++ b/ui/TimeInfo.qml
@@ -2,8 +2,21 @@ import QtQuick 2.15
Row {
spacing: 5
+ Image {
+ id: clockIcon
+ source: "qrc:/assets/icons/watch.png"
+ width: app.iconWidth - 5
+ height: app.iconHeight - 5
+ visible: true
+ fillMode: Image.PreserveAspectFit
+ }
+
+ Rectangle {
+ width: 7 // Adjust the width to set the desired space
+ height: 1
+ color: "transparent"
+ }
- // Hora
Text {
font.family: "Open Sans"
id: timeDisplay
@@ -13,7 +26,6 @@ Row {
opacity: 0.0
}
- // AM/PM
Text {
font.family: "Open Sans"
id: amPmDisplay
@@ -37,7 +49,6 @@ Row {
}
}
- // Funções encapsuladas em um QtObject
QtObject {
id: timeHelper
diff --git a/ui/TurnSignalLeft.qml b/ui/TurnSignalLeft.qml
index e3204a3..4ff9157 100644
--- a/ui/TurnSignalLeft.qml
+++ b/ui/TurnSignalLeft.qml
@@ -1,27 +1,34 @@
import QtQuick 2.15
+
Row {
id: root
spacing: 10
- Image {
- anchors.verticalCenter: parent.verticalCenter
- id: turnSignal
- source: "qrc:/assets/icons/turn_left_on.png"
+ Rectangle {
width: 70
height: 70
- opacity: 0.0
- visible: instrumentCluster.lights.leftBlinker
-
- Timer {
- id: blinkTimer
- interval: 500
- running: instrumentCluster.lights.leftBlinker
- repeat: true
- onTriggered: {
- // Toggle opacity when blinking
- turnSignal.opacity = turnSignal.opacity === 1.0 ? 0.0 : 1.0;
+ color: "transparent"
+ Image {
+ anchors.verticalCenter: parent.verticalCenter
+ id: turnSignal
+ source: "qrc:/assets/icons/turn_left_on.png"
+ width: 70
+ height: 70
+ opacity: 0.0
+ visible: instrumentCluster.lights.leftBlinker
+
+ Timer {
+ id: blinkTimer
+ interval: 500
+ running: instrumentCluster.lights.leftBlinker
+ repeat: true
+ onTriggered: {
+ // Toggle opacity when blinking
+ turnSignal.opacity = turnSignal.opacity === 1.0 ? 0.0 : 1.0;
+ }
}
}
}
}
+
diff --git a/ui/TurnSignalRight.qml b/ui/TurnSignalRight.qml
index 3a23722..a2592fd 100644
--- a/ui/TurnSignalRight.qml
+++ b/ui/TurnSignalRight.qml
@@ -4,23 +4,28 @@ Row {
id: root
spacing: 10
- Image {
- anchors.verticalCenter: parent.verticalCenter
- id: turnSignal
- source: "qrc:/assets/icons/turn_right_on.png"
+ Rectangle {
width: 70
height: 70
- opacity: 0.0
- visible: instrumentCluster.lights.rightBlinker
-
- Timer {
- id: blinkTimer
- interval: 500
- running: instrumentCluster.lights.rightBlinker
- repeat: true
- onTriggered: {
- // Toggle opacity when blinking
- turnSignal.opacity = turnSignal.opacity === 1.0 ? 0.0 : 1.0;
+ color: "transparent"
+ Image {
+ anchors.verticalCenter: parent.verticalCenter
+ id: turnSignal
+ source: "qrc:/assets/icons/turn_right_on.png"
+ width: 70
+ height: 70
+ opacity: 0.0
+ visible: instrumentCluster.lights.rightBlinker
+
+ Timer {
+ id: blinkTimer
+ interval: 500
+ running: instrumentCluster.lights.rightBlinker
+ repeat: true
+ onTriggered: {
+ // Toggle opacity when blinking
+ turnSignal.opacity = turnSignal.opacity === 1.0 ? 0.0 : 1.0;
+ }
}
}
}
diff --git a/ui/resources.qrc b/ui/resources.qrc
index 0dbaf11..e89189b 100644
--- a/ui/resources.qrc
+++ b/ui/resources.qrc
@@ -8,7 +8,7 @@
FootbarInfo.qml
GearShiftInfo.qml
TimeInfo.qml
-
+ CircularProgressBar.qml
@@ -26,8 +26,10 @@
../assets/icons/battery-3.png
../assets/icons/battery-4.png
../assets/icons/battery-5.png
+ ../assets/icons/cloud.png
+ ../assets/icons/watch.png
- ../assets/images/car-background.png
+ ../assets/images/car.png
\ No newline at end of file