C

Qt Quick Ultralite Watch Demo

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.15
import QtQuickUltralite.Extras 2.0
import QtQuick.Shapes 2.15

Shape {
    id: root
    property bool flip: false
    property real extent: 0.8

    visible: extent > 0

    // angles and radii deduced from small-oval-alt.png image
    property real angle: 225 - 90 * extent
    property real innerRadius: 123
    property real outerRadius: 130

    transform: Scale {
        origin.x: root.width / 2
        xScale: flip ? -1 : 1
    }

    function xAt(angle: real, radius: real): real
    {
        return root.width / 2 + radius * Math.cos(angle * Math.PI / 180)
    }

    function yAt(angle: real, radius: real): real
    {
        return root.height / 2 - radius * Math.sin(angle * Math.PI / 180)
    }

    ShapePath {
        fillGradient: LinearGradient {
            y1: 480 - 90
            y2: 90

            GradientStop { position: 0.0; color: flip ? "#ff002b" : "#f406f9" }
            GradientStop { position: 0.5; color: flip ? "#76fd01" : "#00a5ff" }
            GradientStop { position: 0.6; color: flip ? "#76fd01" : "#00a5ff" }
            GradientStop { position: 1.0; color: flip ? "#b6fe71" : "#77cfff" }
        }

        strokeColor: "transparent"

        startX: xAt(225, outerRadius)
        startY: yAt(225, outerRadius)

        PathArc {
            x: xAt(angle, outerRadius)
            y: yAt(angle, outerRadius)
            radiusX: outerRadius
            radiusY: outerRadius
        }

        PathLine {
            x: xAt(angle, innerRadius)
            y: yAt(angle, innerRadius)
        }

        PathArc {
            x: xAt(225, innerRadius)
            y: yAt(225, innerRadius)
            radiusX: innerRadius
            radiusY: innerRadius
            direction: PathArc.Counterclockwise
        }
    }
}