PureBasic Forums - English

So this is a visualisation of how I'm currently going to go about colouring each side of the rounded rectangle individually (using the new algorithm).
This example is colouring the top side of the rounded rectangle in red (with the overall shape marked in green).

So the first step is clipping the top side which is the blue polygon path/shape - this ensures that the left, bottom and right sides won't be rendered to.

The second step is clipping to the rounded rectangle path/shape itself (in green) - so all rendering is constrained inside the shape.

The third step is then rendering a red triangle (the top border side colour wich creates the diagnal 'hinges', where the other sides would join), with the apex being calculated from 2 infinite lines intersecting from the topLeft + leftWidth and topRight - rightWidth.

https://www.youtube.com/shorts/d3HCOVpDYso

And here it is with the clipping paths applied:

https://www.youtube.com/shorts/P1qduWbnbH8

Finally got the grunt of the rounded rectangle border code working (including edge cases) after 2 weeks and 3 refactors! The maths has been an absolute barstard! (not my strong point lol but I get by). Now only using one clip path - the rounded rectangle path/shape itself (consisting of an outer path and inner path) and the coloured sides are rendered using polygons masked by the clip path.

So in this vid I'm going a bit nuts with the width of each side animating independently and the x and y radius of each corner animating independently using a nice Transition_EaseInSine() from ProGUI's animation API.

https://www.youtube.com/watch?v=SEusV0_EBU8

So this is an example of instead of clipping to the rounded rectangle path/shape I'm rendering it instead so you can see how the coloured side rendering is achieved with polygons (overlaid on top), which is kind of cool to look at heheh

https://www.youtube.com/shorts/yG_sHNl9Q5Q

This is all done using ProGUI's vector path functions

Not sure I'd find a practical use for that example, but it looks pretty cool

Zach wrote: Fri Oct 25, 2024 12:33 am Not sure I'd find a practical use for that example, but it looks pretty cool

Haha yep, it's just to demonstrate the versatility of it really and to test many possible combinations easily (more than I could have manually) - to make sure nothing is bugging out. It does look cool though!

It's been an important bit of code to get right as pretty much all UI elements have some kind of border - I'll be adding angled corners too once I've got the other styles working so you can imagine some funky looking buttons etc..

Or some cool LCARS designs if you're a Trekkie .. it might seem like overkill but not when you can totally change the design of a button or menu through editing a skin

I already did a LCARS include for personal use.

jacdelad wrote: Sat Oct 26, 2024 11:49 pm I already did a LCARS include for personal use.

LCARS would be cool to play with

Zach wrote: Sun Oct 27, 2024 1:29 am LCARS would be cool to play with

For sure, just alter the width of a border side or the corner x and y radius for any widget

Hey guys, sorry this is taking a while (I'll be glad when I can move on from it) but it's pretty important to get this working right.

So this is testing out the Groove and Ridge code with the bottom side, this is meant to mimic Web CSS equivalents (colours are chosen for contrasting test purposes). It's particularly challenging making sure the joins are seamless without any tiny gaps where the backround colour would seep through especially making sure everything is aligned to the pixel grid for sharp lines and high DPI scaling - in this example the colour/s for the bottom side has an opacity set at 0.5

https://www.youtube.com/shorts/4izoW9DHhRs

Also fixed a couple of bugs where an extreme rx / ry corner radius would cause an arc path over-sweep - causing some nasty graphical glitches

looks like you've nailed it. Nothing like a bit of perseverance to get it right.

idle wrote: Thu Oct 31, 2024 2:21 am looks like you've nailed it. Nothing like a bit of perseverance to get it right.

Thanks mate for sure! I'm a bit of a perfectionist

Hi guys the core border rendering code is working well (fingers crossed):

Styles include:

• solid

• inset

• outset

• ridge

• groove

• double

• dashed

• dotted

Are all implemented and feature comparable with Web CSS (with independently coloured sides and styles), I've also added a couple of new commands to the GFX API: DrawSetAntialias(Mode.i) and DrawSetBlendMode(Mode.i).

https://www.youtube.com/shorts/DjlZNR81F5c
https://www.youtube.com/shorts/oj72P2GXX7k

This vid is a side by side comparison with Firefox and Chrome:
https://www.youtube.com/shorts/RPgx2XvPC4U

In Firefox you can see there's some jankiness when the width of the border is too small.
In Chrome there are gaps with the diagnal line joins and anti-aliasing is not working correctly.

The same jankiness can be seen with Groove and Ridge borders on both Firefox and Chrome.

Cheers!

Chris.

Over 30,000 lines of code now for the core engine! and over 300 API commands with the DLL compiling to less than an Amiga floppy disk (745KB) with no dependencies. The old version of ProGUI was about 48,000 lines I think with just over 100 API commands and the DLL over 2.4 meg. Also added new commands: BrushSetDpiScaling(Brush, isEnabled.b), BrushGetDpiScaling(Brush), BorderSetDpiScaling(Border, isEnabled.b), BorderGetDpiScaling(Border).

Currently hooking up the new border rendering code to widgets and optimising alpha masking.

Chris.

Good to hear about the progress and you don't hold back on getting it right!