Speedometer.qml

import QtQuick

Item {
    id: root

    property real value: 0
    property real maxValue: 220
    property real majorStep: 20
    property real minorStep: 5
    property real labelDivisor: 1
    property string units: "km/h"
    property real redZoneStart: maxValue * 0.85
    property color accentColor: "#e8eaed"
    property color borderAccent: "#1a1f2e"

    width: 400
    height: 400

    readonly property real cx: width / 2
    readonly property real cy: height / 2
    readonly property real rOuter: width / 2 - 18

    onValueChanged: dial.requestPaint()
    onMaxValueChanged: dial.requestPaint()
    onAccentColorChanged: dial.requestPaint()

    Rectangle {
        width: parent.width + 30
        height: parent.height + 30
        radius: width / 2
        anchors.centerIn: parent
        color: "transparent"
        border.color: root.accentColor
        border.width: 1
        opacity: 0.08
        Behavior on border.color { ColorAnimation { duration: 300 } }
    }

    Rectangle {
        width: parent.width + 16
        height: parent.height + 16
        radius: width / 2
        anchors.centerIn: parent
        color: "transparent"
        border.color: root.accentColor
        border.width: 1
        opacity: 0.18
        Behavior on border.color { ColorAnimation { duration: 300 } }
    }

    Rectangle {
        width: parent.width + 6
        height: parent.height + 6
        radius: width / 2
        anchors.centerIn: parent
        color: "transparent"
        border.color: root.accentColor
        border.width: 1
        opacity: 0.3
        Behavior on border.color { ColorAnimation { duration: 300 } }

        SequentialAnimation on opacity {
            loops: Animation.Infinite
            NumberAnimation { from: 0.3; to: 0.5; duration: 2000; easing.type: Easing.InOutSine }
            NumberAnimation { from: 0.5; to: 0.3; duration: 2000; easing.type: Easing.InOutSine }
        }
    }

    Rectangle {
        anchors.fill: parent
        radius: width / 2
        color: "#0d1117"
        border.color: root.borderAccent
        border.width: 1
        Behavior on border.color { ColorAnimation { duration: 400 } }
    }

    Canvas {
        id: dial
        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()

            ctx.beginPath()
            ctx.arc(cx, cy, rOuter, startAngle, endAngle, false)
            ctx.lineWidth = 3
            ctx.strokeStyle = "#262d3d"
            ctx.stroke()

            var redStartPct = root.redZoneStart / root.maxValue
            var redArcStart = startAngle + arcSpan * redStartPct
            ctx.beginPath()
            ctx.arc(cx, cy, rOuter, redArcStart, endAngle, false)
            ctx.lineWidth = 3
            ctx.strokeStyle = "#c83232"
            ctx.stroke()

            var valuePct = Math.min(root.value / root.maxValue, 1)
            var valueEnd = startAngle + arcSpan * valuePct
            ctx.beginPath()
            ctx.arc(cx, cy, rOuter, startAngle, valueEnd, false)
            ctx.lineWidth = 3
            ctx.strokeStyle = root.value >= root.redZoneStart ? "#ff5252" : root.accentColor
            ctx.stroke()

            var minorCount = Math.floor(root.maxValue / root.minorStep)
            for (var i = 0; i <= minorCount; i++) {
                var v = i * root.minorStep
                if (v > root.maxValue) break
                var pct = v / root.maxValue
                var a = startAngle + arcSpan * pct
                var inRed = v >= root.redZoneStart
                var x1 = cx + Math.cos(a) * (rOuter - 6)
                var y1 = cy + Math.sin(a) * (rOuter - 6)
                var x2 = cx + Math.cos(a) * (rOuter - 14)
                var y2 = cy + Math.sin(a) * (rOuter - 14)
                ctx.beginPath()
                ctx.moveTo(x1, y1)
                ctx.lineTo(x2, y2)
                ctx.lineWidth = 1
                ctx.strokeStyle = inRed ? "#ff5252" : "#5a6378"
                ctx.stroke()
            }

            var majorCount = Math.floor(root.maxValue / root.majorStep)
            for (var j = 0; j <= majorCount; j++) {
                var mv = j * root.majorStep
                if (mv > root.maxValue) break
                var mpct = mv / root.maxValue
                var ma = startAngle + arcSpan * mpct
                var mInRed = mv >= root.redZoneStart
                var mx1 = cx + Math.cos(ma) * (rOuter - 4)
                var my1 = cy + Math.sin(ma) * (rOuter - 4)
                var mx2 = cx + Math.cos(ma) * (rOuter - 22)
                var my2 = cy + Math.sin(ma) * (rOuter - 22)
                ctx.beginPath()
                ctx.moveTo(mx1, my1)
                ctx.lineTo(mx2, my2)
                ctx.lineWidth = 2
                ctx.strokeStyle = mInRed ? "#ff5252" : "#ffffff"
                ctx.stroke()
            }
        }
    }

    Repeater {
        model: Math.floor(root.maxValue / root.majorStep) + 1
        Text {
            property real labelValue: index * root.majorStep
            property real pct: labelValue / root.maxValue
            property real angle: Math.PI * 0.75 + (Math.PI * 1.5 * pct)
            property real labelRadius: root.width * 0.36
            visible: labelValue <= root.maxValue
            x: root.width/2 + Math.cos(angle) * labelRadius - width/2
            y: root.height/2 + Math.sin(angle) * labelRadius - height/2
            text: (labelValue / root.labelDivisor).toString()
            color: labelValue >= root.redZoneStart ? "#ff5252" : "#e8eaed"
            font.family: "Bahnschrift"
            font.pixelSize: 19
            font.weight: Font.Medium
        }
    }

    Item {
        anchors.fill: parent
        transformOrigin: Item.Center
        rotation: -135 + (Math.min(root.value, root.maxValue) / root.maxValue) * 270

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

        Rectangle {
            width: 3
            height: root.height * 0.4
            radius: 1.5
            color: root.value >= root.redZoneStart ? "#ff5252" : root.accentColor
            antialiasing: true
            x: root.width / 2 - width / 2
            y: root.height / 2 - height + 22

            Behavior on color { ColorAnimation { duration: 300 } }
        }

        Rectangle {
            width: 3
            height: 26
            radius: 1.5
            color: "#5a6378"
            x: root.width / 2 - width / 2
            y: root.height / 2 - 4
        }
    }

    Rectangle {
        width: 40; height: 40
        radius: 20
        color: "#1a1f2e"
        anchors.centerIn: parent
        border.color: root.borderAccent
        border.width: 1.5
        z: 2
        Behavior on border.color { ColorAnimation { duration: 400 } }
    }
    Rectangle {
        width: 14; height: 14
        radius: 7
        color: root.accentColor
        anchors.centerIn: parent
        z: 3
        Behavior on color { ColorAnimation { duration: 300 } }
    }

    Column {
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.verticalCenter
        anchors.topMargin: 64
        spacing: 2

        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: Math.round(root.value)
            color: "#ffffff"
            font.family: "Bahnschrift"
            font.pixelSize: 54
            font.weight: Font.Light
        }
        Text {
            anchors.horizontalCenter: parent.horizontalCenter
            text: root.units
            color: "#8a92a8"
            font.family: "Bahnschrift"
            font.pixelSize: 12
            font.weight: Font.Medium
            font.letterSpacing: 1.5
        }
    }
}