-
Notifications
You must be signed in to change notification settings - Fork 7
Markup
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, 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.
<Graph Height="{bar_height / 2 - v_padding}" />
<Bar Visible="{bar_height > 20}" />
<Row ctx:txt_width="50">
...
<Text Width="{txt_width}">Part 1</Text>
<Icon>-</Icon>
<Text Width="{txt_width}">Part 2</Text>
</Row>
<ModuleRow ctx:accent_color="#ff0000">
<DateTime />
</ModuleRow>
Display text
Example: <Text>Hello World!</Text>
-
Font
: (string): A system font name, orbase64:<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
Same as text but with default values reading from {icon_*}
variables
Display an image
Example: <Image Path="icon.png" Width="25" Height="25" />
-
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
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>
-
Width
: (int): Default: Child's width -
Height
: (int): Default: Child's height -
Color
: (color): Color of the rectangle. Required
A progress bar
Example: <Bar Width="100" Height="15" Radius="2" FgColor="{accent_color}" BgColor="{neutral_color}" Value="0.5" />
-
Value
: (float:0.0
to1.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
A bar graph
Example: <Graph Color="{neutral_color}" Width="100" Height="{bar_height}" Values="0.5,0.8,1" />
-
Data
: (float list:0.0
to1.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
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>
-
VAlign
: (enum:top
/middle
/bottom
): Vertical align, only useful whenHeight
is set. Default:middle
-
HAlign
: (enum:left
/center
/right
): Horizontal align, only useful whenWidth
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
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 toVisible="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>
-
Align
: (enum:left
/center
/right
): How to align children with respect to the widest one. Default:center
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 toVisible="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>
-
Align
: (enum:top
/middle
/right
): How to align children with respect to the tallest one. Default:middle
Arrange children on top of one another
Example: <Layers><Image Path="background.png"><Text>Hello</Text></Layers>
-
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
Repeat its child to cover an area.
-
Width
: (int): Required -
Height
: (int): Required