margins_and_boundaries

Margins and boundaries

This page talks about additional positioning parameters that change how an object is placed. It also gives some important technical background information. It is crucial to understand uiZ's parenting system to understand the information on this page.

Object boundaries

When you have positioned and sized an object, you give it it's outer boundaries. So when you put a button of 100px*100px at position (300px,50px) then it's outer boundaries are from: (300px,50px) to (400px,150px).

However, all objects also have inner boundaries. Those don't always affect the way an object looks, but they have effects on the positioning of any children placed in your object. Your children are always placed within the inner object boundaries. So if you object has an inner boundary of (310px,60px) to (390px,140px) and you place an object inside of it with a uiz_fill positioning type, the child's outer coordinates will be (310px,60px) to (390px,140px).

The outer coordinates of an object can always be accessed using the variables rx, ry, rlx and rly. These stand for "real x", "real y", "real last x" and "real last y". The rx and ry variables refer to the top-left point of the object while the rlx and rly variables refer to the bottom-right corner of your object. These variables are called "real" because they contain the actual pixel offset from the top/left of your window or display. (So not from the top/left of your parent.)

The inner coordinates of an object can always be accessed using the variables ix, iy, ilx and ily. These stand for "inner x", "inner y", "inner last x" and "inner last y". The ix and iy variables refer to the top-left point of the object while the ilx and ily variables refer to the bottom-right corner of your object.

Outer margins

An object can also have outer margins. These are margins that make the actual outline of an object smaller. If you position a button at (300px,50px), but apply a out margin to it, the object is going to get physically smaller. For a left margin of 10 and a top margin of 5 the real position will be (310px, 55px). The width of the object becomes smaller by subtracting the left and right margins. The height of the object becomes smaller by subtracting the top and bottom margins.

The outer margin can be set using these functions:

• uiz_margin(instanceid, left, right, top, bottom) Set the pixel margin on the outside of your object.
  • instanceid: The id of any created uiZ object.
  • left[0]: Amount of pixels the outer margin should have on the left side.
  • right[0]: Amount of pixels the outer margin should have on the right side.
  • top[0]: Amount of pixels the outer margin should have on the top side.
  • bottom[0]: Amount of pixels the outer margin should have on the bottom side.
• uiz_margin_left(instanceid, left[0]): Like uiz_margin, but only considers the left side. The other sides are not changed.
• uiz_margin_right(instanceid, right[0]): Like uiz_margin, but only considers the right side. The other sides are not changed.
• uiz_margin_top(instanceid, top[0]): Like uiz_margin, but only considers the top side. The other sides are not changed.
• uiz_margin_bottom(instanceid, bottom[0]): Like uiz_margin, but only considers the bottom side. The other sides are not changed.

Inner margin

The margin on the inside is defined by two things:

• The frame margin (by default 0)
• The background margin (by default 5 px)

In case of the frame margin, it can be set using

• uiz_margin_frame(instanceid, left, right, top, bottom): Set the pixel margin on the inside of your object.
  • instanceid: The id of any created uiZ object.
  • left[0]: Amount of pixels the inner margin should have on the left side.
  • right[0]: Amount of pixels the inner margin should have on the right side.
  • top[0]: Amount of pixels the inner margin should have on the top side.
  • bottom[0]: Amount of pixels the inner margin should have on the bottom side.
• uiz_margin_frame_left(instanceid, left[0]): Like uiz_margin_frame, but only considers the left side. The other sides are not changed.
• uiz_margin_frame_right(instanceid, right[0]): Like uiz_margin_frame, but only considers the right side. The other sides are not changed.
• uiz_margin_frame_top(instanceid, top[0]): Like uiz_margin_frame, but only considers the top side. The other sides are not changed.
• uiz_margin_frame_bottom(instanceid, bottom[0]): Like uiz_margin_frame, but only considers the bottom side. The other sides are not changed.

The background margin is single margin that will be added to every side of the inside of your object. However, this margin can be turned off if desired using this function:

• uiz_margin_useBackgroundMargins(instanceid, useBackgroundMargins):
  • instanceid: The id of any created uiZ object to modify.
  • useBackgroundMargins[true]: Add the background margin of this object to the inner margins of the object.

Enabled or disabled the use of background margins may not be directly visible on the object itself, but may nudge the children over by a few pixels.

add values

Inside of the uiZ engine there is the possibility to add a certain offset to every object in a parent. Internally, this is used for things like scrollable area's but you may be able to utilize this too. (Although you are not very likely to ever need this)

These variables can be set:

• addx: A value in pixels which defines how far objects within this object should be offset to the right. (Use negative values for an offset to the left)
• addy: A value in pixels which defines how far objects within this object should be offset to the bottom. (Use negative values for an offset to the top)

You can use these functions:

• uiz_add(instanceid, addX, addY):
  • instanceid: The id of any created uiZ object.
  • addX: A value in pixels which defines how far objects within this object should be offset to the right. (Use negative values for an offset to the left)
  • addY: A value in pixels which defines how far objects within this object should be offset to the bottom. (Use negative values for an offset to the top)
• uiz_addx(instanceid, addX):
  • instanceid: The id of any created uiZ object.
  • addX: A value in pixels which defines how far objects within this object should be offset to the right. (Use negative values for an offset to the left)
• uiz_addY(instanceid, addY):
  • instanceid: The id of any created uiZ object.
  • addY: A value in pixels which defines how far objects within this object should be offset to the bottom. (Use negative values for an offset to the top)