EqsDial.qml

import QtQuick

// EQS-style round glowing dial
Item {
    id: root

    // ── Public API ──
    property real value: 0
    property real maxValue: 240
    property string units: "mph"
    property color glowColor: "#8b5cf6"
    property color needleColor: "#ffffff"
    property color labelColor: "#ffffff"
    property real glowIntensity: 1.0
    property bool showDots: true
    property var labels: ["0", "20", "40"]
    property var labelPositions: [0.0, 0.33, 0.66]

    width: 380
    height: 380

    // ── Repaint triggers ──
    onValueChanged: ring.requestPaint()
    onMaxValueChanged: ring.requestPaint()
    onGlowColorChanged: ring.requestPaint()
    onGlowIntensityChanged: ring.requestPaint()
    onShowDotsChanged: ring.requestPaint()

    // ════════════════════════════════════════
    //  GLOWING RING + TRAIL ARC
    // ════════════════════════════════════════
    Canvas {
        id: ring
        anchors.fill: parent
        antialiasing: true

        readonly property real startAngle: Math.PI * 0.75
        readonly property real endAngle: Math.PI * 2.25
        readonly property real arcSpan: endAngle - startAngle

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

            // Soft outer glow (3 stacked arcs)
            for (var g = 0; g < 3; g++) {
                ctx.beginPath()
                ctx.arc(cx, cy, radius, startAngle, endAngle, false)
                ctx.lineWidth = 14 - g * 4
                ctx.strokeStyle = root.glowColor
                ctx.globalAlpha = (0.15 + g * 0.15) * root.glowIntensity
                ctx.stroke()
            }
            ctx.globalAlpha = 1

            // Sharp inner ring (dim base track)
            ctx.beginPath()
            ctx.arc(cx, cy, radius, startAngle, endAngle, false)
            ctx.lineWidth = 1.5
            ctx.strokeStyle = root.glowColor
            ctx.globalAlpha = 0.4
            ctx.stroke()
            ctx.globalAlpha = 1

            // Trail arc — bright section from start up to current value
            var valuePct = Math.min(root.value / root.maxValue, 1)
            if (valuePct > 0) {
                var trailEnd = startAngle + arcSpan * valuePct
                ctx.beginPath()
                ctx.arc(cx, cy, radius, startAngle, trailEnd, false)
                ctx.lineWidth = 3
                ctx.strokeStyle = root.glowColor
                ctx.stroke()
            }

            // Tiny dots around the ring
            if (root.showDots) {
                var dotCount = 12
                for (var i = 0; i < dotCount; i++) {
                    var pct = i / (dotCount - 1)
                    var a = startAngle + arcSpan * pct
                    var dx = cx + Math.cos(a) * radius
                    var dy = cy + Math.sin(a) * radius
                    ctx.beginPath()
                    ctx.arc(dx, dy, 1.5, 0, Math.PI * 2)
                    ctx.fillStyle = "#ffffff"
                    ctx.globalAlpha = 0.6
                    ctx.fill()
                }
                ctx.globalAlpha = 1
            }
        }
    }

    // ════════════════════════════════════════
    //  NUMBERS — Verdana Light, larger, refined
    // ════════════════════════════════════════
    Repeater {
        model: root.labels.length
        Text {
            property real pct: root.labelPositions[index]
            property real angle: Math.PI * 0.75 + (Math.PI * 1.5 * pct)
            property real labelRadius: root.width / 2 - 60
            property real currentPct: Math.min(root.value / root.maxValue, 1)
            property bool revealed: currentPct >= pct

            x: root.width/2 + Math.cos(angle) * labelRadius - width/2
            y: root.height/2 + Math.sin(angle) * labelRadius - height/2

            text: root.labels[index]
            color: root.labelColor
            font.family: "Verdana"
            font.pixelSize: 22
            font.weight: Font.Light
            font.letterSpacing: 0.5

            opacity: revealed ? 1.0 : 0.18

            Behavior on opacity {
                NumberAnimation { duration: 250; easing.type: Easing.OutCubic }
            }
        }
    }

    // ════════════════════════════════════════
    //  UNITS LABEL
    // ════════════════════════════════════════
    Text {
        x: root.width * 0.62
        y: root.height * 0.28
        text: root.units
        color: "#ffffff"
        font.family: "Verdana"
        font.pixelSize: 13
        font.italic: true
        font.weight: Font.Light
        opacity: 0.7
    }

    // ════════════════════════════════════════
    //  NEEDLE — short, sharp, doesn't touch numbers
    // ════════════════════════════════════════
    Item {
        id: needleAssembly
        anchors.fill: parent
        transformOrigin: Item.Center
        rotation: -135 + (Math.min(root.value, root.maxValue) / root.maxValue) * 270

        Behavior on rotation {
            NumberAnimation { duration: 350; easing.type: Easing.OutCubic }
        }

        // Main needle blade — sharp white, SHORTER so it doesn't touch numbers
        Rectangle {
            width: 2.5
            height: root.height * 0.32           // shorter than before (was 0.42)
            color: root.needleColor
            antialiasing: true
            x: root.width / 2 - width / 2
            y: root.height / 2 - height + 8
        }

        // Counter-weight (back side)
        Rectangle {
            width: 2.5
            height: 24
            color: root.needleColor
            opacity: 0.5
            x: root.width / 2 - width / 2
            y: root.height / 2 - 4
        }
    }

    // ════════════════════════════════════════
    //  CENTRAL HUB — concentric circles (visual focal point)
    // ════════════════════════════════════════
    // Outer glow ring
    Rectangle {
        width: 32; height: 32
        radius: 16
        anchors.centerIn: parent
        color: "transparent"
        border.color: root.glowColor
        border.width: 1
        opacity: 0.6
    }
    // Mid ring (subtle)
    Rectangle {
        width: 22; height: 22
        radius: 11
        anchors.centerIn: parent
        color: "transparent"
        border.color: root.glowColor
        border.width: 1
        opacity: 0.4
    }
    // Solid center pivot
    Rectangle {
        width: 10; height: 10
        radius: 5
        anchors.centerIn: parent
        color: root.needleColor
    }
    // Tiny core dot (theme color, gives it depth)
    Rectangle {
        width: 4; height: 4
        radius: 2
        anchors.centerIn: parent
        color: root.glowColor
    }
}