ProGUI V3 Alpha 3 Ready for testing!

[Quin]

Hi Chris!
Nice looking library you have here! Has any special thought been paid to accessibility for screen readers? E.g. can I navigate all the gadgets with the keyboard, does putting & in a control's name make alt+that letter activate it, the ability to give our gadgets custom accessibility text/roles, etc? PB currently doesn't provide a ton of support for this, although the default controls are fairly accessible, so it could be something good to add to ProGUI
Cheers!

[PrincieD]

I just bought the Gold license a few days ago, didn't find a hint how to get the Platinum licence. How did you do this and how much does it cost? Maybe Chris let's me update it to platinum.

Hi jacdelad, I'm not actually offering the Platinum license any more (just the Gold with source), this was for early adopters with the original V1.xx (life time of free updates) - I may re-introduce it though with V3.

Hi Chris!
Nice looking library you have here! Has any special thought been paid to accessibility for screen readers? E.g. can I navigate all the gadgets with the keyboard, does putting & in a control's name make alt+that letter activate it, the ability to give our gadgets custom accessibility text/roles, etc? PB currently doesn't provide a ton of support for this, although the default controls are fairly accessible, so it could be something good to add to ProGUI
Cheers!

Hi Quin, thanks! I haven’t given it much thought yet (other than widget tabbing) but yes I agree it would be good to add although accessibilty features will probably come a bit later.

[Quin]

Hi Quin, thanks! I haven’t given it much thought yet (other than widget tabbing) but yes I agree it would be good to add although accessibilty features will probably come a bit later.

Awesome, look forward to purchasing it once they come

[jacdelad]

Oh, so ChrisD is PrincieD here. No problem, Gold should be fine too. It's not too expensive.

[PrincieD]

Oh, so ChrisD is PrincieD here. No problem, Gold should be fine too. It's not too expensive.

Yep that's me! haha cool cool

Hi Quin, thanks! I haven’t given it much thought yet (other than widget tabbing) but yes I agree it would be good to add although accessibilty features will probably come a bit later.

Awesome, look forward to purchasing it once they come

Good stuff!

[PrincieD]

CSS style borders are coming along nicely, so the vid is comparing how Chrome does it with my implementation:

https://www.youtube.com/watch?v=WXxI-YF5iR0

The maths is quite tricky, each side of the border can have an independent width and each corner can be curved with an independent x and y radius along with calculating the border inner diameter. Each side has to transition smoothly to one another. So far I think I've reversed the maths correctly for Chrome and Firefox through visual experimentation (notice how the inner diameter morphs into a rectangle when the width and height are too small). For colouring each side independently I'm going to use a Trapezoid ClipPath / mask which I think is how Chrome and Firefox does it - the Trapezoid is based on the overall width / height and width of the sides (the joining angle remains constant regardless of the curvature from what I've observed).

[Zach]

Just made another license purchase since I already get free updates.
Really want to see this library mature and succeed, looking forward to the Betas with documentation

[PrincieD]

Just made another license purchase since I already get free updates.
Really want to see this library mature and succeed, looking forward to the Betas with documentation

Thankyou so much for that Zach, it's really appreciated!!

[SPH]

Just made another license purchase since I already get free updates.
Really want to see this library mature and succeed, looking forward to the Betas with documentation

+200%

[PrincieD]

Just made another license purchase since I already get free updates.
Really want to see this library mature and succeed, looking forward to the Betas with documentation

+200%

Thanks SPH!! it's very encouraging

[PrincieD]

I've nailed it!

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

So instead of using a Trapezoid ClipPath() for masking out the colour of each side I'm now calculating the intersection point of the 2 angled lines and then doing a ClipBox() followed by a triangle ClipPath() - using the intersection point for the triangle - which is more efficient.

[SPH]

We would need a complete example showing why you make graphic frames. Because I don't see what it is currently used for...

[Zach]

based on the latest examples I'd say, scalable widget framing/borders

[PrincieD]

based on the latest examples I'd say, scalable widget framing/borders

Yep that's it, so borders can be programmatically created like CSS (which I think most people will use rather than Img borders) - which ties into the skinning engine that will be coming online soon after I've got this code sorted - I want it to be as versatile as possible as this is core component.

[PrincieD]

Hi guys! spent the past few days refactoring the vector path code and mathematics (not my strong point! it's been an absolute bugger). There were some edge cases where the inner path diameter would clip through the outer path diameter.
The path generation is now using Arcs instead of Beziers (which used kappa constant/magic number for a circle) - should be slightly quicker to compute. The inner diameter now handles cases where the corner radii would intersect using a bit of Pythag to offset and calculate a new inner arc.
For example in this video (outer diameter path in red and inner diameter path in green) with the rounded rectangle having a top width of 80px, left 5px, bottom 10px and right 10px with a topLeft corner radius at 50px:50px, topRight 180px:180px, bottomLeft 180px:180px and bottomRight 50px:10px.
When the height of the rounded rectangle is too small the bottomLeft corner inner radius would clip through the outer radius, now if you notice it is offset along the x axis and the inner arc is recalculated correctly.

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

This is the previous implementation so you can understand the edge-case a bit better:

https://www.youtube.com/shorts/14Gu7k8iQYo

P.s

Oh dear looks like Firefox is using a variant of my previous implemtation