ProGUI V3 Alpha 3 Ready for testing!

[PrincieD]

Hi guys, alpha 2 is progressing nicely - I'm currently concentrating on fleshing out the GFX API (both Direct2D and Cairo drivers concurrently)
Commands currently implemented:

DrawSetStroke(Width.f, Flags = #Null, DashStartOffset.f = 0)
DrawSetStrokeCustom(*CustomDashArray.FLOAT, CustomDashArrayCount)
DrawSetStrokeMiterLimit(MiterLimit.f)
DrawBoxStroke(x.d, y.d, Width.d, Height.d, Color.l, Opacity.f)
DrawBoxStrokeFill(x.d, y.d, Width.d, Height.d, Brush)
DrawRoundBox(x.d, y.d, Width.d, Height.d, RadiusX.d, RadiusY.d, Color.l, Opacity.f, NoRadiusDPIScaling.b = #False)
DrawRoundBoxFill(x.d, y.d, Width.d, Height.d, RadiusX.d, RadiusY.d, Brush, NoRadiusDPIScaling.b = #False)
DrawRoundBoxStroke(x.d, y.d, Width.d, Height.d, RadiusX.d, RadiusY.d, Color.l, Opacity.f, NoRadiusDPIScaling.b = #False)
DrawRoundBoxStrokeFill(x.d, y.d, Width.d, Height.d, RadiusX.d, RadiusY.d, Brush, NoRadiusDPIScaling.b = #False)
DrawEllipse(x.d, y.d, RadiusX.d, RadiusY.d, Color.l, Opacity.f)
DrawEllipseFill(x.d, y.d, RadiusX.d, RadiusY.d, Brush)
DrawEllipseStroke(x.d, y.d, RadiusX.d, RadiusY.d, Color.l, Opacity.f)
DrawEllipseStrokeFill(x.d, y.d, RadiusX.d, RadiusY.d, Brush)
CreateBrushGradientLinear(StartX.d, StartY.d, EndX.d, EndY.d, StartColor.l, StartOpacity.f, EndColor.l, EndOpacity.f)
CreateBrushGradientRadial(CenterX.d, CenterY.d, OriginOffsetX.d, OriginOffsetY.d, RadiusX.d, RadiusY.d, StartColor.l, StartOpacity.f, EndColor.l, EndOpacity.f)
BrushGradientAddColor(Brush, Position.f, Color.l, Opacity.f)
BrushGradientLinearSetPoints(Brush, StartX.d, StartY.d, EndX.d, EndY.d)
BrushGradientRadialSetPoints(Brush, CenterX.d, CenterY.d, OriginOffsetX.d, OriginOffsetY.d, RadiusX.d, RadiusY.d)

DrawSetStroke flags are:
#PG_Stroke_Dash
#PG_Stroke_Dot
#PG_Stroke_CustomDash
#PG_Stroke_NoDPIScaling
#PG_Stroke_RoundEnd
#PG_Stroke_SquareEnd
#PG_Stroke_RoundCorner
#PG_Stroke_BevelCorner
#PG_Stroke_Center
#PG_Stroke_Outside

So yep the next alpha currently supports stroking inside (the default), outside and center (none of which are supported natively in both Direct2D and Cairo, which has taken some time to implement), everything is aligned to the pixel grid and DPI scaling is automatic (Device Independant Pixels).

Cheers!

Chris.

https://www.youtube.com/watch?v=9raHvLihrVw&t=5s

[PrincieD]

Slightly longer demo swapping between Direct2D drivers and Cairo drivers showing inside/outside/center stroke modes with Dash/Dot stroke patterns:
https://www.youtube.com/watch?v=BMFw6wfW48I

[PrincieD]

Hi guys, another quick update.
Massively upgraded the DrawBorder() command and renamed CreateBorder to CreateBorderImg, previously only supported stretch sides - now supports 'independent' edge repeat modes - Stretch, Repeat, Round and Space

e.g Global tborder = CreateBorderImg(tborderimg, 0, 28, 28, 28, 28, #PG_BorderImg_Stretch | #PG_BorderImg_RoundLeft | #PG_BorderImg_RepeatRight | #PG_BorderImg_SpaceBottom)

Independant edge scaling is also working in my current test code - the cool thing is it's all dynamic so you could draw directly to the image or mask that you created the border with (if you still have a handle) and anything that uses the border will update in real-time "magically"

Heres a demo using CreateBorderImg(tborderimg, 0, 28, 28, 28, 28, #PG_BorderImg_Stretch | #PG_BorderImg_RoundLeft | #PG_BorderImg_RepeatRight | #PG_BorderImg_SpaceBottom)

https://www.youtube.com/watch?v=l7LmrSsKQpo&t=1s

[PrincieD]

And this demo is:

Code: Select all

Global tbordermask = LoadImg("Icons\border_new_mask2.png")
Global tborderimg = LoadImg("Icons\border_new2.png", 0)
tbordermask2 = LoadImg("Icons\border_new_mask2Test.png", 0)
tborderimg2 = LoadImg("Icons\border_new2Test.png", 0)
ImgAddSize(tborderimg, tborderimg2)
ImgAddSize(tbordermask, tbordermask2)
Global tborder = CreateBorderImg(tborderimg, tbordermask, 20, 20, 26, 28, #PG_BorderImg_Stretch | #PG_BorderImg_RoundLeft | #PG_BorderImg_RoundRight | #PG_BorderImg_RoundBottom)

With window draw event handler code:

Code: Select all

Procedure draw(Window, EventType, *eventData.PG_EventDraw)
    
    Static count.f
   
    ;DrawClear(0, 0)
    DrawClear(RGB(240, 240, 240), 1)
    
    
;     BeginDraw(OutputImg(testimg))
;     DrawBox(0, 0, 20, 20, RGB(255, 0, 0), 1)
;         BeginDraw(OutputImg(timg2))
;         DrawBox(0, 40, 20, 20, RGB(0, 255, 255), 1)
;         EndDraw()
;     DrawBox(0, 20, 20, 20, RGB(255, 0, 255), 1)
;     EndDraw()
;     
    ;DrawImg(testimg, 200, 200, -1, -1, 1)

     
    imgBrush = CreateImgBrush(testimg)
    
    ;DrawBorder2(tborder, 0, 0, 300, 200, 1, imgBrush)
    
    x.d = 100
    y.d = 100
    BrushSetPosition(imgBrush, x, y)
    DrawBorder_(tborder, x, y, mouseX-x, mouseY-y, 1, imgBrush)
    
    FreeBrush(imgBrush)
    
EndProcedure

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

[❤x1]

The resizeable animated window example is perfectly smooth, GPU accelerated desktop is so cool.
Couldn't really figure out much without documentation, though. I'll be there for the release!

[PrincieD]

The resizeable animated window example is perfectly smooth, GPU accelerated desktop is so cool.
Couldn't really figure out much without documentation, though. I'll be there for the release!

That's really awesome to hear! thanks ❤x1

Chris.

[PrincieD]

The resizeable animated window example is perfectly smooth, GPU accelerated desktop is so cool.
Couldn't really figure out much without documentation, though. I'll be there for the release!

That's really awesome to hear! thanks ❤x1

Chris.

❤x1 have you tested the "test_updateLayout.pb" example? there are two WebView2 widgets there (not PureBasic WebView2 gadgets), the first one is a youtube example in the main flex layout and the second is a transparent webpage inside the green nested widget (scroll down a bit), also click on the nested green widget with the red rectangle to see the transition animation effects!

[PrincieD]

Scroll right to the bottom and there is a legacy Win32 button, complete with crossfade animatation

[PrincieD]

Hi guys, couple more dev-diary vids :-

https://www.youtube.com/watch?v=ufZjkxqbXX4
https://www.youtube.com/watch?v=yLzPQpf5haU

[PrincieD]

Also added new BrushSetInterpolationMode() command, so the default is bilinear which looks like this with the following code:

Code: Select all

img = CreateImg(2, 2)
BeginDraw(OutputImg(img))
DrawBox(0, 0, 1, 1, RGB(255, 255, 255), 1)
DrawBox(1, 0, 1, 1, RGB(245, 245, 245), 1)
DrawBox(1, 1, 1, 1, RGB(255, 255, 255), 1)
DrawBox(0, 1, 1, 1, RGB(245, 245, 245), 1)
EndDraw()

Global lightBackgroundBrush = CreateImgBrush(img)
BrushSetExtendMode(lightBackgroundBrush, #PG_Brush_ExtendMode_Repeat, #PG_Brush_ExtendMode_Repeat)
;BrushSetInterpolationMode(lightBackgroundBrush, #PG_Brush_InterpolationMode_Nearest)
BrushSetScale(lightBackgroundBrush, 30, 30)
FreeImg(img)

And now with:

Code: Select all

img = CreateImg(2, 2)
BeginDraw(OutputImg(img))
DrawBox(0, 0, 1, 1, RGB(255, 255, 255), 1)
DrawBox(1, 0, 1, 1, RGB(245, 245, 245), 1)
DrawBox(1, 1, 1, 1, RGB(255, 255, 255), 1)
DrawBox(0, 1, 1, 1, RGB(245, 245, 245), 1)
EndDraw()

Global lightBackgroundBrush = CreateImgBrush(img)
BrushSetExtendMode(lightBackgroundBrush, #PG_Brush_ExtendMode_Repeat, #PG_Brush_ExtendMode_Repeat)
BrushSetInterpolationMode(lightBackgroundBrush, #PG_Brush_InterpolationMode_Nearest)
BrushSetScale(lightBackgroundBrush, 30, 30)
FreeImg(img)

[PrincieD]

Oh and a new "RepeatRound" mode for edges:

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

[Caronte3D]

For post-release, you might want to consider making a GUI editor, so ProGui becomes just: "perfect!"

[wombats]

It's looking great!

[PrincieD]

For post-release, you might want to consider making a GUI editor, so ProGui becomes just: "perfect!"

Yep I have been thinking about it! definately post-release though

It's looking great!

Thanks mate!

[PrincieD]

The BorderImg Editor tool is progressing nicely!

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

Source code so far (will tidy it up a bit):

Code: Select all

Global NewMap layoutmap.s()

#ProGUI_UseDll = #False

CompilerIf Not #PB_Compiler_Thread
    MessageRequester("ProGUI", "Please enable threadsafe executable", #PB_MessageRequester_Ok)
    End
CompilerEndIf

CompilerIf #PB_Compiler_DPIAware
    MessageRequester("ProGUI", "Please disable DPI aware executable, ProGUI handles per-monitor DPI", #PB_MessageRequester_Ok)
    End
CompilerEndIf

CompilerIf #ProGUI_UseDll
    IncludeFile "ProGUI_PB.pbi"
CompilerElse
    IncludeFile "ProGUI.pbi"
CompilerEndIf

CompilerIf #PB_Compiler_Backend = #PB_Backend_C
    Debug "Using C backend"
CompilerEndIf

driver = #PG_RenderDirect2D
;driver = #PG_RenderVector
;driver = #PG_RenderCairo

Declare SliceEditorLoadImg(SliceEditor, Path.s)

#AppName = "BorderImg Editor"
#Version = "V1.0"

#DefaultSliceEditorWidth = 200
#DefaultSliceEditorHeight = 200

Enumeration
    ;#Gadget_LoadImgButton
EndEnumeration

Structure SliceEdit
    
    imgPath.s
    img.i
    
    leftEdgeOffset.i
    topEdgeOffset.i
    rightEdgeOffset.i
    bottomEdgeOffset.i
    
    sliceEditWidget2.i
    *sliceEdit2.SliceEdit
    
EndStructure

Structure SliceEditor
    
    isMask.i
    sliceEditWidget.i
    loadButtonGadget.i
    pathGadget.i
    pathDefaultText.s
    
    sliceEditorWidget2.i
    
EndStructure

Structure BorderView
    
    border.i
    
EndStructure

Global borderView
Global borderViewBorder
Global borderViewBorderFlags

StartProGUI(driver)

img = CreateImg(2, 2)
BeginDraw(OutputImg(img))
DrawBox(0, 0, 1, 1, RGB(255, 255, 255), 1)
DrawBox(1, 0, 1, 1, RGB(245, 245, 245), 1)
DrawBox(1, 1, 1, 1, RGB(255, 255, 255), 1)
DrawBox(0, 1, 1, 1, RGB(245, 245, 245), 1)
EndDraw()

Global lightBackgroundBrush = CreateImgBrush(img)
BrushSetExtendMode(lightBackgroundBrush, #PG_Brush_ExtendMode_Repeat, #PG_Brush_ExtendMode_Repeat)
BrushSetInterpolationMode(lightBackgroundBrush, #PG_Brush_InterpolationMode_Nearest)
BrushSetScale(lightBackgroundBrush, 30, 30)
FreeImg(img)

Procedure updateWindowTitle(Window, *sliceEdit.SliceEdit = #Null)
    
    text.s = #AppName + " " + #Version
    
    If *sliceEdit
        
        text + "  -"
        text + "  Left: " + Str(*sliceEdit\leftEdgeOffset) + "px"
        text + "  Top: " + Str(*sliceEdit\topEdgeOffset) + "px"
        text + "  Right: " + Str(*sliceEdit\rightEdgeOffset) + "px"
        text + "  Bottom: " + Str(*sliceEdit\bottomEdgeOffset) + "px"
        
    EndIf
    
    WindowSetTitle(Window, text)
    
EndProcedure

Procedure eventHandler_WindowDraw(Window, EventType, *eventData.PG_EventDraw)
    
    ;DrawClear(0, 0)
    DrawClear(RGB(240, 240, 240), 1)
    
EndProcedure

Global SignalQuit
Procedure eventHandler_WindowClose(Window, EventType, *eventData, *userData)
    
    SignalQuit = #True
    
EndProcedure

Procedure eventHandler_SliceEditorDraw(*widget.Widget, EventType, *event.PG_EventDraw, *sliceEditor.SliceEditor)
    
    
    
EndProcedure

Enumeration 1
    #LeftEdgeOver
    #TopEdgeOver
    #RightEdgeOver
    #BottomEdgeOver
EndEnumeration

Procedure eventHandler_SliceEditMouse(*widget.Widget, EventType, *event.PG_EventMouse, *sliceEdit.SliceEdit)
    
    If Not *sliceEdit\img
        ProcedureReturn #False
    EndIf
    
    Static edgeMode, mouseDown, deltaX.d, deltaY.d
    
    tolerance = 3
    
    Select EventType
            
        Case #PG_Event_MouseMove
            
            If Not mouseDown
    
                ; left edge offset
                If *event\x >= *sliceEdit\leftEdgeOffset - tolerance And  *event\x <= *sliceEdit\leftEdgeOffset + tolerance
                    
                    WidgetSetCursor(*widget, #PG_Cursor_LeftRight)
                    edgeMode = #LeftEdgeOver
                    
                ; right edge offset
                ElseIf *event\x >= *event\width - *sliceEdit\rightEdgeOffset - tolerance And  *event\x <= *event\width - *sliceEdit\rightEdgeOffset + tolerance
                    
                    WidgetSetCursor(*widget, #PG_Cursor_LeftRight)
                    edgeMode = #RightEdgeOver
                
                ; top edge offset
                ElseIf *event\y >= *sliceEdit\topEdgeOffset - tolerance And  *event\y <= *sliceEdit\topEdgeOffset + tolerance
                    
                    WidgetSetCursor(*widget, #PG_Cursor_UpDown)
                    edgeMode = #TopEdgeOver
                    
                ; bottom edge offset
                ElseIf *event\y >= *event\height - *sliceEdit\bottomEdgeOffset - tolerance And  *event\y <= *event\height - *sliceEdit\bottomEdgeOffset + tolerance
                    
                    WidgetSetCursor(*widget, #PG_Cursor_UpDown)
                    edgeMode = #bottomEdgeOver
                
                Else
                    
                    WidgetSetCursor(*widget, #PG_Cursor_Default)
                    edgeMode = #Null
                    
                EndIf
                
            Else
                
                Select edgeMode
                        
                    Case #LeftEdgeOver
                        
                        *sliceEdit\leftEdgeOffset = *event\x - deltaX
                        
                        If *sliceEdit\leftEdgeOffset < 1
                            
                            *sliceEdit\leftEdgeOffset = 1
                            
                        ElseIf *sliceEdit\leftEdgeOffset > (*event\width - *sliceEdit\rightEdgeOffset) - 1
                            
                            *sliceEdit\leftEdgeOffset = (*event\width - *sliceEdit\rightEdgeOffset) - 1
                            
                        EndIf
                        
                        If *sliceEdit\sliceEdit2\img
                            *sliceEdit\sliceEdit2\leftEdgeOffset = *sliceEdit\leftEdgeOffset
                        EndIf
                        
                    Case #TopEdgeOver
                        
                        *sliceEdit\topEdgeOffset = *event\y - deltaY
                        
                        If *sliceEdit\topEdgeOffset < 1
                            
                            *sliceEdit\topEdgeOffset = 1
                            
                        ElseIf *sliceEdit\topEdgeOffset > (*event\height - *sliceEdit\bottomEdgeOffset) - 1
                            
                            *sliceEdit\topEdgeOffset = (*event\height - *sliceEdit\bottomEdgeOffset) - 1
                            
                        EndIf
                        
                        If *sliceEdit\sliceEdit2\img
                            *sliceEdit\sliceEdit2\topEdgeOffset = *sliceEdit\topEdgeOffset
                        EndIf
                        
                    Case #RightEdgeOver
                        
                        *sliceEdit\rightEdgeOffset =  (*event\width - *event\x) - deltaX
                        
                        If *event\width - *sliceEdit\rightEdgeOffset > *event\width - 1 
                            
                            *sliceEdit\rightEdgeOffset = 1
                            
                        ElseIf *event\width - *sliceEdit\rightEdgeOffset < *sliceEdit\leftEdgeOffset + 1
                            
                            *sliceEdit\rightEdgeOffset = (*event\width - *sliceEdit\leftEdgeOffset) - 1
                            
                        EndIf
                        
                        If *sliceEdit\sliceEdit2\img
                            *sliceEdit\sliceEdit2\rightEdgeOffset = *sliceEdit\rightEdgeOffset
                        EndIf
                        
                    Case #BottomEdgeOver
                        
                        *sliceEdit\bottomEdgeOffset = (*event\height - *event\y) - deltaY
                        
                        If *event\height - *sliceEdit\bottomEdgeOffset > *event\height - 1 
                            
                            *sliceEdit\bottomEdgeOffset = 1
                            
                        ElseIf *event\height - *sliceEdit\bottomEdgeOffset < *sliceEdit\topEdgeOffset + 1
                            
                            *sliceEdit\bottomEdgeOffset = (*event\height - *sliceEdit\topEdgeOffset) - 1
                            
                        EndIf
                        
                        If *sliceEdit\sliceEdit2\img
                            *sliceEdit\sliceEdit2\bottomEdgeOffset = *sliceEdit\bottomEdgeOffset
                        EndIf
                        
                EndSelect
                
                WidgetRedraw(*widget)
                If *sliceEdit\sliceEdit2\img
                    WidgetRedraw(*sliceEdit\sliceEditWidget2)
                EndIf
                
                If borderViewBorder
                    BorderImgSetSlices(borderViewBorder, *sliceEdit\leftEdgeOffset, *sliceEdit\topEdgeOffset, *sliceEdit\rightEdgeOffset, *sliceEdit\bottomEdgeOffset)
                    WidgetRedraw(borderView)
                EndIf
                
                updateWindowTitle(WidgetGetParentWindow(*widget), *sliceEdit)
                
            EndIf
            
        Case #PG_Event_MouseLeftButtonDown
            
            If edgeMode
                
                WidgetSetMouseCapture(*widget)
                mouseDown = #True
                
                Select edgeMode
                        
                    Case #LeftEdgeOver
                        
                        deltaX = *event\x - *sliceEdit\leftEdgeOffset
                        
                    Case #TopEdgeOver
                        
                        deltaY = *event\y - *sliceEdit\topEdgeOffset
                        
                    Case #RightEdgeOver
                        
                        deltaX = (*event\width - *event\x) - *sliceEdit\rightEdgeOffset
                        
                    Case #BottomEdgeOver
                        
                        deltaY = (*event\height - *event\y) - *sliceEdit\bottomEdgeOffset
                        
                EndSelect
                
            EndIf
            
        Case #PG_Event_MouseLeftButtonUp
            
            If mouseDown
                
                WidgetReleaseMouseCapture()
                mouseDown = #False
                
            EndIf
            
    EndSelect
    
EndProcedure

Procedure eventHandler_SliceEditDraw(*widget.Widget, EventType, *event.PG_EventDraw, *sliceEdit.SliceEdit)
    
;     If *sliceEdit\img
;         BrushSetOpacity(lightBackgroundBrush, 1)
;     Else
;         BrushSetOpacity(lightBackgroundBrush, 0.3)
;     EndIf
    
    DrawBoxFill(0, 0, *event\width, *event\height, lightBackgroundBrush)
    
    If *sliceEdit\img
        
        DrawImg(*sliceEdit\img, 0, 0)
        
        color = RGB(255, 0, 0)
        
        DrawSetStroke(1, #PG_Stroke_Dash)
        
        ; left edge slice
        DrawBoxStroke(-1, -1, *sliceEdit\leftEdgeOffset + 1, *event\height + 2, color, 1)
        
        ; top edge slice
        DrawBoxStroke(-1, -1, *event\width + 2, *sliceEdit\topEdgeOffset + 1, color, 1)
        
        ; right edge slice
        DrawBoxStroke(*event\width - *sliceEdit\rightEdgeOffset, -1, *sliceEdit\rightEdgeOffset + 1, *event\height + 2, color, 1)
        
        ; bottom edge slice
        DrawBoxStroke(-1, *event\height - *sliceEdit\bottomEdgeOffset, *event\width + 2, *sliceEdit\bottomEdgeOffset + 1, color, 1)
        
    EndIf
    
EndProcedure

Procedure eventHandler_BorderViewDraw(*widget.Widget, EventType, *event.PG_EventDraw, *borderView.BorderView)
    
    BrushSetOpacity(lightBackgroundBrush, 1)
    DrawBoxFill(0, 0, *event\width, *event\height, lightBackgroundBrush)
    
    If borderViewBorder
        
        DrawBorder(borderViewBorder, 100, 100, 450, 450, 1)
        
    EndIf
    
EndProcedure

Procedure eventHandler_SliceEditorLoadButton()
    
    Pattern.s = "Image (*.png;*.jpg;*.bmp;*.gif;*.ico)|*.png;*.jpg;*.bmp;*.gif;*.ico|All files (*.*)|*.*"
    file.s = OpenFileRequester("Please choose an image file to load", "", Pattern, 0)
    If file
        
        SliceEditorLoadImg(GetGadgetData(EventGadget()), file)
        
    EndIf
    
EndProcedure


Procedure CreateSliceEdit(Width, Height)
    
    *sliceEdit.SliceEdit = AllocateStructure(SliceEdit)
    
    *widget.Widget = CreateWidget(0, 0, Width, Height, *sliceEdit, #PG_Widget_Hide)
    
    AddEventHandler(*widget, #PG_Event_Draw, @eventHandler_SliceEditDraw(), *sliceEdit)
    AddEventHandler(*widget, #PG_Event_MouseMove, @eventHandler_SliceEditMouse(), *sliceEdit)
    AddEventHandler(*widget, #PG_Event_MouseLeftButtonDown, @eventHandler_SliceEditMouse(), *sliceEdit)
    AddEventHandler(*widget, #PG_Event_MouseLeftButtonUp, @eventHandler_SliceEditMouse(), *sliceEdit)
    
    WidgetShow(*widget)
    
    ProcedureReturn *widget
    
EndProcedure

Procedure CreateSliceEditor(Width, Height, sliceEditorWidget2 = #Null)
    
    currentLayout = LayoutGetCurrent()
    
    *sliceEditor.SliceEditor = AllocateStructure(SliceEditor)
    
    *widget.Widget = CreateWidget(0, 0, Width, Height, *sliceEditor, #PG_Widget_Hide)
    
    AddEventHandler(*widget, #PG_Event_Draw, @eventHandler_SliceEditorDraw(), *sliceEditor)
    
    layout = CreateLayout()
    LayoutSetType(layout, #PG_Layout_Type_Grid)
    LayoutSetProperty(layout, #PG_Grid_GapSize, 5, 5)
    LayoutSetProperty(layout, #PG_Grid_TemplateColumnSize, 1, #PG_Grid_MaxContent)
    LayoutSetProperty(layout, #PG_Grid_TemplateColumnMinSize, 1, (Width - 45))
    LayoutSetProperty(layout, #PG_Grid_TemplateRowSize, 1, #PG_Grid_MaxContent)
    LayoutSetProperty(layout, #PG_Grid_TemplateRowSize, 2, #PG_Grid_MaxContent)
    LayoutSetProperty(layout, #PG_Grid_TemplateColumnSize, 2, #PG_Grid_MaxContent)
    LayoutSetProperty(layout, #PG_Grid_TemplateColumnSize, 3, #PG_Grid_MaxContent)
    WidgetSetLayout(*widget, layout)
    
    item = LayoutGetItemFromWidget(*widget)
    LayoutSetItemProperty(item, #PG_Layout_Item_IdealWidth, #PG_Layout_FitContent)
    LayoutSetItemProperty(item, #PG_Layout_Item_IdealHeight, #PG_Layout_FitContent)
    
    *sliceEditor\sliceEditWidget = CreateSliceEdit(Width, Height)
    item = LayoutGetItemFromWidget(*sliceEditor\sliceEditWidget)
    LayoutSetItemProperty(item, #PG_Layout_Item_Justify, #PG_Layout_Item_Justify_Center)
    LayoutSetItemProperty(item, #PG_Layout_Item_ColumnSpan, 3)
    
    text.s = "Select border image to load"
    If sliceEditorWidget2
        
        *sliceEditor\isMask = #True
        
        text = "Select border mask to load"
        
        *sliceEditor2.SliceEditor = WidgetGetUserData(sliceEditorWidget2)
        *sliceEditor2\sliceEditorWidget2 = *widget
        *sliceEdit2.SliceEdit = WidgetGetUserData(*sliceEditor2\sliceEditWidget)
        *sliceEdit2\sliceEditWidget2 = *sliceEditor\sliceEditWidget
        *sliceEdit2\sliceEdit2 = WidgetGetUserData(*sliceEditor\sliceEditWidget)
        
        *sliceEditor\sliceEditorWidget2 = sliceEditorWidget2
        *sliceEdit.SliceEdit = WidgetGetUserData(*sliceEditor\sliceEditWidget)
        *sliceEdit\sliceEditWidget2 = *sliceEditor2\sliceEditWidget
        *sliceEdit\sliceEdit2 = *sliceEdit2
        
    EndIf
    *sliceEditor\pathDefaultText = text
    
    *sliceEditor\pathGadget = StringGadget(#PB_Any, 0, 0, 0, 0, text, #PB_String_ReadOnly)
    pathGadget = CreateOsWidget(0, 0, 0, 22, GadgetID(*sliceEditor\pathGadget))
    item = LayoutGetItemFromWidget(pathGadget)
    LayoutSetItemProperty(item, #PG_Layout_Item_ColumnSpan, 2)
    
    *sliceEditor\loadButtonGadget = ButtonGadget(#PB_Any, 0, 0, 0, 0, "...")
    SetGadgetData(*sliceEditor\loadButtonGadget, *widget)
    BindGadgetEvent(*sliceEditor\loadButtonGadget, @eventHandler_SliceEditorLoadButton())
    loadImgButton = CreateOsWidget(0, 0, 40, 22, GadgetID(*sliceEditor\loadButtonGadget))
    item = LayoutGetItemFromWidget(loadImgButton)
    
    WidgetShow(*widget)
    
    LayoutSetCurrent(currentLayout)
    
    ProcedureReturn *widget
    
EndProcedure

Procedure SliceEditorLoadImg(SliceEditor, Path.s)
    
    If Not SliceEditor Or Path = ""
        ProcedureReturn #False
    EndIf
    
    img = LoadImg(Path)
    If Not img
        ProcedureReturn #False
    EndIf
    
    *sliceEditor.SliceEditor = WidgetGetUserData(SliceEditor)
    *sliceEdit.SliceEdit = WidgetGetUserData(*sliceEditor\sliceEditWidget)
    
    If *sliceEdit\img
        FreeImg(*sliceEdit\img)
    EndIf
    
    *sliceEdit\imgPath = Path
    *sliceEdit\img = img
    
    If *sliceEdit\sliceEdit2\img And (ImgGetWidth(*sliceEdit\sliceEdit2\img) <> ImgGetWidth(img) Or ImgGetHeight(*sliceEdit\sliceEdit2\img) <> ImgGetHeight(img))
        FreeImg(*sliceEdit\sliceEdit2\img)
        *sliceEdit\sliceEdit2\img = #Null
        *sliceEdit\sliceEdit2\imgPath = ""
        *sliceEditor2.SliceEditor = WidgetGetUserData(*sliceEditor\sliceEditorWidget2)
        SetGadgetText(*sliceEditor2\pathGadget, *sliceEditor2\pathDefaultText)
    EndIf
    
    If *sliceEdit\sliceEdit2\img
        
        *sliceEdit\leftEdgeOffset = *sliceEdit\sliceEdit2\leftEdgeOffset
        *sliceEdit\rightEdgeOffset = *sliceEdit\sliceEdit2\rightEdgeOffset
        *sliceEdit\topEdgeOffset = *sliceEdit\sliceEdit2\topEdgeOffset
        *sliceEdit\bottomEdgeOffset = *sliceEdit\sliceEdit2\bottomEdgeOffset
        
    Else
        
        xOffset = ImgGetWidth(img) / 4
        yOffset = ImgGetHeight(Img) / 4
        
        *sliceEdit\leftEdgeOffset = xOffset
        *sliceEdit\rightEdgeOffset = xOffset
        *sliceEdit\topEdgeOffset = yOffset
        *sliceEdit\bottomEdgeOffset = yOffset
        
    EndIf
    
    item = LayoutGetItemFromWidget(*sliceEditor\sliceEditWidget)
    LayoutSetItemProperty(item, #PG_Layout_Item_IdealWidth, ImgGetWidth(img))
    LayoutSetItemProperty(item, #PG_Layout_Item_IdealHeight, ImgGetHeight(img))
    
    item = LayoutGetItemFromWidget(*sliceEdit\sliceEditWidget2)
    LayoutSetItemProperty(item, #PG_Layout_Item_IdealWidth, ImgGetWidth(img))
    LayoutSetItemProperty(item, #PG_Layout_Item_IdealHeight, ImgGetHeight(img))
    
    SetGadgetText(*sliceEditor\pathGadget, Path)
    
    If *sliceEditor\isMask
        imgMask = img
        If *sliceEdit\sliceEdit2\img
            img = *sliceEdit\sliceEdit2\img
        Else
            img = #Null
        EndIf
    Else
        If *sliceEdit\sliceEdit2\img
            imgMask = *sliceEdit\sliceEdit2\img
        Else
            imgMask = #Null
        EndIf
    EndIf
    
    If borderViewBorder
        FreeBorder(borderViewBorder)
    EndIf
    
    borderViewBorder = CreateBorderImg(img, imgMask, *sliceEdit\leftEdgeOffset, *sliceEdit\topEdgeOffset, *sliceEdit\rightEdgeOffset, *sliceEdit\bottomEdgeOffset, borderViewBorderFlags)
    
    updateWindowTitle(WidgetGetParentWindow(*sliceEditor\sliceEditWidget), *sliceEdit)
    
EndProcedure

Procedure CreateBorderView()
    
    *borderView.BorderView = AllocateStructure(BorderView)
    
    *widget.Widget = CreateWidget(0, 0, 0, 0, *borderView, #PG_Widget_Hide)
    
    AddEventHandler(*widget, #PG_Event_Draw, @eventHandler_BorderViewDraw(), *borderView)
    
    WidgetShow(*widget)
    
    ProcedureReturn *widget
    
EndProcedure

window = CreateWindow(0, 0, 1000, 700, "", #PG_Window_MinimizeWidget | #PG_Window_MaximizeWidget | #PG_Window_Sizeable)
;window = CreateWindow(0, 0, 1000, 700, "Test", #PG_Window_BorderLess | #PG_Window_Sizeable | #PG_Window_BackgroundDrag, 0)

updateWindowTitle(window)

AddEventHandler(window, #PG_Event_Draw, @eventHandler_WindowDraw())
AddEventHandler(window, #PG_Event_WindowClose, @eventHandler_WindowClose())

layout = LayoutGetCurrent()
LayoutSetType(layout, #PG_Layout_Type_Grid)
LayoutSetProperty(layout, #PG_Grid_GapSize, 5, 5)

LayoutSetProperty(layout, #PG_Grid_TemplateColumnMinSize, 1, #DefaultSliceEditorWidth)
LayoutSetProperty(layout, #PG_Grid_TemplateColumnSize, 1, #PG_Grid_MaxContent)
LayoutSetProperty(layout, #PG_Grid_TemplateRowSize, 1, #PG_Grid_MaxContent)
LayoutSetProperty(layout, #PG_Grid_TemplateRowSize, 2, #PG_Grid_MaxContent)
LayoutSetProperty(layout, #PG_Grid_TemplateColumnSize, 0, 0)

sliceEditorImg = CreateSliceEditor(#DefaultSliceEditorWidth, #DefaultSliceEditorHeight)
item = LayoutGetItemFromWidget(sliceEditorImg)
LayoutSetItemProperty(item, #PG_Layout_Item_ColumnStart, 1)
LayoutSetItemProperty(item, #PG_Layout_Item_RowStart, 1)
LayoutSetItemProperty(item, #PG_Layout_Item_MarginTop, 5)

sliceEditorMask = CreateSliceEditor(#DefaultSliceEditorWidth, #DefaultSliceEditorHeight, sliceEditorImg)
item = LayoutGetItemFromWidget(sliceEditorMask)
LayoutSetItemProperty(item, #PG_Layout_Item_ColumnStart, 1)
LayoutSetItemProperty(item, #PG_Layout_Item_RowStart, 2)


borderView = CreateBorderView()
item = LayoutGetItemFromWidget(borderView)
LayoutSetItemProperty(item, #PG_Layout_Item_RowSpan, 3)

test = ButtonGadget(#PB_Any, 0, 0, 0, 0, "test")
CreateOsWidget(0, 0, 0, 0, GadgetID(test))

WindowShow(window)

Repeat
    
    Event = WaitWindowEvent()
    
Until Event = #PB_Event_CloseWindow Or Event = #PB_Event_RightClick Or SignalQuit

StopProGUI()