aboutsummaryrefslogtreecommitdiffstats
path: root/QMLWidgets/Tire_Pressure/TirePressure.qml
diff options
context:
space:
mode:
Diffstat (limited to 'QMLWidgets/Tire_Pressure/TirePressure.qml')
-rw-r--r--QMLWidgets/Tire_Pressure/TirePressure.qml247
1 files changed, 247 insertions, 0 deletions
diff --git a/QMLWidgets/Tire_Pressure/TirePressure.qml b/QMLWidgets/Tire_Pressure/TirePressure.qml
new file mode 100644
index 0000000..0102fba
--- /dev/null
+++ b/QMLWidgets/Tire_Pressure/TirePressure.qml
@@ -0,0 +1,247 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.3
+
+Item {
+ id: root
+ width: 400
+ height: 400
+
+ property string carImage: "./assets/car-top.png"
+ property string defaultTire: "./assets/DefaultTire.svg"
+ property string selectedTire: "./assets/SelectedTire.svg"
+
+ property color highlight: "#4BD7D6"
+ property color defaultColor: "#6C6C85"
+ property color darkbg: "#131313"
+
+ property int selectedTireIndex: -1
+
+ // Move these functions here so they're accessible to all buttons
+ function resetAllButtons() {
+ selectedTireIndex = -1;
+ button0.background.color = defaultColor;
+ button1.background.color = defaultColor;
+ button2.background.color = defaultColor;
+ button3.background.color = defaultColor;
+
+ tireImage0.source = defaultTire;
+ tireImage1.source = defaultTire;
+ tireImage2.source = defaultTire;
+ tireImage3.source = defaultTire;
+ }
+
+ function selectButton(index) {
+ selectedTireIndex = index;
+
+ switch(index) {
+ case 0:
+ button0.background.color = highlight;
+ tireImage0.source = selectedTire;
+ break;
+ case 1:
+ button1.background.color = highlight;
+ tireImage1.source = selectedTire;
+ break;
+ case 2:
+ button2.background.color = highlight;
+ tireImage2.source = selectedTire;
+ break;
+ case 3:
+ button3.background.color = highlight;
+ tireImage3.source = selectedTire;
+ break;
+ }
+
+ // Reset other buttons
+ for (var i = 0; i < 4; i++) {
+ if (i !== index) {
+ var button = eval("button" + i);
+ button.background.color = defaultColor;
+ eval("tireImage" + i).source = defaultTire;
+ }
+ }
+ }
+
+ Rectangle {
+ anchors.fill: parent
+ color: darkbg
+ z: 0
+
+ Image {
+ id: car
+ source: carImage
+ fillMode: Image.PreserveAspectFit
+ anchors.fill: parent
+ anchors.centerIn: parent
+ z: 1
+ }
+
+ GridLayout {
+ id: buttonGrid
+ anchors.centerIn: parent
+ columns: 2
+ rows: 2
+
+ Button {
+ id: button0
+ Layout.preferredWidth: car.width / 2
+ Layout.preferredHeight: car.height / 2
+
+ background: Rectangle {
+ color: defaultColor
+ opacity: 0.5
+ radius: 15
+ z: 1
+ }
+
+ Rectangle {
+ width: parent.width / 2
+ height: parent.height / 2
+ color: "transparent"
+ anchors.fill: parent
+ z: 2
+
+ Image {
+ id: tireImage0
+ source: defaultTire
+ sourceSize.height: parent.height / 2
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: parent.height * 0.32
+ }
+ }
+
+ onClicked: handleButtonClick(0)
+
+ function handleButtonClick(index) {
+ if (selectedTireIndex === index) {
+ resetAllButtons();
+ } else {
+ selectButton(index);
+ }
+ }
+ }
+
+ Button {
+ id: button1
+ Layout.preferredWidth: car.width / 2
+ Layout.preferredHeight: car.height / 2
+
+ background: Rectangle {
+ color: defaultColor
+ opacity: 0.5
+ radius: 15
+ z: 1
+ }
+
+ Rectangle {
+ width: parent.width / 2
+ height: parent.height / 2
+ color: "transparent"
+ anchors.fill: parent
+ z: 2
+
+ Image {
+ id: tireImage1
+ source: defaultTire
+ sourceSize.height: parent.height / 2
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: parent.height * 0.28
+ }
+ }
+
+ onClicked: handleButtonClick(1)
+
+ function handleButtonClick(index) {
+ if (selectedTireIndex === index) {
+ resetAllButtons();
+ } else {
+ selectButton(index);
+ }
+ }
+ }
+
+ Button {
+ id: button2
+ Layout.preferredWidth: car.width / 2
+ Layout.preferredHeight: car.height / 2
+
+ background: Rectangle {
+ color: defaultColor
+ opacity: 0.5
+ radius: 15
+ z: 1
+ }
+
+ Rectangle {
+ width: parent.width / 2
+ height: parent.height / 2
+ color: "transparent"
+ anchors.fill: parent
+ z: 2
+
+ Image {
+ id: tireImage2
+ source: defaultTire
+ sourceSize.height: parent.height / 2
+ anchors.right: parent.right
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: parent.height * 0.32
+ }
+ }
+
+ onClicked: handleButtonClick(2)
+
+ function handleButtonClick(index) {
+ if (selectedTireIndex === index) {
+ resetAllButtons();
+ } else {
+ selectButton(index);
+ }
+ }
+ }
+
+ Button {
+ id: button3
+ Layout.preferredWidth: car.width / 2
+ Layout.preferredHeight: car.height / 2
+
+ background: Rectangle {
+ color: defaultColor
+ opacity: 0.5
+ radius: 15
+ z: 1
+ }
+
+ Rectangle {
+ width: parent.width / 2
+ height: parent.height / 2
+ color: "transparent"
+ anchors.fill: parent
+ z: 2
+
+ Image {
+ id: tireImage3
+ source: defaultTire
+ sourceSize.height: parent.height / 2
+ anchors.left: parent.left
+ anchors.verticalCenter: parent.verticalCenter
+ anchors.margins: parent.height * 0.28
+ }
+ }
+
+ onClicked: handleButtonClick(3)
+
+ function handleButtonClick(index) {
+ if (selectedTireIndex === index) {
+ resetAllButtons();
+ } else {
+ selectButton(index);
+ }
+ }
+ }
+ }
+ }
+}