Position

Positioning and sizing

To define the position of an object you need to set two things: the position and the size. A position is not just a pixel value, but can be of a certain type like fc, dp, uiz_center or uiz_fill. After selecting a position, you can set a size which can also have a type like px, fc or dp. What these types mean is defined below. Note that for some types of position, the size cannot be changed. For example, if you use a position called "uiz_fill" then the size is going to fill up the screen (or the parent).

To set the position, you can either set some variables, or you can use functions to set those variables. (The latter is recommended as it leads to cleaner code and has GM autocomplete support when writing code.)

Position variables

posinframex: Defines the horizontal position type of an object. Scroll down for position constants.
posinframey: Defines the vertical position type of an object. Scroll down for position constants.
posvalx: A number defining the horizontal position of the object. What this means exactly (if it means anything at all) depends on the used posinframex value.
posvaly: A number defining the vertical position of the object. What this means exactly (if it means anything at all) depends on the used posinframey value.
posvalwtype: What type of width the object should have. May not be necessary to set for some posinframex values. Scroll down for size constants.
posvalytype: What type of height the object should have. May not be necessary to set for some posinframey values. Scroll down for size constants.
posvalw: A number defining the width of the object. What this means exactly (if it means anything at all) depends on the used posvalwtype value.
posvalh: A number defining the width of the object. What this means exactly (if it means anything at all) depends on the used posvalhtype value.
setpointx: Defines how a object is places around it's position. By defining a position with posinframex and posvalx, there are multiple ways to map that point onto the actual object. Does the position refer to the left side of the object? The middle? Or the right? You can set this with setpointx. By default this is set to uiz_auto, in which case this value is automatically picked depending on posinframex. You can set this manually to uiz_left, uiz_middle or uiz_right.
setpointy: Defines how a object is places around it's position. By defining a position with posinframey and posvaly, there are multiple ways to map that point onto the actual object. Does the position refer to the top side of the object? The middle? Or the bottom? You can set this with setpointy. By default this is set to uiz_auto, in which case this value is automatically picked depending on posinframex. You can set this manually to uiz_top, uiz_middle or uiz_bottom.

Positioning

To position your object you can use these functions:

uiz_position(instanceid, posX, posXType, posY, posYType): Sets the position of an object in both the x and y direction.
- instanceid: The id of any created uiZ object that you want to position.
- posX: A number defining the horizontal position of the object. What this means exactly (if it means anything at all) depends on the used posinframex value.
- posXType: Defines the horizontal position type of an object. Scroll down for position constants.
- posY: A number defining the vertical position of the object. What this means exactly (if it means anything at all) depends on the used posinframey value.
- posYType: Defines the vertical position type of an object. Scroll down for position constants.
uiz_position_t(instanceid, posXType, posYType): Sets the position of an object in both the x and y direction but leaves out the posX and posY arguments. This is useful if you want to use constants like uiz_fill, which ignore this value.
- instanceid: The id of any created uiZ object that you want to position.
- posXType: Defines the horizontal position type of an object. Scroll down for position constants.
- posYType: Defines the vertical position type of an object. Scroll down for position constants.
uiz_position_x(instanceid, posX, posXType, posY, posYType): Sets the position of an object in the x direction.
- instanceid: The id of any created uiZ object that you want to position.
- posX: A number defining the horizontal position of the object. What this means exactly (if it means anything at all) depends on the used posinframex value.
- posXType: Defines the horizontal position type of an object. Scroll down for position constants.
uiz_position_y(instanceid, posX, posXType, posY, posYType): Sets the position of an object in the y direction.
- instanceid: The id of any created uiZ object that you want to position.
- posY: A number defining the vertical position of the object. What this means exactly (if it means anything at all) depends on the used posinframey value.
- posYType: Defines the vertical position type of an object. Scroll down for position constants.

Positioning constants

Variable Type	Default "set point"	uses position variables	uses size variables	Explanation
uiz_snapleft	uiz_left	no	yes	Places the object on the left side of the parent (or the screen, if the parent is not set). Only has effect on the x coordinates. NOT the same as uiz_left
uiz_snapright	uiz_right	no	yes	Places the object on the right side of the parent (or the screen, if the parent is not set). Only has effect on the x coordinates. NOT the same as uiz_right
uiz_snaptop	uiz_top	no	yes	Places the object on the top side of the parent (or the screen, if the parent is not set). Only has effect on the y coordinates. NOT the same as uiz_top
uiz_snapbottom	uiz_bottom	no	yes	Places the object on the bottom side of the parent (or the screen, if the parent is not set). Only has effect on the y coordinates. NOT the same as uiz_bottom
uiz_center	uiz_middle, uiz_middle	no	yes	Places the object in the middle of the parent (or the screen, if the parent is not set). NOT the same as uiz_middle
uiz_fill	setpoint has no effect on uiz_fill	no	no	Fills the object in parent (or the screen, if the parent is not set). The object will have the same size as the inner boundaries of the parent.
px	uiz_left, uiz_top	yes	yes	Places the object an amount of pixels from the left or top edge of the parent. Stands for "pixel". A value of 100 px will mean the position will be 100 pixels to the right from the left/top side of the parent. A value of 0 px will mean the position will be on the left/top side of the parent.
fc	uiz_left, uiz_top	yes	yes	Places the object relative to the size of the parent. Stands for "factor". The value is calculated like so: position = (parent inner width or height)*(given fc value). When this is used for horizontal positioning, the width is used. If this is used for vertical position, the height is used. A value of 1 fc will mean the position will be on the right/bottom side of the parent A value of 0 fc will mean the position will be on the left/top side of the parent. A value of 0.5 fc will mean the position will be in the middle of the parent. Must be 0 or higher, and 1 or lower. (0 <= posval <= 1)
fcx	uiz_left, uiz_top	yes	yes	Places the object relative to the width of the parent. Stands for "factor-x". The value is calculated like so: position = (parent inner width)(given fc value). The difference between the normal fc and fcx is that fcx always* uses the width of the parent, even when selecting the height. What you can do with this for example is making an object with a certain ratio. When using this value for horizontal positioning, it is functionally the same as the normal fc type.
fcy	uiz_left, uiz_top	yes	yes	Places the object relative to the height of the parent. Stands for "factor-y". The value is calculated like so: position = (parent inner height)(given fc value). The difference between the normal fc and fcx is that fcx always* uses the height of the parent, even when selecting the width. What you can do with this for example is making an object with a certain ratio. When using this value for horizontal positioning, it is functionally the same as the normal fc type.
fcm	uiz_left, uiz_top	yes	yes	Places the object relative to the width and height of the parent. Stands for "factor-mean". About the same as fc, but takes the average between the width and height of the object's parent. Must be 0 or higher, and 1 or lower. (0 <= posval <= 1) Calculated using: "x or y = mean((given fcm value) * (parent inner width), (given fcm value) * (parent inner height));"
dp	uiz_left, uiz_top	yes	yes	Places the object relative to the display density. Short for "density pixels". 2 displays may both have a resolution of 1920x1080, but one may be 5 inch in diameter and the other 27 inch. Dp tries to make distances the same as they appear in the physical world. One dp should roughly equal one inch in real life This is very useful for making scalable, mobile-friendly and flexible ui that looks good on every type of display. It must be noted that not every dp value is reported properly, on some platforms the dpi might be unknown and set to something default. Other times the user may have changed their device's settings in such a way that the dp value is also reported incorrectly. This shouldn't scare you from using dp though, as it is a good approximation in the vast amount of cases.
uiz_static	uiz_left, uiz_top	no	yes	Doesn't do anything, allows you to specify your own x and y values without uiZ overwriting them. This mode is quite a technical one and requires more in depth knowledge before being usable. In general, you should never have to use this mode unless you are putting this framework to it's limits. Once this mode is selected, manually set the x and y variables (yes the gm built in ones) to position your object inside the parent.
Variable Type	Default "set point"	uses position variables	uses size variables	Explanation

Sizing

Once you have set a position for your object, it is time to give it a size. However, for some types of position the sizing is disabled. (Consider uiz_fill for example). To see if you need to size your object, check if your positioning mode has a "yes" in the "uses size variables" column in the "positioning constants" table above.

The following functions are available to size your object:

uiz_size(instanceid, width, widthType, height, heightType): Sets the width and height of an object.
- instanceid: The id of any created uiZ object that you want to size.
- width: A number defining the width of the object. What this means exactly depends on the used widthType value.
- widthType: Defines the horizontal size type of an object. Scroll down for sizing constants.
- height: A number defining the width of the object. What this means exactly depends on the used widthType value.
- heightType: Defines the horizontal size type of an object. Scroll down for sizing constants.
uiz_size_w(instanceid, width, widthType): Sets the width of an object.
- instanceid: The id of any created uiZ object that you want to size.
- width: A number defining the width of the object. What this means exactly depends on the used widthType value.
- widthType: Defines the horizontal size type of an object. Scroll down for sizing constants.
uiz_size_h(instanceid, height, heightType): Sets the height of an object.
- instanceid: The id of any created uiZ object that you want to size.
- height: A number defining the width of the object. What this means exactly depends on the used widthType value.
- heightType: Defines the horizontal size type of an object. Scroll down for sizing constants.

Sizing constants

Variable Type	Explanation
px	Set the size of the object to an amount in pixels. Stands for "pixel". A value of 100 px will mean that the object will be 100px wide. A value of 10 px will mean the size will be 10.
pxmin	Set the size of the object to the size of its parent minus an amount in pixels. Stands for "pixel minus". A value of 0 px will mean the size will be as big as its parent. A value of 100 px will mean the size will 100 pixels smaller than its parent. Must be 0 or higher and lower that the parents width/height. (0< posval <= parent width/height)
dp	Sizes the object relative to the display density. Short for "density pixels". 2 displays may both have a resolution of 1920x1080, but one may be 5 inch in diameter and the other 27 inch. Dp tries to make distances the same as they appear in the physical world. One dp should roughly equal one inch in real life This is very useful for making scalable, mobile-friendly and flexible ui that looks good on every type of display. It must be noted that not every dp value is reported properly, on some platforms the dpi might be unknown and set to something default. Other times the user may have changed their device's settings in such a way that the dp value is also reported incorrectly. This shouldn't scare you from using dp though, as it is a good approximation in the vast amount of cases.
dpmin	Set the size of the object to the size of its parent minus a relative value to the display density. Short for "density pixels minus". A value of 0 dp will mean the size will be as big as its parent. A value of 10 dp will mean the size will roughly 10 inches smaller than its parent. See "dp" for more information.
fc	Set the size of the object relative to the size of the parent. Stands for "factor". The size is calculated like so: position = (parent inner width or height)*(given fc value). When this is used for horizontal positioning, the width is used. If this is used for vertical position, the height is used. A value of 1 fc will mean the object will be as big as its parent. A value of 0.5 fc will mean the object will be half as big as its parent. Must be 0 or higher, and 1 or lower. (0 <= posval <= 1)
fcx	Sets the size of the object relative to the width of the parent. Stands for "factor-x". About the same as fc, but forces the use of the width of the object. The value is calculated like so: position = (parent inner width)(given fc value). The difference between the normal fc and fcx is that fcx always* uses the width of the parent, even when selecting the height. What you can do with this for example is making an object with a certain ratio. When using this value for horizontal positioning, it is functionally the same as the normal fc type.
fcy	Sets the size of the object relative to the height of the parent. Stands for "factor-y". About the same as fc, but forces the use of the height of the object. The value is calculated like so: position = (parent inner height)(given fc value). The difference between the normal fc and fcy is that fcy always* uses the height of the parent, even when selecting the width. What you can do with this for example is making an object with a certain ratio. When using this value for vertical positioning, it is functionally the same as the normal fc type.
fcm	Sets the size of the object relative to the width and height of the parent. Stands for "factor-mean". About the same as fc, but takes the average between the width and height of the object's parent. Must be 0 or higher, and 1 or lower. (0 <= posval <= 1) Calculated using: "width or height = mean((given fcm value) * (parent inner width), (given fcm value) * (parent inner height));"
fcmin	Set the size of the object relative to the width and height of the parent. Stands for "factor-minimum". This checks whether the parent's inner width or height is the smallest, and uses that value to perform a factor operation. Either fcx or fcy is executed (fcx when the parent's inner width is the smallest or fcy when the parent's inner height is the smallest).
fcmax	Set the size of the object relative to the width and height of the parent. Stands for "factor-maximum". This checks whether the parent's inner width or height is the largest, and uses that value to perform a factor operation. Either fcx or fcy is executed (fcx when the parent's inner width is the largest or fcy when the parent's inner height is the largest).
Variable Type	Explanation

set point

When choosing a position (let's consider x = 100px and y = 100px), you define a single point. However, the object you are trying to place is not a single point (unless it's size is 1x1px of course). Let's say you want a button at (100px, 100px) then what does that actually mean? Do you want the position to define where the top-left of the button should go? Do you want to define where the middle of the button should go? UiZ has something it calls a "set point". This is a point on your object which is mapped to the chosen position.

Normally, you don't actually have to worry about the set point. By default, it is set to uiz_auto meaning that the position type defines what set point to use. Look at the "Default set point" column in the "positioning constants" table above.

The following usable constants are available:

Constant	Applicable to	Internal value	Explanation
uiz_auto	x, y	-1	The mode chosen is defined by the position type. Look at the "Default set point" column in the "positioning constants" table above.
uiz_middle	x, y	0.5	The center of your object is mapped to the position of your object. Not to be confused with uiz_center!
uiz_left	x	0	The left edge of your object is mapped to the horizontal position of your object.
uiz_right	x	1	The right edge of your object is mapped to the horizontal position of your object.
uiz_top	y	0	The top edge of your object is mapped to the vertical position of your object.
uiz_bottom	y	1	The bottom edge of your object is mapped to the vertical position of your object.