Size of windows in projects

Just starting out? Need help? Post your questions and find answers here.
User avatar
marcoagpinto
Addict
Addict
Posts: 940
Joined: Sun Mar 10, 2013 3:01 pm
Location: Portugal
Contact:

Size of windows in projects

Post by marcoagpinto »

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!
PureLust
Enthusiast
Enthusiast
Posts: 477
Joined: Mon Apr 16, 2007 3:57 am
Location: Germany, NRW

Re: Size of windows in projects

Post by PureLust »

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
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)
User avatar
marcoagpinto
Addict
Addict
Posts: 940
Joined: Sun Mar 10, 2013 3:01 pm
Location: Portugal
Contact:

Re: Size of windows in projects

Post by marcoagpinto »

Thanks!
User avatar
Saki
Addict
Addict
Posts: 830
Joined: Sun Apr 05, 2020 11:28 am
Location: Pandora

Re: Size of windows in projects

Post by Saki »

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.

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.
地球上の平和
User avatar
TI-994A
Addict
Addict
Posts: 2512
Joined: Sat Feb 19, 2011 3:47 am
Location: Singapore
Contact:

Re: Size of windows in projects

Post by TI-994A »

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...
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.

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 :D
Post Reply