ProGUI V3 Alpha 3 Ready for testing!

[PrincieD]

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

Hi guys, quick update!

The "background" skin CSS property is almost complete now (just gradients to add).
background-position-x, background-position-y, background-size and background-repeat are fully working with images (exactly the same syntax and functionality as Web CSS) with the addition of background-opacity (which is a ProGUI specific extension and a bit of a game changer, no Web browser supports individual image/gradient opacity and animation transitions).

Getting background-position-x / y working correctly with background-size was an absolute bugger due to the added complexity of being able to transition between an absolute pixel value and a percentage of the drawing area's corresponding dimension (width / height) which can change from frame to frame plus the background-size which might also be currently animating - I'll spare the details but it's working now lol (took me about a week of hair pulling and going round in circles).

So yep just gradients to add now (linear and radial), hopefully should just plug into the existing code. Oh and 'background-attachment' which will plug into the widget's layout scroll offset if it has a layout.

Cheers!

Chris.

[PrincieD]

And the CSS for that looks like:

Code: Select all

SkinSetValue("testWidget3", "", "", "background-image", "url('icons/boingball.png'), url('icons/background1.png')")
SkinSetValue("testWidget3", "", "", "background-position-x", "0px")
SkinSetValue("testWidget3", "", "", "background-position-y", "0px")
SkinSetValue("testWidget3", "", "", "background-repeat", "repeat")
SkinSetValue("testWidget3", "hover", "", "background-position-x", "50%, center")
SkinSetValue("testWidget3", "hover", "", "background-position-y", "center, 49%")
SkinSetValue("testWidget3", "", "", "background-size", "50px auto, 100%")
SkinSetValue("testWidget3", "hover", "", "background-size", "20px auto, auto")
SkinSetValue("testWidget3", "", "", "background-opacity", "100%, 100%")
SkinSetValue("testWidget3", "hover", "", "background-opacity", "0%, 100%")
SkinSetValue("testWidget3", "", "", "transition", "background-position-x 1s, background-position-y 1s, background-size 1s, background-opacity 1s")

And the widget draw event handler:

Code: Select all

Procedure drawTestWidget2(Widget, EventType, *eventData.PG_EventDraw)
    
    DrawSkinBackground(Widget, "", 0, 0, *eventData\width, *eventData\height)
    
EndProcedure

[PrincieD]

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

Linear gradients are pretty much working now with same Web CSS syntax apart from color hints (I'll have this working tomorrow) and interpolation modes such as 'oklab', 'hsl' (I won't bother with this for the time being first release MVP), so this demo has 3 linear gradients stacked on top of each other with finally a repeated "boing ball" image heh

Which looks like:

Code: Select all

SkinSetValue("testWidget3", "", "", "background-image", "linear-gradient(217deg, rgba(255, 0, 0, .9), rgba(255, 0, 0, 0) 70.71%), linear-gradient(127deg, rgba(0, 255, 0, .9), rgba(0, 255, 0, 0) 70.71%), linear-gradient(336deg, rgba(0, 0, 255, .9), rgba(0, 0, 255, 0) 70.71%), url('icons/boingball.png')")

And the animation transition states look like:

Code: Select all

SkinSetValue("testWidget3", "", "", "background-position-x", "center, 0px")
SkinSetValue("testWidget3", "", "", "background-position-y", "center, 0px")
SkinSetValue("testWidget3", "", "", "background-repeat", "repeat, no-repeat, repeat")
SkinSetValue("testWidget3", "hover", "", "background-position-x", "50%, center")
SkinSetValue("testWidget3", "hover", "", "background-position-y", "center, 49%")
SkinSetValue("testWidget3", "hover", "", "background-size", "300% 300%, auto, auto, auto")
SkinSetValue("testWidget3", "", "", "background-opacity", "100%, 100%, 100%, 100%")
SkinSetValue("testWidget3", "hover", "", "background-opacity", "40%, 100%, 40%, 0%")
SkinSetValue("testWidget3", "", "", "transition", "background-position-x 1s, background-position-y 1s, background-size 1s, background-opacity 1s")

[PrincieD]

CSS Gradient color hints won't be supported (possibly later), too much work for the moment - I want to wrap up the skin rendering engine as a tier 1 for now. So radial gradients I will be implementing next (again not conical) and then the short-hand parsing so "background: xxx" and then that's the major part of skin rendering done (background rendering, which every UI widget/component will use). Finally a DrawSkinText() command and then skin load/save routines should be enough for again a tier 1 implementation. Then I will be writing up the documentation for the first beta that will be going on sale, so hopefully next month. I've also expanded the CSS color parsing to include hash shorthand "#efe" == "#eeffee" and rgb(120 342 123 / 50%), rgb(12% 20% 53% / 0.5) and hsl(120deg 50% 20% / 25%), hsl(120 50 20 / 0.5), hsl(120deg, 50%, 20%, 0.5) so all the variations supported by current CSS along with legacy comma separated versions.

[PrincieD]

Radial Gradients are working, what a bastard to parse and get working: https://developer.mozilla.org/en-US/doc ... l-gradient

[idle]

Great work with the Radial Gradients.

[PrincieD]

Great work with the Radial Gradients.

Thanks mate, you know you're doing good when you can cut and paste CSS markup directly into ProGUI:

Code: Select all

.stacked-radial {
  background:
    radial-gradient(
      circle at 50% 0,
      rgb(255 0 0 / 50%),
      rgb(255 0 0 / 0%) 70.71%
    ),
    radial-gradient(
      circle at 6.7% 75%,
      rgb(0 0 255 / 50%),
      rgb(0 0 255 / 0%) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgb(0 255 0 / 50%),
        rgb(0 255 0 / 0%) 70.71%
      );
}

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

Stacked radial gradients: https://developer.mozilla.org/en-US/doc ... _gradients

[PrincieD]

More tests:
https://www.youtube.com/shorts/VfCsMxZeslo

Code: Select all

SkinSetValue("testWidget3", "", "", "background-image", "radial-gradient(red, orange, yellow, green, blue), url('icons/background1.png')")
SkinSetValue("testWidget3", "hover", "", "background-position-x", "50%, center")
SkinSetValue("testWidget3", "hover", "", "background-position-y", "center, 49%")
SkinSetValue("testWidget3", "hover", "", "background-size", "300% 300%, auto, auto, auto")
SkinSetValue("testWidget3", "", "", "background-opacity", "100%, 100%, 100%, 100%")
SkinSetValue("testWidget3", "hover", "", "background-opacity", "40%, 100%, 40%, 0%")
SkinSetValue("testWidget3", "", "", "transition", "background-position-x 1s, background-position-y 1s, background-size 1s, background-opacity 1s")

[PrincieD]

More radial gradient tests!:

Code: Select all

SkinSetValue("testWidget3", "", "", "background-image", "radial-gradient(circle at bottom right, red, orange, yellow, green, blue), url('icons/background1.png')")

The default is farthest-corner processing..

https://www.youtube.com/shorts/3fQPoOCLi_Q

[Quin]

Thanks mate, you know you're doing good when you can cut and paste CSS markup directly into ProGUI:

Code: Select all

.stacked-radial {
  background:
    radial-gradient(
      circle at 50% 0,
      rgb(255 0 0 / 50%),
      rgb(255 0 0 / 0%) 70.71%
    ),
    radial-gradient(
      circle at 6.7% 75%,
      rgb(0 0 255 / 50%),
      rgb(0 0 255 / 0%) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgb(0 255 0 / 50%),
        rgb(0 255 0 / 0%) 70.71%
      );
}

Wow, now that is insanely impressive. I'm blind so don't really have a use for CSS but I can still appreciate what a technical challenge this must've been, good work!

[wombats]

Thanks mate, you know you're doing good when you can cut and paste CSS markup directly into ProGUI:

Code: Select all

.stacked-radial {
  background:
    radial-gradient(
      circle at 50% 0,
      rgb(255 0 0 / 50%),
      rgb(255 0 0 / 0%) 70.71%
    ),
    radial-gradient(
      circle at 6.7% 75%,
      rgb(0 0 255 / 50%),
      rgb(0 0 255 / 0%) 70.71%
    ),
    radial-gradient(
        circle at 93.3% 75%,
        rgb(0 255 0 / 50%),
        rgb(0 255 0 / 0%) 70.71%
      );
}

That's awesome!

[PrincieD]

Thanks Quin and Wombats! Yes it's been quite a challenge especially with the animation transistions! I think spending the time to get this working correctly will be worth it as all ProGUI widgets will be based on the DrawSkinBackground(Widget, Component.s, x.d, y.d, Width.d, Height.d) command and just being able to use normal CSS for altering the skins will be super easy and powerful (without the huge memory requirements of a Web browser based UI)

Chris.

[PrincieD]

Hi guys!

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

"background-attachment" CSS property is now working which can be either "fixed" (the background layer is static when scrolling) or "scroll" (the background layer scrolls when scrolling) which comes into play if a widget has a layout.

The CSS for the "testContainer" looks like:

Code: Select all

SkinSetValue("testContainer", "", "", "border", "rgb(0 0 200 / 50%)")
SkinSetValue("testContainer", "", "", "border-radius", "20px")
SkinSetValue("testContainer", "", "", "background-color", "orange")
SkinSetValue("testContainer", "", "", "background-image", "radial-gradient(yellow, orange, red), url('icons/boingball2.png'), url('icons/boingball.png'), linear-gradient(yellow, red)")
SkinSetValue("testContainer", "", "", "background-attachment", "fixed, fixed, scroll, scroll")
SkinSetValue("testContainer", "", "", "background-opacity", "50%, 100%, 20%, 70%")
SkinSetValue("testContainer", "", "", "background-position", "0 0, center, 0 0")
SkinSetValue("testContainer", "", "", "background-repeat", "no-repeat, no-repeat, repeat")
SkinSetValue("testContainer", "", "", "background-size", "100%, auto, 20px, auto")
SkinSetValue("testContainer", "hover", "", "background-position-y", "0, 40%, 50px")
SkinSetValue("testContainer", "hover", "", "background-color", "gray")
SkinSetValue("testContainer", "", "", "transition", "background-color .5s, background-position 1s, background-size 1s")

"background-position" shorthand property is now working (which is the shorthand for background-position-x / background-position-y)

and "background" shorthand property is now working (this was a complex beast to parse) which encompases all the various other properties https://developer.mozilla.org/en-US/doc ... background

So next up, the skin save / load routines then a DrawSkinText() command and then writing up the docs!

Cheers!

Chris.

P.s. Source code is currently at just over 43,000 lines (ProGUI V1.xx is at around 45,000 lines) and the DLL currently compiles to 924KB.

[idle]

that's pretty tiny and looks great!

[PrincieD]

that's pretty tiny and looks great!

Cheers mate! yup not too shoddy