Capped rounded arc

round_capped_arc.slint

import { AboutSlint, Button, VerticalBox, Palette, Slider } from "std-widgets.slint";


export component CircularPath inherits Path {
    in property <float> thickness;
    in property <float> inner-radius;
    in property <float> progress;
    in property <float> start : 0;

    private property <float> progressClamped: clamp(progress, 0, 0.9999);

    viewbox-width: 100;
    viewbox-height: 100;

    MoveTo {
        y: 50 - 50 * cos(-root.start * 360deg);
        x: 50 - 50 * sin(-root.start * 360deg);
    }

    ArcTo {
        y: 50 - root.inner-radius * cos(-root.start * 360deg);
        x: 50 - root.inner-radius * sin(-root.start * 360deg);
        radius-x: 1;
        radius-y: 1;
    }

    ArcTo {
        radius-x: root.inner-radius;
        radius-y: root.inner-radius;
        y: 50 - root.inner-radius*cos(-(root.start + root.progressClamped) * 360deg);
        x: 50 - root.inner-radius*sin(-(root.start + root.progressClamped) * 360deg);
        sweep: root.progressClamped > 0;
        large-arc: root.progressClamped > 0.5;
    }

    ArcTo {
        y: 50 - 50*cos(-(root.start + root.progressClamped) * 360deg);
        x: 50 - 50*sin(-(root.start + root.progressClamped) * 360deg);
        radius-x: 1;
        radius-y: 1;
    }

    ArcTo {
        radius-x: 50;
        radius-y: 50;
        y: 50 - 50 * cos(-root.start * 360deg);
        x: 50 - 50 * sin(-root.start * 360deg);
        sweep: root.progressClamped < 0;
        large-arc: root.progressClamped > 0.5;
    }

    

   
}


export component Demo {
    width: 300px;
    VerticalBox {
        alignment: start;
        Text {
            text: "Hello World!";
            font-size: 24px;
            horizontal-alignment: center;
        }
        
        Text { text: "Progress"; }
        progress := Slider {
            value: 75;
            maximum: 100;
        }
        
        Text { text: "Start"; }
        startv := Slider {
            value: 0;
            maximum: 100;
        }

        Text { text: "Radius"; }
        radius := Slider {
            value: 40;
            maximum: 50;
        }

        CircularPath {
            width: 100%;
            height: 300px;
            start: startv.value / 100;
            thickness: 3;
            progress: progress.value / 100;
            inner-radius: radius.value;
            fill-rule: FillRule.nonzero;
            fill: red;
            stroke-width: 2px;
        }
    }
}