Progress bar element

[BillyDM]

This is a simple element that simply displays a horizontal progress bar.

The element's style struct should include:

• back_quad: QuadStyle (for the background/rail)
• fill_quad: QuadStyle (for the filled portion)

The style should not include any sizing information, rather the element should simply expand to fill whatever bounding rectangle the user has set.

The shared state will only include a single f32 value called "percent", which ranges from [0.0, 100.0].

[ottergal]

I'm giving this a try

If the user of this element tries to set the percent to a value outside of the range, should it return an error or just silently clamp the value?

I would default to the latter, but I thought I should ask

[BillyDM]

It should just silently clamp the value.

Oh and by the way, I'm currently in the process of writing (and re-writing) the guide on custom elements in the Yarrow book. Someone else has attempted the progress bar element before, and we realized a bunch of improvements to the API we could make.

[BillyDM]

I guess I should have also moved this task to "in progress". My bad.

[ottergal]

Ah, I gotcha

Have those API improvements been made already, or are they planned/in-progress? And, is that implementation going to be completed and merged, or should I continue working on mine?

[BillyDM]

The API improvements have been made, but I haven't updated the book yet.

[ottergal]

Cool cool!! I've been piecing it together from just reading through the codebase, I would hardly claim to be an expert after like four hours of this but I think I understand enough to put some functional elements together

[ottergal]

I pushed my initial progress bar implementation to a branch on my fork. I think that an optional border and tooltip could be useful additions, but I haven't added those as of yet.

https://github.com/ottergal/Yarrow/tree/progress_bar

[ottergal]

I implemented tooltips. As for a border, and in particular a border radius, I haven't been able to find a good way of clipping the fill rectangle so that it does not spill over beyond the bounds of a given border radius. In most cases, simply drawing the fill rectangle with the specified border radius works, but when the width of the fill rectangle is less than the sum of the left and right border radii, RootVG uses a smaller border radius instead, which results in the fill rectangle spilling over. This could be addressed using compositing operations, but those are not currently implemented in RootVG. It could also be addressed using shaders or a custom mesh, but to me, both of those approaches seem needlessly complex for the problem.

[BillyDM]

I'm actually in the process of rewriting RootVG since I'm not happy with the API, the functionality, and the rendering quality. I'm now basing it off of NanoVG and translating it to Rust and wgpu. I'll post an update when it's ready.