MaxGUI Scaling gadgets/windows

BlitzMax Forums/MaxGUI Module/MaxGUI Scaling gadgets/windows

degac

(Posted 2015) [#1]

Hi

I have a little 'problem'.
I've created some applications with fixed windows sizes (ie: 400x300).
On my old screen (1024x768) everything is ok.
Some of my colleagues have changed their monitor to something bigger (19" -- 22") and they now works in higher resolution (1920x1080!)

When they run my apps, they see 'small' gadgets/textfields and so on.
I've rewritten some of these apps to allow windows resizing, but some of them have many gadgets/fields to manually change.

I've added a lot of SetGadgetLayout, I've used SetGadgetFont to change the font size of gadgets, and I think I've resolved the problem.

Of course I dont' like the idea to re-write code just to fit my app to run in a different resolution.

Anyone know a possible solution that allows automatic 'scaling' in MaxGUI?

cps	(Posted 2015) [#2]

Temp1=DesktopWidth()
If Temp1=640 then screensize%=1
If Temp1=800 then screensize%=2 etc
Use var screensize% to adjust x,y,width,height,font of gadget
Is the only solution that I've found, but it maybe what you are trying to avoid
Have fun cps

xlsior

(Posted 2015) [#3]

If you are going to rewrite things: Be aware that even 1920x1080 is old hat by now, 4K monitors are gaining pupularity -- meaning desktop resolutions of 3840x2160 or thereabouts.

Just keep that in mind or a newly rewritten 1920x1080 version will still look puny on some new PCs.

degac

(Posted 2015) [#4]

@CPS

Well, I've already done some tests about Desktop resolution checking, this is not the problem: I can find a 'correction ratio' for W/H for window and gadgets (and font size) and apply to them.
To be honest I'm not very satisfied with the results at the moment, but it seems to works.
It involves some calling to SetGadgetShape, BUT I've discovered that it needs SetGadgetLayout to keep 'things' in order.

This is a small example I've tested.
Of course I can determine the 'scale factor' comparing the area and dimensions of my app's window to a default desktop screen (in my case 1024x768).
In this example I've skipped this.


SuperStrict
Import maxgui.drivers


Global window:tgadget=		CreateWindow("Main",100,100,300,300,,WINDOW_RESIZABLE|WINDOW_TITLEBAR|WINDOW_CENTER)


Global btn:Tgadget[3]

btn[0]=		CreateButton("1",10,10,100,30,window)
btn[1]=		CreateButton("2",120,10,100,30,window)
btn[2]=		CreateButton("3",10,90,100,30,window)

Repeat
	WaitEvent()
	
	Select EventID()
		Case EVENT_APPTERMINATE, EVENT_WINDOWCLOSE
			End

		Case EVENT_GADGETACTION
			Select EventSource()
				Case btn[0]		SetGUIScale(window,1.5)
			
			End Select
	End Select
Forever

Function SetGUIScale:Int(parent:Tgadget,sf:Float=1.0)
		Local x:Float,y:Float,w:Float,h:Float
					x=GadgetX(parent)'*sf
					y=GadgetY(parent)'*sf
					w=GadgetWidth(parent)*sf
					h=GadgetHeight(parent)*sf

					SetGadgetShape parent,x,y,w,h
				
			
				For Local g:Tgadget=EachIn parent.kids
						If g
									x=GadgetX(g)'*sf									y=GadgetY(g)'*sf									w=GadgetWidth(g)*sf									h=GadgetHeight(g)*sf																									SetGadgetShape g,x,y,w,h
							End If
				Next
Return 0
End Function

I'm still looking a way to find the 'default' GUI font size to apply the correction to it. Of course any gadget can have different font and different size... and I'm quite sure that there is not a such command to retrieve the font used in a gadget (something like GetGadgetFont(gadget)).

What I'm looking, is something automatic and reliable (if it exists of course! I'm quite sure I havent' found an 'elastic' GUI)

@xlsior: well, I think I will have a 4K monitor in about 10 years! considering that the monitors had changed ONLY after 12 years! Probably GUI will be anachronistic in 10 years! :P

Henri

(Posted 2015) [#5]

Hi degac,

I'm quite sure that there is not a such command to retrieve the font used in a gadget

No there isn't , but could be easily added. GadgetFont would be in par with GadgetText and other 'getters'.

-Henri

Brucey

(Posted 2015) [#6]

What I'm looking, is something automatic and reliable (if it exists of course! I'm quite sure I havent' found an 'elastic' GUI)

Which is why I prefer frameworks like wxWidgets, because they come with flexible, self-adjusting layout engines.

Of course, you can always write your own! That's what makes programming so much fun ;-)

degac

(Posted 2015) [#7]

So wxWidgets are 'auto scaling'? Interesting... but I dont' like the idea to redesign all the apps :/!

I will try to find a solution! (I agree, it is fun!)

Henri

(Posted 2015) [#8]

wxWidget has sizers which control the layout and 'gadgets' can grow to utilize empty space according to predefined rules, but fontsize is fixed as far as I know.

In theory you could make a function to go though every gadget after they have been created (but still hidden) and use SetGadgetShape to scale them with fixed ratio depending on desktop height like:

Local ratio:Float = 1.2

SetGadgetShape( <gadget>, GadgetX(<gadget>), GadgetY(<gadget>), Int( GadgetWidth(<gadget>) * ratio), Int( GadgetHeight(<gadget>) * ratio) )

-Henri

cps	(Posted 2015) [#9]

Maybe late but this might help ( It's not my work, found it in the forum )
but only for windows based progs.

Local DefaultFontName$ = "Arial"
Local DefaultFontSize:Float = 9.12
TWindowsGUIDriver(maxgui_driver).GDIFont= TWindowsFont(LoadGuiFont(DefaultFontName,DefaultFontSize))

Other thought is have you tried fixed width fonts ( monofonts ) there are two that come with windows ones 'Courier new' the other I've forgotten.

Other than that look at the TK or FX methods (ruby, python etc) that use grids and define gadget size by number of letters. I'm still sticking to forcing a user to pick a screen size and preventing resizing. Have fun Cps

Henri

(Posted 2015) [#10]

Hi cps,

nice find there.

-Henri

degac

(Posted 2015) [#11]

thanks Cps!
I'm still experimenting some different solutions - nothing I'm really satisfied with at the moment.
The 'problem' is the alignment of gadgets: every time I 'rescale' (with SetGadgetShape) the gadgets their position is 'recalculated' considering the GadgetLayout assigned. I'm looking to bypass this behaviour.
I mean: a gadget at 10,10 and 100,30 of sizes, with a 2x multiplicator, should be at 20,20 and 200,60 (for example): at the moment its position is changed...

Well, in any case I hacked MaxGUI to manage 'default behaviours'.
When you set SetColor (in gfx mode) the 'color' is the same for all the following operations.
I did something similar for MaxGUI: foregroundcolor,backcolor, alignment etc.
Not really what I'm looking for initially, but a nice collateral effect I think!

cps	(Posted 2015) [#12]

I see the problem with the Blitz window resize repositioning objects in the window but not resizing them. Solution seems to be to store object data before window resize then apply resize translation to objects. This may be a repeat of what you have allready done but thats what the code below does. I'd add a font resizer but don't know if you use one size throughout or multiple sizes. ie change default or each object font size.

Import MaxGui.Drivers
SuperStrict
Local Temp1%=0
Local W2:TGadget = CreateWindow( "A New Project", 10,10,200,300,,WINDOW_CENTER | WINDOW_TITLEBAR)
Local W2L1:Tgadget=CreateLabel("FRED",10,10,176,20,W2,LABEL_CENTER)
Local btn:Tgadget[6]
btn[0]=	CreateButton("1",30,50,31,31,W2)
btn[1]=	CreateButton("2",80,50,31,31,W2)
btn[2]=	CreateButton("3",130,50,31,31,W2)
btn[3]=CreateButton("Exit",73,230,50,25,W2)';SetGadgetFont(W2B1,GUIFont)
btn[4]=CreateButton("Up",10,230,50,25,W2)'extra gadget for making bigger
btn[5]=CreateButton("Down",136,230,50,25,W2)' extra gadget for making smaller
SetGadgetColor(W2L1,100,200,100)
'******************** Start of extra bits for resize **********************
Local zlistz:TList=CreateList()' create a Tlist for all gadgets in this window
For temp1=0 To 5' add all W2 gadget names to zlistz
	ListAddLast zlistz, btn[Temp1]
Next
ListAddLast zListz,W2L1 ' 7 gadgets in window W2 all part of Tlist called zlistz
Local W2Gads:AllGads = AllGads.Create(7) ' generates methods for resizing 7 gadgets in window W2
W2Gads.initilise(zListz, W2, DesktopWidth(), DesktopHeight()) ' generates storage for gadget info based on the number above
W2Gads.SaveAllDat()' saves gadget positions
'******************** End of extra bits for resize **********************
'----------------------------------- Start of main loop -----------------------------------
Repeat
	PollEvent
	Select EventID()
  		Case EVENT_WINDOWCLOSE
  		   EndIt()
		
		Case EVENT_GADGETACTION' button event codes	
			Select EventSource()
				Case btn[3] EndIt()' exit button
							
				Case btn[4] If W2Gads.DoResize(1)=0 Then Notify "Can Not Get Any Bigger !"' up ( bigger )
																				
				Case btn[5] If W2Gads.DoResize(2)=0 Then Notify "Can Not Get Any Smaller !"	' down ( smaller )				
										
			End Select
			
		Case EVENT_GADGETSELECT' lists etc
			Select EventSource()
				'Case
									
      		End Select			
	End Select
Forever
'------------------------------------ End of Main Loop ----------------------------------	
'---------- Start of Functions ----------
Function EndIt()'common exit point
	Select Confirm("Are you sure you want to quit?")
		Case 1
			End
		Case 0	
			Return
	End Select
End Function
'  --------- End of Functions -------------
'  ----------------------------------------   Start of Types  ---------------------------------------
Type AllGads Extends AGadget' Create an instance of this for each window in your application
	Const ScStep:Float=0.1' size of scale steps
	Global NumGads%' total number of gadgets created in the window gadget
	Field DtWidth%' max desktop width
	Field DtHeight%'max desktop height
	Field ScRatio:Float=1.0 'initial settingfor  scale factor
	Field GadList:TList' list of gadget names in this window
	Field Gad:AGadget[NumGads] ' storage for gadget variables
	Field MyWin:Tgadget' the name of the window being resized
	
	Function Create:AllGads(Tmp1%)
		NumGads=Tmp1
		Return New AllGads
	End Function

	Method Initilise(Tt1:TList, Tv1:Tgadget, Tmp1%, Tmp2%)' Creates storage and sets target window name via Tv1
		Local Tx1%=0
		DtWidth=Tmp1; DtHeight=Tmp2' set desktop width and height
		GadList=Tt1	; MyWin=Tv1	
		For Tx1=0 To NumGads-1' an instance of AGadget for each Gadget in a window
			Gad[Tx1]=New AGadget
		Next
	End Method

	Method SaveAllDat()' stores gadgets x,y width and height
		Local Tx1%=0
		Local Tv1:TGadget
		For Tv1=EachIn GadList
			Gad[Tx1].GadX=GadgetX(Tv1); Gad[Tx1].GadY=GadgetY(Tv1)
			Gad[Tx1].GadW=GadgetWidth(Tv1); Gad[Tx1].GadH=GadgetHeight(Tv1)
			Tx1=Tx1+1
		Next 
	End Method
	
	Method DoResize%(Tz%)' returns 1 If yes 0 if no can do, Tz=1 size up  Tz=2 size down
		Local Temp1%=0; Local Temp2%=0; Local DoIt%=1
		Local Tv1:TGadget; Local Tx%[4]	
		Tx[0]=GadgetX(MyWin); Tx[1]=GadgetY(MyWin); Tx[2]=GadgetWidth(MyWin); Tx[3]=GadgetHeight(MyWin)
		If Tz=1 Then 'make bigger
			ScRatio=ScRatio+ScStep' new scale factor
			Temp1=Tx[2]*ScRatio; Temp2=Tx[3]*ScRatio
			If Temp1<=DtWidth And Temp2<=DtHeight Then' not to big for desktop size 
				HideGadget(MyWin)
				SetGadgetShape(MyWin,(DtWidth-Temp1)/2,(DtHeight-Temp2)/2,Temp1,Temp2)' main window resize
				Temp1=0; Temp2=0
				For Tv1=EachIn Gadlist								
					Gad[Temp1].GadX=Gad[Temp1].GadX	* ScRatio
					Gad[Temp1].GadY=Gad[Temp1].GadY * ScRatio
					Gad[Temp1].GadW=Gad[Temp1].GadW * ScRatio
					Gad[Temp1].GadH=Gad[Temp1].GadH * ScRatio' resize for each gadget in window
					SetGadgetShape(Tv1,Gad[Temp1].GadX,Gad[Temp1].GadY,Gad[Temp1].GadW,Gad[Temp1].GadH)										
					Temp1=Temp1+1
				Next
				ShowGadget(MyWin)				
			Else' to big for desktop
				ScRatio=ScRatio-ScStep
				DoIt=0			
			End If							
		Else'make smaller
			If  ScRatio-ScStep>=1 Then 'do the resize not smaller than original
				HideGadget(MyWin)	
				Temp1=(Tx[2]/ScRatio)+1
				Temp2=(Tx[3]/ScRatio)+1			
				SetGadgetShape(MyWin,(DtWidth-Temp1)/2,(DtHeight-Temp2)/2,Temp1,Temp2)' main window resize		
				Temp1=0; Temp2=0			
				For Tv1=EachIn Gadlist							
					Temp2=(Gad[Temp1].GadX/ScRatio)+1; Gad[Temp1].GadX=Temp2
					Temp2=(Gad[Temp1].GadY/ScRatio)+1; Gad[Temp1].GadY=Temp2
					Temp2=(Gad[Temp1].GadW/ScRatio)+1; Gad[Temp1].GadW=Temp2
					Temp2=(Gad[Temp1].GadH/ScRatio)+1; Gad[Temp1].GadH=Temp2
					SetGadgetShape(Tv1,Gad[Temp1].GadX,Gad[Temp1].GadY,Gad[Temp1].GadW,Gad[Temp1].GadH)				
					Temp1=Temp1+1
				Next 
				ScRatio=ScRatio-ScStep
				ShowGadget(MyWin)
			Else' trying to go smaller than original
				DoIt=0
			End If						
		End If			
		Return DoIt' returns 0 if no resize possible
	End Method
End Type

Type AGadget' defines a player
	Field GadX%' stores a gadgets x position
	Field GadY%' stores a gadgets y position
	Field GadW%' stores a gadgets width
	Field GadH%' stores a gadgets Height	
End Type

This is a version without font resizing, have fun Cps

cps	(Posted 2015) [#13]

Oops my mistake not use to the forum codes, should have used the preview button. You live and learn. Hope the code is useful.

degac

(Posted 2015) [#14]

Hi CPS

interesting solution.

In my case I decided to keep a 'default-screen-size' and based on this, scaling everything in the 'right' way automatically. So if I run the application on a 1980x1024 desktop, the window should keep the same ratio and rescale it (and its content) to the same ration as the default one (in my case 640x480 for example).
I'm experimenting adding a WINDOW_AUTOSCALE const parameter and hacking here and there MaxGUI :P

But I like your idea to 'scale' manually everything, based on the user choice. I should consider to implement some sort of command, like SetGadgetScale(window,scale#).

Another thing to put in my to-do list (I hope to have time this weekend to complete it!)

Thank you again.

cps	(Posted 2015) [#15]

This is the same as previous but with a cheap and cheerful font resizer included.Have fun Cps

Import MaxGui.Drivers
SuperStrict
Local Temp1%=0
Local W2:TGadget = CreateWindow( "A New Project", 10,10,200,300,,WINDOW_CENTER | WINDOW_TITLEBAR)
Local W2L1:Tgadget=CreateLabel("FRED",10,10,176,20,W2,LABEL_CENTER)
Local btn:Tgadget[6]
btn[0]=	CreateButton("1",30,50,31,31,W2)
btn[1]=	CreateButton("2",80,50,31,31,W2)
btn[2]=	CreateButton("3",130,50,31,31,W2)
btn[3]=CreateButton("Exit",76,230,50,25,W2)';SetGadgetFont(W2B1,GUIFont)
btn[4]=CreateButton("Up",10,230,60,25,W2)'extra gadget for making bigger
btn[5]=CreateButton("Down",132,230,60,25,W2)' extra gadget for making smaller
SetGadgetColor(W2L1,100,200,100)
'******************** Start of extra bits for resize **********************
Local zlistz:TList=CreateList()' create a Tlist for all gadgets in this window
For temp1=0 To 5' add all W2 gadget names to zlistz
	ListAddLast zlistz, btn[Temp1]
Next
ListAddLast zListz,W2L1 ' 7 gadgets in window W2 all part of Tlist called zlistz
Local W2Gads:AllGads = AllGads.Create(7) ' generates methods for resizing 7 gadgets in window W2
W2Gads.initilise(zListz, W2, DesktopWidth(), DesktopHeight()) ' generates storage for gadget info based on the number above
W2Gads.SaveAllDat()' saves gadget positions
'******************** End of extra bits for resize **********************
'----------------------------------- Start of main loop -----------------------------------
Repeat
	PollEvent
	Select EventID()
  		Case EVENT_WINDOWCLOSE
  		   EndIt()
		
		Case EVENT_GADGETACTION' button event codes	
			Select EventSource()
				Case btn[3] EndIt()' exit button
							
				Case btn[4] If W2Gads.DoResize(1)=0 Then Notify "Can Not Get Any Bigger !"' up ( bigger )
																				
				Case btn[5] If W2Gads.DoResize(2)=0 Then Notify "Can Not Get Any Smaller !"	' down ( smaller )				
										
			End Select
			
		Case EVENT_GADGETSELECT' lists etc
			Select EventSource()
				'Case
									
      		End Select			
	End Select
Forever
'------------------------------------ End of Main Loop ----------------------------------	
'---------- Start of Functions ----------
Function EndIt()'common exit point
	Select Confirm("Are you sure you want to quit?")
		Case 1
			End
		Case 0	
			Return
	End Select
End Function
'  --------- End of Functions -------------
'  ----------------------------------------   Start of Types  ---------------------------------------
Type AllGads Extends AGadget' Create an instance of this for each window in your application
	Const ScStep:Float=0.1' size of scale steps
	Global NumGads%' total number of gadgets created in the window gadget
	Field DtWidth%' max desktop width
	Field DtHeight%'max desktop height
	Field ScRatio:Float=1.0 'initial settingfor  scale factor
	Field GadList:TList' list of gadget names in this window
	Field Gad:AGadget[NumGads] ' storage for gadget variables
	Field MyWin:Tgadget' the name of the window being resized
	Field DFontSize:Float = 9.0
	Field GUIFont:TGuiFont	
		
	Function Create:AllGads(Tmp1%)
		NumGads=Tmp1
		Return New AllGads
	End Function

	Method Initilise(Tt1:TList, Tv1:Tgadget, Tmp1%, Tmp2%)' Creates storage and sets target window name via Tv1
		Local Tx1%=0
		DtWidth=Tmp1; DtHeight=Tmp2' set desktop width and height
		GadList=Tt1	; MyWin=Tv1	
		For Tx1=0 To NumGads-1' an instance of AGadget for each Gadget in a window
			Gad[Tx1]=New AGadget
		Next
	End Method

	Method SaveAllDat()' stores gadgets x,y width and height
		Local Tx1%=0
		Local Tv1:TGadget
		For Tv1=EachIn GadList
			Gad[Tx1].GadX=GadgetX(Tv1); Gad[Tx1].GadY=GadgetY(Tv1)
			Gad[Tx1].GadW=GadgetWidth(Tv1); Gad[Tx1].GadH=GadgetHeight(Tv1)
			Tx1=Tx1+1
		Next 
	End Method
	
	Method DoFontSize()
		Local Tv1:TGadget
		GUIFont=LoadGuiFont("Ariel",DFontSize)		
		'GUIFont=LoadGuiFont("Courier new",DFontSize)
		For Tv1=EachIn GadList
			SetGadgetFont(Tv1,GUIFont)
		Next
	End Method
	
	Method DoResize%(Tz%)' returns 1 If yes 0 if no can do, Tz=1 size up  Tz=2 size down
		Local Temp1%=0; Local Temp2%=0; Local DoIt%=1
		Local Tv1:TGadget; Local Tx%[4]	
		Tx[0]=GadgetX(MyWin); Tx[1]=GadgetY(MyWin); Tx[2]=GadgetWidth(MyWin); Tx[3]=GadgetHeight(MyWin)
		If Tz=1 Then 'make bigger
			ScRatio=ScRatio+ScStep' new scale factor
			Temp1=Tx[2]*ScRatio; Temp2=Tx[3]*ScRatio
			If Temp1<=DtWidth And Temp2<=DtHeight Then' not to big for desktop size 
				HideGadget(MyWin)
				SetGadgetShape(MyWin,(DtWidth-Temp1)/2,(DtHeight-Temp2)/2,Temp1,Temp2)' main window resize
				Temp1=0; Temp2=0
				For Tv1=EachIn Gadlist								
					Gad[Temp1].GadX=Gad[Temp1].GadX	* ScRatio
					Gad[Temp1].GadY=Gad[Temp1].GadY * ScRatio
					Gad[Temp1].GadW=Gad[Temp1].GadW * ScRatio
					Gad[Temp1].GadH=Gad[Temp1].GadH * ScRatio' resize for each gadget in window
					SetGadgetShape(Tv1,Gad[Temp1].GadX,Gad[Temp1].GadY,Gad[Temp1].GadW,Gad[Temp1].GadH)										
					Temp1=Temp1+1
				Next
				DFontSize=DFontSize+2.0
				DoFontSize()
				ShowGadget(MyWin)				
			Else' to big for desktop
				ScRatio=ScRatio-ScStep
				DoIt=0			
			End If							
		Else'make smaller
			If  ScRatio-ScStep>=1 Then 'do the resize not smaller than original
				HideGadget(MyWin)	
				Temp1=(Tx[2]/ScRatio)+1
				Temp2=(Tx[3]/ScRatio)+1			
				SetGadgetShape(MyWin,(DtWidth-Temp1)/2,(DtHeight-Temp2)/2,Temp1,Temp2)' main window resize		
				Temp1=0; Temp2=0			
				For Tv1=EachIn Gadlist							
					Temp2=(Gad[Temp1].GadX/ScRatio)+1; Gad[Temp1].GadX=Temp2
					Temp2=(Gad[Temp1].GadY/ScRatio)+1; Gad[Temp1].GadY=Temp2
					Temp2=(Gad[Temp1].GadW/ScRatio)+1; Gad[Temp1].GadW=Temp2
					Temp2=(Gad[Temp1].GadH/ScRatio)+1; Gad[Temp1].GadH=Temp2
					SetGadgetShape(Tv1,Gad[Temp1].GadX,Gad[Temp1].GadY,Gad[Temp1].GadW,Gad[Temp1].GadH)				
					Temp1=Temp1+1
				Next 
				ScRatio=ScRatio-ScStep
				DFontSize=DFontSize-2.0
				DoFontSize()
				ShowGadget(MyWin)
			Else' trying to go smaller than original
				DoIt=0
			End If						
		End If			
		Return DoIt' returns 0 if no resize possible
	End Method
End Type

Type AGadget' defines a player
	Field GadX%' stores a gadgets x position
	Field GadY%' stores a gadgets y position
	Field GadW%' stores a gadgets width
	Field GadH%' stores a gadgets Height	
End Type

degac

(Posted 2015) [#16]

At the end I decided to don't hack MaxGUI to support 'automatic' scaling.
Too much mess around! :D

So I followed the CPS's idea to 'save' the gadgets info (with a command SaveGadgets(window) and then call SetWindowScale(window,scale_factor) when needed.

I still would like an automatic way to do things... but not now!

cps	(Posted 2015) [#17]

I've altered the code to provide a resize without changing font size and one with a simple font resizer. Please post if you ever get time to develop an automatic version. Have fun Cps.

degac

(Posted 2015) [#18]

Hi

I've implemented something similar about gadget font resize (in my case I specify the scale_factor).
The only thing I still haven't found a proper solution is how to retrieve the default/current font size... I need to investigate more.

The 'automatic' version is still in my to-do list, if and when I have time I will try to implement it in MaxGUI.

Cheers