Hello!
I have been improving my PhD software and now with a computer resolution of 1920x1080 instead of the old computer's 1366x768, I noticed that in the dozens of windows I am using, they all have different sizes.
This happened because I created the windows based on the fitting of the gadgets inside them.
Is there a kind of rule for programmers on how to choose the size of the windows?
The way I have it, sucks.
Thanks!
Size of windows in projects
- marcoagpinto
- Addict
- Posts: 940
- Joined: Sun Mar 10, 2013 3:01 pm
- Location: Portugal
- Contact:
Re: Size of windows in projects
Hi Marco,
A good way for modern Applications is, to display their GUI in Window with flexible sizes.
If you plan to create an application with variable window size, it's a good way to split your Window into regions. these regions will be resized in a rule you have to specify. Some of them will resize only horizontally, some only vertically, some in both directions, some not at all.
Further split your controls into thematically groups, and locate each group into one of the regions.
It depends on the type of controls, if it will be useful to rezize them or not.
E.g. it's quite useless to resize a Button (only for esthetic purpose), but it's often useful to resize a List-Control, Editor Gadget, etc. Any control which displays a lot or variable information might benefit from being resizable.
So, this part is the 'planing' part for your GUI.
The coding part for this could be a pain in the but, if it's done by a lot of single instructions, where you check the size of the window, than rearrange the positions and sizes of your regions and then rearrange the Gadgets within each Region.
This is - let's call it - 'the old way'.
To make creating such a flexible GUI MUCH easier, PB has a special Library of functions, which is the Dialog-Library.
With the Dialog Library, you can define regions and controls inside these regions, and the rules how these regions and the controls inside the regions should be resized. The resizing is then done and controlled totally by the Dialog Library, which relieve you A LOT of work.
Because the way the Dialog-Library is made, it's not so easy to understand and not quite comfortable to use.
And because the way it was implemented, it does not support Syntax checking, so it's quite hard to troubleshoot if the results is not what you initially wanted.
There are two attempts to make usage of the Dialog functions much easier.
One is my "Dynamic Dialogs" Module, which is a kind of wrapper for the original Dialog Library Commands. It adds some new features, but most important - it adds a kind of Syntax checking and a lot of comfort while creating dialogs.
If you like to programm each Gadget in your GUI by your own, I can highly recommend using Dynamic Dialogs. The only thing you need to understand is how to split your GUI in regions and what's the best way for them to be resized.
Another way is the Dialog Designer from HEXOR.
Here you create your complete GUI with a Designing tool, where you can place Gadgets in a kind of WYSIWYG Way.
If you have worked with visual designers before and like the way they work, this might be the right way for you to get into dynamic and flexible GUIs.
If you have never programmed a GUI with variable size before, it might need a bit of rethinking where to place and how to group your Gadgets, but flexibility in your GUI improves the usability a lot.
Just give it a try.
Gesendet von meinem LYA-L29 mit Tapatalk
A good way for modern Applications is, to display their GUI in Window with flexible sizes.
If you plan to create an application with variable window size, it's a good way to split your Window into regions. these regions will be resized in a rule you have to specify. Some of them will resize only horizontally, some only vertically, some in both directions, some not at all.
Further split your controls into thematically groups, and locate each group into one of the regions.
It depends on the type of controls, if it will be useful to rezize them or not.
E.g. it's quite useless to resize a Button (only for esthetic purpose), but it's often useful to resize a List-Control, Editor Gadget, etc. Any control which displays a lot or variable information might benefit from being resizable.
So, this part is the 'planing' part for your GUI.
The coding part for this could be a pain in the but, if it's done by a lot of single instructions, where you check the size of the window, than rearrange the positions and sizes of your regions and then rearrange the Gadgets within each Region.
This is - let's call it - 'the old way'.
To make creating such a flexible GUI MUCH easier, PB has a special Library of functions, which is the Dialog-Library.
With the Dialog Library, you can define regions and controls inside these regions, and the rules how these regions and the controls inside the regions should be resized. The resizing is then done and controlled totally by the Dialog Library, which relieve you A LOT of work.
Because the way the Dialog-Library is made, it's not so easy to understand and not quite comfortable to use.
And because the way it was implemented, it does not support Syntax checking, so it's quite hard to troubleshoot if the results is not what you initially wanted.
There are two attempts to make usage of the Dialog functions much easier.
One is my "Dynamic Dialogs" Module, which is a kind of wrapper for the original Dialog Library Commands. It adds some new features, but most important - it adds a kind of Syntax checking and a lot of comfort while creating dialogs.
If you like to programm each Gadget in your GUI by your own, I can highly recommend using Dynamic Dialogs. The only thing you need to understand is how to split your GUI in regions and what's the best way for them to be resized.
Another way is the Dialog Designer from HEXOR.
Here you create your complete GUI with a Designing tool, where you can place Gadgets in a kind of WYSIWYG Way.
If you have worked with visual designers before and like the way they work, this might be the right way for you to get into dynamic and flexible GUIs.
If you have never programmed a GUI with variable size before, it might need a bit of rethinking where to place and how to group your Gadgets, but flexibility in your GUI improves the usability a lot.
Just give it a try.
Gesendet von meinem LYA-L29 mit Tapatalk
Last edited by PureLust on Sun Jan 17, 2021 1:53 pm, edited 3 times in total.
[Dynamic-Dialogs] - create complex GUIs the easy way
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
[DeFlicker] - easily deflicker your resizeable Windows
[WinFX] - Window Effects (incl. 'click-through' Window)
- marcoagpinto
- Addict
- Posts: 940
- Joined: Sun Mar 10, 2013 3:01 pm
- Location: Portugal
- Contact:
Re: Size of windows in projects
Thanks!
Re: Size of windows in projects
Well, it's all too complicated for me.
Normally one works with a virtual desktop.
That fits then always and everywhere, with all desktop sizes and scaling.
If you need a solution without DPI aware, you must say it, I change the code then something.
Normally one works with a virtual desktop.
That fits then always and everywhere, with all desktop sizes and scaling.
If you need a solution without DPI aware, you must say it, I change the code then something.
Code: Select all
; Dynamic GUI base code - By Saki - ###### Enable DPI aware #######
EnableExplicit
ExamineDesktops()
Define virtual_desk_width=1600
Define virtual_desk_height=900
Define window_shrink_factor.f=1.2
Define RF.f=DesktopWidth(0)/DesktopResolutionX()/virtual_desk_width/window_shrink_factor.f ; Resize factor
Define window_ID=OpenWindow(#PB_Any, 0, 0, virtual_desk_width*RF, virtual_desk_height*RF, "", #PB_Window_ScreenCentered|#PB_Window_SystemMenu)
Define gadget_1_ID=ButtonGadget(#PB_Any, 10*RF, 10*RF, 790*RF, 440*RF, "HELLO")
Define gadget_2_ID=ButtonGadget(#PB_Any, 810*RF, 460*RF, 780*RF, 430*RF, "World")
Repeat : Until WaitWindowEvent()=#PB_Event_CloseWindow
Last edited by Saki on Sun Jan 17, 2021 8:25 pm, edited 1 time in total.
地球上の平和
Re: Size of windows in projects
This example utilises positional percentages based on the maximised window size of the development machine; but it can also be modified for any initial window size. The window here has been made resizable to demonstrate the dynamic gadget sizing and positioning.marcoagpinto wrote:...with a computer resolution of 1920x1080 instead of the old computer's 1366x768, I noticed that in the dozens of windows I am using, they all have different sizes...
Code: Select all
Enumeration
#mainWindow
#editor1
#string1
#string2
#button1
#button2
#button3
EndEnumeration
Global maxWinWidth, maxWinHeight
Procedure px(x)
wWidth = WindowWidth(#mainWindow, #PB_Window_InnerCoordinate)
ProcedureReturn Int(x * (wWidth / maxWinWidth))
EndProcedure
Procedure py(y)
wHeight = WindowHeight(#mainWindow, #PB_Window_InnerCoordinate)
ProcedureReturn Int(y * (wHeight / maxWinHeight))
EndProcedure
Procedure resizeWindowHandler()
; sizes and positions relative to window size 1920 x 1000
ResizeGadget(#editor1, px(20), py(20), px(1880), py(810))
ResizeGadget(#string1, px(20), py(850), px(900), py(60))
ResizeGadget(#string2, px(1000), py(850), px(900), py(60))
ResizeGadget(#button1, px(20), py(930), px(600), py(50))
ResizeGadget(#button2, px(660), py(930), px(600), py(50))
ResizeGadget(#button3, px(1300), py(930), px(600), py(50))
EndProcedure
wFlags = #PB_Window_SystemMenu | #PB_Window_ScreenCentered |
#PB_Window_SizeGadget | #PB_Window_MaximizeGadget
OpenWindow(#mainWindow, 50, 50, 1000, 600, "Dynamic Windows", wFlags)
SetWindowState(#mainWindow, #PB_Window_Maximize)
maxWinWidth = WindowWidth(#mainWindow, #PB_Window_InnerCoordinate)
maxWinHeight = WindowHeight(#mainWindow, #PB_Window_InnerCoordinate)
; sizes and positions relative to window size 1920 x 1000
EditorGadget(#editor1, px(20), py(20), px(1880), py(810))
StringGadget(#string1, px(20), py(850), px(900), py(60), "string 1")
StringGadget(#string2, px(1000), py(850), px(900), py(60), "string 2")
ButtonGadget(#button1, px(20), py(930), px(600), py(50), " BUTTON 1")
ButtonGadget(#button2, px(660), py(930), px(600), py(50), "BUTTON 2")
ButtonGadget(#button3, px(1300), py(930), px(600), py(50), "BUTTON 3")
BindEvent(#PB_Event_SizeWindow, @resizeWindowHandler())
While WaitWindowEvent() ! #PB_Event_CloseWindow : Wend
Texas Instruments TI-99/4A Home Computer: the first home computer with a 16bit processor, crammed into an 8bit architecture. Great hardware - Poor design - Wonderful BASIC engine. And it could talk too! Please visit my YouTube Channel