Official EQ2 UI Guide (Online Searchable Form)

hirebrand · #1 03-02-2005, 11:41 PM

This document explains the technical details required to customize the EverQuest II user interface. Many of the mysteries will remain hidden because at this point it may not be clear what questions need answers.

1 Overview 5
1.1 Introduction 5
2User Interface Options 6
2.1 Basics 6
2.1 .1 Changing the resolution 6
2.1 .2 Dragging Windows 6
2.2 Window Settings 6
2.2 .1 Normal and Mouseover opacity 6
2.2 .2 Locked 6
2.3 User Interface Options 7
2.3 .1 Popup message speed 7
2.3 .2 Tooltip Delay 7
2.3 .3 Window Fade Rate 7
2.3 .4 Global Opacity Levels 7
2.3 .5 Reset Opacity for all windows 7
2.3 .6 Unlock all windows 7
2.3 .7 Lock all windows 7
2.3 .8 Allow Windows Offscreen 7
2.3 .9 Hide window frames in letterbox 7
2.3 .1 0Windows snap to grid 8
2.3 .11 Snap to grid size 8
2.3 .12 Windows snap to alignment 8
2.3 .13 Snap to alignment size 8
2.3 .14 Reset location for all window 8
2.3 .15 Chat Window Font Size 8
2.3 .16 Bubble Font Size 8
2.3 .17 Chat Colors 8
2.3 .18 Game Colors 8
2.4 Other options 9
2.4 .1 Letterbox 9
3Adding a skin 10
4Creating a skin 11
4.1 Requirements 11
4.1 .1 Eq2ui_skininfo.xml 11
4.2 File Structure 12
4.2 .1 Eq2ui.xml 12
4.2 .2 XML files 12
4.2 .3 Images 12
4.2 .4 Fonts 12
4.2 .5 Sounds 12
5Sounds 13
6Dynamic Data 15
7UI Library Objects and Properties 16
7.1 BaseObject 16
7.2 Effector Group 16
7.2 .1 Effector 16
7.2 .2 ColorEffector 16
7.2 .3 LocationEffector 17
7.2 .4 OpacityEffector 17
7.2 .5 RotationEffector 18
7.2 .6 ScrollLocationEffector 18
7.2 .7 SizeEffector 18
7.3 Page Group 19
7.3 .1 Page 19
7.3 .2 ComboBox 19
7.3 .3 Composite 20
7.3 .4 PopupMenu 21
7.3 .5 PopupMenuStyle 21
7.3 .6 RadialMenu 21
7.3 .7 RadialMenuStyle 22
7.3 .8 TabbedPane 22
7.3 .9 TabbedPaneStyle 23
7.3 .1 0VolumePage 23
7.4 Widget Group 24
7.4 .1 Widget 24
7.4 .2 Button 29
7.4 .3 ButtonStyle 30
7.4 .4 Checkbox 31
7.4 .5 CheckboxStyle 32
7.4 .6 Dropdownbox 33
7.4 .7 DropdownboxStyle 34
7.4 .8 Ellipse 35
7.4 .9 Grid 36
7.4 .1 0GridStyle 36
7.4 .11 Image 37
7.4 .12 ImageStyle 37
7.4 .13 List 38
7.4 .14 ListStyle 38
7.4 .15 Listbox 39
7.4 .16 ListboxStyle 40
7.4 .17 Polyline 40
7.4 .18 Progressbar 41
7.4 .19 ProgressbarStyle 41
7.4 .2 0Scrollbar 42
7.4 .21 ScrollbarStyle 42
7.4 .22 Sliderbar 44
7.4 .23 SliderbarStyle 44
7.4 .24 Sliderplane 45
7.4 .25 SliderplaneStyle 46
7.4 .26 TabSet 46
7.4 .27 TabSetStyle 46
7.4 .28 TreeView 47
7.4 .29 TreeViewStyle 48
7.4 .3 0Table 49
7.4 .31 TableModelDefault 50
7.4 .32 TableHeader 50
7.4 .33 Text 51
7.4 .34 Textbox 52
7.4 .35 TextboxStyle 53
7.5 Style Group: 55
7.5 .1 Style 55
7.5 .2 RectangleStyle 55
7.5 .3 ShadowStyle 56
7.5 .4 TextStyle 57
7.5 .5 TooltipStyle 57
7.5 .6 WidgetStyle 58
7.6 Extras 58
7.6 .1 Cursor 58
7.6 .2 CursorSet 59
7.6 .3 ImageFragment 59
7.6 .4 ImageFrame 60
7.6 .5 FontCharacter 60
7.6 .6 Template 60
8UI Builder 62
8.1 Installation and startup 62
8.2 To Create a new skin 62
8.3 Window and Menu Layout 62
8.3 .1 Screen Display window 62
8.3 .2 Tree View and Property Display 62
8.3 .3 Main Menu Bar 63
8.3 .4 Insert Menu 63
8.4 General Object Manipulation 64
8.4 .1 Creating Objects 64
8.4 .2 Object Selection 65
8.4 .3 Moving Objects 65
8.4 .4 Delete, Copy, Paste, Undo 65
8.5 Text, Fonts 65
8.5 .1 Font Creation 65
8.6 Images 65
8.6 .1 Image Formats 65
8.6 .2 Importing an Image and Creating an Image Style 66
8.6 .3 Creating an Image Object 66
8.6 .4 Visualising Images 66
8.7 Properties 66
8.7 .1 Event Properties: OnActivate, OnDisable,… 66
8.7 .2 PackLocation 66
8.7 .3 PackSize 68
8.8 Effectors 69
8.9 Image formats 69
8.1 0Tips, Tricks, Pitfalls 70
9Frequently Asked Questions 71
10Known Problems and Feature Requests 72

1Overview
1.1 Introduction
This document describes the processes and tools for modifying the EverQuest II user interface. Customizing the user interface can be as simple as moving windows and changing interface properties from within the game, changing the widget placement and properties using UIBuilder, overwriting the default sounds, replacing the UI graphics, or coming up with your own masterpiece.

Please provide us feedback with this documentation and the skinnability of EQ2 via the EverQuest II Interface message boards

Thanks and enjoy!
2User Interface Options

There is a lot of flexibility to make changes to the user interface just using the options available in the game.

2.1 Basics

2.1 .1 Changing the resolution

Windows attach to the nearest location when the resolution is changed. The current attach points include: Top left, Top middle, top right, left center, center, right center, bottom left, bottom middle, bottom right, letterbox top, and letterbox bottom. The default attachment is set in the UI skin. Once a window is moved, it become attached to the nearest point above and will retain its offset to this point if the resolution changes.

2.1 .2 Dragging Windows
Windows can be dragged by holding down the left mouse button.

You can reset the location on the window settings screen or all window locations in the UI options.

2.2 Window Settings
The settings window can be opened by bringing up the context menu (right clicking) over a window and selecting the “Window Settings” option.
2.2 .1 Normal and Mouseover opacity
There are two modes for the window – normal and mouseover,
There are three layers to most windows – background, frame, foreground.

2.2 .2 Locked
A locked window cannot be dragged.

The checkbox on the settings window changes this property for a single window. There are two options for settings/clearing the locked flag for all windows in the UI settings.
2.3 User Interface Options
The User Interface options can be accessed via the EQ2 button and the “options” button and selecting the user interface tab or by typing the command “/options_game user interface”.

This document will skip the obvious options. And as always, the options are subject to change.
2.3 .1 Popup message speed
Centerscreen message speed
2.3 .2 Tooltip Delay
Delay required for tooltips to display
2.3 .3 Window Fade Rate
Rate at which windows fade to/from the normal/mouseover opacities
2.3 .4 Global Opacity Levels
Set the level for all windows that haven’t overwritten the defaults
2.3 .5 Reset Opacity for all windows
Cannot be cancelled
2.3 .6 Unlock all windows
Cannot be cancelled
2.3 .7 Lock all windows
Cannot be cancelled
2.3 .8 Allow Windows Offscreen
If checked, windows can be dragged offscreen. Otherwise, windows will run into the edge of the screen when being dragged.
2.3 .9 Hide window frames in letterbox
If checked, window frames will not display in normal mode if the window is in the letterbox region.
2.3 .1 0Windows snap to grid
If checked, windows snap to the grid when being dragged
2.3 .11 Snap to grid size
Sets the size of the grid.
2.3 .12 Windows snap to alignment
If checked, windows jump to the edge of other windows when being dragged.
2.3 .13 Snap to alignment size
Sets how close a window has to be before it will jump.
2.3 .14 Reset location for all window
Cannot be cancelled
2.3 .15 Chat Window Font Size
Set the global font size. Each chat window can set this separately (/chat_fontsize <n>)
2.3 .16 Bubble Font Size
Set the font size in chat bubbles. (/bubble_fontsize <n>)
2.3 .17 Chat Colors
Sets the colors for the chat channels. Use the “show chat category names” (/chat_show_category 0/1) to determine the channel for particular text.

The echo color is used for things you say.
The link color is used for embedded links.
2.3 .18 Game Colors
Changing the game colors does not force an update. You may have to wait for the data to change for the colors to take effect.

Please report any colors you wish to change that you cannot change.

2.4 Other options
2.4 .1 Letterbox
The letterbox size can be changed from the display options (cl_letter_box_amount <0-1>)
The letterbox position can be changed (cl_letter_box_position <0-1>)

3Adding a skin

Perhaps the easiest way to dramatically customize the user interface is to use someone’s skin.

To load a new skin, type /loadui and then select the skin in the load skin window. This window lists all the available skins in the %EQ2%/UI directory. Information about the skins include the name, the author, a version string, and a text description.

To add a skin to the directory, copy the files to a new directory in the UI subdirectory of your EverQuest 2 directory.
4Creating a skin
If you are reading this document for the first time, you very likely skipped ahead here.

A skin consists of one or more xml files, art files, and/or sound files.

If a file is not found in the current skin directory, EverQuest II will look in the default skin directory for the required file. So you only need to include files that you have changed.

4.1 Requirements
A user interface skin in EverQuest II only requires a subdirectory and one file and the file is optional.

The subdirectory must be under your EQ2 UI directory.

4.1 .1 Eq2ui_skininfo.xml
This file describes the skin and what is displayed when other people will see on the load skin dialog.

This XML file contains a page with one data item.
Be sure the page is not visible.
Be sure the data is named “SkinInfo” and there is a property named “Text”

The SkinInfo data object should contain the following properties:
Property
Description
Author
Name of the creator(s)
Contact
URL or other contact information
Description
String describing the skin
Name (Required)
“SkinInfo”.
Text
Display name of skin
Version
Version string

Without this file and properly named data object, the load skin window will not display the skin. The skin can still be loaded using “/loadui <skin>”.

In the future, additional fields may be supported.

4.2 File Structure

4.2 .1 Eq2ui.xml
This is the root UI xml file that includes all the others. If you are using UIBuilder, load this file.

4.2 .2 XML files
The XML files describe the UI widgets and their properties.

The windows are broken down by module. Each module is a page at the root level and contains one or more children pages. The naming convention is eq2ui_<module>_<child>.xml.
4.2 .3 Images
The image directory contains all the user interface art.

The subdirectories include:
Name
Description
Fonts
Bitmap fonts
Frontend
Character select/create art
Icons
Game icons
Loadscreens
Loading screens
Maps
Maps
4.2 .4 Fonts
This directory contains the racial fonts.
4.2 .5 Sounds
An optional directory to override user interface sounds.

5Sounds
Any of the following sounds can be replaced per skin or per client. The list is definitely subject to change.

To replace a sound, add a wave file with the sound name in the sounds subdirectory.

%EQ2%/UI/Sounds – to replace the sound for all skins on the client
%EQ2%/UI/<skinname>/Sounds – to replace the sounds for a particular skin

Name
Description
Broadcast

Buy_failed

citizenship_request

Click

coin_cha_ching

ding

dropdown_open

dropdown_close

encounter_broken

freeport_citizenship

frontend_mouseover

frontend_pressed

frontend_released

help_path_done

heroic_starter_trigger

heroic_starter_advance

heroic_starter_break

heroic_opportunity_trigger

heroic_opportunity_advance

heroic_opportunity_shift

heroic_opportunity_complete

heroic_opportunity_failure

heroic_opportunity_timeout

level_up

loot_failed

mariner_bell

moveable_object_place_failed

qeynos_citizenship

quest_complete

quest_stage

quest_item

spell_gained

skill_up

task_complete

trade_propose

trade_accept

too_far

ui_mouseover

ui_pressed

ui_released

war_drum

window_open

window_close

inventory_attune

inventory_cant_equip

ui_chestdrop

inventory_destroy_item

inventory_equip

inventory_un_equip

ui_tell_fail

ui_tell_receive

ui_tell_send

ui_discovery

ui_invite

ui_joined

ui_open_quest_book

ui_shard_absorb

ui_spirit_lvl_up

ui_tradeskills_lvl_up

quality_down

specialization

quality_up

zone_wood_door

zone_wood_massive

zone_sewer_grate

6Dynamic Data
EverQuest II has tried to make all relevant data available for any window. The system that allows this is called DynamicData. Any widget can be assigned to listen to dynamic data and will automatically update anytime the data changes. The widgets can also filter which types of updates are desired.

For the most recent list of available data see eq2ui_gamedata.xml

The data changes can be visible/not visible, text, color, opacity, progress, and more.

The filters are bitflags indicating the types of updates desired. By default, accept all.
Value
Description
0x0000
None
0x0001
Visible/Not visible
0x0002
Text
0x0004
Tooltip
0x0008
Boolean value
0x0010
Floating point value
0x0020
Long value
0x0040
Progress percent
0x0080
Icon
0x0100
Command
0x0200
Enabled/Disabled
0x0400
Color
0x0800
Opacity
0x1000
Event Trigger
0xFFFF
All

7UI Library Objects and Properties
The user interface consists of widgets and styles. This section describes the objects and their properties.

Please let us know what additional details are necessary.

7.1 BaseObject
Parent : none
The class everything inherits from

Name - identifier
String

application properties - additional properties
String, (bool, integer, etc)

7.2 Effector Group
An effector enables an object to change over time and can be attached as a property

7.2 .1 Effector
Parent: BaseObject
The base effector

No properties

7.2 .2 ColorEffector
Parent : Effector
change color over time
default color is widget color

Speed
float

TargetColor
Color

Background - color for widget background color
bool

BackgroundTint - color for widget background tint color
bool

7.2 .3 LocationEffector
Parent : Effector
change location over time

Speed - how fast to move in x,y
Point (x,y)

TargetLocation - destination
Point (x,y)

7.2 .4 OpacityEffector
Parent: Effector
change opacity over time
default is widget opacity

Speed -
float

TargetOpacity - destination
float (0,0 - 1.0)

Background - if true, background opacity.
bool

7.2 .5 RotationEffector
Parent: Effector
change rotation over time

Period - time to rotate completely
float

7.2 .6 ScrollLocationEffector
Parent: Effector
change scroll location over time

Speed - scroll speed for x,y
Point (x,y)

TargetScrollLocation - destination
Point (x,y)

7.2 .7 SizeEffector
Parent: Effector
change size over time

Speed - size speed for x,y
Point (x,y)

TargetSize - destination
Point (x,y)

7.3 Page Group
Pages are widgets whose primary purpose is to contain other widgets.

7.3 .1 Page
Parent : Widget
The base page class

ClipToPage - if true, clipping is on.
bool

7.3 .2 ComboBox
Parent : Page
A dropdown menu that allows the user to type in the selection

ButtonStyle

ButtonWidth
integer

Editable
bool

ListStyle

ScrollbarStyle

TextboxStyle

DataSource

DropDownHeight
integer

SelectedIndex
Integer

SelectedText
string

7.3 .3 Composite
Parent : Page
Page that automatically spaces visible widgets

Orientation
Horizontal/Vertical

Spacing - gap size
integer

SpacingType
Fill - make the widgets take up all the space
Spread - spread the widgets equally
Constant - fixed spacing

Alignment
Front - left/top
Center - center
Back - right/bottom

Padding -
Internal - spacing between items
External - spacing on the outside
Both - spacing both between and on the outside

7.3 .4 PopupMenu
Parent : Page

Style
PopupMenuStyle

* apparently requires a DataSource but no property

7.3 .5 PopupMenuStyle
Parent : WidgetStyle
The style for a PopupMenu

ButtonStyle - style for buttons created from data
ButtonStyle

ItemHeight - height
integer

7.3 .6 RadialMenu
Parent : Page
menu that is circular

DataSource

Style
RadialMenuStyle

PopupDataNamespace - the menu that appears
Namespace

7.3 .7 RadialMenuStyle
Parent : WidgetStyle
Style for a RadialMenu

ItemHeight -
integer

ItemMargin - space between items
Point (x,y)

ButtonStyleNW
ButtonStyleN
ButtonStyleNE
ButtonStyleE
ButtonStyleSE
ButtonStyleS
ButtonStyleSW
ButtonStyleW
ImageStyle

ItemPopupTimeout - time before menu disappears
integer

ItemPopupMenuStyle
PopupMenuStyle

7.3 .8 TabbedPane
Parent : Page

DataSource

ActiveTab - index to active tab
integer (-1 for none)

Style
TabbedPaneStyle

TargetPage - pages
Page

7.3 .9 TabbedPaneStyle
Parent : WidgetStyle
Style for a TabbedPane

ButtonStyle - button for tabs
ButtonStyle

7.3 .1 0VolumePage
Parent : Page

CellSize
Point (x,y)

CellPadding
Point (x,y)

CellMax
integer

CellCount
integer

CellCountFixed -
integer

CellForceDragable -
bool

CellSelectable
bool

CellDragAccept
bool

MultiSelection
bool

CellAlignmentV
Top
Center
Bottom

CellAlignmentH
Left
Center
Right

CellSelectionOverlay
RectangleStyle

7.4 Widget Group
A widget is a visible control. Some controls contain other controls.
7.4 .1 Widget
Parent : BaseObject
The base widget

AbsorbsInput - control wants input
bool

Activated - selected
bool

BackgroundColor
Color

BackgroundTint
Color

BackgroundOpacity
float (0.0-1.0)

BoundaryPolygon - non-rectangular hit areas
points

Color
color

ContextToParent
bool

ContextCapable
bool

Cursor

CursorSet

Dragable
bool

DragAccepts - types
string

DragBadCursor
DragGoodCursor
Cursor

DragType
string

DropToParent
bool

Enabled -
bool

Focus - has focus
bool

GetsInput -
bool

HideSound - sound name
ShowSound - sound name
String

LocalTooltip - tooltip string after being mapped
string

Location -
Point (x,y)

Maximum Size -
Point (x,y)

MinimumScrollExtent - amount you can scroll
Point (x,y)

MinimumSize -
Point (x,y)

OnActive - action
OnDeactivate - action
OnDisable - action
OnEnable - action
OnHide - action
OnHoverIn - action
OnHoverOut - action
OnShow - action
string

OnActiveEffector - effector
OnDeactivateEffector - effector
OnDisableEffector - effector
OnEnableEffector - effector
OnHideEffector - effector
OnHoverInEffector - effector
OnHoverOutEffector - effector
OnShowEffector - effector
Effector

PackLocation
PackLocationProp
PackSize
PackSizeProp
see notes

Rotation
float (0.0-1.0)

ScrollExtent - maximum amount you can scroll
Point (x,y)

ScrollLocation - current scroll amount
Point( x,y )

Shear -

Size
Point (x,y)

SizeIncrement - amount to scroll per tick
Point (x,y)

Tooltip
string

TooltipStyle

Visible -
bool

UserMovable -
bool

UserResizable
bool

UserScrollable
bool

RStyleDefault
RStyleDisabled
RStyleSelected
RStyleMouseOver
RStyleMouseOverSelected
RStyleActivated
RStyleMouseOverActivated
RStyleDisabledActivated
RectangleStyle

7.4 .2 Button
Parent : Widget
A control that triggers an action when pressed

OnPress - action to call when button is pressed

Style
ButtonStyle

Text -
String

LocalText - text after being mapped
String

TextColor
Color

TextMaxLines
Integer

IsCancelButton - if true, called on escape
bool

IsDefaultButton - if true, called on enter
bool

PressSound -
ReleaseSound -
MouseOverSound -
String

7.4 .3 ButtonStyle
Parent : WidgetStyle
Style for a button

NormalTextStyle
SelectedTextStyle
DisabledTextStyle
PressedTextStyle
MouseOverTextStyle
TextStyle

NormalTextShadowStyle
SelectedTextShadowStyle
DisabledTextShadowStyle
PressedTextShadowStyle
MouseOverTextShadowStyle
ShadowStyle

NormalTextColor
SelectedTextColor
DisabledTextColor
PressedTextColor
MouseOverTextColor
Color

PressSound - sound name
ReleaseSound - sound name
MouseOverSound - sound name
String

TextAlignment - horizontal alignment
Left
Center
Right

TextVerticalAlignment - vertical alignment
Top
Center
Bottom

7.4 .4 Checkbox
Parent : Widget
A button that remembers its state.

Checked - true if pressed
bool

OnPress - action

OnSet - action if checked

OnUnset - action when unchecked

Style
CheckboxStyle

Text -
String

LocalText - string after being mapped
String

MouseOverSound - sound name
SetSound - sound name
UnsetSound - sound name
String

TextColor - normal text color
Color

Radio - part of a radio group
bool

7.4 .5 CheckboxStyle
Parent : WidgetStyle
Style for a checkbox

CheckboxSize - image size
Point (x,y)

CheckboxOffset - image offset
Point (x,y)

NormalTextStyle
DisabledTextStyle
TextStyle

NormalTextShadowStyle
DisabledTextShadowStyle
ShadowStyle

TextOffset - text offset
Point (x,y)

MouseOverSound - sound name
SetSound - sound name
UnsetSound - sound name
String

7.4 .6 Dropdownbox
Parent : Widget
A list that can be minimized to the selected entry
See also: Combobox

DataSouce

OnSelect - action
String

SelectedItem - text for selected item
string

SelectedItemIndex - index of selected item
integer

Style
DropdownboxStyle

RowTemplate - description of row
Template

OpenSound - sound name
CloseSound - sound name
String

7.4 .7 DropdownboxStyle
Parent : WidgetStyle
Style for a dropdownbox

Normal.StartCap
Normal.Background
Normal.DownArrow
Disabled.StartCap
Disabled.Background
Disabled.DownArrow
Selected.StartCap
Selected.Background
Selected.DownArrow
Pressed.StartCap
Pressed.Background
Pressed.DownArrow
ImageStyle

DropBy - amount to drop the list when open
integer

Padding - amount of space around the list
Rect (left,top,right,bottom)

Scrollbar.Style - scrollbar information
ScrollbarStyle

Listbox.Style - listbox information
ListboxStyle

OpenSound - sound name
CloseSound - sound name
String

7.4 .8 Ellipse
Parent : Widget
an ellipse or pie

ArcBegin -
float (0.0 - 1.0)

ArcEnd -
float (0.0 - 1.0)

InnerRadiusColor
Color
InnerRadiusOpacity -
float (0.0 - 1.0)

Thickness - widget of the line
float

7.4 .9 Grid
Parent : Widget
A multidimension list

CellCount - number of cells
Point (x,y)

CellSize - size of each cell
Point (x,y)

DataSource - data

SelectedItem - index

Style
GridStyle

Tooltip - tooltip if nothing is in the cell
String

7.4 .1 0GridStyle
Parent : WidgetStyle
Style for a Grid

Normal.Background - cell background
Normal.Junction - corner
Normal.VStartCap - vertical start
Normal.VBackground - vertical line
Normal.Normal.VEndCap - vertical end
Normal.HStartCap - horizontal start
Normal.HBackground - horizontal line
Normal.HEndCap - horizontal end
Selected.Background - cell background
Selected.Junction - corner
Selected.VStartCap - vertical start
Selected.VBackground - vertical line
Selected.VEndCap - vertical end
Selected.HStartCap - horizontal start
Selected.HBackground - horizontal line
Selected.HEndCap - horizontal end
ImageStyle

7.4 .11 Image
Parent : Widget
A static image

SourceRect - are of the image
Rect (left,top,right,bottom)

SourceResource - filename
String

Strecth - true if allow image to be stretched
bool

Style
ImageStyle

7.4 .12 ImageStyle
Parent : UIStyle
describes an image. contains list of ImageFrame

Loop - loop frames
bool

Playtime - amount of time to play
float

7.4 .13 List
Parent : Widget
A list of items

DataSource - data items

SelectedRow - selected row index
integer (-1 for none)

SelectedRowCount - does nothing?

SelectionAllowMultiRow - allow multiple selections
bool

Style
ListStyle

7.4 .14 ListStyle
Parent : WidgetStyle
Style for a list

CellPadding -
Point (x,y)

CellHeight - height of a cell
integer

GridColor - grid box color
Color

DefaultTextStyle - text style
TextStyle

DefaultTextColor - text color
Color

SelectionColorBackground - selection background
Color

SelectionColorRect - box around selection
Color

7.4 .15 Listbox
Parent : Widget
A list of items

DataSource

OnSelect - action
OnDoubleClick - action
String

SelectedItem - value of item
String

SelectedItemIndex - index of selected item
integer

Style
ListboxStyle

RowTemplate - describes a row
Template

AutoScrollSpeed - scroll the list automatically
this is used for the credits
integer

7.4 .16 ListboxStyle
Parent : WidgetStyle
Style for a list

GridStyle - info about the grid box

Layout -
Vertical
Horizontal

7.4 .17 Polyline
Parent : Widget
A line from one point to another

Style
ImageStyle

Thickness - width
float

7.4 .18 Progressbar
Parent : Widget
The progress control

BackgroundColor
Color

BarBackgroundColor
Color

Progress - percent complete
float ( 0.0 - 1.0)

Style
ProgressbarStyle

7.4 .19 ProgressbarStyle
Parent : WidgetStyle
Style for a Progressbar

StepSize - size to change
integer

StarCap - end art
Background - background art
EndCap - end art
Bar.StarCap - end art
Bar.Background - background art
Bar.EndCap - end art
ImageStyle

Layout
Horizontal
Vertical

Inverted - reverse direction if true
bool

7.4 .2 0Scrollbar
Parent : Widget
A scrollbar. changes an objects scroll location

Control - parent control
Widget

Style
ScrollbarStyle

ArrowPressSound
ArrowReleaseSound
ThumbPressSound
ThumbReleaseSound
String

OnChange - action
String

UpdateContinuous - send multiple events
bool

7.4 .21 ScrollbarStyle
Parent : WidgetStyle
Style for a scrollbar

StartCap.Normal
Background.Normal
EndCap.Normal
Thumb.StartCap.Normal
Thumb.Background.Normal
Thumb.EndCap.Normal
StartCap.Disabled
Background.Disabled
EndCap.Disabled
Thumb.StartCap.Disabled
Thumb.Background.Disabled
Thumb.EndCap.Disabled
StartCap.Pressed
Background.Pressed
EndCap.Pressed
Thumb.StartCap.Pressed
Thumb.Background.Pressed
Thumb.EndCap.Pressed
ImageStyle

Layout
Horizontal
Vertical

Startcap.StopOffset -
Point (x,y)

EndCap.StopOffset -
Point (x,y)

Thumb.MinSize -
Point (x,y)

ArrowPressSound
ArrowReleaseSound
ThumbPressSound
ThumbReleaseSound
String

7.4 .22 Sliderbar
Parent : Widget
widget that sets a value using a slider

LowerLimit - minimum value
integer

OnChange - action
string

Style
SliderbarStyle

UpperLimit - maximum value
integer

Value - current value
integer

ValueUpdateContinuous - send multiple events when slider is moving
bool

7.4 .23 SliderbarStyle
Parent : WidgetStyle
Style for a sliderbar

Layout
Horizontal
Vertical

StartCap
Background
EndCap
Slider
ImageStyle

7.4 .24 Sliderplane
Parent : Widget
Not sure…

LowerLimit - minimum value
integer

OnChange - action
string

Style
SliderplaneStyle

UpperLimit - maximum value
integer

Value - current value
integer

ValueUpdateContinuous - send multiple events when slider is moving
bool

7.4 .25 SliderplaneStyle
Parent : WidgetStyle
Style for a sliderplane

Layout
Horizontal
Vertical

StartCap
Background
EndCap
Slider
ImageStyle

7.4 .26 TabSet
Parent : Widget
list of pages controlled by tabs

Style
TabSetStyle

Template
Template

7.4 .27 TabSetStyle
Parent : WidgetStyle
Style for a TabSet

ActiveTabStartCap
ActiveTabBackground
ActiveTabEndCap
InactiveTabStartCap
InactiveTabBackground
InactiveTabEndCap
ImageStyle

BodyTopLeft
BodyTop
BodyTopRight
BodyRight
BodyBottomRight
BodyBottom
BodyBottomLeft
BodyLeft
BodyFill
ImageStyle

Layout
Horizontal
Vertical

7.4 .28 TreeView
Parent : Widget
a tree

DataSourceContainer - tree of data

SelectedRow - currently selected row
integer (-1 for none)

SelectedRowCount - does nothing?

SelectionAllowMultRow - allow multiple selections
bool

Style -
TreeViewStyle

7.4 .29 TreeViewStyle
Parent : WidgetStyle
style for tree view

CellPadding -

CellHeight -
integer

GridColor -
Color

DefaultTextStyle
TextStyle

DefaultTextColor
Color

SelectionColorBackground - color for selection background
Color

SelectionColorRect - color for selection border
Color

ImageStyleCollapsed - icon for collapsed branch
ImageStyle

ImageStyleExpanded - icon for expanded branch
ImageStyle

Indentation - amount to indent
integer

7.4 .3 0Table
Parent : Widget

TableModel -
TableModel

ColumnResizePolicy - not used

SelectedRow
integer (-1 for none)

SelectedRowCount - not used?

SelectionAllowedRow
bool

SelectionAllowedMultiRow
bool

CellPadding
Point (x,y)

CellHeight
integer

GridColorHorizontal
Color

GridColorVertical
Color

DefaultTextStyle
TextStyle

DefaultTextColor
Color

SelectionColorBackground
Color

SelectionColorRect
Color

7.4 .31 TableModelDefault
Parent : TableModel
DataSourceContainer - collection of data sources

7.4 .32 TableHeader
Parent : Page
Table - name of the associated table
Table

ButtonStyle - button
ButtonStyle

ImageSortUp - image if sorting up
ImageStyle

ImageSortDown - image if sorting down
ImageStyle

CursorResize - cursor to indicate resize
Cursor

7.4 .33 Text
Parent : Widget
a static string

Text - the string
string

LocalText - string after being mapped
string

Margin - area around the text
Rect (left,top,right,bottom)

MaxLines -
integer

ShadowStyle

Font -
TextStyle

TextAlignment
Left
Center
Right

TextAlignmentVertical
Top
Center
Bottom

TextColor
Color

TruncateElipsis - use elipsis if too long
bool

7.4 .34 Textbox
Parent : Widget
a text entry control

MaxLength - character
integer

MaxLines -
integer

OnChange - action
OnOverflow - action
string

Password - is password style
bool

Style
TextboxStyle

Text -
LocalText -
string

WrapWidth
integer
-1 no wrapping
-2 automatic wrapping

Editable
EditableUnicode
bool

TextColor
color

NumericInteger - just number
bool

NumericFloat - XX.XX
bool

NumericNegative - allow negatives
bool

NumericIP - XX.XX.XX.XX
bool

7.4 .35 TextboxStyle
Parent : WidgetStyle
Style for a Textbox

CaratColor
Color

CaratWidth
integer

Cursor

NormalGridStyle
DisabledGridStyle
SelectedGridStyle
GridStyle

NormalShadowStyle
DisabledShadowStyle
SelectedShadowStyle
ShadowStyle

NormaTextStyle
DisabledTextStyle
SelectedTextStyle
TextStyle

SelectionColor
Color

SelectionOpacity
float (0.0 - 1.0)

TextPadding - area around text
Rect (left,top,right,bottom)

7.5 Style Group:
A style helps define the look of a widget/page. Often a style will be used to create common properties for similar widgets.

7.5 .1 Style
Parent : BaseObject
The base style

No properties

7.5 .2 RectangleStyle
Parent : Style
a style that contains 9 images and rules

North
NorthEast
NorthWest
South
SouthEast
SouthWest
East
West
Center
ImageStyle

NorthStretch - can image stretch
NorthShrink - can image shrink
SouthStretch
SouthShrink
EastStretch
EastShrink
WestStretch
WestShrink
CenterStetchH
CenterStetchV
CenterShrinkH
CenterShrinkV
bool

Color -
color

Opacity -
float (0.0 - 1.0)

7.5 .3 ShadowStyle
Parent : Style
dropshadow description

Color -
Color

Offset - shift from the normal text
Point (x,y)

Opacity -
float (0.0 - 1.0)

RenderShadow - true if draw the shadow
bool

7.5 .4 TextStyle
Parent : Style
Defines a font and the available characters

Leading - height
integer

ShadowStyle

CachedStyle - id of cached font (1-9)
integer

UseCachedFont - use cached font for missing chars
bool

7.5 .5 TooltipStyle
Parent : Style
Style for a Tooltip

DataSource

GridStyle - for the box

MaxWidth
integer

Template - ui library information

TextColor
Color

TextPadding - space around text
Rect (left,top,right,bottom)

TextShadowStyle
ShadowStyle

TextStyle

7.5 .6 WidgetStyle
Parent : Style
Style for all widgets

HideSound
ShowSound
String

OnShowEffector
OnHideEffector
OnEnableEffector
OnDisableEffector
Effector

7.6 Extras
Some items do not fit into the categories above.
7.6 .1 Cursor
Parent : BaseObject
the pointer image

ImageStyle - pointer image
ImageStyle

HotSpot - offset into image for hotspot
Point (x,y)

7.6 .2 CursorSet
Parent : BaseObject
a collection of cursors

Count - number of cursors
long

7.6 .3 ImageFragment
Parent : BaseObject
portion of an image

Offset - offset into full image
Point (x,y)

SourceRect - area of this fragment
Rect (left,top,right,bottom)

Source - name of the file
String

7.6 .4 ImageFrame
Parent : ImageFragment
One part of an image

Duration - time to play this frame
long

7.6 .5 FontCharacter
Parent : BaseObject
a character glyph

Code - unicode value
wchar_t

Advance - width
long

SourceRect - area in image for this character
Rect (left,top,right,bottom)

SourceFile - image
String

7.6 .6 Template
Parent : BaseObject
describes the layout of a row of data

Size - row size
Point (x,y)

Template - ui library information
String

8UI Builder
UIBuilder is an XML editor used to visualize and edit the user interface.
8.1 Installation and startup
Install and Startup:
Copy the UIBuilder directory to the desired location
File -> Open -> %EQ2%\UI\<skinname>\eq2ui.xml
8.2 To Create a new skin
Create a new directory under %EQ2%\UI
Open an existing skin
Save as the new skin name
8.3 Window and Menu Layout
8.3 .1 Screen Display window
The Screen Display window on the RHS displays tabs across the top of the window for every pane in the UI. Selecting a tab displays the corresponding pane.
Icons above the screen display from left to right are as follows:
Run / Stop UI – When running the GUI widgets can be put through some basic testing. UI execution should be stopped if you want to edit the UI and move widgets around.
Refresh
Draw Cursor
Draw Selection Hilights – needs to be on in order to get selection feedback
Draw Grid - Enables / Disables the grid display
Snap To Grid - Enables / Disables grid-snapping
8.3 .2 Tree View and Property Display
On the LHS a tree-view lists all the panes and all the widgets within a pane. Panes and widget groupings can be expanded and collapsed as needed.
The lower left panel shows all the attributes of the currently selected item. The attributes are editable by clicking on the attribute text.
It is important to use common elements whenever possible to make it easier to change.
8.3 .3 Main Menu Bar
File: New, Open, Close, Save, Saveas, Recent Files, Exit
work as expected
File: Generate Art File List
shows what art is actually being used
Edit: Undo/Redo
just implmented
Edit: Cut, Copy, Paste, Duplicate, Delete
work as expected

View: Run
this puts the editor into run mode. not all things work as expected. > is shortcut
View: Cursor
View: Highlight
the box around a selection. can change settings. can toggle on/off
View: Grid
the grid lines. can change settings. can toggle on/off
can force objects to jump to grid
View: Default properties
force new objects to have these settings. overrides defaults.

Align: aligns with last object selected
Same size: sets size to last object selected
8.3 .4 Insert Menu
Insert: Folder
just a namespace
Insert: Object

Insert: Style

Insert: Effector

Insert: DataSouceContainer
meta container for data
Insert: DataSouce
data container
Insert: DataItem
data

Insert: ImageFrame
contains an image

Insert: Template

Insert: Application Object
custom widget

Object List:
you can move objects up/down/top/bottom
you can select objects
Object Properties:
properites for the current object
add/delete/change
8.4 General Object Manipulation
8.4 .1 Creating Objects
Objects are the entities that appear in the GUI.
Styles determine how the objects look.
Effectors are things which change objects.

To see lists of all Objects, Styles and Effectors see the Insert pulldown.
To insert a new object into the hierarchy, first select the group node under which the new item is to go.
Then use the Insert pull-down to add the type of object required.
8.4 .2 Object Selection
Make sure the UI is not running, using the Run/Stop UI button.
Make sure Draw Selection Hilights is ON.
Widgets can be selected by clicking on the widget in the screen display or by clicking on the text entry in the tree view.
Multiple objects can NOT be selected in the main graphics window. But **** can be used for multi-selection in the hierarchy view.
8.4 .3 Moving Objects
Drag and drop the selected widget to move it or reshape it.
Multiple widgets can be selected in the screen display view and moved as a group.
However only single widgets can be selected in the tree-view.
8.4 .4 Delete, Copy, Paste, Undo
Select a widget in the tree view. The following commands don’t work on multiple selected items in the screen view.
Ctl-x – deletes the selected widget.
Ctl-c – copies the widget.
Ctl-v – pastes the widget under the currently selected group. Paste will fail if another widget is selected. Make sure a group or panel is selected and the widget will be pasted under that group.
Ctl-z – undo
Ctl-y - redo
8.5 Text, Fonts
8.5 .1 Font Creation
Use BuildFont to create a bitmap font or use a dynamic font
8.6 Images
8.6 .1 Image Formats
Initial source art for GUI images can be provided in any of the following formats:
BMP
DDS
PNG
TGA
The images will be sliced and compressed when loaded into the UI Builder.
8.6 .2 Importing an Image and Creating an Image Style
To import an image into the UI do Insert -> Image Frame and select a TGA or DDS file to import.
The image has to be in the Data/Pack folder to import properly.
The TGA image will be sliced and converted to .dds format and one or more Image Fragments will be inserted under an Image Frame which will be under an image Style. Name the image style.
At this point the image will not yet be graphically displayed on the Page.
8.6 .3 Creating an Image Object
Next you have to create an Image Object:
Insert -> Object -> Image
An image area will appear in the graphical view.
Set the Style property to be the name of the ImageStyle created above. Now the image should be displayed on the page.
8.6 .4 Visualising Images
To see an image fragment, double click the word SourceRect in the object properties listing when you have an image fragment selected.
To see the whole image, select the ImageFrame and double click the word SourceRect in the object properties listing.
A red shaded rectangle is displayed over the image indicating the boundaries of the image or image fragment. The red shaded rectangle has resize handles so the user can reshape the image or fragment by dragging the handles.
8.7 Properties
8.7 .1 Event Properties: OnActivate, OnDisable,…
The UI system supports scripted command for the events.
8.7 .2 PackLocation
Type:UIString
The PackLocation determines how a widget is re-positioned when it's parent changes size. The locations are represented as simple relationships between a widget edge, and a parent edge. The Child edge goes first, followed by the relationship, then finally the Parent edge. The two relationships are:

Fixed - maintain a fixed number of pixels between the 2 edge
Proportional - maintain the proportion between the edge distances and the parent widget size

The edges that may be referred to are:

Near - Left for horizontal, Top for vertical
Far - Right for horizontal, Bottom for vertical
Center - The center point x value for horizontal, y value for vertical

Syntax example:

NFN,CPF

Horizontal: Child Near Edge - Fixed - Parent Near Edge
Vertical: Child Center - Proportional - Parent Far Edge

Horizontally, the near edge of the widget is kept a fixed distance from the near edge of the parent. Vertically, the center of the widget is kept a proportional distance from the far edge of the parent. Some combinations, obviously, are more useful than others.

8.7 .3 PackSize
Type: UIString
PackSize indicates how the widget is re-sized when its parent changes size. The relationships are:

Fixed - keep the size constant
Proportional - keep the proportion between the widget's size and parent's size constant
Absolute - keep the difference between the widget's size and parent's size constant

Syntax example:

A,F

Horizontal: Maintain a constant distance between Child and Parent Edges
Vertical: Keep the Child size constant

This example would work for stretching the menu on the map when it is resized to full screen.

Keep the widget a fixed size horizontally, but expand/contract vertically to maintain a fixed difference between the widget's height and parent's height.
8.8 Effectors
Here's an example of how to create an effector, in this case an opacity effector.
1.Construction of the OpacityEffectors:
Using the Insert > Effector > Opacity menu item, create two new opacity effectors. Name the first one FadeButtonOut, and the second FadeButtonIn.
Set the target opacity for FadeButtonOut to 0.25, and the target opacity for FadeButtonIn to 1.0.

2.Attaching the effectors to objects:
Find the object you would like to use these effectors on. Set the OnEnableEffector to the path to the FadeButtonIn and the OnDisableEffector to the path to FadeButtonOut.
3.Attaching effectors to styles (optional):
Styles also support effectors, so if you have a common style you use for many buttons, you can set the effectors on the style instead of on each object. If you have an effector on an object, and on the object's style, the one on the object is used.

8.9 Image formats
Any of these image formats can be used for GUI elements:
BMP
DDS
PNG
TGA
8.1 0Tips, Tricks, Pitfalls
save often
text characters cannot be created in the editor
don't be afraid to save and go edit the xml files manually
occasionally view with triangles (or look at number) will tell you if you set something up wrong
9Frequently Asked Questions

No one has asked any questions yet.
10Known Problems and Feature Requests

There are very likely lots of bugs and undocumented features. Up until now, UIBuilder has primarily been an internal development tool.

The more often bugs are reported, the better chance they have of being fixed. The same goes for new features: We’d like to know what would make UIBuilder more useful to you.

We won’t be keeping UIBuilder up to date at the expense of the game itself, but we’d like to make sure that the time we are able to spend on UIBuilder will have value to you.