aboutsummaryrefslogtreecommitdiffstats
path: root/QMLWidgets
diff options
context:
space:
mode:
Diffstat (limited to 'QMLWidgets')
-rw-r--r--QMLWidgets/Full_Gauge/RPMGauge.qml165
-rw-r--r--QMLWidgets/Full_Gauge/SpeedGauge.qml202
-rw-r--r--QMLWidgets/Full_Gauge/assets/Ellipse 1.svg11
-rw-r--r--QMLWidgets/Full_Gauge/assets/Ellipse 5.svg24
-rw-r--r--QMLWidgets/Half_Gauge/CoolantGauge.qml150
-rw-r--r--QMLWidgets/Half_Gauge/FuelGauge.qml158
6 files changed, 710 insertions, 0 deletions
diff --git a/QMLWidgets/Full_Gauge/RPMGauge.qml b/QMLWidgets/Full_Gauge/RPMGauge.qml
new file mode 100644
index 0000000..382731d
--- /dev/null
+++ b/QMLWidgets/Full_Gauge/RPMGauge.qml
@@ -0,0 +1,165 @@
+import QtQuick 2.9
+
+Item {
+ id: root
+ width: 400
+ height: 400
+
+ property real value: 0
+ property real minValue: 0
+ property real maxValue: 8000
+ property string unit: "RPM"
+
+ property color primaryColor: "#16CCBA"
+ property color secondaryColor: "#00000000"
+ property int animationDuration: 1000
+ property real startAngle: 0
+
+ Rectangle {
+ anchors.fill: parent
+ color: "#041F2B"
+ z: -1
+ }
+
+ Image {
+ id: background1
+ source: "./assets/Ellipse 5.svg"
+ rotation: 180
+ sourceSize.width: width
+ sourceSize.height: width
+ fillMode: Image.PreserveAspectFit
+ anchors.fill: parent
+ anchors.centerIn: parent
+ scale: 1
+ opacity: 0.7
+ z: 0
+ }
+
+ Image {
+ id: background2
+ source: "./assets/Ellipse 1.svg"
+ sourceSize.width: width
+ sourceSize.height: width
+ anchors.fill: parent
+ anchors.centerIn: parent
+ fillMode: Image.PreserveAspectFit
+ scale: 1
+ opacity: 0.7
+ z: 1
+ }
+
+ Canvas {
+ id: canvas
+ anchors.fill: parent
+ antialiasing: true
+ property real degree: 0
+
+ onDegreeChanged: requestPaint()
+
+ onPaint: {
+ var ctx = getContext("2d")
+ var center = Qt.point(width / 2, height / 2)
+ var side = Math.min(width, height)
+ var radius = (side - side * 0.20) / 2
+ var startAngle = Math.PI * 3 / 4
+ var fullAngle = Math.PI * 3 / 2
+ var progressAngle = startAngle + (degree / 270) * fullAngle
+
+ ctx.reset()
+ ctx.lineCap = 'round'
+
+ ctx.lineWidth = side * 0.1
+ ctx.beginPath()
+ ctx.arc(center.x, center.y, radius, startAngle, progressAngle)
+ ctx.strokeStyle = secondaryColor
+ ctx.stroke()
+
+ ctx.lineWidth = 20
+ ctx.beginPath()
+ ctx.arc(center.x, center.y, radius, startAngle, progressAngle)
+ ctx.strokeStyle = primaryColor
+ ctx.stroke()
+
+ // draw tick marks
+ ctx.lineWidth = 10
+ ctx.strokeStyle = '#FFFFFF'
+ ctx.beginPath()
+ var tickCount = 2; // Number of tick marks
+ for (var i = 0; i < tickCount; i++) {
+ var angle = startAngle + (i / (tickCount - 1)) * (progressAngle - startAngle)
+ var x1 = center.x + radius * Math.cos(angle)
+ var y1 = center.y + radius * Math.sin(angle)
+ var x2 = center.x + (radius - 20) * Math.cos(angle)
+ var y2 = center.y + (radius - 20) * Math.sin(angle)
+ ctx.moveTo(x1, y1)
+ ctx.lineTo(x2, y2)
+ }
+ ctx.stroke()
+ }
+ }
+
+ Text {
+ id: gaugeText
+ anchors.centerIn: parent
+ text: "0"
+ font.pixelSize: 0.2 * Math.min(root.width, root.height)
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Text {
+ id: gaugeUnit
+ anchors.top: gaugeText.bottom
+ anchors.horizontalCenter: gaugeText.horizontalCenter
+
+ text: unit
+ font.pixelSize: 18
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Behavior on value {
+ NumberAnimation { duration: animationDuration }
+ }
+
+ onValueChanged: updateGaugeValue(value)
+
+ function updateGaugeValue(value) {
+ canvas.degree = value * 270
+ gaugeText.text = (value * (maxValue - minValue) + minValue).toFixed(0)
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ hoverEnabled: true
+
+ property bool isDragging: false
+ property real initialValue: 0
+
+ onEntered: cursorShape = Qt.PointingHandCursor
+ onPressed: {
+ isDragging = true
+ initialValue = root.value
+ }
+ onReleased: isDragging = false
+
+ onMouseXChanged: updateDragValue(mouse.x, mouse.y)
+ onMouseYChanged: updateDragValue(mouse.x, mouse.y)
+
+ function updateDragValue(x, y) {
+ if (!isDragging) return
+
+ var centerX = width / 2
+ var centerY = height / 2
+ var dx = x - centerX
+ var dy = centerY - y // Note: y-axis is inverted
+ var angle = Math.atan2(dy, dx) * (180 / Math.PI)
+
+ // Convert angle to gauge value (0 to 1)
+ var gaugeValue = (angle + 135) / 270 // Adjust based on your gauge's start angle
+ gaugeValue = Math.max(0, Math.min(gaugeValue, 1)) // Clamp value
+
+ root.value = gaugeValue
+ }
+ }
+}
diff --git a/QMLWidgets/Full_Gauge/SpeedGauge.qml b/QMLWidgets/Full_Gauge/SpeedGauge.qml
new file mode 100644
index 0000000..263e7f1
--- /dev/null
+++ b/QMLWidgets/Full_Gauge/SpeedGauge.qml
@@ -0,0 +1,202 @@
+import QtQuick 2.9
+
+Item {
+ id: root
+ width: 400
+ height: 400
+
+ property real value: 0
+ property real minValue: 0
+ property real maxValue: 240
+ property string unit: "Km/h"
+
+ property color primaryColor: "#16CCBA"
+ property color secondaryColor: "#00000000"
+ property int animationDuration: 500
+ property real startAngle: Math.PI * 3 / 4
+ property real fullAngle: Math.PI * 3 / 2
+
+ property real gaugeRadius: 0
+ property real tickLength: 0
+
+ Component.onCompleted: {
+ calculateGeometry();
+ }
+
+ onWidthChanged: calculateGeometry()
+ onHeightChanged: calculateGeometry()
+
+ function calculateGeometry() {
+ const side = Math.min(width, height);
+ gaugeRadius = (side - side * 0.20) / 2;
+ tickLength = gaugeRadius * 0.05;
+ }
+
+ Rectangle {
+ anchors.fill: parent
+ color: "#041F2B"
+ z: -1
+ }
+
+ Image {
+ id: background1
+ source: "./assets/Ellipse 5.svg"
+ rotation: 180
+ sourceSize.width: width
+ sourceSize.height: width
+ fillMode: Image.PreserveAspectFit
+ anchors.fill: parent
+ scale: 1
+ opacity: 0.7
+ z: 0
+ }
+
+ Image {
+ id: background2
+ source: "./assets/Ellipse 1.svg"
+ sourceSize.width: width
+ sourceSize.height: width
+ fillMode: Image.PreserveAspectFit
+ anchors.fill: parent
+ scale: 1
+ opacity: 0.7
+ z: 1
+ }
+
+ Canvas {
+ id: canvas
+ anchors.fill: parent
+ antialiasing: true
+ property real degree: 0
+
+ onDegreeChanged: requestPaint()
+
+ onPaint: {
+ var ctx = getContext("2d");
+ var center = Qt.point(width / 2, height / 2);
+
+ ctx.reset();
+ ctx.lineCap = 'round';
+
+ drawBackground(ctx, center);
+ drawProgress(ctx, center, degree);
+ drawTicks(ctx, center);
+ drawProgressTick(ctx, center, degree);
+ }
+
+ function drawBackground(ctx, center) {
+ ctx.lineWidth = gaugeRadius * 0.1;
+ ctx.beginPath();
+ ctx.arc(center.x, center.y, gaugeRadius, startAngle, startAngle + fullAngle);
+ ctx.strokeStyle = secondaryColor;
+ ctx.stroke();
+ }
+
+ function drawProgress(ctx, center, progress) {
+ ctx.lineWidth = 20;
+ ctx.beginPath();
+ ctx.arc(center.x, center.y, gaugeRadius, startAngle, startAngle + (progress / 270) * fullAngle);
+ ctx.strokeStyle = primaryColor;
+ ctx.stroke();
+ }
+
+ function drawTicks(ctx, center) {
+ ctx.lineWidth = tickLength * 2
+ ctx.strokeStyle = '#FFFFFF'
+ ctx.beginPath()
+ const tickCount = 2
+ for (let i = 0; i < tickCount; i++) {
+ const angle = startAngle + (i / (tickCount - 1)) * fullAngle
+ const x1 = center.x + gaugeRadius * Math.cos(angle)
+ const y1 = center.y + gaugeRadius * Math.sin(angle)
+ const x2 = center.x + (gaugeRadius - tickLength) * Math.cos(angle)
+ const y2 = center.y + (gaugeRadius - tickLength) * Math.sin(angle)
+ ctx.moveTo(x1, y1)
+ ctx.lineTo(x2, y2)
+ }
+ ctx.stroke();
+ }
+
+ 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()
+ }
+ }
+
+ Text {
+ id: gaugeText
+ anchors.centerIn: parent
+ text: "0"
+ font.pixelSize: 0.2 * Math.min(root.width, root.height)
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Text {
+ id: gaugeUnit
+ anchors.top: gaugeText.bottom
+ anchors.horizontalCenter: gaugeText.horizontalCenter
+ text: unit
+ font.pixelSize: 18
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Behavior on value {
+ NumberAnimation { duration: animationDuration }
+ }
+
+ onValueChanged: updateGaugeValue(value)
+
+ function updateGaugeValue(value) {
+ canvas.degree = value * 270
+ gaugeText.text = (value * (maxValue - minValue) + minValue).toFixed(0)
+ }
+
+ MouseArea {
+ id: dragArea
+ anchors.fill: parent
+ hoverEnabled: true
+
+ property bool isDragging: false
+ property real initialValue: 0
+
+ onEntered: cursorShape = Qt.PointingHandCursor
+ onPressed: {
+ isDragging = true
+ initialValue = root.value
+ }
+ onReleased: isDragging = false
+
+ onMouseXChanged: updateDragValue(mouse.x, mouse.y)
+ onMouseYChanged: updateDragValue(mouse.x, mouse.y)
+
+ function updateDragValue(x, y) {
+ if (!isDragging) return
+
+ const centerX = width / 2
+ const centerY = height / 2
+ const dx = x - centerX
+ const dy = centerY - y // Note: y-axis is inverted
+ const angle = Math.atan2(dy, dx) * (180 / Math.PI)
+
+ // Convert angle to gauge value (0 to 1)
+ let gaugeValue = (angle + 135) / 270
+ gaugeValue = Math.max(0, Math.min(gaugeValue, 1)) // Clamp value
+
+ root.value = gaugeValue
+ }
+ }
+}
diff --git a/QMLWidgets/Full_Gauge/assets/Ellipse 1.svg b/QMLWidgets/Full_Gauge/assets/Ellipse 1.svg
new file mode 100644
index 0000000..c2666d9
--- /dev/null
+++ b/QMLWidgets/Full_Gauge/assets/Ellipse 1.svg
@@ -0,0 +1,11 @@
+<svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="200" cy="200" r="187.5" stroke="url(#paint0_linear_1_121)" stroke-width="25" stroke-dasharray="5 5"/>
+<defs>
+<linearGradient id="paint0_linear_1_121" x1="-4" y1="196" x2="407.5" y2="196" gradientUnits="userSpaceOnUse">
+<stop stop-color="#9EFFD6"/>
+<stop offset="0.333683" stop-color="#E6FFB0" stop-opacity="0"/>
+<stop offset="0.675444" stop-color="#E6FFB0" stop-opacity="0"/>
+<stop offset="1" stop-color="#9EFFD6"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/QMLWidgets/Full_Gauge/assets/Ellipse 5.svg b/QMLWidgets/Full_Gauge/assets/Ellipse 5.svg
new file mode 100644
index 0000000..a4a07a2
--- /dev/null
+++ b/QMLWidgets/Full_Gauge/assets/Ellipse 5.svg
@@ -0,0 +1,24 @@
+<svg width="203" height="200" viewBox="0 0 203 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_ii_109_7)">
+<circle cx="101.5" cy="98.5" r="101.5" fill="#09111E"/>
+</g>
+<circle cx="101.5" cy="98.5" r="101" stroke="#A6FFFA"/>
+<defs>
+<filter id="filter0_ii_109_7" x="0" y="-13" width="203" height="223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="10"/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.625 0 0 0 0 0.99537 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_109_7"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-10"/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.623529 0 0 0 0 0.996078 0 0 0 0 1 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_109_7" result="effect2_innerShadow_109_7"/>
+</filter>
+</defs>
+</svg>
diff --git a/QMLWidgets/Half_Gauge/CoolantGauge.qml b/QMLWidgets/Half_Gauge/CoolantGauge.qml
new file mode 100644
index 0000000..6e1d583
--- /dev/null
+++ b/QMLWidgets/Half_Gauge/CoolantGauge.qml
@@ -0,0 +1,150 @@
+import QtQuick 2.9
+
+Item {
+ id: root
+ width: 200
+ height: 200
+
+ property real value: 80
+ property real minValue: 0
+ property real maxValue: 120
+ property string unit: "°C"
+
+ property color primaryColor: "#16CCBA"
+ property color secondaryColor: "#00000000"
+ property int animationDuration: 500
+ property real startAngle: 0
+
+ Rectangle {
+ anchors.fill: parent
+ color: "#041F2B"
+ z: -1
+ }
+
+ Canvas {
+ id: canvas
+ anchors.fill: parent
+ antialiasing: true
+ property real degree: 0
+
+ onDegreeChanged: requestPaint()
+
+ onPaint: {
+ var ctx = getContext("2d")
+ 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 progressAngle = startAngle + (degree / 270) * fullAngle
+
+ ctx.reset()
+ ctx.lineCap = 'square'
+
+ // background arc
+ ctx.lineWidth = 25
+ ctx.beginPath()
+ ctx.arc(center.x, center.y, radius, startAngle, startAngle + fullAngle)
+ ctx.strokeStyle = '#000000'
+ ctx.stroke()
+
+ // fill arc
+ ctx.lineWidth = 15
+ ctx.beginPath()
+ ctx.arc(center.x, center.y, radius, startAngle, progressAngle)
+ ctx.strokeStyle = primaryColor
+ ctx.stroke()
+
+ // draw tick marks
+ ctx.lineWidth = 5
+ ctx.strokeStyle = '#FFFFFF'
+ ctx.beginPath()
+ var tickCount = 2; // Number of tick marks
+ for (var i = 0; i < tickCount; i++) {
+ var angle = startAngle + (i / (tickCount - 1)) * (progressAngle - startAngle)
+ var x1 = center.x + radius * Math.cos(angle)
+ var y1 = center.y + radius * Math.sin(angle)
+ var x2 = center.x + (radius - 10) * Math.cos(angle)
+ var y2 = center.y + (radius - 10) * Math.sin(angle)
+ ctx.moveTo(x1, y1)
+ ctx.lineTo(x2, y2)
+ }
+ ctx.stroke()
+ }
+ }
+
+ Text {
+ id: gaugeText
+ anchors.centerIn: parent
+ text: "0"
+ font.pixelSize: 0.3 * Math.min(root.width, root.height)
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Text {
+ id: gaugePercentage
+ anchors.verticalCenter: gaugeText.verticalCenter
+ anchors.left: gaugeText.right
+ text: "%"
+ font.pixelSize: 0.15 * Math.min(root.width, root.height)
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Text {
+ id: gaugeUnit
+ anchors.top: gaugeText.bottom
+ anchors.horizontalCenter: gaugeText.horizontalCenter
+
+ text: unit
+ font.pixelSize: 18
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Behavior on value {
+ NumberAnimation { duration: animationDuration }
+ }
+
+ onValueChanged: updateGaugeValue(value)
+
+ function updateGaugeValue(value) {
+ canvas.degree = value * 270
+ gaugeText.text = (value * (maxValue - minValue) + minValue).toFixed(0)
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ hoverEnabled: true
+
+ property bool isDragging: false
+ property real initialValue: 0
+
+ onEntered: cursorShape = Qt.PointingHandCursor
+ onPressed: {
+ isDragging = true
+ initialValue = root.value
+ }
+ onReleased: isDragging = false
+
+ onMouseXChanged: updateDragValue(mouse.x, mouse.y)
+ onMouseYChanged: updateDragValue(mouse.x, mouse.y)
+
+ function updateDragValue(x, y) {
+ if (!isDragging) return
+
+ var centerX = width / 2
+ var centerY = height / 2
+ var dx = x - centerX
+ var dy = centerY - y // Note: y-axis is inverted
+ var angle = Math.atan2(dy, dx) * (180 / Math.PI)
+
+ // Convert angle to gauge value (0 to 1)
+ var gaugeValue = (angle + 135) / 270; // Adjust based on your gauge's start angle
+ gaugeValue = Math.max(0, Math.min(gaugeValue, 1)); // Clamp value
+
+ root.value = gaugeValue;
+ }
+ }
+}
diff --git a/QMLWidgets/Half_Gauge/FuelGauge.qml b/QMLWidgets/Half_Gauge/FuelGauge.qml
new file mode 100644
index 0000000..21ac4cd
--- /dev/null
+++ b/QMLWidgets/Half_Gauge/FuelGauge.qml
@@ -0,0 +1,158 @@
+import QtQuick 2.9
+
+Item {
+ id: root
+ width: 200
+ height: 200
+
+ property real value: 80
+ property real minValue: 0
+ property real maxValue: 100
+ property string unit: "NA"
+
+ property color primaryColor: "#16CCBA"
+ property color secondaryColor: "#00000000"
+ property int animationDuration: 500
+ property real startAngle: 0
+
+ property var exposedFunction: updateGaugeUnit
+
+ Rectangle {
+ anchors.fill: parent
+ color: "#041F2B"
+ z: -1
+ }
+
+ Canvas {
+ id: canvas
+ anchors.fill: parent
+ antialiasing: true
+ property real degree: 0
+
+ onDegreeChanged: requestPaint()
+
+ onPaint: {
+ var ctx = getContext("2d")
+ 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 progressAngle = startAngle + (degree / 270) * fullAngle
+
+ ctx.reset()
+ ctx.lineCap = 'square'
+
+ // background arc
+ ctx.lineWidth = 25
+ ctx.beginPath()
+ ctx.arc(center.x, center.y, radius, startAngle, startAngle + fullAngle)
+ ctx.strokeStyle = '#000000'
+ ctx.stroke()
+
+ // fill arc
+ ctx.lineWidth = 15
+ ctx.beginPath()
+ ctx.arc(center.x, center.y, radius, startAngle, progressAngle)
+ ctx.strokeStyle = primaryColor
+ ctx.stroke()
+
+ // draw tick marks
+ ctx.lineWidth = 5
+ ctx.strokeStyle = '#FFFFFF'
+ ctx.beginPath()
+ var tickCount = 2; // Number of tick marks
+ for (var i = 0; i < tickCount; i++) {
+ var angle = startAngle + (i / (tickCount - 1)) * (progressAngle - startAngle)
+ var x1 = center.x + radius * Math.cos(angle)
+ var y1 = center.y + radius * Math.sin(angle)
+ var x2 = center.x + (radius - 10) * Math.cos(angle)
+ var y2 = center.y + (radius - 10) * Math.sin(angle)
+ ctx.moveTo(x1, y1)
+ ctx.lineTo(x2, y2)
+ }
+ ctx.stroke()
+ }
+ }
+
+ Text {
+ id: gaugeText
+ anchors.centerIn: parent
+ text: "0"
+ font.pixelSize: 0.3 * Math.min(root.width, root.height)
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Text {
+ id: gaugePercentage
+ // anchor this to the right of the gaugeText such that their baseline is aligned
+
+ anchors.verticalCenter: gaugeText.verticalCenter
+ anchors.left: gaugeText.right
+ text: "%"
+ font.pixelSize: 0.15 * Math.min(root.width, root.height)
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Text {
+ id: gaugeUnit
+ anchors.top: gaugeText.bottom
+ anchors.horizontalCenter: gaugeText.horizontalCenter
+
+ text: unit
+ font.pixelSize: 18
+ font.bold: true
+ color: "#FFFFFF"
+ }
+
+ Behavior on value {
+ NumberAnimation { duration: animationDuration }
+ }
+
+ onValueChanged: updateGaugeValue(value)
+
+ function updateGaugeValue(value) {
+ canvas.degree = value * 270
+ gaugeText.text = (value * (maxValue - minValue) + minValue).toFixed(0)
+ }
+
+ function updateGaugeUnit() {
+ gaugeUnit.text = unit
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ hoverEnabled: true
+
+ property bool isDragging: false
+ property real initialValue: 0
+
+ onEntered: cursorShape = Qt.PointingHandCursor
+ onPressed: {
+ isDragging = true
+ initialValue = root.value
+ }
+ onReleased: isDragging = false
+
+ onMouseXChanged: updateDragValue(mouse.x, mouse.y)
+ onMouseYChanged: updateDragValue(mouse.x, mouse.y)
+
+ function updateDragValue(x, y) {
+ if (!isDragging) return
+
+ var centerX = width / 2
+ var centerY = height / 2
+ var dx = x - centerX
+ var dy = centerY - y // Note: y-axis is inverted
+ var angle = Math.atan2(dy, dx) * (180 / Math.PI)
+
+ // Convert angle to gauge value (0 to 1)
+ var gaugeValue = (angle + 135) / 270; // Adjust based on your gauge's start angle
+ gaugeValue = Math.max(0, Math.min(gaugeValue, 1)); // Clamp value
+
+ root.value = gaugeValue;
+ }
+ }
+}