Skip to content

Markup

Jump to bottom
Mathilde Gilles edited this page Jul 8, 2020 · 10 revisions

bar3x Uses a markup language base on XML to describe its UI. The language is kept intentionally simple, with each element having a specific purpose.

Variables

Variables, as well as basic operations, can be used as elements properties or content. To use such expressions, surround them by curly braces. This is useful to adapt modules and themes to user config.

Note that custom variables can be added to the config and used in the markup so that theme creators can give additional switches and knobs to users using their themes.

Variables can also be declared, overridden per element and their children, allowing to change aspects of specific parts of the bar.

Examples

Variable and mathematical operations

<Graph Height="{bar_height / 2 - v_padding}" />

Conditinal

<Bar Visible="{bar_height > 20}" />

New local variable

<Row ctx:txt_width="50">
  ...
  <Text Width="{txt_width}">Part 1</Text>
  <Icon>-</Icon>
  <Text Width="{txt_width}">Part 2</Text>
</Row>

Override variable locally

<ModuleRow ctx:accent_color="#ff0000">
  <DateTime />
</ModuleRow>

Elements

Text

Display text

Example: <Text>Hello World!</Text>

Parameters

  • Font: (string): A system font name, or base64:<base64 encoded ttf> Default: {text_font}
  • FontSize: (float): Default: {text_font_size}
  • Color: (color): Default: {text_color}
  • MaxWidth: (int): Shorten the text with an "…" to fit value. Default: Unset

Icon

Same as text but with default values reading from {icon_*} variables

Image

Display an image

Example: <Image Path="icon.png" Width="25" Height="25" />

Parameters

  • Path: (string): Path to the image
  • Image: (object): Image object, used internally
  • Width: (int): Resize the image to this width. Default: Source image width
  • Height: (int): Resize the image to this heigh. Default: Source image height

Rect

Display a solid color rectangle. Can accept a single child.

Example: <Rect Width="10" Heigh="10" Color="{neutral_color}" />

With a child:

<Rect Color="{neutral_color}">
  <Sizer Height="{bar_height - v_padding * 2}" PaddingLeft="{h_padding}" PaddingRight="{h_padding}">
    <Text>Hello !</Text>
  </Sizer>
</Rect>

Parameters

  • Width: (int): Default: Child's width
  • Height: (int): Default: Child's height
  • Color: (color): Color of the rectangle. Required

Bar

A progress bar

Example: <Bar Width="100" Height="15" Radius="2" FgColor="{accent_color}" BgColor="{neutral_color}" Value="0.5" />

Parameters

  • Value: (float: 0.0 to 1.0): How much to fill the bar. Default: 0
  • Direction: (enum: bottom-top / left-right): Bar direction. Default: bottom-top
  • Width: (int): Required
  • Height: (int): Required
  • FgColor: (color): Color of the bar filled portion. Required
  • BgColor: (color): Color of the bar background portion. Required
  • Radius: (int): How much to "round" the corners. Default: 0

Graph

A bar graph

Example: <Graph Color="{neutral_color}" Width="100" Height="{bar_height}" Values="0.5,0.8,1" />

Parameters

  • Data: (float list: 0.0 to 1.0): Graph data points. Required
  • Direction: (enum: up / down): Graph direction. *Default: up
  • Width: (int): Required
  • Height: (int): Required
  • Color: (color): Color of the graph bars. Required

Sizer

Control the space taken, padding, and alignment of an element

Examples :

Reserve space for text and align it to the right :

<Sizer Width="60" HAlign="right">
  <Text MaxWidth="60">Hello</Text>
</Sizer>

Add padding around an icon :

<Sizer PaddingRight="{h_padding}">
  <Icon>{icons.chip}</Icon>
</Sizer>

Parameters

  • VAlign: (enum: top / middle / bottom): Vertical align, only useful when Height is set. Default: middle
  • HAlign: (enum: left / center / right): Horizontal align, only useful when Width is set. Default: center
  • Width: (int): Default: Child's width
  • Height: (int): Default: Child's height
  • Padding{Top,Right,Bottom,Left}: (int): Add space arround the child. Default: 0

Col

Arrange children in a column.

Makes available the following variables to its children :

  • index: The child index in the Col
  • visible_index: The child index in the Col, ignoring elements set to Visible="false"
  • is_first: true if first child in the Col
  • is_last: true if last child in the Col
  • is_first_visible: true if first visible child in the Col
  • is_last_visible: true if last visible child in the Col

Example: <Col><Image ...><Text ...></Col>

Parameters

  • Align: (enum: left / center / right): How to align children with respect to the widest one. Default: center

Row

Arrange children in a row.

Makes available the following variables to its children :

  • index: The child index in the Row
  • visible_index: The child index in the Row, ignoring elements set to Visible="false"
  • is_first: true if first child in the Row
  • is_last: true if last child in the Row
  • is_first_visible: true if first visible child in the Row
  • is_last_visible: true if last visible child in the Row

Example: <Row><Image ...><Text ...></Row>

Parameters

  • Align: (enum: top / middle / right): How to align children with respect to the tallest one. Default: middle

Layers

Arrange children on top of one another

Example: <Layers><Image Path="background.png"><Text>Hello</Text></Layers>

Parameters

  • HAlign: (enum: left / center / right): How to align children with respect to the widest one. Default: center
  • VAlign: (enum: top / middle / right): How to align children with respect to the tallest one. Default: middle

Pattern

Repeat its child to cover an area.

Parameters

  • Width: (int): Required
  • Height: (int): Required
Clone this wiki locally