Controls

From ESOUI Wiki

(Difference between revisions)
Jump to: navigation, search
m (Linked in a missed reference to draw tier)
Line 33: Line 33:
</pre>
</pre>
-
Second, it allows moving controls along the Z axis. Controls that are offset with a positive Z will appear farther from the screen while controls offset with a negative Z will appear closer. These controls will experience a perspective effect making them look three dimensional. However, these controls do not use a depth buffer meaning that draw order will depend entirely on draw tier, layer, and level. The Z position does not impact draw order.
+
Second, it allows moving controls along the Z axis. Controls that are offset with a positive Z will appear farther from the screen while controls offset with a negative Z will appear closer. These controls will experience a perspective effect making them look three dimensional. However, these controls do not use a depth buffer meaning that draw order will depend entirely on [[DrawTier | draw tier]], layer, and level. The Z position does not impact draw order.
===Other Changes===
===Other Changes===

Revision as of 15:36, 21 April 2021

Page up-to-date to API Version 100028




Contents

Introduction

This is the list of the different functions (methods) of the UI Objects of Elder Scrolls Online. Objects can be defined throught XML or in Lua

Recent changes

With API100036 Blackwood the following control changes will be done:

Improvements to Control Layout

With Blackwood, the way that control layouts are specified has undergone some significant changes. These changes are backwards compatible, so all existing addons should continue to work the same as before, but for those wishing to use the new capabilities please continue reading.

Measurements

You may have noticed in the API notes that several functions that previously took numbers now take layout measurements. Up to this patch all layout APIs (like SetWidth) took numbers in UI units. A UI unit is a unit type that automatically scales with the screen size making it easier to design a UI that fits all screens. After this patch, passing in a number will still set the value in UI units. However, there is now a new option as well. A layout measurement also allows passing in a value with a specified unit in the form of a string. For example, passing in 100 is equivalent to “100ui”. This isn’t necessary for UI units, but it does give you access to other units such as Pixels. Setting a layout value in Pixels means it will always remain that pixel size regardless of screen size. To set a value in Pixels you just pass in a string with the number ending in “px”. For example:

Control:SetWidth(“100px”, “200px”)
<Dimensions x=”50px” y=”100px”/>

Pixels and UI units are the only units available right now, but look for more potentially in the future.

Transforms

The second major feature added with this patch is transforms. A transform allows changing the offset or rotation of a control and all controls that are children of that control in three dimensions. All transform APIs take the form “SetTransform*”. There are a number of applications that this new functionality enables. First, it allows apply transformations to groups of control. This means that you can rotate an entire UI window at once by just rotating the top level control. For example:

TopLevelControl:SetTransformRotationZ(math.rad(45))

Second, it allows moving controls along the Z axis. Controls that are offset with a positive Z will appear farther from the screen while controls offset with a negative Z will appear closer. These controls will experience a perspective effect making them look three dimensional. However, these controls do not use a depth buffer meaning that draw order will depend entirely on draw tier, layer, and level. The Z position does not impact draw order.

Other Changes

In the future we will be adding scale and skew transforms as well. You may also have noticed meter and centimeter units along with enumerations referencing a world space. At this time, world space is not enabled for addons.


A working XML example

Check the link for an example.xml

Object creation

XML

<!-- Basic -->
<Label name="objectName" />
 
 
<!-- With few elements -->
<Label name="Name" font="ZoFontGame" verticalAlignment="CENTER">
	<Dimensions x="350" y="48" />
	<Anchor point="TOPLEFT" relativeTo="$(parent)" />
</Label>

LUA

-- Will create a new control without any parent.
CreateControl("ControlName", CT_LABEL ) -- See http://wiki.esoui.com/Globals#ControlType


Then, you can call any of the methods listed under :

For our LabelControl :

objectName:SetText("Something") -- Object defined in the XML snippet.
Name:SetColor(1, 1, 1) -- Object defined in the XML snippet.
local text = ControlName:GetText() -- Object defined in the Lua snippet.

Objects Types and their methods

All UI elements are inheriting the functions defined in Control.

AddOnManager


AnimationManager


AnimationObject

Objects that inherit behavior from AnimationObject



AnimationObject3DRotate


AnimationObject3DTranslate


AnimationObjectAlpha


AnimationObjectColor


AnimationObjectCustom


AnimationObjectScale


AnimationObjectScroll


AnimationObjectSize


AnimationObjectTexture


AnimationObjectTextureRotate


AnimationObjectTextureSlide


AnimationObjectTranslate


AnimationTimeline


BackdropControl


ButtonControl


ColorSelectControl


CompassDisplayControl


Control

Objects that inherit behavior from Control


CooldownControl


DebugTextControl


EditControl


FontObject


LabelControl


LineControl


MapDisplayControl


RootWindow

ScrollControl


SliderControl


StatusBarControl


TextBufferControl


TextureCompositeControl


TextureControl


TooltipControl


TopLevelWindow


WindowManager

Personal tools
Namespaces
Variants
Actions
Menu
Wiki
Toolbox