[Class] GuiReSizer - Position and Resize Gui Controls

[FanaticGuru]

What's the best method for a parent GUI relationship.

Code: Select all

MainGui := Gui()
MainGui.Show("w500 h500")
childGUI := Gui("+Parent" MainGui.hwnd " -Caption")
MainGui.Opt("+Resize +ToolWindow +MinSize250x150")
MainGui.OnEvent("Size", GuiReSizer)
childGUI.OnEvent("Size", GuiReSizer)
ogcButtonOK := childGUI.Add("Button", "Default", "&OK")

ogcButtonOK.WidthP := 0.48
ogcButtonOK.X := 10 
childGUI.Show("x0 y0")

I couldnt figure out how to handle that relationship @FanaticGuru

The problem is that the Button size is tied to the size of the child Gui in which it resides. The child Gui size does not change size when the parent Gui changes size. This can be clearly seen if the -Caption flag is removed. Even if the Button size changed to match the parent Gui then it would not display in the still small child Gui.

Gui Controls are structured within the Gui in which they reside by Windows design.

GuiReSizer is not designed to tie Gui to other Gui or a Gui Control to a Gui other than the one in which it resides.

You can write a function to resize the child Gui whenever the parent Gui is resized, like this:

Code: Select all

MainGui := Gui()
MainGui.Show("w500 h500")
childGUI := Gui("+Parent" MainGui.hwnd " -Caption")
MainGui.Opt("+Resize +ToolWindow +MinSize250x150")
MainGui.OnEvent("Size", GuiReSizer)
childGUI.OnEvent("Size", GuiReSizer)
ogcButtonOK := childGUI.Add("Button", "Default", "&OK")

ogcButtonOK.WidthP := 0.48
ogcButtonOK.X := 10 
childGUI.Show("x0 y0")

childGui.Maximize()
MainGui.Child := childGUI
MainGui.OnEvent("Size", childGUISize)
childGUISize(GuiObj, WindowMinMax, GuiW, GuiH)
{
	GuiObj.Child.Move(, , GuiW, GuiH)
}

The child Gui is resized to the match the parent Gui, then GuiReSizer does its normal thing and positions controls within the child Gui in which those controls reside based on its size.

Having GuiReSizer being able to tie controls to other Gui in which they do not reside seems pretty problematic. I could see a use for tying a Gui to another Gui. That could probably be added to GuiReSizer. I am not sure if the utility is worth the complexity. I will probably play around with it.

FG

[FanaticGuru]

I couldnt consolidate my comments. @FanaticGuru not sure if it matters, but I took your excellent documentation, and formatted in a way that is compatible with programs like vscode sublime text, npp. that way, on mouse over you get the info. if you use, just make sure theres no space above the class, after the commented-out docs.

I use vscode but have not explored using structured JSDoc commenting to add Intellisense help. It looks interesting.

FG

[sashaatx]

I couldnt consolidate my comments. @FanaticGuru not sure if it matters, but I took your excellent documentation, and formatted in a way that is compatible with programs like vscode sublime text, npp. that way, on mouse over you get the info. if you use, just make sure theres no space above the class, after the commented-out docs.

I use vscode but have not explored using structured JSDoc commenting to add Intellisense help. It looks interesting.

FG

Docify vsextension does a great job of providing autodocs formatting options with AI. When you first install you have to sign up with a login to github/google auth. For your documentation, I just ran it through chatgpt with explicit instructions

[sashaatx]

Im working on some way for GuiResizer.Opt() to accept integers, moved to a FormatOpt() function

Code: Select all

    /**
     * Formats and sets the positioning and sizing options for a control in the GuiReSizer class.
     * 
     * @memberof GuiReSizer
     * @static
     * @function FormatOpt
     * 
     * @param {Object} ctrl - The control object to apply the formatting to.
     * @param {number} [xp] - X positional offset as a percentage of Gui width.
     * @param {number} [yp] - Y positional offset as a percentage of Gui height.
     * @param {number} [wp] - Width of control as a percentage of Gui width.
     * @param {number} [hp] - Height of control as a percentage of Gui height.
     * 
     * @example
     * // Usage:
     * GuiReSizer.FormatOpt(myControl, 0.10, -.20, .02, 0.40) 
     * GuiReSizer.FormatOpt(myControl,  xp,  yp,  wp,  hp) 
     * // This will set the X position to 10% of the Gui width,
     * // Y position to 20% of the Gui height,
     * // Width to 2% of the Gui width,
     * // Height to 40% of the Gui height.
     */
    static FormatOpt(ctrl, xp?, yp?, wp?, hp?) {
        options := ""
        if IsSet(xp)
            options .= GuiResizer.doTheMath(xp, "xp")
        if IsSet(yp)
            options .= GuiResizer.doTheMath(yp, "yp")
        if IsSet(wp)
            options .= GuiResizer.doTheMath(wp, "wp")
        if IsSet(hp)
            options .= GuiResizer.doTheMath(hp, "hp")
        options := StrReplace(options, "0.", ".")
        GuiResizer.Opt(ctrl, options)
    }
    static doTheMath(Coordinate, XYWH) {
        if Coordinate < 0
            Coordinate += 1
        return XYWH Round(Coordinate, 2) " "
    }

[sashaatx]

@FanaticGuru

parent/child gui GuiResizer.ahk static method add on, instead of Gui.hwnd +Parent, using object categories to recursively toggle visible

ezgif-3-201e24b95e.gif (1.44 MiB) Viewed 502 times

Code: Select all

        ; This function defines a property called "ToggleVisible" on the prototype of the Object class.
        ; When called, it hides or shows all GUI controls from the given object.
        ; The function returns 1 if any controls were hidden or shown, otherwise it returns 0.
        Object.Prototype.DefineProp("ToggleVisible", { Call: HideAll_guiCtrls_fromObj })

        ; This function hides or shows all GUI controls from the given object.
        ; It iterates over the properties of the object and checks if they are set and if they are objects with a "Visible" property.
        ; If a control is found, its "Visible" property is toggled and the status is set to 1.
        ; The function returns the status indicating if any controls were hidden or shown.

        ; Example:
        ; myGui.ParentGui := {}
        ; myGui.ParentGui.Buttons := {}
        ; myGui.ParentGui.Buttons.Next := myGui.Add("Button", , "Hello World")
        ; ...additional buttons may be added to group
        ; myGui.ParentGui.ToggleVisible()
        ;
        HideAll_guiCtrls_fromObj(selfObj)
        {
            status := 0
            for index, value in selfObj.OwnProps() {
                if !IsSet(value)
                    continue
                else if IsObject(value)
                {
                    if not InStr(value.__Class, "Gui.")
                        status := HideAll_guiCtrls_fromObj(value)
                    else if value.HasProp("Visible")
                    {
                        value.Visible := !value.Visible
                        status := 1
                    }
                }
            }
            return status
        }

My preferred method added on to guiresizer for easy formatting on a single line

Code: Select all

    ; ....the rest of GuiResizer above
    
    /**
     * Formats and sets the positioning and sizing options for a control in the GuiReSizer class.
     * 
     * @memberof GuiReSizer
     * @static
     * @function FormatOpt
     * 
     * @param {Object} ctrl - The control object to apply the formatting to.
     * @param {number} [xp] - X positional offset as a percentage of Gui width.
     * @param {number} [yp] - Y positional offset as a percentage of Gui height.
     * @param {number} [wp] - Width of control as a percentage of Gui width.
     * @param {number} [hp] - Height of control as a percentage of Gui height.
     * 
     * @example
     *  Usage:
     * GuiReSizer.FormatOpt(myControlObj, xp := .10, yp := .20, wp := .30, hp := .40, anchor?);
     * 
     *  This will set the X position to 10% of the Gui width,
     *  Y position to 20% of the Gui height,
     *  Width to 30% of the Gui width,
     *  Height to 40% of the Gui height.
     */
    static FormatOpt(ctrl, xp?, yp?, wp?, hp?, anchor?) 
    {
        if IsSet(anchor)
            ctrl.A := anchor
        options := ""
        if IsSet(xp)
            options .= GuiResizer.doTheMath(xp, "xp")
        if IsSet(yp)
            options .= GuiResizer.doTheMath(yp, "yp")
        if IsSet(wp)
            options .= GuiResizer.doTheMath(wp, "wp")
        if IsSet(hp)
            options .= GuiResizer.doTheMath(hp, "hp")
        options := StrReplace(options, "0.", ".")
        GuiResizer.Opt(ctrl, options)
    }
    
    static doTheMath(val, str) {
        if val < 0
            val += 1
        return str Round(val, 2) " "
    }
    ; easily copy an existing controls format to another control, for parent/child gui usage 
    static Duplicate(ctrl, ctrlToCopy) => GuiResizer.FormatOpt(ctrl, ctrlToCopy.XP, ctrlToCopy.YP, ctrlToCopy.WidthP, ctrlToCopy.HeightP)
    
    ; ....the end of GuiResizer
}

using GDIP with guiresizer viewtopic.php?p=552526#p552526

[cgx5871]

@FanaticGuru
How to add a second ListView？

Code: Select all

#Include <GuiReSizer>
guiList := Gui(, "Test - List"), guiList.Opt("+Resize +MinSize250x150")
guiList.OnEvent("Size", GuiReSizer) ; assign GuiReSizer to handle all size changes for this Gui
guiList.Button := {} ; required because you are going to have Button sub definititions, ie. more than one Button
guiList.Button.One := guiList.Add("Button", "Default", "One")
guiList.Button.One.X := 10 ; 10 from Left Margin
guiList.Button.Two := guiList.Add("Button", "yp", "Two")
guiList.Button.Two.X := 20 ; 20 from Left Margin
guiList.Button.Two.XP := 0.2 ; 20% from Left Margin
guiList.Button.Three := guiList.Add("Button", "yp", "Three")
guiList.Button.Three.XP := -0.4 ; 40% from Right Margin
guiList.Button.Four := guiList.Add("Button", "yp", "Four")
guiList.Button.Four.X := -10 ; -10 from Right Margin
guiList.Button.Four.OriginXP := 1 ; OriginX is 100% of Width of control ie. Right Side



guiList.ListView := guiList.Add("ListView", "section +Grid -Multi xm r20 w750", ["This", "That", "Other"])
guiList.ListView.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView.Width := -10 ; 10 from Left Margin
guiList.ListView.HeightP := -0.60 ; 60% from Bottom Margin



guiList.ListView2 := guiList.Add("ListView", "+Grid -Multi xs r20 w750", ["This2", "That2", "Other2"])
guiList.ListView2.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView2.Width := -10 ; 10 from Left Margin
guiList.ListView2.HeightP := -0.60 ; 60% from Bottom Margin



ListView_Columns(CtrlObj, GuiObj) ; custom called function
{
    CtrlObj.ModifyCol(3, "AutoHdr")
}

guiList.Show("x10 y10 w500 h300")

Esc:: ExitApp

I added a second ListView
it doesn't show

Code: Select all

guiList.ListView := guiList.Add("ListView", "section +Grid -Multi xm r20 w750", ["This", "That", "Other"])
guiList.ListView.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView.Width := -10 ; 10 from Left Margin
guiList.ListView.HeightP := -0.60 ; 60% from Bottom Margin

guiList.ListView2 := guiList.Add("ListView", "+Grid -Multi xs r20 w750", ["This2", "That2", "Other2"])
guiList.ListView2.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView2.Width := -10 ; 10 from Left Margin
guiList.ListView2.HeightP := -0.60 ; 60% from Bottom Margin

[FanaticGuru]

I added a second ListView
it doesn't show

Code: Select all

guiList.ListView := guiList.Add("ListView", "section +Grid -Multi xm r20 w750", ["This", "That", "Other"])
guiList.ListView.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView.Width := -10 ; 10 from Left Margin
guiList.ListView.HeightP := -0.60 ; 60% from Bottom Margin

guiList.ListView2 := guiList.Add("ListView", "+Grid -Multi xs r20 w750", ["This2", "That2", "Other2"])
guiList.ListView2.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView2.Width := -10 ; 10 from Left Margin
guiList.ListView2.HeightP := -0.60 ; 60% from Bottom Margin

You are putting two listviews at exactly the same location. One is covering up the other.

Try something like this:

Code: Select all

guiList.ListView := guiList.Add("ListView", "section +Grid -Multi xm r20 w750", ["This", "That", "Other"])
guiList.ListView.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView.Width := -10 ; 10 from Left Margin
guiList.ListView.HeightP := -0.60 ; 60% from Bottom Margin

guiList.ListView2 := guiList.Add("ListView", "+Grid -Multi xs r20 w750", ["This2", "That2", "Other2"])
guiList.ListView2.Function := ListView_Columns ; Call Custom Function to Adjust Column Width
guiList.ListView2.YP := 0.45 ; 45% from Top
guiList.ListView2.Width := -10 ; 10 from Left Margin
guiList.ListView2.HeightP := -0.05  ; 5% from Bottom Margin

FG

[cgx5871]

@FanaticGuru
thanks a lot
the ListView , DarkTheme
The title bar is black and I can't see the words.
The out-of-focus check row is completely white, which is very inconsistent.
How to solve it?

image.png (12.8 KiB) Viewed 345 times

[sashaatx]

@FanaticGuru idk your github to send pull reqs.

I have a whole library for addons to guiresizer I'd love to fork if youve got one. https://github.com/samfisherirl/GuiResizer-Addons/tree/main

simple redraw function for dark backgrounds, I find stylized backgrounds have artifacts when resizing but I didnt want to bog down resources.

at the bottom of Call() ~ line 240

Code: Select all

        GuiResizer.resizeCalltime := A_TickCount
        SetTimer GuiResizer.redraw.Bind(GuiObj), -400


        ;}
    }
	static redraw(GuiObj?)
	{
	    if GuiResizer.resizeCalltime + 400 < A_TickCount
        {
	        for k, ctrl in this
	        {
	            try ctrl.redraw()
	        }
        }
	}