ProGUI V3 Alpha 3 Ready for testing!

[PrincieD]

SkinSave(Path.s = "", Skin = #Null) command is coming along nicely! Creates a subdirectory of the skin name containing a bunch of css files named by the theme (or 'default.css' if no theme is specified in the SkinSetValue() class path) e.g. 'default.css', 'dark.css', 'light.css', 'blue.css' etc..

So from the following test example code:

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", "url('icons/boingball.png'), url('icons/boingball2.png')")
SkinSetValue("testContainer", "", "", "background-image", "radial-gradient(yellow, orange, red), url('icons/boingball2.png'), url('icons/boingball.png'), linear-gradient(yellow, red)")
;SkinSetValue("testContainer", "", "", "background", "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-size", "100%, auto, 40px")
;SkinSetValue("testContainer", "", "", "background", "lightblue url('icons/boingball.png') no-repeat fixed center")
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")

SkinSetValue("dark:testContainer", "", "", "background-color", "gray")

SkinSetValue("testContainer.testWidget", "", "", "background-color", "red")
SkinSetValue("testContainer.testWidget", "hover", "", "background-color", "RGB(0, 255, 0)")
;SkinSetValue("testContainer.testWidget", "active", "", "background-color", "rgb(0, 255, 0)")
SkinSetValue("testContainer.testWidget", "", "", "border", "3px solid blue")
SkinSetValue("testContainer.testWidget", "", "", "border-left-width", "10px")
SkinSetValue("testContainer.testWidget", "", "", "border-color", "blue yellow")
;SkinSetValue("testContainer.testWidget", "", "", "border-radius", "0px")
;SkinSetValue("testContainer.testWidget", "", "", "border-top-left-radius", "20px 10px")
;SkinSetValue("testContainer.testWidget", "hover", "", "border-top-left-radius", "40px 20px")
;SkinSetValue("testContainer.testWidget", "hover", "", "border", "3px solid blue")
;SkinSetValue("testContainer.testWidget", "hover", "", "border-style", "double solid")
;SkinSetValue("testContainer.testWidget", "hover", "", "border-left-color", "purple")
;SkinSetValue("testContainer.testWidget", "hover", "", "border-top-style", "dashed")
SkinSetValue("testContainer.testWidget", "hover", "", "border-top", "ridge purple 8px")
SkinSetValue("testContainer.testWidget", "hover", "", "border-right", "ridge purple 10px")
SkinSetValue("testContainer.testWidget", "hover", "", "border-radius", "10px")
SkinSetValue("testContainer.testWidget", "hover", "", "border-top-left-radius", "40px 20px")
SkinSetValue("testContainer.testWidget", "hover", "", "border-bottom-right-radius", "40px 20px")
;SkinSetValue("testContainer.testWidget", "hover", "", "border-color", "blue yellow")
;SkinSetValue("testContainer.testWidget", "active", "", "border", "20px double blue")
SkinSetValue("testContainer.testWidget", "active", "", "border-top-left-radius", "40px 40px")
;SkinSetValue("testContainer.testWidget", "active", "", "border-radius", "20px")
;SkinSetValue("testContainer.testWidget", "active", "", "border-color", "pink yellow purple red")

SkinSetValue("testContainer.testWidget", "", "", "transition", "background-color 2s, border 1s, border-radius 1s, border-top-left-radius 3s, border-bottom-right-radius 3s, background-position-x 1s")
;SkinSetValue("testContainer.testWidget", "", "", "transition", "background-color 2s, border 1s, border-radius 1s")
SkinSetValue("testContainer.testWidget", "hover", "", "transition", "background-color 2s, border 1s ease-out-bounce, border-radius 1s ease-out-bounce, background-position-x 1s ease-out-bounce")
;SkinSetValue("testContainer.testWidget", "", "", "transition", "background-color 2s, border 1s")
;SkinSetValue("testContainer.testWidget", "hover", "", "transition", "background-color .5s, border 1s ease-out-bounce")

SkinSetValue("testWidget", "", "", "background-color", "green")

SkinSetValue("testContainer2", "", "", "background-color", "blue")
SkinSetValue("testContainer2.testWidget2", "", "", "background-color", "yellow")
SkinSetValue("testContainer2.testWidget2", "hover", "", "background-color", "RGBA(255, 0, 0, 0.5)")

;SkinSetValue("testContainer.testContainer2", "", "", "background-color", "grey")
;SkinSetValue("testContainer.testContainer2.testWidget2", "", "", "background-color", "brown")

SkinSetValue("testWidget3", "", "", "background-color", "red")
SkinSetValue("testWidget3", "", "circle", "background-color", "blue")
SkinSetValue("testWidget3", "", "circle", "border", "3px solid green")
SkinSetValue("testWidget3", "", "circle", "border-radius", "10px")
SkinSetValue("testWidget3", "hover", "", "background-color", "RGB(0, 255, 0)")
SkinSetValue("testWidget3", "hover", "circle", "background-color", "yellow")
SkinSetValue("testWidget3", "hover", "circle", "border", "20px double blue")
SkinSetValue("testWidget3", "hover", "circle", "border-radius", "40px")
SkinSetValue("testWidget3", "hover", "circle", "border-bottom-style", "ridge")
;SkinSetValue("testWidget3", "", "", "transition", "background-color 2s")
;SkinSetValue("testWidget3", "hover", "", "transition", "background-color .5s")
;SkinSetValue("testWidget3", "", "circle", "transition", "background-color linear 20s, border 4s, border-radius 2s")
;SkinSetValue("testWidget3", "hover", "circle", "transition", "background-color 4s, border 4s, border-radius 2s")

;SkinSetValue("testWidget3", "", "", "border", "solid RGBA(0,0,0,0)")
;SkinSetValue("testWidget3", "", "", "border-radius", "25px")

;SkinSetValue("testWidget3", "", "", "background-image", "linear-gradient(blue, pink), url('icons/boingball.png'), url('icons/background1.png')")
;SkinSetValue("testWidget3", "", "", "background-image", "linear-gradient(to right, hsl(120 75 25), hsl(120deg, 20%, 25%))")
;SkinSetValue("testWidget3", "", "", "background-image", "radial-gradient(ellipse farthest-side at 50% 50%, red, orange, yellow, green, blue), url('icons/background1.png')")
;SkinSetValue("testWidget3", "", "", "background-image", "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%)")
;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')")
SkinSetValue("testWidget3", "", "", "background-image", "url('icons/boingball.png'), url('icons/boingball2.png'), url('icons/background1.png')")
;SkinSetValue("testWidget3", "", "", "background-position-x", "center, 0px")
;SkinSetValue("testWidget3", "", "", "background-position-y", "center, 0px")
SkinSetValue("testWidget3", "", "", "background-position", "bottom 20% right, 0, 0")
SkinSetValue("testWidget3", "", "", "background-repeat", "no-repeat, no-repeat, repeat")
;SkinSetValue("testWidget3", "hover", "", "background-image", "url('icons/boingball.png'), url('icons/boingball2.png'), url('icons/background1.png')")
SkinSetValue("testWidget3", "hover", "", "background-position-x", "50%, center")
SkinSetValue("testWidget3", "hover", "", "background-position-y", "center, 49%")
;SkinSetValue("testWidget3", "", "", "background-size", "50px 50px, 50px auto, 100% 100%")
SkinSetValue("testWidget3", "hover", "", "background-size", "300%, auto, auto, auto")
SkinSetValue("testWidget3", "", "", "background-opacity", "50%, 50%, 100%, 100%")
SkinSetValue("testWidget3", "hover", "", "background-opacity", "0%, 0%, 100%, 0%")
;SkinSetValue("testWidget3", "active", "", "background-opacity", "0%, 100%, 0%, 0%")

SkinSetValue("testWidget3", "", "", "transition", "background-color 2s, background-position-x 1s, background-position-y 1s, background-size 1s, background-opacity 1s")

SkinSetValue("testWidget", "", "", "background-image", "url('icons/boingball.png'), url('icons/boingball2.png'), url('icons/background1.png')")
;SkinSetValue("testWidget", "hover", "", "background-image", "url('icons/boingball.png'), url('icons/background1.png')")
SkinSetValue("testWidget", "", "", "background-repeat", "no-repeat")
SkinSetValue("testWidget", "", "", "background-position-x", "20px, 30px, 0px")
SkinSetValue("testWidget", "hover", "", "background-position-x", "60px, 0px, -130px")

This is the generated 'default.css' from the test example:

Code: Select all

/* ---[ scrollbar ]--------------------------------------------------------------------------------- */

    /* Default scrollbar styles */
    .scrollbar {
        background-color: #F0F0F0;
    }

    .scrollbar thumb1 {
        background-color: #F0F0F0;
        transition: background-color 1s;
    }

    .scrollbar thumb2 {
        background-color: #F0F0F0;
        transition: background-color 1s;
    }

    .scrollbar trackbar {
        background-color: #CDCDCD;
        transition: background-color 1s;
    }

    /* Active scrollbar styles */
    .scrollbar:active thumb1 {
        background-color: #606060;
        transition: background-color 0s;
    }

    .scrollbar:active thumb2 {
        background-color: #606060;
        transition: background-color 0s;
    }

    .scrollbar:active trackbar {
        background-color: #606060;
        transition: background-color 0s;
    }

    /* Hover scrollbar styles */
    .scrollbar:hover thumb1 {
        background-color: #DADADA;
        transition: background-color .3s;
    }

    .scrollbar:hover thumb2 {
        background-color: #DADADA;
        transition: background-color .3s;
    }

    .scrollbar:hover trackbar {
        background-color: #A6A6A6;
        transition: background-color .3s;
    }

/* ---[ testContainer ]----------------------------------------------------------------------------- */

    /* Default testContainer styles */
    .testContainer {
        border: rgb(0 0 200 / 50%);
        border-radius: 20px;
        background-color: orange;
        background-image: radial-gradient(yellow, orange, red), url('icons/boingball2.png'), url('icons/boingball.png'), linear-gradient(yellow, red);
        background-attachment: fixed, fixed, scroll, scroll;
        background-opacity: 50%, 100%, 20%, 70%;
        background-position: 0 0, center, 0 0;
        background-repeat: no-repeat, no-repeat, repeat;
        background-size: 100%, auto, 20px, auto;
        transition: background-color .5s, background-position 1s, background-size 1s;
    }

    /* Hover testContainer styles */
    .testContainer:hover {
        background-position-y: 0, 40%, 50px;
        background-color: gray;
    }

/* ---[ testContainer testWidget ]------------------------------------------------------------------ */

    /* Default testContainer testWidget styles */
    .testContainer .testWidget {
        background-color: red;
        border: 3px solid blue;
        border-left-width: 10px;
        border-color: blue yellow;
        transition: background-color 2s, border 1s, border-radius 1s, border-top-left-radius 3s, border-bottom-right-radius 3s, background-position-x 1s;
    }

    /* Active testContainer testWidget styles */
    .testContainer .testWidget:active {
        border-top-left-radius: 40px 40px;
    }

    /* Hover testContainer testWidget styles */
    .testContainer .testWidget:hover {
        background-color: RGB(0, 255, 0);
        border-top: ridge purple 8px;
        border-right: ridge purple 10px;
        border-radius: 10px;
        border-top-left-radius: 40px 20px;
        border-bottom-right-radius: 40px 20px;
        transition: background-color 2s, border 1s ease-out-bounce, border-radius 1s ease-out-bounce, background-position-x 1s ease-out-bounce;
    }

/* ---[ testWidget ]-------------------------------------------------------------------------------- */

    /* Default testWidget styles */
    .testWidget {
        background-color: green;
        background-image: url('icons/boingball.png'), url('icons/boingball2.png'), url('icons/background1.png');
        background-repeat: no-repeat;
        background-position-x: 20px, 30px, 0px;
    }

    /* Hover testWidget styles */
    .testWidget:hover {
        background-position-x: 60px, 0px, -130px;
    }

/* ---[ testContainer2 ]---------------------------------------------------------------------------- */

    /* Default testContainer2 styles */
    .testContainer2 {
        background-color: blue;
    }

/* ---[ testContainer2 testWidget2 ]---------------------------------------------------------------- */

    /* Default testContainer2 testWidget2 styles */
    .testContainer2 .testWidget2 {
        background-color: yellow;
    }

    /* Hover testContainer2 testWidget2 styles */
    .testContainer2 .testWidget2:hover {
        background-color: RGBA(255, 0, 0, 0.5);
    }

/* ---[ testWidget3 ]------------------------------------------------------------------------------- */

    /* Default testWidget3 styles */
    .testWidget3 {
        background-color: red;
        background-image: url('icons/boingball.png'), url('icons/boingball2.png'), url('icons/background1.png');
        background-position: bottom 20% right, 0, 0;
        background-repeat: no-repeat, no-repeat, repeat;
        background-opacity: 50%, 50%, 100%, 100%;
        transition: background-color 2s, background-position-x 1s, background-position-y 1s, background-size 1s, background-opacity 1s;
    }

    .testWidget3 circle {
        background-color: blue;
        border: 3px solid green;
        border-radius: 10px;
    }

    /* Hover testWidget3 styles */
    .testWidget3:hover {
        background-color: RGB(0, 255, 0);
        background-position-x: 50%, center;
        background-position-y: center, 49%;
        background-size: 300%, auto, auto, auto;
        background-opacity: 0%, 0%, 100%, 0%;
    }

    .testWidget3:hover circle {
        background-color: yellow;
        border: 20px double blue;
        border-radius: 40px;
        border-bottom-style: ridge;
    }

[PrincieD]

I've improved the formatting a bit and now there is a "data" subdirectory in the skin's directory that contains all the images etc which are copied from any "url()" file paths with the "url()" updated to point to the "data" directory:

Code: Select all

/* ---[ Scrollbar Styles ]--- */

	.scrollbar {
		background-color: #f0f0f0;
	}

	.scrollbar thumb1 {
		background-color: #f0f0f0;
		transition: background-color 1s;
	}

	.scrollbar thumb2 {
		background-color: #f0f0f0;
		transition: background-color 1s;
	}

	.scrollbar trackbar {
		background-color: #cdcdcd;
		transition: background-color 1s;
	}

	/* Active State */
	.scrollbar:active thumb1 {
		background-color: #606060;
		transition: background-color 0s;
	}

	.scrollbar:active thumb2 {
		background-color: #606060;
		transition: background-color 0s;
	}

	.scrollbar:active trackbar {
		background-color: #606060;
		transition: background-color 0s;
	}

	/* Hover State */
	.scrollbar:hover thumb1 {
		background-color: #dadada;
		transition: background-color .3s;
	}

	.scrollbar:hover thumb2 {
		background-color: #dadada;
		transition: background-color .3s;
	}

	.scrollbar:hover trackbar {
		background-color: #a6a6a6;
		transition: background-color .3s;
	}

/* ---[ TestContainer Styles ]--- */

	.testContainer {
		border: rgb(0 0 200 / 50%);
		border-radius: 20px;
		background-color: orange;
		background-image:
			radial-gradient(yellow, orange, red),
			url('data/boingball2.png'),
			url('data/boingball.png'),
			linear-gradient(yellow, red);
		background-attachment: fixed, fixed, scroll, scroll;
		background-opacity: 50%, 100%, 20%, 70%;
		background-position: 0 0, center, 0 0;
		background-repeat: no-repeat, no-repeat, repeat;
		background-size: 100%, auto, 20px, auto;
		transition: background-color .5s, background-position 1s, background-size 1s;
	}

	/* Hover State */
	.testContainer:hover {
		background-position-y: 0, 40%, 50px;
		background-color: gray;
	}

/* ---[ TestWidget Styles ]--- */

	.testWidget {
		background-color: green;
		background-image: url('data/boingball.png'), url('data/boingball2.png'), url('data/background1.png');
		background-repeat: no-repeat;
		background-position-x: 20px, 30px, 0px;
	}

	/* Hover State */
	.testWidget:hover {
		background-position-x: 60px, 0px, -130px;
	}

/* ---[ TestContainer2 Styles ]--- */

	.testContainer2 {
		background-color: blue;
	}

/* ---[ TestWidget3 Styles ]--- */

	.testWidget3 {
		background-color: red;
		background-image: url('data/boingball.png'), url('data/boingball2.png'), url('data/background1.png');
		background-position: bottom 20% right, 0, 0;
		background-repeat: no-repeat, no-repeat, repeat;
		background-opacity: 50%, 50%, 100%, 100%;
		transition:
			background-color 2s,
			background-position-x 1s,
			background-position-y 1s,
			background-size 1s,
			background-opacity 1s;
	}

	.testWidget3 circle {
		background-color: blue;
		border: 3px solid green;
		border-radius: 10px;
	}

	/* Hover State */
	.testWidget3:hover {
		background-color: rgb(0, 255, 0);
		background-position-x: 50%, center;
		background-position-y: center, 49%;
		background-size: 300%, auto, auto, auto;
		background-opacity: 0%, 0%, 100%, 0%;
	}

	.testWidget3:hover circle {
		background-color: yellow;
		border: 20px double blue;
		border-radius: 40px;
		border-bottom-style: ridge;
	}

/* ---[ TestContainer TestWidget Styles ]--- */

	.testContainer .testWidget {
		background-color: red;
		border: 3px solid blue;
		border-left-width: 10px;
		border-color: blue yellow;
		transition:
			background-color 2s,
			border 1s,
			border-radius 1s,
			border-top-left-radius 3s,
			border-bottom-right-radius 3s,
			background-position-x 1s;
	}

	/* Active State */
	.testContainer .testWidget:active {
		border-top-left-radius: 40px 40px;
	}

	/* Hover State */
	.testContainer .testWidget:hover {
		background-color: rgb(0, 255, 0);
		border-top: ridge purple 8px;
		border-right: ridge purple 10px;
		border-radius: 10px;
		border-top-left-radius: 40px 20px;
		border-bottom-right-radius: 40px 20px;
		transition:
			background-color 2s,
			border 1s ease-out-bounce,
			border-radius 1s ease-out-bounce,
			background-position-x 1s ease-out-bounce;
	}

/* ---[ TestContainer2 TestWidget2 Styles ]--- */

	.testContainer2 .testWidget2 {
		background-color: yellow;
	}

	/* Hover State */
	.testContainer2 .testWidget2:hover {
		background-color: rgba(255, 0, 0, 0.5);
	}

[PrincieD]

haha check this out! https://www.youtube.com/watch?v=Jgyh2L6TSoU

So the ProGUI V3 skin save / load commands are now working which generate web standard CSS files (with the exception of the 'background-opacity' property) and the skin CSS can be edited and saved in realtime (with your editor of choice, VS Code in this example) and the "compiled exe" will update in realtime.

The beauty is you can tweek your UI whilst it's running without a re-compile

[PrincieD]

Hi guys, some preliminary documentaion working now (with the help of Gemini 2.5 pro experimental - dumped all the source into the million token context window ) "Window Management" and "Layout Management" are written up (around 100 of the 350+ commands) (I'll be manually going over every command to touch-up / embellish) https://www.progui.co.uk/downloads/testhelp/Index.html

[idle]

Hi guys, some preliminary documentaion working now (with the help of Gemini 2.5 pro experimental - dumped all the source into the million token context window ) "Window Management" and "Layout Management" are written up (around 100 of the 350+ commands) (I'll be manually going over every command to touch-up / embellish) https://www.progui.co.uk/downloads/testhelp/Index.html

me sneaks away and asks Gemini 2.5 pro experimental to create an advanced gui library just like pro gui in PB

That's really pretty cool you can get it to the documentation.

[PrincieD]

Hi guys, some preliminary documentaion working now (with the help of Gemini 2.5 pro experimental - dumped all the source into the million token context window ) "Window Management" and "Layout Management" are written up (around 100 of the 350+ commands) (I'll be manually going over every command to touch-up / embellish) https://www.progui.co.uk/downloads/testhelp/Index.html

me sneaks away and asks Gemini 2.5 pro experimental to create an advanced gui library just like pro gui in PB

That's really pretty cool you can get it to the documentation.

Yea I'm really impressed, it even generates examples! I tried experimenting with ChatGPT 4.5 a couple of weeks ago to see if it could generate docs with some mixed results (and expense!) but yea this should be a huge time saver for generating the grunt of it, I'll be going over it manually to refine.

[PrincieD]

The "Widget Managment" section is now generated with another 66 commands https://www.progui.co.uk/downloads/testhelp/Index.html again I will be refining the generated docs (there are some under-the-hood details that aren't necessary but it's cool that it understands how the code works!)

*edit "Event Handling" and "Graphics & Drawing" now generated, I'm really impressed with the "Graphics & Drawing" section (especially the code examples) - it's possibly better than what I could write manually ... the great thing with dumping the entire source code for ProGUI V3 into Gemini is it captures things that I might have missed (or forgot to mention) whilst explaining with clarity (even if it does go too much into the internal workings sometimes - which of course is easily rectifiable with manual refinement and editing)

[SPH]

Hi PrinceD

I found a bug: when you open an image (Select border image to load...) and zoom in too far with the mouse wheel, your program quits.

Otherwise, your program looks great. But could you explain very simply what it's for? (without using computer jargon).

Thx

[PrincieD]

Hi PrinceD

I found a bug: when you open an image (Select border image to load...) and zoom in too far with the mouse wheel, your program quits.

Otherwise, your program looks great. But could you explain very simply what it's for? (without using computer jargon).

Thx

Hi SPH, thanks for reporting - that sounds like the BorderImgEditor.exe? this is just a handy tool for editing image borders (for use in ProGUI V3). Image borders are made up of an image sliced into different parts for the corners, sides etc - called 9 slicing (here's the jargon!) https://en.wikipedia.org/wiki/9-slice_scaling. ProGUI V3 is a UI framework library that allows you to create sophisticated user interfaces for your desktop apps easily. The BorderImgEditor tool is created using ProGUI V3 with source code given as an example of how to create an app using the framework.

[SPH]

Thanks, PrinceD

Ultimately, it's a kind of PhotoFilter (or Photoshop) Lite with no connection to PB instructions.
So it's a graphics editing tool?

[PrincieD]

Thanks, PrinceD

Ultimately, it's a kind of PhotoFilter (or Photoshop) Lite with no connection to PB instructions.
So it's a graphics editing tool?

Not quite, it allows you to easily define Border Image slices (by dragging them - what you see is what you get) and experiment with the various settings (and visualise what it would look like in your app with the DrawBorder() commands etc). It generates PureBasic code that you can cut and paste (without having to guess through trial and error side offsets etc..) - so a handy tool that is also a good example of what ProGUI V3 is capable of and a good learning resource with the full code given

[PrincieD]

Hi guys, full "preliminary" docs generated now https://www.progui.co.uk/downloads/testhelp/Index.html, keep an eye on this URL as I refine (Skinning needs a bit of work, but for the most part really good) - this is a first pass so take the generated examples with a pinch of salt, look at the test examples in the archive for how things are actually done however the command documentation is pretty accurate. I should have marked "WindowOutput()" as an internal command only as everything is event driven now needing a draw event handler. WindowOutput() should never be used really but anyway the docs are pretty good for the time being for use with the alpha! (skinning is working in the latest build only, which I might release another alpha tomorrow) but there is some actual docs now though lol

[PrincieD]

Hi guys, I've been working on the second draft of the documentation (almost done). Nearly every command has an example that you can just cut and paste into PB and it works (with the current build, I've manually gone through every code example to make sure it works - all 350+ commands). Also finalising some of the missing API functionality for the beta (or last alpha with docs before beta). This is a nice example from the DrawSkinBackground() command docs:

Code: Select all

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

; Define some skin properties for a widget with class "myBackgroundWidget"
SkinSetValue("myBackgroundWidget", "", "", "background-color", "lightblue")
SkinSetValue("myBackgroundWidget", "", "", "background-image", "url('icons/boingball.png'), linear-gradient(to bottom, white, silver)")
SkinSetValue("myBackgroundWidget", "", "", "background-repeat", "no-repeat, repeat-x")
SkinSetValue("myBackgroundWidget", "", "", "background-position", "center, 0 0")
SkinSetValue("myBackgroundWidget", "", "", "background-size", "contain, auto 50px") ; Contain boingball, gradient is 50px high

SkinSetValue("myBackgroundWidget", "hover", "", "background-color", "lightgreen") ; Change color on hover
SkinSetValue("myBackgroundWidget", "", "", "transition", "background-color 1s") ; Animate color change

Procedure DrawBgWidget(Widget, EventType, *EventData.PG_EventDraw, *UserData)
  ; Draw the background defined in the skin for the main component ("")
  DrawSkinBackground(Widget, "", 0, 0, *EventData\width, *EventData\height)

  ; Optionally draw other things on top
  DrawBoxStroke(1, 1, *EventData\width-2, *EventData\height-2, RGB(0,0,0), 0.5)
EndProcedure

Procedure MouseBgWidget(Widget, EventType, *EventData.PG_EventMouse)
  Select EventType
    Case #PG_Event_MouseEnter
      WidgetSetSkinState(Widget, "hover")
    Case #PG_Event_MouseLeave
      WidgetSetSkinState(Widget, "")
  EndSelect
EndProcedure

MyWindow = CreateWindow(0, 0, 400, 300, "DrawSkinBackground Example")
RootLayout = WindowGetLayout(MyWindow)
LayoutSetPadding(RootLayout, 10)

If MyWindow
  BgWidget = CreateWidget(0, 0, 0, 0)
  WidgetSetMinWidth(BgWidget, 100)
  WidgetSetMinHeight(BgWidget, 100)
  WidgetSetClass(BgWidget, "myBackgroundWidget") ; Assign class for skinning
  AddEventHandler(BgWidget, #PG_Event_Draw, @DrawBgWidget())
  AddEventHandler(BgWidget, #PG_Event_MouseEnter, @MouseBgWidget())
  AddEventHandler(BgWidget, #PG_Event_MouseLeave, @MouseBgWidget())

  WindowShow(MyWindow, #True, #PG_Window_ScreenCentered)

  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf

StopProGUI()

Another one from WidgetSetOpacity() :

Code: Select all

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

Procedure DrawFadingWidget(Widget, EventType, *EventData.PG_EventDraw, *UserData)
    DrawBox(0, 0, *EventData\width, *EventData\height, RGB(80, 120, 200))
EndProcedure

Procedure FadeInHandler(Widget, EventType, *EventData.PG_EventAnimate, *UserData)
    If EventType = #PG_Event_Animate And *EventData\state = #PG_Event_Animate_Update
        ; Calculate opacity from 0.0 to 1.0 over the animation duration
        CurrentOpacity.f = *EventData\currentTime / *EventData\duration
        WidgetSetOpacity(Widget, CurrentOpacity)
        Debug "Opacity: " + StrF(CurrentOpacity, 2)
    ElseIf EventType = #PG_Event_Animate And *EventData\state = #PG_Event_Animate_End
        WidgetSetOpacity(Widget, 1.0) ; Ensure it's fully opaque at the end
        Debug "Fade-in complete."
    EndIf
EndProcedure

MyWindow = CreateWindow(0, 0, 300, 200, "Widget Opacity Example")
RootLayout = WindowGetLayout(MyWindow)
LayoutSetPadding(RootLayout, 10)

If MyWindow
  FadingWidget = CreateWidget(0, 0, 150, 80)
  WidgetSetClass(FadingWidget, "fader")
  WidgetSetMargin(FadingWidget, 5)
  WidgetSetOpacity(FadingWidget, 0.0) ; Start fully transparent
  AddEventHandler(FadingWidget, #PG_Event_Draw, @DrawFadingWidget())
  AddEventHandler(FadingWidget, #PG_Event_Animate, @FadeInHandler())

  WindowShow(MyWindow, #True, #PG_Window_ScreenCentered)

  ; Start a 3-second animation to fade the widget in
  StartAnimation(FadingWidget, 1, 3000)
  Debug "Starting fade-in animation..."

  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf

StopProGUI()

Another one for DrawPath() in the Graphics & Drawing section:

Code: Select all

IncludeFile "ProGUI_PB.pbi"

StartProGUI()

Procedure DrawHandler(Window, EventType, *EventData.PG_EventDraw, *UserData)
  
    DrawClear(RGB(255, 255, 255), 1)

    ; Define a star-like path
    PathMoveTo(100, 10)
    PathAddLine(130, 80)
    PathAddLine(200, 80)
    PathAddLine(140, 130)
    PathAddLine(170, 200)
    PathAddLine(100, 150)
    PathAddLine(30, 200)
    PathAddLine(60, 130)
    PathAddLine(0, 80)
    PathAddLine(70, 80)
    PathClose()

    ; Fill the path with semi-transparent red
    DrawPath(RGB(255, 0, 0), 0.7, #PG_Path_Preserve | #PG_Path_Winding) ; Preserve path for stroke

    ; Stroke the same path in blue
    DrawSetStroke(2)
    DrawPathStroke(RGB(0, 0, 255)) ; Path was preserved

    DrawSetStroke(1)
EndProcedure

MyWindow = CreateWindow(0, 0, 220, 220, "DrawPath Example")

If MyWindow
  AddEventHandler(MyWindow, #PG_Event_Draw, @DrawHandler())
  WindowShow(MyWindow, #True, #PG_Window_ScreenCentered)

  Repeat
    Event = WaitWindowEvent()
  Until Event = #PB_Event_CloseWindow
EndIf

StopProGUI()

[Zach]

Glad to see progress on the documentation. Hope all is going well, otherwise. It sounds like it is.

[Quin]

Now that looks cool. Congrats on getting the documentation there, as a documentaition maintainer for a project with hundreds of runnable code examples, I know how annoying testing them can be. I look forward to this!