Add Tire Pressure, Keypad elements and misc. UI Changes

    - Increased slider grab handle size
    - Add floating menu for Tire Pressure UI
    - Show errow in Playback toggle when CAN interface is not available
    - Update Half gauges to show Unit and logo correctly
    - Update App resources
    - Add new tumbler input for HVAC temp
    - Add new get function to KuksaClient to get Tire Pressure unit and Current value to increment

Fixes:
    - Check for vcar dbc file at '/etc/kuksa-dbc-feeder/'
    - Increase font size in Settings page
    - Allow for tumbler/ spin wheel values to wrap around

Bug-AGL: SPEC-5161

Change-Id: I2386bf7dc762b09b83cef1be104a35d6afc0a704
Signed-off-by: Suchinton Chakravarty <suchinton.2001@gmail.com>

8 files changed, 475 insertions, 29 deletions

diff --git a/QMLWidgets/Full_Gauge/SpeedGauge.qml b/QMLWidgets/Full_Gauge/SpeedGauge.qml
index 263e7f1..02531b7 100644
--- a/QMLWidgets/Full_Gauge/SpeedGauge.qml
+++ b/QMLWidgets/Full_Gauge/SpeedGauge.qml
@@ -94,9 +94,26 @@ Item {
 

         function drawProgress(ctx, center, progress) {

             ctx.lineWidth = 20;

+

+            // Create a linear gradient

+            var gradient = ctx.createLinearGradient(

+                center.x + gaugeRadius * Math.cos(startAngle),

+                center.y + gaugeRadius * Math.sin(startAngle),

+                center.x + gaugeRadius * Math.cos(startAngle + fullAngle),

+                center.y + gaugeRadius * Math.sin(startAngle + fullAngle)

+            );

+

+            // Set gradient stops

+            gradient.addColorStop(0.3, "#00FF00"); // Green color

+            gradient.addColorStop(0.3, primaryColor); // Primary color

+            gradient.addColorStop(0.3, "#FFD700"); // Yellow color

+            gradient.addColorStop(1, "#FF0000"); // Red color

+

             ctx.beginPath();

             ctx.arc(center.x, center.y, gaugeRadius, startAngle, startAngle + (progress / 270) * fullAngle);

-            ctx.strokeStyle = primaryColor;

+

+            // Apply the gradient to the stroke style

+            ctx.strokeStyle = gradient;

             ctx.stroke();

         }

 

@@ -118,17 +135,17 @@ Item {
         }

 

         function drawProgressTick(ctx, center, progress) {

-            

+

             ctx.lineWidth = tickLength * 3

             ctx.strokeStyle = '#FFFFFF'

             ctx.beginPath()

-            

+

             const progressAngle = startAngle + (progress / 270) * fullAngle

             const x1 = center.x + gaugeRadius * Math.cos(progressAngle)

             const y1 = center.y + gaugeRadius * Math.sin(progressAngle)

             const x2 = center.x + (gaugeRadius - tickLength * 1.5) * Math.cos(progressAngle)

             const y2 = center.y + (gaugeRadius - tickLength * 1.5) * Math.sin(progressAngle)

-            

+

             ctx.moveTo(x1, y1)

             ctx.lineTo(x2, y2)

             ctx.stroke()

diff --git a/QMLWidgets/Half_Gauge/CoolantGauge.qml b/QMLWidgets/Half_Gauge/CoolantGauge.qml
index 6e1d583..634647d 100644
--- a/QMLWidgets/Half_Gauge/CoolantGauge.qml
+++ b/QMLWidgets/Half_Gauge/CoolantGauge.qml
@@ -5,10 +5,11 @@ Item {
     width: 200

     height: 200

 

-    property real value: 80

+    property real value: 0

     property real minValue: 0

     property real maxValue: 120

     property string unit: "°C"

+    property string iconSource: "qrc:/Carbon_Icons/carbon_icons/temperature--water.svg"

 

     property color primaryColor: "#16CCBA"

     property color secondaryColor: "#00000000"

@@ -34,12 +35,12 @@ Item {
             var center = Qt.point(width / 2, height / 2)

             var side = Math.min(width, height)

             var radius = (side - side * 0.25) / 2

-            var startAngle = Math.PI * 2 / 3

-            var fullAngle = Math.PI * 2 / 3

+            var startAngle = Math.PI * 5 / 4

+            var fullAngle = Math.PI * 1 / 2 

             var progressAngle = startAngle + (degree / 270) * fullAngle

 

             ctx.reset()

-            ctx.lineCap = 'square'

+            ctx.lineCap = 'round'

 

             // background arc

             ctx.lineWidth = 25

@@ -86,21 +87,20 @@ Item {
         id: gaugePercentage

         anchors.verticalCenter: gaugeText.verticalCenter

         anchors.left: gaugeText.right

-        text: "%"

+        text: unit

         font.pixelSize: 0.15 * Math.min(root.width, root.height)

         font.bold: true

         color: "#FFFFFF"

     }

 

-    Text {

-        id: gaugeUnit

+    Image {

+        source: iconSource

         anchors.top: gaugeText.bottom

         anchors.horizontalCenter: gaugeText.horizontalCenter

-        

-        text: unit

-        font.pixelSize: 18

-        font.bold: true

-        color: "#FFFFFF" 

+        width: 0.15 * Math.min(root.width, root.height)

+        fillMode: Image.PreserveAspectFit

+        // antialiasing: true

+        antialiasing: true

     }

 

     Behavior on value {

diff --git a/QMLWidgets/Half_Gauge/FuelGauge.qml b/QMLWidgets/Half_Gauge/FuelGauge.qml
index 21ac4cd..f0ea7d0 100644
--- a/QMLWidgets/Half_Gauge/FuelGauge.qml
+++ b/QMLWidgets/Half_Gauge/FuelGauge.qml
@@ -5,10 +5,11 @@ Item {
     width: 200

     height: 200

 

-    property real value: 80

+    property real value: 0

     property real minValue: 0

     property real maxValue: 100

-    property string unit: "NA"

+    property string unit: "%"

+    property string iconSource: "qrc:/Images/Images/fuel-icon.png"

 

     property color primaryColor: "#16CCBA"

     property color secondaryColor: "#00000000"

@@ -36,12 +37,12 @@ Item {
             var center = Qt.point(width / 2, height / 2)

             var side = Math.min(width, height)

             var radius = (side - side * 0.25) / 2

-            var startAngle = Math.PI * 2 / 3

-            var fullAngle = Math.PI * 2 / 3

+            var startAngle = Math.PI * 5 / 4

+            var fullAngle = Math.PI * 1 / 2 

             var progressAngle = startAngle + (degree / 270) * fullAngle

 

             ctx.reset()

-            ctx.lineCap = 'square'

+            ctx.lineCap = 'round'

 

             // background arc

             ctx.lineWidth = 25

@@ -90,21 +91,20 @@ Item {
         

         anchors.verticalCenter: gaugeText.verticalCenter

         anchors.left: gaugeText.right

-        text: "%"

+        text: unit

         font.pixelSize: 0.15 * Math.min(root.width, root.height)

         font.bold: true

         color: "#FFFFFF"

     }

 

-    Text {

-        id: gaugeUnit

+    Image {

+        source: iconSource

         anchors.top: gaugeText.bottom

         anchors.horizontalCenter: gaugeText.horizontalCenter

-        

-        text: unit

-        font.pixelSize: 18

-        font.bold: true

-        color: "#FFFFFF" 

+        width: 0.15 * Math.min(root.width, root.height)

+        fillMode: Image.PreserveAspectFit

+        // antialiasing: true

+        antialiasing: true

     }

 

     Behavior on value {

diff --git a/QMLWidgets/Temp_Tumbler/TempTumbler.qml b/QMLWidgets/Temp_Tumbler/TempTumbler.qml
new file mode 100644
index 0000000..612d9a3
--- /dev/null
+++ b/QMLWidgets/Temp_Tumbler/TempTumbler.qml
@@ -0,0 +1,159 @@
+import QtQuick 2.9
+import QtQuick.Window 2.2
+import QtQuick.Controls 2.2
+
+Rectangle {
+    width: frame.implicitWidth
+    height: frame.implicitHeight
+    
+    // save colors in variables
+    property color backgroundColor: "#131313"
+    property color background_alt: "#2A2827"
+    property color buttonColor: "#6C6C85"
+    property color highlight: "#4BD7D6"
+
+    // store icons from qrc in variables
+    property string iconUp: "qrc:/Carbon_Icons/carbon_icons/temperature--frigid.svg"
+    property string iconDown: "qrc:/Carbon_Icons/carbon_icons/temperature--hot.svg"
+
+    color: backgroundColor
+    
+    signal valueChanged(int newValue)
+
+    FontMetrics {
+        id: fontMetrics
+    }
+
+    Component {
+        id: delegateComponent
+
+        Label {
+            text: model.number
+            opacity: 1.0 - Math.abs(Tumbler.displacement) / (Tumbler.tumbler.visibleItemCount / 2)
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pixelSize: fontMetrics.font.pixelSize * parent.width / fontMetrics.font.pixelSize / 3
+            color: highlight
+            font.bold: true
+        }
+    }
+
+    Frame {
+        id: frame
+        padding: 0
+        anchors.centerIn: parent
+        anchors.fill: parent
+
+        Rectangle {
+            anchors.fill: parent
+            color: backgroundColor
+            radius: 10
+        }
+
+        Column {
+            spacing: 10
+            anchors.fill: parent
+
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.margins: 10
+
+            Button {
+                width: parent.width
+                height: parent.height / 6
+
+                Rectangle {
+                    width: parent.width
+                    height: parent.height
+                    color: buttonColor
+                    radius: 10
+                    
+                    Image {
+                        source: iconUp
+                        anchors.centerIn: parent
+                        sourceSize.width: parent.width / 2
+                        sourceSize.height: parent.height / 2
+                        fillMode: Image.PreserveAspectFit
+                        smooth: true
+                    }
+                }
+                onClicked: {
+                    // if we are at the top of the list, set the index to the last element
+                    if (valueTumbler.currentIndex == 0) {
+                        valueTumbler.currentIndex = valueTumbler.model.count - 1;
+                    }
+                    else {
+                        valueTumbler.currentIndex -= 1;
+                    }
+                }
+            }
+
+            Tumbler {
+                id: valueTumbler
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width
+                height: parent.height / 2
+                model: ListModel {
+                    ListElement { number: 16 }
+                    ListElement { number: 17 }
+                    ListElement { number: 18 }
+                    ListElement { number: 19 }
+                    ListElement { number: 20 }
+                    ListElement { number: 21 }
+                    ListElement { number: 22 }
+                    ListElement { number: 23 }
+                    ListElement { number: 24 }
+                    ListElement { number: 25 }
+                    ListElement { number: 26 }
+                    ListElement { number: 27 }
+                    ListElement { number: 28 }
+                    ListElement { number: 29 }
+                    ListElement { number: 30 }
+                    ListElement { number: 31 }
+                    ListElement { number: 32 }
+                }
+
+                onCurrentIndexChanged: {
+                    valueChanged(model.get(currentIndex).number);
+                }
+
+                delegate: delegateComponent
+
+                Rectangle {
+                    width: parent.width
+                    height: parent.height
+                    color: background_alt
+                    radius: 10
+                }
+            }
+
+            Button {
+                width: parent.width
+                height: parent.height / 6
+
+                Rectangle {
+                    width: parent.width
+                    height: parent.height
+                    color: buttonColor
+                    radius: 10
+                    
+                    Image {
+                        source: iconDown
+                        anchors.centerIn: parent
+                        sourceSize.width: parent.width / 2
+                        sourceSize.height: parent.height / 2
+                        fillMode: Image.PreserveAspectFit
+                        smooth: true
+                    }
+                }
+                onClicked: {
+                    if (valueTumbler.currentIndex == 16) {
+                        valueTumbler.currentIndex = 0;
+                    }
+                    else {
+                        valueTumbler.currentIndex += 1;
+                    }
+                }
+            }
+        }      
+    }
+}
\ No newline at end of file
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);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/QMLWidgets/Tire_Pressure/assets/DefaultTire.svg b/QMLWidgets/Tire_Pressure/assets/DefaultTire.svg
new file mode 100644
index 0000000..89ac4b6
--- /dev/null
+++ b/QMLWidgets/Tire_Pressure/assets/DefaultTire.svg
@@ -0,0 +1,9 @@
+<svg width="22" height="85" viewBox="0 0 22 85" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="22" height="85" rx="8" fill="url(#paint0_linear_157_8234)"/>
+  <defs>
+    <linearGradient id="paint0_linear_157_8234" x1="0" y1="0" x2="0" y2="85" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#232323"/>
+      <stop offset="1" stop-color="#4D4D4D"/>
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/QMLWidgets/Tire_Pressure/assets/SelectedTire.svg b/QMLWidgets/Tire_Pressure/assets/SelectedTire.svg
new file mode 100644
index 0000000..0a653e2
--- /dev/null
+++ b/QMLWidgets/Tire_Pressure/assets/SelectedTire.svg
@@ -0,0 +1,14 @@
+<svg width="26" height="89" viewBox="0 0 26 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="24" height="87" rx="9" fill="url(#paint0_linear_125_20962)" stroke="url(#paint1_linear_125_20962)" stroke-width="2"/>
+  <defs>
+    <linearGradient id="paint0_linear_125_20962" x1="13" y1="2" x2="13" y2="87" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#232323"/>
+      <stop offset="1" stop-color="#4D4D4D"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_125_20962" x1="13" y1="2" x2="13" y2="87" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#BAFBFF"/>
+      <stop offset="0.515" stop-color="#C9FCFF"/>
+      <stop offset="1" stop-color="#BAFBFF"/>
+    </linearGradient>
+  </defs>
+</svg>
\ No newline at end of file
diff --git a/QMLWidgets/Tire_Pressure/assets/car-top.png b/QMLWidgets/Tire_Pressure/assets/car-top.png
new file mode 100644
index 0000000..9283e0b
--- /dev/null
+++ b/QMLWidgets/Tire_Pressure/assets/car-top.png