Elements

Elements are defined inside xml files like ".xeyegui" for Layouts or ".beyegui" for Bricks. All elements can have following attributes:

Attribute	Type	Description
id	string	Unique id to fetch element from C++ side
style	string	Name of style used for this element and its children
relativescale	percent	Relative scaling of element
border	percent	Space between this element and border of provided space

Additional attributes are listed for each element below. Another way to create elements is to call a replacement by id function of the interface. Those calls are straightforward and are not described here in more detail.

Blank

Placeholder element which is created when a grid cell is undefined or could be used by one if it should be replaced by another element or brick at runtime.

Example:

<blank id="placeholder"></blank>

Picture

Simple element to display images in the layout.

Attribute	Type	Description
src	string	Relative path to displayed image (png or svg) like "Images/Lena.png"
alignment	string	Original or stretched

Example:

<picture id="portrait" alignment="stretched" src="Images/Lena.png"></picture>

Block

Block of solid color. Using background color from chosen style, please take a look at Styling for more details. With default styling, a block is invisible.

Example:

<block style="blocky"></block>

TextBlock

Block to display text. Content can be directly defined in an attribute or a key is used, that maps to a localization entry in the used localization file. Take a look at Localization.

Attribute	Type	Description
innerborder	percent	Space between text block border and the text
fontsize	string	Medium, tall and small are available
alignment	string	Left, right, center or justify
verticalalignment	string	Top, center or bottom
content	string	UTF-8 string as fallback content when key does not help
key	string	Key searched in localization file to replace fallback content with its entry

Example:

<textblock alignment="center" verticalalignment="center" fontsize="small" content="Lorem ipsum"></textblock>

Grid

Structure to place multiple elements inside a frame. Cells are defined by rows and columns sized using relative scales in percent of available space. Each row can have free count of columns. Size attributes per row and columns are mandatory and must sum to 100% for each row's columns and for the rows itself.

Example:

<grid>
  <row size="40%">
    <column size="100%">
      <block style="red"></block>
    </column>
  </row>
  <row size="60%">
    <column size="100%">
      <block style="blue"></block>
    </column>
  </row>
</grid>

Stack

Structure to stack free number of elements in one row. Orientation of stack is determined automatically to make use of most available space.

Attribute	Type	Description
innerborder	percent	Space between stack border and stacked elements
relativescaling	string	mainaxis limits influence of relative scaling only to the main axis of the stack, bothaxes let it impact both dimensions
alignment	string	fill, center, head or tail are available
padding	percent	Usage of available space as padding between stacked elements
separator	percent	Usage of available space as visible separator between stacked elements

Example:

<stack alignment="center">
  <circlebutton></circlebutton>
  <circlebutton></circlebutton>
  <picture src="Images/Dog.png"></picture>
</stack>

Interactive Elements

Elements which react to input and which can notify listeners are called interactive elements. For more detail about notifications, take a look at Notifications.

Sensor

Interactive element which is penetrated when the mouse or the gaze is upon it.

Attribute	Type	Description
icon	string	Relative path to displayed icon (png or svg) like "Icons/Arrow.svg"

Example:

<sensor id="scroll_up"></sensor>

CircleButton

Button in shape of a circle.

Attribute	Type	Description
icon	string	Relative path to displayed icon (png or svg) like "Icons/Arrow.svg"
switch	bool	True if button should be a switch or false if button should go up by itself

Example:

<circlebutton id="settings"></circlebutton >

BoxButton

Button in shape of a box.

Attribute	Type	Description
icon	string	Relative path to displayed icon (png or svg) like "Icons/Arrow.svg"
switch	bool	True if button should be a switch or false if button should go up by itself

Example:

<boxbutton id="mode" switch="true"></boxbutton >

DropButton

Box button which summons drop down menu when pressed. Drop down menu is defined by single inner element.

Attribute	Type	Description
icon	string	Relative path to displayed icon (png or svg) like "Icons/Arrow.svg"
space	percent	Usage of available space of inner element in frame

Example:

<dropbutton space="50%">
  <circlebutton></circlebutton>
</dropbutton>