Skip to main content
Unlock powerful debugging and effortless query monitoring with Refine DevtoolsLearn More
RefineDocumentation
Version: 4.xx.xx

UI Component Tags Documentation

Each tag’s documentation is presented with an attribute table that details the required and optional attributes (including inherited base attributes), any default values or injected settings, and constraints such as allowed parent or child tags.

Common Base Attributes​

AttributeDescription
idUnique identifier for anchoring.
displayLayout mode; valid values: "block", "relative", "flex".
marginShorthand for all margins; supports CSS-like values.
margin-xHorizontal margins (left/right).
margin-yVertical margins (top/bottom).
margin-topTop margin.
margin-rightRight margin.
margin-bottomBottom margin.
margin-leftLeft margin.
paddingShorthand for all paddings; supports CSS-like values.
padding-xHorizontal padding (left/right).
padding-yVertical padding (top/bottom).
padding-topTop padding.
padding-rightRight padding.
padding-bottomBottom padding.
padding-leftLeft padding.
widthElement width; can be a number, "auto", "content", or a percentage (e.g., "50%").
heightElement height; can be a number, "auto", "content", or a percentage.
alignHorizontal alignment; valid values: "left", "center", "right".
vertical-alignVertical alignment; valid values: "top", "center", "bottom".
xX-coordinate for relative positioning.
yY-coordinate for relative positioning.
spacingGap between items in flex layouts (number).
justify-contentFlex layout horizontal distribution; valid values: "flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly".
align-itemsFlex layout vertical alignment per line; valid values: "flex-start", "flex-end", "center", "stretch".
nameOptional element name for setting window names/identifiers.

Display Flex - Deep Dive​

Here we will cover more in details how display=flex works.

The main attribute you can use with display=flex:

  • justify-content which controls horizontal positioning.
  • align-items which controls the vertical alignment of elements in each row.
justify-content Examples
justify-content=<c color="wikititle">flex-start</c>
<inline width="auto" justify-content="flex-start">
    {% for i in range(5) %}
        <thin-board width="30" height="{{ 10 * (i+1) }}" />
    {% endfor %}
</inline>

<spacer></spacer>
justify-content=<c color="wikititle">flex-end</c>
<inline width="auto" justify-content="flex-end">
    {% for i in range(5) %}
        <thin-board width="30" height="{{ 10 * (i+1) }}" />
    {% endfor %}
</inline>

<spacer></spacer>
justify-content=<c color="wikititle">center</c>
<inline width="auto" justify-content="center">
    {% for i in range(5) %}
        <thin-board width="30" height="{{ 10 * (i+1) }}" />
    {% endfor %}
</inline>

<spacer></spacer>
justify-content=<c color="wikititle">space-between</c>
<inline width="auto" justify-content="space-between">
    {% for i in range(5) %}
        <thin-board width="30" height="{{ 10 * (i+1) }}" />
    {% endfor %}
</inline>

<spacer></spacer>
justify-content=<c color="wikititle">space-evenly</c>
<inline width="auto" justify-content="space-evenly">
    {% for i in range(5) %}
        <thin-board width="30" height="{{ 10 * (i+1) }}" />
    {% endfor %}
</inline>

<spacer></spacer>
justify-content=<c color="wikititle">space-around</c>
<inline width="auto" justify-content="space-around">
    {% for i in range(5) %}
        <thin-board width="30" height="{{ 10 * (i+1) }}" />
    {% endfor %}
</inline>

image

align-items Examples
<inline>
    align-items=<c color="wikititle">flex-start</c>
    <inline width="auto" align-items="flex-start">
        {% for i in range(5) %}
            <thin-board width="30" height="{{ 32 + 10 * (i) }}" />
        {% endfor %}
    </inline>

    <spacer></spacer>
    align-items=<c color="wikititle">flex-end</c>
    <inline width="auto" align-items="flex-end">
        {% for i in range(5) %}
            <thin-board width="30" height="{{ 32 + 10 * (i) }}" />
        {% endfor %}
    </inline>

    <spacer></spacer>
    align-items=<c color="wikititle">center</c>
    <inline width="auto" align-items="center">
        {% for i in range(5) %}
            <thin-board width="30" height="{{ 32 + 10 * (i) }}" />
        {% endfor %}
    </inline>

    <spacer></spacer>
    align-items=<c color="wikititle">stretch</c>
    <inline width="auto" align-items="stretch">
        {% for i in range(5) %}
            <thin-board width="30" height="{{ 32 + 10 * (i) }}" />
        {% endfor %}
    </inline>
</inline>

image

div​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
scrollbar-gapOptional—Used for the scrollable peek window when a fixed height is applied and content overflows.
reactiveOptional—Comma-separated list of variable names this zone watches. When present, id attribute is required. Enables reactive updates - only this zone re-renders when watched variables change.

When a div has a fixed height (i.e. its height is not set to "content") and its content exceeds that height, a scrollable peek window is created for all rows after the first one.

Reactive Zones​

A div can be marked as a reactive zone by adding the reactive attribute along with a required id attribute. This enables automatic, efficient updates when specific variables change, without re-rendering the entire page.

How it works:

  • List the variable names (comma-separated) that this zone depends on in the reactive attribute
  • When any of those variables change via SetVar() or SetVars(), only this zone re-renders
  • Scroll position is preserved automatically
  • 10-100x faster than full page reload for small updates

Example:

<div id="progress-zone" reactive="mh_1_done,mh_1_need">
    {% set mh_1_done = fun.getv('mh_1_done', 0) %}
    {% set mh_1_need = fun.getv('mh_1_need', 0) %}

    Progress: {{ mh_1_done }}/{{ mh_1_need }}
    <progress max="{{ mh_1_need }}" count="{{ mh_1_done }}" />
</div>

Python usage:

# Update single variable - only the reactive zone updates
loader.SetVar("mh_1_done", 15)

# Update multiple variables - template rendered once, all affected zones update
loader.SetVars({
    "mh_1_done": 15,
    "mh_1_need": 20
})

Requirements:

  • reactive attribute must have a corresponding id attribute
  • Variables listed in reactive should be used within the zone's template
  • Zone content is rebuilt when watched variables change

main​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
scrollbar-gapOptional—As in div.
heightAuto-set"auto"Forces auto height.
widthAuto-set"auto"Forces auto width.
idAuto-set"main"Sets the element’s identifier to "main".
paddingAuto-set5Default padding value is 5.

There must be exactly one main per page. It is used by UCHTML as reference to handle url location scroll. **If there is no main, Url location and Anchor href do not work.

lazy-div​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
scrollbar-gapOptional—As in div, used for scrollable peek window.
preloadOptional0Determines the number of child elements to preload; additional children are queued.

lazy-div is useful if we have a lot of similar content (like a grid of items, or monster cards) and we don't want to freeze the client by loading all in one way.

inline​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
scrollbar-gapOptional—Same as in div.
displayAuto-set"flex"Automatically set to "flex" to enable horizontal layout.

Shortcut for flex <div>.

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
widthAuto-set"auto"Sets width to auto.
vertical-alignAuto-set"bottom"Aligns the footer at the bottom.

Constraints:

  • Child Constraint: Must be a leaf element (no children allowed).
Code Example with scrollbar
<footer />

image

table​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
scrollbar-gapOptional—Provides extra gap for the peek window when height is fixed.

If the table has a fixed height and its content overflows, all rows after the first one are inserted in a scrollable peekwindow.

Constraints:

  • Allowed Children: Only <tr> elements.
Code Example without scrollbar
<table align="center" width="100%">
    <tr>
        <th width="20%">
            -
        </th>
        <th width="60%">
            -
        </th>
        <th width="20%">
            -
        </th>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
</table>

<table align="center" width="100%">
    <tr>
        <th width="100%">
        </th>
    </tr>
    <tr>
        <td width="25%">
        </td>
        <td width="25%">
        </td>
        <td width="25%">
        </td>
        <td width="25%">
        </td>
    </tr>
</table>

image

Code Example with scrollbar
<table align="center" width="100%" height="150">
    <tr>
        <th width="20%">
            -
        </th>
        <th width="60%">
            -
        </th>
        <th width="20%">
            -
        </th>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
    <tr>
        <td width="20%">
        </td>
        <td width="20%">
        </td>
        <td width="40%">
            <txt align="center" color="ffdac0a3">
            </txt>
        </td>
        <td width="20%">
        </td>
    </tr>
</table>

<table align="center" width="100%">
    <tr>
        <th width="100%">
        </th>
    </tr>
    <tr>
        <td width="25%">
        </td>
        <td width="25%">
        </td>
        <td width="25%">
        </td>
        <td width="25%">
        </td>
    </tr>
</table>

image

tr​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.

Constraints:

  • Parent Constraint: Must be a direct child of a <table>.
  • Allowed Children: Only <td> and <th> elements.

th​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
CAUTION

Parent Constraint: Must be placed inside a <tr>.

td​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
CAUTION

Parent Constraint: Must be placed inside a <tr>.

filter-group.buttons​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired buttons—Defines the filter group type.
defaultRequired—Specifies the default filter value. Must be one of the <filter> values
filter-targetRequired—Specifies the variable that the filter will set.
CAUTION

Allowed Children: Only <filter type="button"> and <filter type="dynamic-button">.

filter.button​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired button—Filter type; should match parent group.
filter-valueRequired—Value for filtering.
pathRequired—Path template for visual states.
tooltip-textOptional—Tooltip text for additional info.
CAUTION

Parent Constraint: Must be placed inside a <filter-group type=buttons>.

path is expected to be a parametrized path to the images used for normal, over and clicked state.
UCHTML will then substitute normal hover and selected to the parameter of the string.

Example:

path="d:/ymir work/ui/wiki/class_n_{}.tga"

become

d:/ymir work/ui/wiki/class_n_normal.tga
d:/ymir work/ui/wiki/class_n_hover.tga
d:/ymir work/ui/wiki/class_n_selected.tga

And each of the images need to exist in order to render the button.

Code Example
<filter-group display="flex" justify-content="space-evenly" type="buttons" default="packed_query:HELMETS_WARRIOR"
    width="auto" filter-target="#query:race">
    <filter type="button" path="d:/ymir work/ui/wiki/class_w_{}.tga" filter-value="packed_query:HELMETS_WARRIOR">
    </filter>
    <filter type="button" path="d:/ymir work/ui/wiki/class_n_{}.tga" filter-value="packed_query:HELMETS_ASSASSIN">
    </filter>
    <filter type="button" path="d:/ymir work/ui/wiki/class_su_{}.tga" filter-value="packed_query:HELMETS_SURA">
    </filter>
    <filter type="button" path="d:/ymir work/ui/wiki/class_s_{}.tga" filter-value="packed_query:HELMETS_SHAMAN">
    </filter>
</filter-group>

image

filter.dynamic-button​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired dynamic-button—Filter type; should match parent group.
filter-valueRequired—Value for filtering.
textRequired—Text displayed on the button.
tooltip-textOptional—Tooltip information.
CAUTION

Parent Constraint: Must be placed inside a <filter-group type=buttons>.

Code Example
<filter-group display="flex" justify-content="space-evenly" type="buttons" default="packed_query:HELMETS_WARRIOR"
    width="auto" filter-target="#query:race">
        <filter type="dynamic-button" height=25 width="70" text="foo" tooltip_text="foo" filter-value="foo"></filter>
        <filter type="dynamic-button" height=25 width="70" text="bar" tooltip_text="bar" filter-value="bar"></filter>
        <filter type="dynamic-button" height=25 width="70" text="check" tooltip_text="check" filter-value="check"></filter>
</filter-group>

image

filter-group.list​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired list—Defines the filter group type.
defaultRequired—Specifies the default filter value. Must be one of the <filter> values
filter-targetRequired—Specifies the variable that the filter will set.
CAUTION

Allowed Children: Only <filter type=item>.

Code Example
<filter-group type="tabs" filter-target="query:tab" width="auto" default="info">
    <filter type="tab" height="25" width="100" padding="5" filter-value="info">
        <txt color="wikititle" align="center">Foo</txt>
    </filter>
    <filter type="tab" height="25" width="100" padding="5" filter-value="up">
        <txt color="wikititle" align="center">Bar</txt>
    </filter>
</filter-group>

image

filter.item​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired item—Filter type identifier.
filter-valueRequired—Value associated with the filter item.
textRequired—Display text for the item.
tooltip-textOptional—Additional tooltip info.
CAUTION

Parent Constraint: Must be placed inside a <filter-group type=list>.

filter-group.tabs​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired tabs—Defines the filter group type.
defaultRequired—Specifies the default filter value. Must be one of the <filter> values
filter-targetRequired—Specifies the variable that the filter will set.
CAUTION

Allowed Children: Only <filter type=tab>.

Code Example
<filter-group type="tabs" filter-target="query:tab" width="auto" default="info">
    <filter type="tab" height="25" width="100" padding="5" filter-value="info">
        <txt color="wikititle" align="center">Foo</txt>
    </filter>
    <filter type="tab" height="25" width="100" padding="5" filter-value="up">
        <txt color="wikititle" align="center">Bar</txt>
    </filter>
</filter-group>

image

filter.tab​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
typeRequired tab—Filter type identifier.
filter-valueRequired—Value used for filtering.
heightRequired—Specifies the height of the tab.
CAUTION

Parent Constraint: Must be placed inside a <filter-group type=tabs>.

spacer​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
heightOptional10Default height is 10 if not provided.
widthAuto-set"auto"Width is automatically set to auto.
CAUTION

Should not contain any child elements.

divider​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptionalN/AInherits all common base attributes.
patternOptional—Path for the divider pattern; if not provided, a default pattern is used.
CAUTION

Should not have any child elements.

Code Example
<divider />

image

accordion​

AttributeRequirementDefaultConstraints/Notes
stateOptional—Identifier for accordion state.
textOptional—Header text.
iconOptional—Icon path if applicable.
Base AttributesOptional—Inherits all common base attributes.

Notes:
The accordion element manages a header and toggle state for showing/hiding content. Its header reserves space (with injected padding) to accommodate an icon and text.

Code Example
<accordion width="auto" text="bla" icon="d:/ymir work/ui/game/windows/money_icon.sub">
Hidden foo
</accordion>

image image

board​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
paddingAuto-set5Default padding is set to 5.
CAUTION

Minimum size is 64x64.

Code Example
<board width="100" height="100"></board>

image

thin-board​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
paddingAuto-set7Default padding is set to 7.
CAUTION

Minimum size is 32x32.

Code Example
<thin-board width="100" height="100"></thin-board>

image

h1​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
Code Example
<h1>foo</h1>

image

h2​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
patternOptional"d:/ymir work/ui/pattern/h1" (or overridden)Pattern for header row; can be customized.
Code Example
<h2>foo</h2>

image

h3​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
patternOptional"d:/ymir work/ui/quest_re/quest_list_line_small"Pattern for header; can be overridden.
pattern_spaceOptional60 (if not provided)Reserved space on the right for the pattern.
scrollbar-gapOptional—Used when a scrollable peek window is required.
Code Example
<h3>foo</h3>

image

Plain Text​

Text not enclosed in any tag counts as text.

txt​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
colorOptional—Text color; overrides the default font color if specified.
fontOptional—Font specification (e.g., "Tahoma:13" or "Tahoma:15b").
CAUTION

Allowed Children: Only the inline tags: c, hitem, hmob, hraid, hdungeon, hquest, hmap, hyperlink, and br.

color can be an hex color code, which can be 8 characters for ARGB color (e.g., FF0000 or FFFF0000) or one of Registered color.

c​

AttributeRequirementDefaultConstraints/Notes
colorRequired—Specifies the color code for text styling.
CAUTION

Should not contain any child elements.

color can be an hex color code, which can be 8 characters for ARGB color (e.g., FF0000 or FFFF0000) or one of Registered color.

Registered Color table​

NameARGB
black(0, 0, 0, 255)
white(255, 255, 255, 255)
red(255, 0, 0, 255)
green(0, 128, 0, 255)
blue(0, 0, 255, 255)
yellow(255, 255, 0, 255)
cyan(0, 255, 255, 255)
magenta(255, 0, 255, 255)
silver(192, 192, 192, 255)
gray(128, 128, 128, 255)
maroon(128, 0, 0, 255)
olive(128, 128, 0, 255)
purple(128, 0, 128, 255)
teal(0, 128, 128, 255)
navy(0, 0, 128, 255)
lime(0, 255, 0, 255)
aqua(0, 255, 255, 255)
fuchsia(255, 0, 255, 255)
orange(255, 165, 0, 255)
brown(165, 42, 42, 255)
pink(255, 192, 203, 255)
gold(255, 215, 0, 255)
indigo(75, 0, 130, 255)
violet(238, 130, 238, 255)
chocolate(210, 105, 30, 255)
coral(255, 127, 80, 255)
crimson(220, 20, 60, 255)
darkblue(0, 0, 139, 255)
darkcyan(0, 139, 139, 255)
darkgray(169, 169, 169, 255)
darkgreen(0, 100, 0, 255)
darkmagenta(139, 0, 139, 255)
darkorange(255, 140, 0, 255)
darkred(139, 0, 0, 255)
deepskyblue(0, 191, 255, 255)
forestgreen(34, 139, 34, 255)
lightblue(173, 216, 230, 255)
lightgray(211, 211, 211, 255)
lightgreen(144, 238, 144, 255)
lightpink(255, 182, 193, 255)
lightsalmon(255, 160, 122, 255)
lightyellow(255, 255, 224, 255)
wikidefault(218, 192, 163, 255)
wikititle(255, 199, 0, 255)

br​

A self-closing tag that inserts a line break.

CAUTION

Consecutive lines of Plain Texts, Hyperlinks, <c> Texts and <txt> are concatenated in the same line.
To go newline you have to use <br/>

hitem​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Must provide an item vnum.
CAUTION

Should not contain any child elements.

hmob​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Must provide a mob vnum.
CAUTION

Should not contain any child elements.

hraid​

AttributeRequirementDefaultConstraints/Notes
idRequired—Must provide a raid identifier.
CAUTION

Should not contain any child elements.

hdungeon​

AttributeRequirementDefaultConstraints/Notes
idRequired—Must provide a dungeon identifier.
CAUTION

Should not contain any child elements.

hquest​

AttributeRequirementDefaultConstraints/Notes
idRequired—Must provide a quest identifier.
CAUTION

Should not contain any child elements.

hmap​

AttributeRequirementDefaultConstraints/Notes
idRequired—Must provide a map identifier.
CAUTION

Should not contain any child elements.

AttributeRequirementDefaultConstraints/Notes
urlRequired—URL to navigate to when clicked.
CAUTION

Should not contain any child elements.

img​

AttributeRequirementDefaultConstraints/Notes
pathRequired—Path to the image resource.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<img path="d:/ymir work/ui/wiki/banners/scorpions_dungeon.png" />

image

button.button​

AttributeRequirementDefaultConstraints/Notes
typeRequired button—Button type identifier.
targetOptional (either call or target+value must be set)—The variable the button will set once clicked.
valueOptional (either call or target+value must be set)—The value the button will set to the target variable.
callOptional (either call or target+value must be set)—The function to call when the button is pressed. Function must be registered in the Jinja Context
pathRequired—Image path template for button states.
tooltip-textOptional—Tooltip text.
Base AttributesOptional—Inherits all common base attributes.

path is expected to be a parametrized path to the images used for normal, over and clicked state.
UCHTML will then substitute normal hover and selected to the parameter of the string.

Example:

path="d:/ymir work/ui/wiki/class_n_{}.tga"

become

d:/ymir work/ui/wiki/class_n_normal.tga
d:/ymir work/ui/wiki/class_n_hover.tga
d:/ymir work/ui/wiki/class_n_selected.tga

And each of the images need to exist in order to render the button.

Code Example
<button type="button" path="d:/ymir work/ui/wiki/class_s_{}.tga" target="bar" value="123" />
<button type="button" path="d:/ymir work/ui/wiki/class_s_{}.tga" call="interfacemodule.OpenSomething('argument') />

image

button.dynamic​

AttributeRequirementDefaultConstraints/Notes
typeRequired dynamic—Button type identifier.
targetOptional (either call or target+value must be set)—The variable the button will set once clicked.
valueOptional (either call or target+value must be set)—The value the button will set to the target variable.
callOptional (either call or target+value must be set)—The function to call when the button is pressed. Function must be registered in the Jinja Context
textRequired—Display text on the button.
widthRequired—Button width.
heightRequired—Button height.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<button type="dynamic" height=50 width="100" text="bla" target="foo" value="packed_query:HELMETS_SHAMAN" />
<button type="dynamic" height=50 width="100" text="bla" call="interfacemodule.OpenSomething('argument') />

image

bullet-list​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
bullet-pathOptional"d:/ymir work/ui/wiki/arrow_2.tga"Path to the bullet image; default provided if not specified.
Code Example
<bullet-list>
foo
</bullet-list>
<bullet-list>
bar
</bullet-list>

image

slot-item​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Item identifier.
countOptional1Quantity; defaults to 1 if not provided.
socketsOptional—Sockets data, evaluated from string to list/tuple if provided.
valuesOptional—Values data, evaluated from string to list/tuple if provided.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<slot-item vnum="101", count="2" values="[100, 100, 100, 100]"/>

image

slot-skill​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Skill identifier.
gradeRequired—Skill grade.
levelRequired—Skill level.
Base AttributesOptional—Inherits all common base attributes.

Skill grade-level conversion

Grade valueConventional Level
01-20
1M1-M20
2G1-G20
3P
Code Example
<slot-skill vnum="3" grade="1" level="3"/>

image

slot-card​

AttributeRequirementDefaultConstraints/Notes
imageRequired—Image path for the card.
levelOptional—Card level.
tooltip-textOptional—Tooltip text for additional info.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<slot-card align="center" image="d:/ymir work/ui/skill/pet/pet_skill_7.sub" level="20" tooltip-text="Segugio" />

image

atlas-info​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
scale-xOptional—Scale factor in the x-direction.
scale-yOptional—Scale factor in the y-direction.
fit-sizeOptional—Desired size for fitting content.
CAUTION

Allowed Children: Only <atlas-waypoint> and <atlas-marker>.

Code Example
<atlas-info map="61" scale-x="0.5" scale-y="0.5" margin-x="17" margin-top="10">
    <atlas-waypoint x="250" y="700" tooltip_text="test waypoint" />
    <atlas-marker x="700" y="250" type="DOMAIN" tooltip_text="test something" />
    <atlas-marker x="400" y="400" type="BOSS" tooltip_text="test foo" />
</atlas-info>

image

atlas-waypoint​

AttributeRequirementDefaultConstraints/Notes
xRequired—X-coordinate position.
yRequired—Y-coordinate position.
tooltip-textOptional—Tooltip for the waypoint.
colorOptional—Color specification.
CAUTION

Parent Constraint: Must be placed within an <atlas-info>.

atlas-marker​

AttributeRequirementDefaultConstraints/Notes
xRequired—X-coordinate position.
yRequired—Y-coordinate position.
tooltip-textOptional—Tooltip for the marker.
typeOptional—Type of marker lable: BOSS, DOMAIN.
colorOptional—Color specification.
CAUTION

Parent Constraint: Must be placed within an <atlas-info>.

cube-card​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
costOptional—Cost value.
pctOptional—Percentage value.
npcOptional—NPC identifier if applicable.
CAUTION

Allowed Children: Only <cube-result> and <cube-material>.

Code Example
<cube-card npc="101" cost="2000000" pct="50">
    <cube-result vnum="110" count="5"></cube-result>
    <cube-material vnum="121" count="5"></cube-material>
</cube-card>

image

cube-result​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the cube result.
countRequired—Count for the result item.
Parent RequirementRequired"cube-card"Must be placed inside a <cube-card>.
CAUTION

Parent Constraint: Must be placed inside a <cube-card>.

cube-material​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the cube material.
countRequired—Count for the material item.
Parent RequirementRequired"cube-card"Must be placed inside a <cube-card>.
CAUTION

Parent Constraint: Must be placed inside a <cube-card>.

href.button​

AttributeRequirementDefaultConstraints/Notes
typeRequired button—Navigation button type.
hrefRequired—URL or anchor target (if it starts with "#", it is treated as an anchor).
pathRequired—Image path template for the button (with state placeholders).
tooltip-textOptional—Tooltip text for the button.
Base AttributesOptional—Inherits all common base attributes.

path is expected to be a parametrized path to the images used for normal, over and clicked state.
UCHTML will then substitute normal hover and selected to the parameter of the string.

Example:

path="d:/ymir work/ui/wiki/class_n_{}.tga"

become

d:/ymir work/ui/wiki/class_n_normal.tga
d:/ymir work/ui/wiki/class_n_hover.tga
d:/ymir work/ui/wiki/class_n_selected.tga

And each of the images need to exist in order to render the button.

Code Example
<href type="button" href="" path="d:/ymir work/ui/wiki/class_n_{}.tga"/>

image

href.text​

AttributeRequirementDefaultConstraints/Notes
typeRequired text—Navigation type.
hrefRequired—URL or anchor target.
textRequired—Display text for the link.
widthOptional—Width specification.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<href type="text" href="" text="Foo"/>

image

progress​

AttributeRequirementDefaultConstraints/Notes
maxOptional0Maximum count value for progress.
countOptional0Current progress count.
colorOptional"gauge_bpass"Color for the progress indicator.
tooltip-textOptional—Tooltip text (should include two %d placeholders).
Base AttributesOptional—Inherits all common base attributes.
CAUTION

Allowed Children: Only <progress-checkpoint>.

Code Example
<progress width=150 max="10" count="3" tooltip-text="Progress test %d/%d">
    <progress-checkpoint count="5" tooltip-text="Checkpoint at %d"></progress-checkpoint>
    <progress-checkpoint count="7"></progress-checkpoint>
</progress>

image

progress-checkpoint​

AttributeRequirementDefaultConstraints/Notes
countRequired—Checkpoint count value.
tooltip-textOptional—Tooltip info (should contain one %s placeholder).
CAUTION

Parent Constraint: Must be placed inside a <progress>.

multi-equip-window​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
CAUTION

Allowed Children: Only <equip-window>.

Code Example
<multi-equip-window>
<equip-window>
    <equip-part slot="0" vnum="11570" attrs="[(0, 1, 1600, 0), (1, 54, 17, 0), (2, 56, 17, 0)]"
        sockets="[(0, 28342), (1, 28344), (2, 28341)]" values="[(2, 76), (3, 40)]" />
    <equip-part slot="1" vnum="12470" attrs="[(0, 53, 50, 0), (1, 97, 4, 0), (2, 146, 3, 0)]"
        values="[(2, 58), (3, 26)]" />
    <equip-part slot="2" vnum="15190" attrs="[(1, 54, 16, 0), (0, 1, 1600, 0), (2, 56, 16, 0)]" />
    <equip-part slot="3" vnum="14210" attrs="[(0, 1, 1500, 0), (1, 54, 16, 0), (2, 56, 16, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="4" vnum="1210" attrs="[(0, 63, 5, 0), (1, 15, 5, 0), (2, 146, 3, 0)]"
        sockets="[(0, 28337), (1, 28345), (2, 28330)]" values="[(1, 147)]" />
    <equip-part slot="5" vnum="16210" attrs="[(0, 1, 1500, 0), (1, 54, 15, 0), (2, 56, 15, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="6" vnum="17210" attrs="[(0, 53, 60, 0), (1, 63, 5, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="7" vnum="13070" attrs="[(0, 53, 65, 0)]" values="[(2, 88), (3, 45)]" />
    <equip-part slot="8" vnum="100862" />
    <equip-part slot="11" vnum="9071" />
</equip-window>
<equip-window>
    <equip-part slot="0" vnum="11570" attrs="[(0, 1, 1600, 0), (1, 54, 17, 0), (2, 56, 17, 0)]"
        sockets="[(0, 28342), (1, 28344), (2, 28341)]" values="[(2, 76), (3, 40)]" />
    <equip-part slot="1" vnum="12470" attrs="[(0, 53, 50, 0), (1, 97, 4, 0), (2, 146, 3, 0)]"
        values="[(2, 58), (3, 26)]" />
    <equip-part slot="2" vnum="15190" attrs="[(1, 54, 16, 0), (0, 1, 1600, 0), (2, 56, 16, 0)]" />
    <equip-part slot="3" vnum="14210" attrs="[(0, 1, 1500, 0), (1, 54, 16, 0), (2, 56, 16, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="4" vnum="2159" attrs="[(0, 63, 5, 0), (1, 15, 5, 0)]"
        sockets="[(0, 28337), (1, 28345), (2, 28330)]" values="[(1, 177)]" />
    <equip-part slot="5" vnum="16210" attrs="[(0, 1, 1500, 0), (1, 54, 15, 0), (2, 56, 15, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="6" vnum="17210" attrs="[(0, 53, 60, 0), (1, 63, 5, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="7" vnum="13070" attrs="[(0, 53, 65, 0)]" values="[(2, 88), (3, 45)]" />
    <equip-part slot="8" vnum="100862" />
    <equip-part slot="11" vnum="9071" />
</equip-window>
<equip-window>
    <equip-part slot="0" vnum="11770" attrs="[(0, 1, 1600, 0), (1, 54, 17, 0), (2, 56, 17, 0)]"
        sockets="[(0, 28342), (1, 28344), (2, 28341)]" values="[(2, 76), (3, 40)]" />
    <equip-part slot="1" vnum="12610" attrs="[(0, 53, 50, 0), (1, 97, 4, 0), (2, 146, 3, 0)]"
        values="[(2, 58), (3, 26)]" />
    <equip-part slot="2" vnum="15190" attrs="[(1, 54, 16, 0), (0, 1, 1600, 0), (2, 56, 16, 0)]" />
    <equip-part slot="3" vnum="14210" attrs="[(0, 1, 1500, 0), (1, 54, 16, 0), (2, 56, 16, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="4" vnum="210" attrs="[(0, 63, 5, 0), (1, 15, 5, 0), (2, 146, 3, 0)]"
        sockets="[(0, 28337), (1, 28345), (2, 28330)]" values="[(1, 119), (0, 97)]" />
    <equip-part slot="5" vnum="16210" attrs="[(0, 1, 1500, 0), (1, 54, 15, 0), (2, 56, 15, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="6" vnum="17210" attrs="[(0, 53, 50, 0), (1, 63, 5, 0), (2, 55, 25, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="7" vnum="13070" attrs="[(0, 53, 55, 0), (1, 55, 28, 0)]"
        values="[(2, 88), (3, 45)]" />
    <equip-part slot="8" vnum="100862" />
    <equip-part slot="11" vnum="9071" />
</equip-window>
</multi-equip-window>

image

equip-window​

AttributeRequirementDefaultConstraints/Notes
Base AttributesOptional—Inherits all common base attributes.
CAUTION

Allowed Children: Only <equip-part>.

Code Example
<equip-window>
    <equip-part slot="0" vnum="11570" attrs="[(0, 1, 1600, 0), (1, 54, 17, 0), (2, 56, 17, 0)]"
        sockets="[(0, 28342), (1, 28344), (2, 28341)]" values="[(2, 76), (3, 40)]" />
    <equip-part slot="1" vnum="12470" attrs="[(0, 53, 50, 0), (1, 97, 4, 0), (2, 146, 3, 0)]"
        values="[(2, 58), (3, 26)]" />
    <equip-part slot="2" vnum="15190" attrs="[(1, 54, 16, 0), (0, 1, 1600, 0), (2, 56, 16, 0)]" />
    <equip-part slot="3" vnum="14210" attrs="[(0, 1, 1500, 0), (1, 54, 16, 0), (2, 56, 16, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="4" vnum="1210" attrs="[(0, 63, 5, 0), (1, 15, 5, 0), (2, 146, 3, 0)]"
        sockets="[(0, 28337), (1, 28345), (2, 28330)]" values="[(1, 147)]" />
    <equip-part slot="5" vnum="16210" attrs="[(0, 1, 1500, 0), (1, 54, 15, 0), (2, 56, 15, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="6" vnum="17210" attrs="[(0, 53, 60, 0), (1, 63, 5, 0)]"
        sockets="[(0, 50633), (1, 50633), (2, 50633)]" />
    <equip-part slot="7" vnum="13070" attrs="[(0, 53, 65, 0)]" values="[(2, 88), (3, 45)]" />
    <equip-part slot="8" vnum="100862" />
    <equip-part slot="11" vnum="9071" />
</equip-window>

image

equip-part​

AttributeRequirementDefaultConstraints/Notes
slotRequired—Equipment slot number.
vnumRequired—Item identifier for the equipment.
attrsOptional—Additional attributes; evaluated if provided.
valuesOptional—Values data; evaluated if provided.
socketsOptional—Sockets data; evaluated if provided.
Parent RequirementRequired"equip-window"Must be placed within an <equip-window>.
CAUTION

Parent Constraint: Must be placed within an <equip-window>.

Slot Index Reference Each slot corresponds to a specific part of the equipment layout:

SlotDescription
0Armor
1Helmet
2Boots
3Wrist/Bracelet
4Weapon
5Necklace
6Earring
7Shield
8Slot Item 1
9Slot Item 2
10Slot Item 3
11Artifacts
13Belt
14Manufact (MH)

model​

AttributeRequirementDefaultDescription
mob-vnumOptional—Mob identifier; must be provided if item-vnum is not set.
item-vnumOptional—Item identifier; must be provided if mob-vnum is not set.
camera-moveOptionalfalseBoolean-like value enabling camera movement.
motion-indexOptional0Motion index to set.
camera-eyeOptional—A tuple of three values representing the camera's eye position.
camera-targetOptional—A tuple of three values representing the camera's target position.
camera-upOptional—A tuple of three values representing the camera's up vector.
backgroundOptional"d:/ymir work/ui/game/myshop_deco/model_view_background.sub"Path to background image/texture.
Base AttributesInherited—See common base attributes.
CAUTION

Exactly one of mob-vnum or item-vnum must be provided.

Code Example
<model width="100" height="100" item-vnum="109" camera-move="True" />

image

Motion Index Reference The motion-index attribute controls the animation of the model being displayed. These values correspond to the EName enum in the source code.

ValueNameDescription
0NAME_NONENo specific motion.
1NAME_WAITWaiting or idle motion.
2NAME_WALKWalking animation.
3NAME_RUNRunning animation.
4NAME_CHANGE_WEAPONChanging weapon animation.
5NAME_DAMAGEFront damage animation.
6NAME_DAMAGE_FLYINGFront flying damage animation.
7NAME_STAND_UPStanding up from front damage animation.
8NAME_DAMAGE_BACKBack damage animation.
9NAME_DAMAGE_FLYING_BACKBack flying damage animation.
10NAME_STAND_UP_BACKStanding up from back damage animation.
11NAME_DEADDeath animation.
12NAME_DEAD_BACKDeath animation from a back attack.
13NAME_NORMAL_ATTACKNormal attack animation.
14-21NAME_COMBO_ATTACK_1 to NAME_COMBO_ATTACK_8Combo attack animations.
22NAME_INTRO_WAITIntro screen idle.
23NAME_INTRO_SELECTEDIntro screen selected.
24NAME_INTRO_NOT_SELECTEDIntro screen not selected.
25NAME_SPAWNSpawn animation.
26NAME_FISHING_THROWFishing rod throwing animation.
27NAME_FISHING_WAITWaiting for a bite animation.
28NAME_FISHING_STOPStopping fishing animation.
29NAME_FISHING_REACTReacting to a bite animation.
30NAME_FISHING_CATCHCatching a fish animation.
31NAME_FISHING_FAILFailing to catch a fish animation.
32NAME_STOPStopping motion.
33NAME_SPECIAL_1Special/NPC motion 1. (skill)
34NAME_SPECIAL_2Special/NPC motion 2. (skill)
35NAME_SPECIAL_3Special/NPC motion 3. (skill)
36NAME_SPECIAL_4Special/NPC motion 4. (skill)
37NAME_SPECIAL_5Special/NPC motion 5. (skill)
38NAME_SPECIAL_6Special/NPC motion 6. (skill)
39NAME_SPAWN_REMOTEServer-triggered spawn.
50NAME_SKILLSkill start.
51+NAME_SKILL_ENDSkill end (variable).
67NAME_CLAPClapping animation.
68NAME_CHEERS_1Cheers animation 1.
69NAME_CHEERS_2Cheers animation 2.
70NAME_KISS_START to NAME_KISS_WITH_SHAMANKissing animations.
74NAME_FRENCH_KISS_START to NAME_FRENCH_KISS_WITH_SHAMANFrench kissing animations.
78NAME_SLAP_HIT_START to NAME_SLAP_HIT_WITH_SHAMANSlap hit animations.
82NAME_SLAP_HURT_START to NAME_SLAP_HURT_WITH_SHAMANSlap hurt animations.
86NAME_DIGDigging animation.
87NAME_DANCE_1 to NAME_DANCE_6Dance animations.
93NAME_DANCE_ENDDance animation end.
103NAME_CONGRATULATIONCongratulation motion.
104NAME_FORGIVEForgive motion.
105NAME_ANGRYAngry motion.
106NAME_ATTRACTIVEAttractive motion.
107NAME_SADSad motion.
108NAME_SHYShy motion.
109NAME_CHEERUPCheer up motion.
110NAME_BANTERBanter motion.
111NAME_JOYJoyful motion.
112NAME_MAX_NUMMaximum number of motions.

items-grid​

AttributeRequirementDefaultConstraints/Notes
vnumsRequired—List of item identifiers; provided as a string evaluated to a list/tuple.
widthRequired—Grid width; can be a number, "auto", or percentage.
heightRequired—Grid height; can be a number, "auto", or percentage.
sort-sizeOptional—If provided, items are sorted by icon height (descending).
Base AttributesOptional—Inherits all common base attributes.
CAUTION

ItemsGrid accepts only the following formats for the vnums attribute:

[[vnum, count], ...], [vnum, ...], or [{'vnum': vnum, 'count': count}, ...].

Code Example
<items-grid width="250" height="32"
        vnums="[50513, 72724, 72728, 25040, 25041, 72001, 100466, [102626, 10], 102599, 90804]" />

image

item-stats​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the item whose stats are displayed.
widthAuto-set"auto"Forces auto width.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<item-stats vnum="10" width="auto" />

image

equip-up​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the equipment upgrade info.
widthAuto-set"auto"Forces auto width.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<equip-up vnum="10" width="auto" />

image

equip-epic-up​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for epic upgrade information.
Base AttributesOptional—Inherits all common base attributes.

item-card​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the item.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<item-obtainable-from width="auto" vnum=72725 />

image

item-obtainable-from​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the item.
widthRequired—Width specification for display.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<item-obtainable-from width="auto" vnum=72725 />

image

monster-stats​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Monster identifier.
widthRequired—Display width.
heightRequired—Display height.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<monster-stats width="auto" height=100 vnum=101 />

image

monster-card​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Monster identifier.
Base AttributesOptional—Inherits all common base attributes.

This element internally uses mob origin which can be configured in the config.yaml.

Code Example
<monster-card vnum=101 />

image

monster-drop​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Monster drop identifier.
widthAuto-set"auto"Forces auto width.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<monster-drop width="auto" vnum=101 />

image

monster-spawn​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Monster spawn identifier.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<monster-spawn vnum=101/>

image

chest-content​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the chest content.
widthAuto-set"auto"Forces auto width.
Base AttributesOptional—Inherits all common base attributes.
Code Example
<chest-content width="auto" vnum="27987" />

image

chest-card​

AttributeRequirementDefaultConstraints/Notes
vnumRequired—Identifier for the chest card.
Base AttributesOptional—Inherits all common base attributes.

This element internally uses item origin which can be configured in the config.yaml.

Code Example
<chest-card width="auto" vnum="27987" />

image

Previous
Wiki Quickstart
Next
Wiki Configuration