Border progress bars (janky)

[Blackilykat]

This is overcomplicated, see this comment for a better less janky solution

I wanted to have a progress bar in my music module, but only wanted it to be on the bottom border. And here's the result!

How I got there

raffaem's waybar-mediaplayer module did the heavy lifting on creating a ton of classes for the percentages, however I wasn't happy with painting a full background.
So I tinkered a bunch with gtk css properties until I found radial-gradient.
I messed with every property I could mess with, and found that moving its center off the module made the ellipse strech more and more, which is what led me to the following edits to raffaem's mkstyle script:

percent_start = 70.6718
percent_end = 70.7161
for i in np.arange(0, 100 + interval, interval):
    i = float(i)
    class_ = "perc" + format_class(i).replace(".", "-")
    i = i / 100 * (percent_end - percent_start) + percent_start
    i2 = i + (interval / 10)
    outfh.write(
        f"""#custom-media.{class_} {{
    background-image: radial-gradient(ellipse at -160000% calc(100%-1px), {overlay_color} {format_pc(i)}%, {surface_color} 0);
}}\n"""
    )

I'll break down the relevant bits:

#custom-media.{class_} {{
    background-image: radial-gradient(ellipse at -160000% calc(100%-1px), {overlay_color} {format_pc(i)}%, {surface_color} 0);
}}

This is the "template" for how each class will be written to the output css. There is one css class for every percentage.
Each css class has a radial gradient as a background. For reference, this is how radial gradients normally look:

This gradient's placement is placed 1600 times the length of the module to its left, and 1 pixel away from its bottom. (the 160000% was picked through trial and error, lower values showed pixels above the line)
The gradient's first color is the bar's color, going from the gradient's middle to i% of the size required to fill the entire module (I'll explain i soon)
the second one is transparent (any other color would fill the entire background) and starts 0 pixels after the first one. 0 means that it will be a clean cut and there won't be a gradient.

percent_start = 70.6718
percent_end = 70.7161
for i in np.arange(0, 100 + interval, interval):
    i = float(i)
    class_ = "perc" + format_class(i).replace(".", "-")
    i = i / 100 * (percent_end - percent_start) + percent_start
    i2 = i + (interval / 10)

The section under the for loop will repeat for every percentage of the bar, with i being which percentage it is.
So the first time it runs i will be 0, the second time it will be 1, the third it will be 2 and so on until it reaches 100.
After creating the name of the class (which includes the percentage), i is given another value: the number that's the percentage of the way between the start and end variables.
These two variables are respectively where the "bar" shows as 0% and as 100%. These were found through trial and error again.

Visual

Here's about how the ellipse would look if it was really zoomed out:

The proportions here are unrealistic, if they were accurate the module may not be visible considering the width of this page and the ellipse would look like a 1-3px line

The results

2024-07-04.02-39-53.mp4

Noticeable compromises

• It will be laggy. Because of how small the change in the sizes are, multiple percentages will look the same. That's the reason why the bar "updated" so rarely in the video.
• It can only be used on a border of the module
• It can only be either 1 or 2 pixels thick.
• Your mileage may vary, I have only tested this on my bar with my displays and my resolution. You might also have to tinker and fine tune the values found by trial and error.

Should I use this?

If you want your progress bar to be on the border of your module, will not use it if it takes the entire background and don't mind having an imprecise display, sure!
Else, you can either take a look at raffaem's module and how it handles the background, use a text-based solution, or not have a bar at all.

[Blackilykat]

If anyone would like to try improving this, here's a couple useful links:
https://docs.gtk.org/gtk3/css-overview.html
https://docs.gtk.org/gtk3/css-properties.html
Good luck!

[Blackilykat]

Turns out this was way overcomplicated and unnecessary...
Copy raffaem's setup ad add the following line under the gradient
box-shadow: inset 0 <the height of the module minus the width of the progress bar> px <the background color of the module> ;