GUI with resolution changes

[Elffus]

Hi,

I'm really struggling to understand how to draw a gui to the screen then have it persist in the same relative positions even when the resolution has changed.

For example; an action bar that sticks to the bottom of the screen as well as a button that floats directly in the middle of the screen.

I understand that to change the resolution of a window you recall .Create with the new resolution. This causes everything drawn to the screen to remain in the same place without scaling. However, GUI elements will remain in the same position when they need to sort of expand to there original position (for example, something more to the left would be further to the left if the resolution increased, or something to the right would be further from the right if the resolution decreased).

I figured each element could just have it's own code to reposition it using the original arithmetic to set its position. However, is there no way of making all elements complete this task in the same way?

As well as this when the window is manually resized, via dragging the corners or maximising the screen, how does one stop the gui elements from resizing but keep them in the same relative position (as described above)?

Thanks for any help, I really can't wrap my head around this.

[Ceylo]

These are resizing and repositioning rules you have to define for your widgets. You can notify your widgets when the window size or resolution changed.

And if your GUI is well designed, especially with a widget tree (I mean widgets being able to contain other widgets), you have at most only 4 widgets that have to care about the repositioning, one for each border or your screen. And each of these border widgets would contains your other GUI objects, automatically repositioned according to the position of their parent widget.

[Elffus]

So if I created a button at the bottom centre of a screen sized 800 x 600 and resized it to 1680 x 1050 how would the button know where to move to?

I presume I'd need to create some kind of GUI co-ordinates and use them instead of pixel co-ordinates, to that the button knows where to re-position itself?

I'm trying to create a GUI base that uses Lua & xml. An example would be the WoW UI Interface. When you change your resolution the elements automatically stick to where they were created.

Thanks for your help.

[Ceylo]

The button can move or stay at the same place depending on the resizing rules you applied to it. You can't have one general moving rule for that. You may want your widget to stay at 100 pixels from the right border, or from the left border, etc. You have to define these rules.

[Elffus]

On the topic of defining rules how would you recommend approaching the task? Would a parameter saying whether the passed co-ords are coming from the top left, top right, bottom left, bottom right or centre be effective?

Thanks again for your help!

[Ceylo]

I can't give you a general solution but the Cocoa API does this by defining an autoresizing mask with some constants (View means Widget here):

NSViewNotSizable
The receiver cannot be resized.

NSViewMinXMargin
The left margin between the receiver and its superview is flexible.

NSViewWidthSizable
The receiver’s width is flexible.

NSViewMaxXMargin
The right margin between the receiver and its superview is flexible.

NSViewMinYMargin
The bottom margin between the receiver and its superview is flexible.

NSViewHeightSizable
The receiver’s height is flexible.

NSViewMaxYMargin
The top margin between the receiver and its superview is flexible.

Then you can configure your widget using something like widget.SetAutoresizingMask(NSViewNotSizable | NSViewMinXMargin | NSViewMaxYMargin). The effect here is not to resize the widget and move it according to the bottom and right border of its parent widget.

[Elffus]

Thanks a lot, that really helps!

Start---->Run--->regedit

Open:
My Computer--->HKEY_CURRENT_CONFIG--->System--->CurrentControlSet--->Control--->VIDEO--->(expand all until
you see 'Monitor')

Locate:
Name Type Data

DefaultSetting.XResolution REG_DWORD 0x00000400 (1024)
DefaultSetting.YResolution REG_DWORD 0x00000300 (768)


Explanation: The data is stored as a hex value. 0x00000400 = 1024(base 10/decimal)
0x00000300 = 768 (base 10/decimal)

To change the default resolution:

1) Alternate-click DefaultSetting.XResolution
2) Click Modify
3) In the window that opens, change the 400 to 320 [which is equal to 800 in base 10]
4) Click ok.

Cegonsoft
_________________________
Cegonsoft foundation