automotive-ivi-cluster/ArcGauge.qml at main · Cohort15-cmd/automotive-ivi-cluster · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import QtQuick

// EQS-style minimal arc gauge — no bezel, no needle, just a glowing arc
// Public API:
//   value, maxValue, label, units
//   accentColor: arc color when active (#00ADEF for EQ blue)
//   mirrored: false = arc opens to the right (RPM on left)
//             true  = arc opens to the left  (Fuel on right)
Item {
    id: root

    property real value: 0
    property real maxValue: 100
    property string label: ""
    property string valueText: Math.round(root.value).toString()
    property string units: ""
    property color accentColor: "#00ADEF"
    property bool mirrored: false

    width: 200
    height: 240

    onValueChanged: arc.requestPaint()
    onMaxValueChanged: arc.requestPaint()
    onMirroredChanged: arc.requestPaint()

    Canvas {
        id: arc
        anchors.fill: parent
        antialiasing: true

        onPaint: {
            var ctx = getContext("2d")
            ctx.reset()
            var cx = width / 2
            var cy = height / 2 + 20
            var radius = 90

            // Arc spans 180° from bottom around the outside
            // Mirrored: arc on the LEFT side
            var startA, endA
            if (root.mirrored) {
                // Right gauge: arc opens left, sweeps top-to-bottom on the left side
                startA = Math.PI * 1.5    // top
                endA = Math.PI * 0.5      // bottom (going counter-clockwise)
            } else {
                // Left gauge: arc opens right, sweeps top-to-bottom on the right side
                startA = Math.PI * 1.5    // top
                endA = Math.PI * 2.5      // bottom (going clockwise)
            }

            // Background arc (dim track)
            ctx.beginPath()
            ctx.arc(cx, cy, radius, startA, endA, root.mirrored)
            ctx.lineWidth = 4
            ctx.strokeStyle = "#1a2540"
            ctx.lineCap = "round"
            ctx.stroke()

            // Active arc (accent color, length proportional to value)
            var pct = Math.min(root.value / root.maxValue, 1)
            var totalSpan = Math.PI    // 180°
            var fillAngle
            if (root.mirrored) {
                fillAngle = startA - (totalSpan * pct)
            } else {
                fillAngle = startA + (totalSpan * pct)
            }

            ctx.beginPath()
            ctx.arc(cx, cy, radius, startA, fillAngle, root.mirrored)
            ctx.lineWidth = 4
            ctx.strokeStyle = root.accentColor
            ctx.lineCap = "round"
            ctx.stroke()
        }
    }

    // Label at top of arc
    Text {
        anchors.horizontalCenter: parent.horizontalCenter
        y: 16
        text: root.label
        color: "#5a6378"
        font.family: "Arial"
        font.pixelSize: 10
        font.letterSpacing: 1.5
        font.weight: Font.Medium
    }

    // Value below label
    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        y: 40
        spacing: 2
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.valueText
            color: "#ffffff"
            font.family: "Arial"
            font.pixelSize: 28
            font.weight: Font.Light
        }
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.units
            color: "#5a6378"
            font.family: "Arial"
            font.pixelSize: 10
            font.letterSpacing: 1.2
        }
    }
}