diff options
Diffstat (limited to 'QMLWidgets/Full_Gauge/SpeedGauge.qml')
| -rw-r--r-- | QMLWidgets/Full_Gauge/SpeedGauge.qml | 175 |
1 files changed, 90 insertions, 85 deletions
diff --git a/QMLWidgets/Full_Gauge/SpeedGauge.qml b/QMLWidgets/Full_Gauge/SpeedGauge.qml index 02531b7..60d7525 100644 --- a/QMLWidgets/Full_Gauge/SpeedGauge.qml +++ b/QMLWidgets/Full_Gauge/SpeedGauge.qml @@ -2,8 +2,8 @@ import QtQuick 2.9 Item {
id: root
- width: 400
- height: 400
+ width: 300
+ height: 300
property real value: 0
property real minValue: 0
@@ -19,8 +19,11 @@ Item { property real gaugeRadius: 0
property real tickLength: 0
+ signal speedValueChanged(int value)
+
Component.onCompleted: {
calculateGeometry();
+ updateGaugeValue(value); // Initialize the gauge display
}
onWidthChanged: calculateGeometry()
@@ -29,7 +32,7 @@ Item { function calculateGeometry() {
const side = Math.min(width, height);
gaugeRadius = (side - side * 0.20) / 2;
- tickLength = gaugeRadius * 0.05;
+ tickLength = gaugeRadius * 0.1;
}
Rectangle {
@@ -67,9 +70,6 @@ Item { id: canvas
anchors.fill: parent
antialiasing: true
- property real degree: 0
-
- onDegreeChanged: requestPaint()
onPaint: {
var ctx = getContext("2d");
@@ -79,9 +79,9 @@ Item { ctx.lineCap = 'round';
drawBackground(ctx, center);
- drawProgress(ctx, center, degree);
+ drawProgress(ctx, center, value);
drawTicks(ctx, center);
- drawProgressTick(ctx, center, degree);
+ drawProgressTick(ctx, center, value);
}
function drawBackground(ctx, center) {
@@ -95,60 +95,56 @@ 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)
+ center.x - gaugeRadius, center.y,
+ center.x + gaugeRadius, center.y
);
- // 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
+ gradient.addColorStop(0.0, "#00FF00");
+ //gradient.addColorStop(0.3, primaryColor);
+ gradient.addColorStop(0.4, "#FFD700");
+ gradient.addColorStop(1, "#FF0000");
ctx.beginPath();
- ctx.arc(center.x, center.y, gaugeRadius, startAngle, startAngle + (progress / 270) * fullAngle);
-
- // Apply the gradient to the stroke style
+ ctx.arc(center.x, center.y, gaugeRadius, startAngle, startAngle + (progress / (maxValue - minValue)) * fullAngle);
ctx.strokeStyle = gradient;
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.lineWidth = tickLength / 2;
+ ctx.strokeStyle = '#FFFFFF';
+ ctx.beginPath();
+
+ const tickCount = 10; // Adjust the number of ticks as needed
+
+ for (let i = 0; i <= tickCount; i++) {
+ const angle = startAngle + (i / tickCount) * 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 * 1.5;
+ ctx.strokeStyle = '#FFFFFF';
+ ctx.beginPath();
- 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)
+ const progressAngle = startAngle + (progress / (maxValue - minValue)) * 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()
+ ctx.moveTo(x1, y1);
+ ctx.lineTo(x2, y2);
+ ctx.stroke();
}
}
@@ -156,7 +152,7 @@ Item { id: gaugeText
anchors.centerIn: parent
text: "0"
- font.pixelSize: 0.2 * Math.min(root.width, root.height)
+ font.pixelSize: 0.3 * Math.min(root.width, root.height)
font.bold: true
color: "#FFFFFF"
}
@@ -178,42 +174,51 @@ Item { 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
- }
- }
-}
+ canvas.requestPaint(); // Request a repaint to reflect changes.
+ gaugeText.text = (value).toFixed(0); // Display the current value directly.
+ speedValueChanged(value); // Emit the signal with the current value.
+ }
+
+ MouseArea {
+ id: dragArea
+ anchors.fill: parent
+
+ property bool isDragging: false
+
+ onEntered: cursorShape = Qt.PointingHandCursor
+
+ onPressed: {
+ isDragging = true;
+ updateDragValue(mouseX, mouseY); // Update immediately on press.
+ }
+
+ onReleased: isDragging = false
+
+ onPositionChanged:
+ if (isDragging) {
+ updateDragValue(mouseX, mouseY); // Use formal parameters instead of injected ones.
+ }
+
+ function updateDragValue(x, y) {
+ const centerX = width / 2;
+ const centerY = height / 2;
+
+ // 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);
+
+ // Normalize angle to [startAngle .. startAngle + fullAngle]
+ let normalizedAngle = angle < startAngle ? angle + Math.PI * 2 : angle;
+
+ // 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 |