allow circler progress to draw arc

[AhmedSaadi0]

Allow drawing arc instead of a full circle by defining startDraw, endDraw

example

const progress = Widget.CircularProgress({
    className: "desktop-cpu-circle",
    child: Widget.Label({
        className: "desktop-cpu-circle-icon",
        label: ""
    }),
    startDraw: 0.25,
    endDraw: 0.5,
}).poll(1000, self => {
    Utils.execAsync(`/home/${Utils.USER}/.config/ags/scripts/cpu.sh`)
        .then(val => {
            progress.value = val / 100;
        }).catch(print);
});

if used without startDraw, endDraw it will draw a normal circle as it used to

[kotontrion]

+1
But why differentiate between arc and full circle? Instead of adding start-draw and end-draw, I think it would be better to add end-at, which defaults to start-at + 2* pi to get the full circle by default.

[AhmedSaadi0]

Sounds great. I changed it

const cpu = Widget.CircularProgress({
    className: "desktop-core-6-circle",
    startAt: 0.75,
    endAt: 1,
}).poll(3 * 1000, self => {
    Utils.execAsync(`/home/${Utils.USER}/.config/ags/scripts/cpu.sh`)
        .then(val => {
            const data = JSON.parse(val);
            cpu.value = data[6] / 100;
        }).catch(print);
});

[Aylur]

Sounds useful, but why not just halve the value?

[AhmedSaadi0]

To be able to make something like this

[Aylur]

inverted doesn't work as expected with this
I don't know much cairo, but maybe doing 1 - value would work?

[AhmedSaadi0]

I changed it
now it works but the logic changed
0.25 now in inverted starts inverted which means it will start from the top not the bottom
and there is no need to invert the css styling it will draw as normal

[Aylur]

That is not how inverted is supposed to work.
Let's say our value is 0.6, then the bar should be filled 6/10 and 4/10 empty

███░░

With inverted, the bar should be empty 6/10 and filled 4/10

░░░██

[kotontrion]

Let's say our value is 0.6, then the bar should be filled 6/10 and 4/10 empty
With inverted, the bar should be empty 6/10 and filled 4/10

This is not how it is supposed to work.

From the gtk docs:

Ranges normally move from lower to higher values as the slider moves from top to bottom or left to right. Inverted ranges have higher values at the top or on the right rather than on the bottom or left.

so a value of 0.6 should behave like that:
███░░ for inverted false
░░███ for inverted true
and you can easily confirm this by creating two scales: (the bottom is inverted, both have a value of 0.6)

That said, the currently implemented behavior should be correct regarding the fill of the progress bar, but not for the placement. changing the value of inverted should not change how it is placed. (I did not try this myself, I'm just going off of the screenshots posted here).

Edit:
Again, didn't try this but this might be a way to solve this:

if (this.inverted) {
    startProgress = calculatedEndAngle - rangedValue;
    endProgress = calculatedEndAngle;
} else {
    startProgress = calculatedStartAngle;
    endProgress = calculatedStartAngle + rangedValue;
}

the background draw is not changed by setting inverted.

[Aylur]

███░░ for inverted false
░░███ for inverted true

yeah, you are right, mb

[AhmedSaadi0]

I don't know; I felt that as a circle, it should also adjust the starting position accordingly. Anyway, I made the changes as @kotontrion suggested.

inverted = true

inverted = false