GridGUI v1.1.11 - Simplify Control Placement and Resizing

Post your working scripts, libraries and tools for AHK v1.1 and older
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

GridGUI v1.1.11 - Simplify Control Placement and Resizing

08 Aug 2021, 09:04

Image
Introduction


GridGUI is a library that allows placing Controls relative to eachother without being limited in the order that they are placed, as well as automatically resizing Controls.

How it works: By adding Controls to an instance of GridGUI they will be placed relative to each other so that no row/column will ever be in another although they can have zero area.

You will need: The main source file and the lib directory in the same directory, if you add it to your lib directory then you might want to change the name of the lib directory from this project.


How to use

After inclusion of GridGUI.ahk in a script a GridGUI can be made like this.

Code: Select all

myGui := new GridGUI("Title", Options := "resize")
The GUI can then be show by calling Show.

Code: Select all

myGui.Show()
And Controls can be added like so.

Code: Select all

myGui.Add(row := 1, column := 1, type := "Button", options := "", text := "A Button")
Image

Expand
To make the grid cell auto-expand in both height and width, when additional space is available, add the following two arguments.

Code: Select all

myGui.Add(1, 1, "Button", , "A Button", exW := 1, exH := 1)
Image

Fill
Alternatively, you make it fill out the cells that the control is defined in by using these two arguments. This can be useful when aligning Controls.

Code: Select all

myGui.Add(1, 1, "Button", , "A Longer Button")
myGui.Add(1, 2, "Button", , "A Button", , , fillW := 1, fillH := 0)
myGui.Add(1, 3, "Button", , "A Button", , , fillW := 1, fillH := 0)
Image

Auto Resizing Controls
Combining the previous two options makes the Control automatically expand.

Code: Select all

myGui.Add(1, 1, "Button", , "A Button", exW := 1, exH := 1, fillW := 1, fillH := 1)
Image

Spanning
When adding a Control it is posible to make it span multriple rows and or columns using a string on the format start-end

Code: Select all

#Include <GridGUI>
myGui := new GridGUI("Title", Options := "resize")
myGui.Add(1,	1,		"Button", , "A Longer Button")
myGui.Add(1,	2,		"Button", , "A Button", , , fillW := 1, fillH := 0)
myGui.Add(1,	3,		"Button", , "A Button", , , fillW := 1, fillH := 0)
myGui.Add(2,	"1-3",	"Button", , "An Expanding Button", exW := 1, exH := 1, fillW := 1, fillH := 1)
myGui.Show()
Image

Overlapping Controls
Controls can be put in the same cells. Take care the order that overlapping controls are put into the GridGUI is no longer arbitrary and can affect the resulting look, for instance, if the background image is added before the ActiveX Control in the Backgound Example the ActiveX Control will not be visible.

Code: Select all

myGui.Add("1-3", "1-3", "GroupBox", "w40 h40", "Title", , , 1, 1)
myGui.Add(2, 2, "Button", "w50 h50", "Button", 1, 1, 1, 1)
Image

Justify
The position of a Control inside of a cell can be set to one of 9 positions by using the Justify parameter.

Code: Select all

myGui.Add(1, 1, "Button", {justify:"CN",	text:"N",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CNE",	text:"NE",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CE",	text:"E",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CSE",	text:"SE",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CS",	text:"S",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CSW",	text:"SW",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CW",	text:"W",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"CNW",	text:"NW",	exW:1, exH:1})
myGui.Add(1, 1, "Button", {justify:"C",		text:"C",	exW:1, exH:1})
Image

Debug
To help debug issues there is an option available when making a GridGUI instance that shows the dividing grid lines.

Code: Select all

myGui := new GridGUI("Title", Options := "resize", showGrid := true)
Image

User Input
When adding a Control an instance of ControlClass is returned allowing access to vVars, hwnd and setting up gLabels.

Code: Select all

bt := myGui.Add(1, 1, "Button", , "A Button")
bt.callback := Func("ToolTip").Bind("You Pressed the Button")

ToolTip(text) {
	ToolTip, % text
}

Docs: See https://capnodin.github.io/GridGUI/

Source: See https://github.com/CapnOdin/GridGUI

Examples: See https://github.com/CapnOdin/GridGUI/tree/master/Examples
Issues:
  • Doesn't support overlapping Controls that is only one Control can be at any given grid cell.
  • Due to me being dumb and not being able to calculate the positions and sizes correctly some of the computations happen after the GUI have been resized to correct mistakes, otherwise most computations are done when a Control is added.
  • Controls are sized wrong on systems with non-standard DPI.
  • Groupboxes can't currently be easily made to look good as the margin of the box relative to the content is not currently configurable, a workaround is to add an invisible control to each corner of the box.
  • MinSize of controls are currently not being handled correctly when the GUI has less width than the controls require.
  • The wrappers classes seem to be having some issues when using default arguments as an empty string is interpreted as non-default in some functions, if you find any such function please post a message so that I can fix it.
  • Changes to the DPI after the GUI has been created will not be handled properly.
  • It is currently not possible to set a callback on TabControls as the callback is used to draw the selected tab.
  • Overlapping controls prevent user input (Example Background.ahk)
  • And probably a lot of other issues.
Last edited by Capn Odin on 06 Nov 2021, 12:04, edited 30 times in total.
Please excuse my spelling I am dyslexic.
guest3456
Posts: 3478
Joined: 09 Oct 2013, 10:31

Re: GridGUI

08 Aug 2021, 11:05

wow very nice

Kisang Kim
Posts: 12
Joined: 31 Jul 2019, 02:37

Re: GridGUI

09 Aug 2021, 07:12

error
210809_90510.jpg
(29.74 KiB) Downloaded 198 times
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI

09 Aug 2021, 07:37

Kisang Kim wrote:
09 Aug 2021, 07:12
error
210809_90510.jpg
I have commented out the function that was missing.

as well as added the rest of the GUI commands to the GUI class and exposed the position and size of the GUI in the member pos.

Edit: Fixed the DPI scaling issue or at least I think I did.
Please excuse my spelling I am dyslexic.
Kisang Kim
Posts: 12
Joined: 31 Jul 2019, 02:37

Re: GridGUI

09 Aug 2021, 20:43

Wonderful !!!!!!!!!!!!!
it's very useful for me.
thank you for sharing.
hope your hapinesss and health.
sooyke_
Posts: 25
Joined: 18 Nov 2020, 10:27

Re: GridGUI

10 Aug 2021, 13:05

Thank you for sharing :) Capn Odin
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI

10 Aug 2021, 14:35

I changed the name of the method used to add controls to the GridGUI from AddControl to Add.
Sorry for changing the API in a non-backwards compatible way, I will try to refrain from doing this in the future.
Please excuse my spelling I am dyslexic.
Sam_
Posts: 146
Joined: 20 Mar 2014, 20:24

Re: GridGUI

12 Aug 2021, 08:47

Capn Odin wrote:
08 Aug 2021, 09:04
  • Doen't support overlapping Controls that is only one Control can be at any given grid cell.
Does this mean GroupBoxes are not supported?
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI

12 Aug 2021, 10:31

Sam_ wrote:
12 Aug 2021, 08:47
Capn Odin wrote:
08 Aug 2021, 09:04
  • Doen't support overlapping Controls that is only one Control can be at any given grid cell.
Does this mean GroupBoxes are not supported?
Yes it doesn't yet support controls being put in an already occupied grid cell. It is something I am thinking about implementing but I don't know when I will get to this feature. What happens when you put something in an already occupied cell is that the lib loses track of the previous control in regards to the shared position. Here is an example showing it not working. https://github.com/CapnOdin/GridGUI/blob/master/Examples/Missing%20Features/GroupBox.ahk

Edit: correction, it does support GroupBoxes but only if you do not put anything in them.

Edit 2: I added the rest of the control commands to the control class.
Please excuse my spelling I am dyslexic.
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI - Simplify Control Placement and Resizing

14 Aug 2021, 12:19

Update v1.1.0:
  • Overlapping Controls are now supported
  • Controls now only expand when both the expand option and fill option is set.
  • Moved the lib into a Class so that naming conflicts won't be as big of an issue
  • Fixed a bug that made WinShow and WinHide not work
  • Added the WindowControl class that allows windows to be added to the grid see this example
  • Added an example showing the use of a custom WindowControl by using Powsershell and PuTTY to make a serial terminal link
Update v1.1.1:
  • Fixed a critical bug where calculating the positions of controls for some GUIs would not terminate in certain cases
  • Fixed an error in the groupbox example (found by @Mordecai)
Update v1.1.2:
  • Added support for native glabels
  • Made it possible to instantiate a GUI without making a new one
  • Added WinActive to the Window Class
  • Updated the terminal console example to properly close the started process
Update v1.1.3:
  • Added two additional control wrappers, ListviewControl and TreeviewControl
  • Fixed bug preventing keyword arguments from being used in the AddControl method
  • Fixed the two recreated guis to work with the behavioural changes introduced in v1.1.0
  • Added an example of how to react to user input
Update v1.1.4:
  • Added methods to retrieve the Cell group instances making up the grid
  • Fixed a bug that made TreeviewControls and ListviewControls not change the default LV or TV properly
  • Added an example showing how to retrieve the underlying cell container
  • Change the ToStr method of Cells to provide move information
  • Finished recreating the Columnize GUI, the example can be found here
  • Added an example of how to use the new ListViewControl wrapper
Update v1.1.5:
  • Added a new Control class for handling RadioButton groups called RadioGroupControl
  • Fixed a DPI issue where the cells of controls with default size would be enlarged (found by @metacognition)
  • Added two examples showing how to use the new RadioGroupControl (example 1, example 2)
Update v1.1.6:
  • Added SubGrids that can make a grid in a Cell of a GridGUI or really anywhere
  • Added a new Control class for handling Tabs with subgrids called TabControl
  • Added a new Control class for handling StatusBars called StatusBarControl
  • Added an example showing how to use SubGrids (Example SubGrids.ahk)
  • Added an example showing how to use the new TabControl (Example Tabs.ahk)
  • Updated the example Example Find Text in Files.ahk to show how to use the new StatusBarControl
Update v1.1.7:
  • Fixed the handling of minsize for expanding and filling controls (to allow a control to disappear entirely set its initial size to 0 like in this example)
  • Added two new convenience methods to the main GridGUI class that makes Position instances called GridGUI.Pos() and GridGUI.Area()
  • Removed lots of potential warnings so that using #Warn in a script that has included this lib would not be as annoying of an experience
  • Added an option to the TabControl class that makes it only calculate the positions of the selected tab
  • Made the TabControl class no longer use the standard callback so that it is free to be used for input interrupts
  • Updated a number of examples to work with the fixed minsize handeling
Update v1.1.8:
  • Added support for Gui Events via the following callbacks GuiSize, GuiMoved, GuiClose, GuiActivate, GuiContextMenu
  • Added support for drag and drop files to a GUI or Control using the method RegisterDropTarget of the GUI class
  • Added an example showing how to use Gui Events and registering Drag and Drop (Example Gui Events.ahk)
  • Updated the examples to use the new GUI events
Update v1.1.9:
  • Added support for removing controls from a GridGUI
  • Fixed a bug where overlapping controls were not clickable. For examples of how to make overlapping controls clickable see (Example Background.ahk, UCR Example.ahk)
  • Added an example showing how to remove controls from a GridGUI (Example Grid Game.ahk)
For future updates see the changlog in the docs.
Last edited by Capn Odin on 10 Oct 2021, 02:37, edited 8 times in total.
Please excuse my spelling I am dyslexic.
TheTrueKey
Posts: 7
Joined: 15 Apr 2017, 15:37

Re: GridGUI

21 Aug 2021, 05:00

I'm a little slow, how would you set a gLabel on a control? I could not find an example.

Thanks
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI

21 Aug 2021, 06:27

TheTrueKey wrote:
21 Aug 2021, 05:00
I'm a little slow, how would you set a gLabel on a control? I could not find an example.

Thanks
You can use normal glabels if you want to but the intended way to react to user input is to set a callback using a function object like in the last example in the main post, see User Input.

Edit: I will add how to use the vVar as well in a little bit, but basically you can use get the vVar using ctrl.vVar. If just setting the glabel doesn't work then you may have to set the glabel after adding the control using GuiControl, I can't check right now but if it doesn't work to set normal glabels then I will add the functionality later in the next update or the one after that.

Edit 2: you can use normal glabels like this for now until I release a new update, but it will make vVar not work anymore so you will also have to use normal vVariables if you use a normal glabel

Code: Select all

#Include <GridGUI>

myGui := new GridGUI("Grid Test", "resize")
bt := myGui.Add(1, 1, "Button", "w100 h100", "Button", 1, 1, 1, 1)
bt.Options("+gToolTip")
myGui.Show()
return

ToolTip:
	ToolTip, You pressed the button
return
Edit 3: @TheTrueKey Native glabels are now supported when adding a control.
Please excuse my spelling I am dyslexic.
User avatar
metacognition
Posts: 117
Joined: 22 Oct 2014, 05:57
Location: Alaska
Contact:

Re: GridGUI v1.1.2 - Simplify Control Placement and Resizing

24 Aug 2021, 00:07

This is really cool, pretty brilliant actually. I spend so much time tweaking x and y s for controls every time something changes.
User avatar
metacognition
Posts: 117
Joined: 22 Oct 2014, 05:57
Location: Alaska
Contact:

Re: GridGUI v1.1.2 - Simplify Control Placement and Resizing

24 Aug 2021, 00:11

Do you have the source code for the gui in the screenshot? Don’t see it in the repo.
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI v1.1.2 - Simplify Control Placement and Resizing

24 Aug 2021, 07:36

metacognition wrote:
24 Aug 2021, 00:11
Do you have the source code for the gui in the screenshot? Don’t see it in the repo.
If you mean the screenshot at the top then you can find it here UCR it is a recreation of the GUI from a script by @evilC.
Please excuse my spelling I am dyslexic.
User avatar
metacognition
Posts: 117
Joined: 22 Oct 2014, 05:57
Location: Alaska
Contact:

Re: GridGUI v1.1.2 - Simplify Control Placement and Resizing

28 Aug 2021, 11:19

Capn Odin wrote:
24 Aug 2021, 07:36
metacognition wrote:
24 Aug 2021, 00:11
Do you have the source code for the gui in the screenshot? Don’t see it in the repo.
If you mean the screenshot at the top then you can find it here UCR it is a recreation of the GUI from a script by @evilC.
Hey! Yes I did, when I run the example it looks different!
grid 2021-08-28_08-15-29.png
grid 2021-08-28_08-15-29.png (48.97 KiB) Viewed 6683 times
User avatar
Capn Odin
Posts: 1352
Joined: 23 Feb 2016, 19:45
Location: Denmark
Contact:

Re: GridGUI v1.1.2 - Simplify Control Placement and Resizing

28 Aug 2021, 14:21

metacognition wrote:
28 Aug 2021, 11:19
Capn Odin wrote:
24 Aug 2021, 07:36
metacognition wrote:
24 Aug 2021, 00:11
Do you have the source code for the gui in the screenshot? Don’t see it in the repo.
If you mean the screenshot at the top then you can find it here UCR it is a recreation of the GUI from a script by @evilC.
Hey! Yes I did, when I run the example it looks different!

grid 2021-08-28_08-15-29.png
I may have forgotten to update the example to support the new behaviour introduced in v1.1.2 I will try to update it today but I am at a pathfinder session until late evening.

Edit: I have updated the example
Last edited by Capn Odin on 29 Aug 2021, 07:45, edited 1 time in total.
Please excuse my spelling I am dyslexic.
william_ahk
Posts: 652
Joined: 03 Dec 2018, 20:02

Re: GridGUI v1.1.2 - Simplify Control Placement and Resizing

28 Aug 2021, 23:15

This is amazing! Thank you for writing this.
[Shambles]
Posts: 100
Joined: 20 May 2014, 21:24

Re: GridGUI v1.1.3 - Simplify Control Placement and Resizing

31 Aug 2021, 08:36

Excellent work!

AutoHotkey should have a GUI builder and a grid geometry manager like yours, standard.

Return to “Scripts and Functions (v1)”

Who is online

Users browsing this forum: wilkster and 38 guests