ID:1494824
 
(See the best response by Pirion.)
Problem description:
Hello guys, I have just implemented a full screen system to my project, it's a mixture of

MDC's and Leur's

Anyway, the system itself works fine and all but how can I go about positioning my interface elements based on a player's resolution instead of a fixed value? because right now the whole thing is a mess, it works perfectly on my default resolution but when I change the resolution the positioning of my interface elements are extremely off.

Is there anyway to position interface elements as if they were objects so I could do something simple like:

Chat.screen_loc = "SOUTH-2,EAST+4"


-Thanks
Using Anchors on the interface would allow you to either lock them, or expand them. If you want to customize them more, then you'll want to find the screen size and position them as needed using winset.
I tried using the anchors but didn't see any difference. I went to my interface and clicked edit on one of the windows I want the behavior to apply to. I changed the layout controls to "Relative to Window" and Auto-Anchor controls. I then proceeded to compile and run(changing my resolution before so) and saw no differences. Am I following your steps correctly?
Your going to have to identify your monitor's resolution. This can be done most effectively with javascript.
In response to FishMan123
FishMan123 wrote:
I tried using the anchors but didn't see any difference. I went to my interface and clicked edit on one of the windows I want the behavior to apply to. I changed the layout controls to "Relative to Window" and Auto-Anchor controls. I then proceeded to compile and run(changing my resolution before so) and saw no differences. Am I following your steps correctly?

Can you provide before/after image?
@Jittai, the full screen system I am using retrieves the user's monitor resolution

@Pirion

This is how my screen looks when I have my default resolution:

http://puu.sh/6SQfE.png

Now this is how it looks when I change to something that is not my default, keep in mind this is WITH anchors.

http://puu.sh/6SQvX.png

As you can see it is not properly set up as the input is now missing.

Is this a child element with all four anchors set? It should only have bottom and right anchors set for a lock to bottom-right effect.
No, my chat is a separate window which I display to the player upon login (At the same time of fullscreen) I also change it's location to the bottom right a mili-sec after the player has gone fullscreen.

I would like to keep it this way as childs do not support transparency. Which is something I absolutely want
Would you happen to have a test dmb or some code to show?
Sure. You can test it out from my game itself:
https://www.dropbox.com/s/1dqyski42ihol9f/ Pirates%20Graveyard.zip
In response to FishMan123
FishMan123 wrote:
No, my chat is a separate window which I display to the player upon login (At the same time of fullscreen) I also change it's location to the bottom right a mili-sec after the player has gone fullscreen.

I would like to keep it this way as childs do not support transparency. Which is something I absolutely want

It doesn't look like you're using the results of the resolution to set the position. You need to do this.
That's the whole point of this post. I have no idea how to do that.
Best response
Doh!

So, the concept is to take that Length x Width, and convert it into two variables. Once you have these, then you'll want to subtract the element size from them - and set the element position to the results.

//This is for snapping to just one side. It splits the winget at , and returns an array of 0/1.
proc/split(textvalue,sep)
var/sepPos = findtext(textvalue,sep,1,0)
if(!sepPos) return
var/pre = copytext(textvalue,1,sepPos)
var/post= copytext(textvalue,sepPos+1,0)
. = list(pre,post)

//this move the elements to their positions.
mob/proc/SnapElementTop(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
var/list/elements=split(winget(src,ElementName,"pos"),",")
winset(src,ElementName,text("pos=[]x[]",elements[1],0)) //0 is top, ResolutionHeight is bottom. Top & Left are always 0. Right and Bottom are Resolution Width/Length - Window Width/Length

//More common examples:
mob/proc/SnapElementBottom(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
var/list/elements=split(winget(src,ElementName,"pos"),",")
winset(src,ElementName,text("pos=[]x[]",elements[1],ResolutionHeight-ElementHeight))

mob/proc/SnapElementLeft(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
var/list/elements=split(winget(src,ElementName,"pos"),",")
winset(src,ElementName,text("pos=[]x[]",0,elements[2]))

mob/proc/SnapElementRight(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
var/list/elements=split(winget(src,ElementName,"pos"),",")
winset(src,ElementName,text("pos=[]x[]",ResolutionWidth-ElementWidth,elements[2]))

//Snapping to corners is better done by switching both at the same time. This ensure there aren't multiple flickers.
mob/proc/SnapElementTopLeft(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
winset(src,ElementName,text("pos=[]x[]",0,0))

mob/proc/SnapElementBottomLeft(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
winset(src,ElementName,text("pos=[]x[]",0,ResolutionHeight-ElementHeight))

mob/proc/SnapElementTopRight(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
winset(src,ElementName,text("pos=[]x[]",ResolutionWidth-ElementWidth,0))

//Finally, this is what you're trying to do here.
mob/proc/SnapElementBottomRight(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
winset(src,ElementName,text("pos=[]x[]",ResolutionWidth-ElementWidth,ResolutionHeight-ElementHeight))
Oh man, thank you so much for you're reply! you went all out :D! words can't express my gratitude. You have shown me all sorts of possibilities.. I can do so much stuff with all of this information!! once again thank you so much , Pirion!
Hmm another question: how would I go about aligning it at exactly the middle?
Center alignment of two discrete rectangles:

Inner rectangle is the item that will be positioned.
Outer rectangle is the rectangle Inner will be contained within.

The inner rectangle's x position is determined by the difference between the inner and outer rectangles' widths, while the inner rectangles y position is determined by the difference between the inner and outer rectangles' heights.

Therefore:

//iw,ih = inner width, inner height
//ow,oh = outer width, outer height
//ix,iy = inner x and y coordinates
//ox,oy = outer x and y coordinates

ix = (ow - iw) / 2
iy = (oh - ih) / 2
Alright, thanks Ter13!

Got it down with:

mob/proc/SnapToCenter(ElementName,ResolutionWidth,ResolutionHeight,ElementWidth,ElementHeight)
winset(src,ElementName,text("pos=[]x[]",(ResolutionWidth-ElementWidth)/2,(ResolutionHeight-ElementHeight)/ 2))