## Understanding DAoC User Interface Components

When making Dark Age of Camelot – Trials of Atlantis mods, it important to understand the basic components of a user interface.

#### Windows

There are dozens of windows that can make UI a mod. Some of the most familiar are the summary window, group window and chat window. In addition to the windows that are defined by Mythic, mod authors can create 20 custom windows.

#### Controls

Each window contains one or more controls. A control may anything from a simple text label to an interactive button or textbox. The following control types are available:

###### Text Controls

| Label | Single line text label
| Scalar Label | Single line numeric label
| Textarea | Multi-line text label
| Listbox | Table of text labels with optional icons
| Chat Area | Used for displaying the chat textareas
| Tree | A tree of text labels with optional icons.

###### Image Controls

| Image | Used to display parts of a texture to a UI
| Icon | A single icon (e.g. to display buffs)
| Icon Set | A rectangular grid of related icons.
| Status Icon | An image that changes based on a numeric value.
| Full Resize Image | Image that can change size. The first control in almost every window is a Full Resize Image used as the window's background.
| Horizontal Resize Image | An image with a fixed height that can be stretched to various widths.
| Vertical Resize Image | An image with a fixed with that can be stretched to various heights.
| Compass | A compass image which changes based on the player's heading.
| Statusbar | A bar that moves based on a numeric value. For example, player health, endurance, and power are all statusbars.
| Vertical Statusbar | Same as a Statusbar but displayed vertically.
| Static File Image | Used to display an entire texture.

Interactive Controls

| Button | You know...a thing that can be pressed.
| Invisible Button | Can be clicked like a button, but does not display any UI (it just defines an area).
| Checkbox | A checkbox is a control that can be checked or unchecked.
| Combobox | A drop down list of options.

#### Templates

Most controls specify a template. Templates define UI characteristics that are shared by multiple controls. Templates make it easy to change the look of a large set of controls without requiring the user to modify each individual control. For example, consider the "command" window below.

In this window, 19 of the 20 buttons all use a button template named "button_large". If we modify the "button_large" template to use a yellow font instead of gray, all the controls that use this template are updated as shown below:

#### Assets

Textures, fonts, and canvases all the three types of assets used in a Trials of Atlantis UI mod. Although each type of asset serves a different purpose, they all refer to a BMP or TGA image file.

Textures are the most common type of asset and are used as images for buttons, status bars, resize images, and any other control that includes an image. Fonts are used to display text in a control. The format of a font image file is specified in Mythic's Trials of Atlantis UI Documentation (http://www.camelotherald.com/toa/ui.php). A canvas is a legacy asset that is only used for Static Image File controls.

The image file used by an asset has specific size and format requirements. The file must be a true color TGA or BMP image and the dimensions must be a power of 2 (32, 64, 128, 256, 512, 1024, etc.). Large images (e.g. 4096 x 4096) may not display properly on some video cards.

#### Adapters

When a controls needs access to a number or text string that can change during game play, an adapter is used. For example, the adapter "summary_player_hits" is a value from 0 to 100 indicating the percent of total health a player currently has.

There are different types of adapters that can be used for different controls. For example a Label controls uses a text adapter while a Scalar Label uses a numeric adapter. Because there are so many different adapters, the DAoC UI Editor includes an Adapter Browser.

When testing a mod, it is sometimes helpful to try different "test" values for adapters. For this task, the Adapter Editor can be used to easily set adapter test values and view the effects in the Preview Area in real time.

#### Events

Events are used by interactive controls to indicate that an action should occur. For example, a Button control can have its "event" field set to "ToggleAttackMode". Pressing this button would cause the "ToggleAttackMode" event to fire. Mythic has provided a large number of events that can be triggered. To make finding a particular event easier, the UI Editor has an Event Browser that groups events into categories for easy lookup and describes that action that an event will trigger.