diff options
Diffstat (limited to 'QMLWidgets/Half_Gauge/FuelGauge.qml')
| -rw-r--r-- | QMLWidgets/Half_Gauge/FuelGauge.qml | 181 |
1 files changed, 100 insertions, 81 deletions
diff --git a/QMLWidgets/Half_Gauge/FuelGauge.qml b/QMLWidgets/Half_Gauge/FuelGauge.qml index f0ea7d0..4a768a0 100644 --- a/QMLWidgets/Half_Gauge/FuelGauge.qml +++ b/QMLWidgets/Half_Gauge/FuelGauge.qml @@ -13,10 +13,11 @@ Item { property color primaryColor: "#16CCBA"
property color secondaryColor: "#00000000"
- property int animationDuration: 500
- property real startAngle: 0
+ property int animationDuration: 1000
+ property real startAngle: Math.PI * 5 / 4
+ property real fullAngle: Math.PI * 1 / 2
- property var exposedFunction: updateGaugeUnit
+ signal fuelLevelValueChanged(int value)
Rectangle {
anchors.fill: parent
@@ -28,51 +29,66 @@ Item { 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 * 5 / 4
- var fullAngle = Math.PI * 1 / 2
- var progressAngle = startAngle + (degree / 270) * fullAngle
-
- ctx.reset()
- ctx.lineCap = 'round'
-
- // 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)
+ 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 progressAngle = startAngle + (value / (maxValue - minValue)) * fullAngle;
+
+ ctx.reset();
+ ctx.lineCap = 'round';
+
+ // 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();
+ const tickCount = 2; // Adjust the number of ticks as needed
+
+ for (let i = 0; i <= tickCount; i++) {
+ const angle = startAngle + (i / tickCount) * fullAngle;
+ const x1 = center.x + radius * Math.cos(angle);
+ const y1 = center.y + radius * Math.sin(angle);
+ const x2 = center.x + (radius - 10) * Math.cos(angle);
+ const y2 = center.y + (radius - 10) * Math.sin(angle);
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
}
- ctx.stroke()
+
+ ctx.stroke();
+
+ // Draw progress tick mark
+ drawProgressTick(ctx, center, progressAngle, radius);
+ }
+
+ function drawProgressTick(ctx, center, angle, radius) {
+ ctx.lineWidth = 8; // Thickness of the progress tick mark
+ ctx.strokeStyle = '#FFFFFF'; // Color of the progress tick mark
+ ctx.beginPath();
+
+ const x1 = center.x + radius * Math.cos(angle);
+ const y1 = center.y + radius * Math.sin(angle);
+ const x2 = center.x + (radius - 15) * Math.cos(angle); // Adjust length as needed
+ const y2 = center.y + (radius - 15) * Math.sin(angle);
+
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
}
}
@@ -87,8 +103,6 @@ Item { 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: unit
@@ -103,56 +117,61 @@ Item { anchors.horizontalCenter: gaugeText.horizontalCenter
width: 0.15 * Math.min(root.width, root.height)
fillMode: Image.PreserveAspectFit
- // antialiasing: true
antialiasing: true
}
Behavior on value {
NumberAnimation { duration: animationDuration }
}
-
+
onValueChanged: updateGaugeValue(value)
function updateGaugeValue(value) {
- canvas.degree = value * 270
- gaugeText.text = (value * (maxValue - minValue) + minValue).toFixed(0)
+ canvas.requestPaint(); // Request a repaint to reflect changes.
+ gaugeText.text = value.toFixed(0); // Display the current value directly.
+ fuelLevelValueChanged(value); // Emit the signal with the current value.
}
- function updateGaugeUnit() {
- gaugeUnit.text = unit
- }
+ MouseArea {
+ id: dragArea
+ anchors.fill: parent
- MouseArea {
- anchors.fill: parent
- hoverEnabled: true
+ property bool isDragging: false
- property bool isDragging: false
- property real initialValue: 0
+ onEntered: cursorShape = Qt.PointingHandCursor
- onEntered: cursorShape = Qt.PointingHandCursor
- onPressed: {
- isDragging = true
- initialValue = root.value
- }
- onReleased: isDragging = false
+ onPressed: {
+ isDragging = true;
+ updateDragValue(mouseX, mouseY); // Update immediately on press.
+ }
+
+ onReleased: isDragging = false
- onMouseXChanged: updateDragValue(mouse.x, mouse.y)
- onMouseYChanged: updateDragValue(mouse.x, mouse.y)
+ onPositionChanged:
+ if (isDragging) {
+ updateDragValue(mouseX, mouseY); // Use formal parameters instead of injected ones.
+ }
- function updateDragValue(x, y) {
- if (!isDragging) return
+ function updateDragValue(x, y) {
+ const centerX = width / 2;
+ const centerY = height / 2;
- 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)
+ // Calculate angle from the center to the mouse position.
+ const dx = x - centerX;
+ const dy = centerY - y; // Note that y-axis is inverted in QML.
+ const angle = Math.atan2(dy, dx);
- // 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
+ // Normalize angle to [startAngle .. startAngle + fullAngle]
+ let normalizedAngle = angle < startAngle ? angle + Math.PI * 2 : angle;
- root.value = gaugeValue;
- }
- }
-}
+ // Calculate the normalized value based on the angle.
+ let normalizedValue = ((normalizedAngle - startAngle) / fullAngle) * (maxValue - minValue);
+
+ // Clamp value within min and max range.
+ normalizedValue = Math.max(minValue, Math.min(maxValue, normalizedValue));
+
+ // Update the root value.
+ root.value = normalizedValue;
+ }
+ }
+}
\ No newline at end of file |