ProGUI V3 Alpha 3 Ready for testing!

[Caronte3D]

Nice!
It's like the one in Godot GameEngine

[PrincieD]

Nice!
It's like the one in Godot GameEngine

Haha cool!

[PrincieD]

[PrincieD]

https://www.youtube.com/watch?v=wF7PJPFX67w
https://www.youtube.com/watch?v=HVKJMlxI3GE

The Border Image Editor is progressing well, layout engines are working excellently!

I'm spending a bit of time on this as it's the first proper application/tool written with the API and the skin engine is a few weeks away (BorderImgs are a key component of this) also I wanted a "gold standard" example of how to use the API building an app from scratch - full source given to study, clone and modify (currently at 1458 lines of code wich is pretty light-weight for an app of this complexity).



Also added new ImgSetInterpolationMode(Img, InterpolationMode) command with the following modes:

Code: Select all

#PG_Img_InterpolationMode_Linear
#PG_Img_InterpolationMode_Nearest
#PG_Img_InterpolationMode_Cubic
#PG_Img_InterpolationMode_MultiSampleLinear
#PG_Img_InterpolationMode_Anisotropic
#PG_Img_InterpolationMode_HighQualityCubic

[GoodNPlenty]

The tool looks amazing and I appreciate you providing the source. This will help us understand the API and it's capabilities.

[PrincieD]

The tool looks amazing and I appreciate you providing the source. This will help us understand the API and it's capabilities.

Thanks very much GoodNPlenty! and you're very welcome Still to add is a bottom section (in the preview window) where you can select a fill brush and alter various DrawBorder() flags as well as a Scintilla editor showing the current CreateBorderImg() code and flags - so you can just cut and paste into your app. I also need to add zoom functionality to the border slice editors (for pixel perfect editing) - this requires adding a mouse wheel scroll event to widgets.

Chris.

[idle]

This is epic work.

[Fred]

Do you have other binding for ProGUI like C/C++ ?

[PrincieD]

This is epic work.

Thanks man!

Do you have other binding for ProGUI like C/C++ ?

Not at the moment, it's just a case of generating a C/C++ header for the DLL though, so the ProGUI_PB.pbi include file is generated automatically by scanning all of the ProGUI source extracting exported procedures, constants (that start with '#PG_') and structures (that have the 'public' keyword in the comment) - it should be fairly straight forward to modify the script to generate a C/C++ header with imports etc..

[PrincieD]

Added new BorderImgSetInterpolationMode(Border, InterpolationMode) command (this will probably get renamed to BorderSetInterpolationMode once I get the CreateBorder() command working - similar to web CSS border commands - so you can programmatically create borders instead of having to use an image/mask image).

I've unified the constants for ImgSetInterpolationMode() and BrushSetInterpolationMode() too so now:

Code: Select all

#PG_InterpolationMode_Linear
#PG_InterpolationMode_Nearest
#PG_InterpolationMode_Cubic
#PG_InterpolationMode_MultiSampleLinear
#PG_InterpolationMode_Anisotropic
#PG_InterpolationMode_HighQualityCubic

Notice the sublte drop-shadow on the bottom-left options, these are scrollable when the height is too small:



The drop-shadow is overlayed on top off the Win32 common controls (or any widget in the container widget's layout, could be a WebView2 for example) using the #PG_Event_DrawForeground event:

Code: Select all

Procedure eventHandler_ContainerWidgetDraw(*widget.Widget, EventType, *event.PG_EventDraw, *data)
    
    If EventType = #PG_Event_DrawForeground
        DrawBorder(shadowBorder2, 0, 0, *event\width, *event\height, 0.8)
    EndIf
    
EndProcedure

And the 'setup' code for the main preview window drop-shadow and the options container widget drop-shadow is:

Code: Select all

shodowBorderImg = LoadImg("Icons/borderShadow.png")
Global shadowBorder = CreateBorderImg(shodowBorderImg, 0, 27, 27, 27, 27) 
Global shadowBorder2 = CreateBorderImg(shodowBorderImg, 0, 27, 27, 27, 27) 
BorderImgSetWidth(shadowBorder2, 0.2, 0.6, 0.1, 7)

[PrincieD]

For "shits and giggles" I've added a transparent webview2 widget in the BorderImg Editor options panel: there are some bugs, the layout scrollbars aren't taking precedence to the underlying chrome control..

Transparent web page: https://www.youtube.com/shorts/EED_4s76wCE
Youtube: https://www.youtube.com/shorts/2955qtLX2uk (Animation and rendering threads - everything is synchronised and working well at 60fps)

Notice though on the "Transparent web page" example how the border drop-shadow overlays correctly in the rendering/composition pipleline (it's more difficult to see on the youtube example)

You can see it better now, I've manually reduced the WebView2's rendering to 0.3 (30%) opacity:
https://www.youtube.com/shorts/hzSWl83sVuE (jerky hand movements are no reflection on rendering capability lol)

[PrincieD]

So I've fixed the Layout scrollbar issues, it was actually effecting all Win32 controls not just the Webview2. It was a simple fix, I forgot to take into account the layout scollbar's width/height when resizing the layout's OS container window (Moral of the story, it's good to mess around sometimes to highlight these issues!).

Code generation is also now working for the Border Editor tool (2132 lines of code so far)

[PrincieD]

Give it a try!: https://www.progui.co.uk/downloads/BorderImgEditor.zip (the zip archive is around 30meg with example images and borders in the 'Icons' sub-directory, the BorderImgEditor.exe is 1.4meg with no dependencies )

Started mocking out closer to the final functionality today with some place-holder controls/widgets for setting a "Brush Fill"
It really has been worth it spending a week or so making this tool, it's highlighted some bugs that would have been difficult to discover without actually using the API to create a proper app (and gaps in the API). It's also highlighted some ease-of-use issues with the API which I will be rectifying



For example you have the following code:

Code: Select all

OptionGadget(#Gadget_FillBrushColor, 0, 0, 0, 0, "Color")
widget = CreateOsWidget(0, 0, 60, 19, GadgetID(#Gadget_FillBrushColor))
item = LayoutGetItemFromWidget(widget)
LayoutSetItemProperty(item, #PG_Layout_Item_MarginLeft, 10)

That can be simplified to just:

Code: Select all

OptionGadget(#Gadget_FillBrushColor, 0, 0, 0, 0, "Color")
widget = CreateOsWidget(0, 0, 60, 19, GadgetID(#Gadget_FillBrushColor))
WidgetSetMarginLeft(widget, 10)

Historically when I was designing the layout engines I wanted to keep everything isolated and separate from Widgets just in case there was a scenario that didn't involve a widget being a layout item, but now that's not an issue - a layout item will always have a widget .. so I can get rid of a lot of the boiler-plate code now (and simplify things using "getters/setters" on the widget)

The other benefit of using getters/setters on the Widget is auto-complete and knowing the exact parameters that are required - there was some ambiguity with the LayoutSetItemProperty() command knowing which constants to use and the required parameters. The same can be said for the LayoutSetProperty() command which has a defination of LayoutSetProperty(Layout, Property, Value.d, Value2.d = #Null, Flags = #Null) - so it's unclear whether 'Value2' is needed or the 'Flags' parameter

It's worth noting that the reason I intially choose to use commands such as LayoutSetItemProperty() and LayoutSetProperty() was to save on DLL file size but now I'm thinking it's worth adding an extra 50KB just for ease-of-use.

Chris.

[PrincieD]

I don't think I've shown this, but here is an example (for alpha 2) of a rounded rectangle with a stroke (inside) gradient and image brush fill:


And that works exactly the same with the Direct2D drivers for Windows and Cairo for Linux (mac)

[PrincieD]

You can also use the ImgAddSize(Img, SrcImg) command where you can add an alternate DPI img version that all drawing functions will use (imgs, brushes, borders etc.) for per monitor dpi scaling and the ImgSetProperty(Img, Property, Value) #PG_Img_SnapToSize so no scaling - particularly useful when you've loaded a multires icon for example and you want an exact 32x32 or 256x256 icon to be selected based on the DPI without scaling
And for scaling you can use the ImgSetInterpolationMode(Img, InterpolationMode) command with #PG_InterpolationMode_Linear, #PG_InterpolationMode_Nearest, #PG_InterpolationMode_Cubic, #PG_InterpolationMode_MultiSampleLinear, #PG_InterpolationMode_Anisotropic #PG_InterpolationMode_HighQualityCubic. For example the DrawImg(img, x, y, width, height) command will scale the width and height and if there is an alternate DPI version that will be used and scaled or in the case of a multires icon the nearest best fit icon will be scaled