Ingame UI elements - ESOUI
Thread Tools Display Modes
07/26/18, 05:50 AM   #1
AddOn Author - Click to view addons
Join Date: Apr 2018
Posts: 11
Ingame UI elements


I have been trying to get into UI changing, but I'm facing some problems. First it was the UI elements tree which Zgoo addon helped me a lot, I don't know (1) if there is a reference for the UI vanilla elements with all the properties, if there is please do share.

My current problem is trying to copy existing stuff to keep the ui consistent. I want to add a second progress bar under the normal progress bar in the achievements. But the StatusBar control don't have any GET methods that allow me to see how the default one is implemented, I have been trying trial and error and made it until a certain point, at the moment I just can't figure what are the settings to make that ending triangle at the end of the progress bar, I think I found the texture for it tho.

(2) So is there a way to obtain default used values for ui easier other than trying random textures and inputing random values until it seems you got it right?

This is what I have experimented and found so far:
		local pp = ZO_AchievementsContentsSummaryInsetProgressBarsScrollChildTotal;
		CreateControl("Kaf_1", pp, CT_STATUSBAR );
		Kaf_1:SetAnchor(3, pp, 3, 0, 0);
		Kaf_1:SetAnchor(12, pp, 12, 0, 0);

		local pp = ZO_AchievementsContentsSummaryInsetProgressBarsScrollChildTotalGloss;
 		Kaf_1:SetValue(pp:GetValue() + 5000);

--[[ Textures I found that seem related to progress bars

/script d(ZO_AchievementsContentsSummaryInsetProgressBarsScrollChildTotalBG:SetDrawLayer(0)) 
/script d(Kaf_1:SetTexture("/esoui/art/miscellaneous/progressbar_genericfill_tall.dds"));
/script d(Kaf_1:SetLeadingEdge("/esoui/art/miscellaneous/progressbar_genericfill_leadingedge_blunt.dds", 20, 20)); -- DOESNT WORK

As you can see the edge is wrong.
  Reply With Quote
07/26/18, 09:05 AM   #2
Super Moderator
Baertram's Avatar
WoWInterface Super Mod
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 4,053
1) Check the esoui wiki for GUI / XML stuff:

The controls used on the ui, their attributes and methods etc. can be found there.
Some have descriptions, some don't. You need to ask then, at best within the addon dev channel over at www.gitter.im/esoui/esoui

2) I'd inspect the esoui code for the achievement stuff at github (https://github.com/esoui/esoui/tree/master/esoui) to see which controls and functions were used.
Achievement: https://github.com/esoui/esoui/tree/...e/achievements

Many UI elements use templates in xml files where they inherit a control from. So check the xml files first and then the source code lua files to get the stuff where the XML templates or UI elements are "connected".
Then search the source code for the functions or other stuff which ZOs uses to build the elements and assign the textures.
Most controls got something like a method GetTexturePath or something similar. But the achievement bars do not seem to be a texture but a control which sues a texture as a child (so check ZGOO, open the GetChildren() table and see if there is some texture in it).
Then search for the name of the texture in the github code to maybe find the creation of the achievement bar.

I guess it's some kind of "experience bar" which is used for achievements, ingame xp and others. So maybe its in the folder "ingame/utility" or "libraries".

Maybe this is the xml ui element for that bar you showed:

<StatusBar name="ZO_AchievementsStatusBar" inherits="ZO_ArrowStatusBarWithBG" virtual="true">
                <Label name="$(parent)Label" inherits="ZO_AchievementsDefaultLabel_Keyboard" font="ZoFontWinH4">
                    <Anchor point="BOTTOMLEFT" relativePoint="TOPLEFT" offsetY="-4" />
                <Label name="$(parent)Progress" inherits="ZO_AchievementsDefaultLabel_Keyboard" horizontalAlignment="CENTER" verticalAlignment="CENTER" tier="HIGH" layer="OVERLAY" level="2">
                    <Anchor point="TOPLEFT" offsetY="-1" />
                    <Anchor point="BOTTOMRIGHT" />
It inherits from "ZO_ArrowStatusBarWithBG" so you need to find where this is defined and check which functions and possibilities you got.
Check this XML file:

And the appropriate lua file for the functions and code:

Use the forum search here at www.esoui.com and search for statusbar. There are some threads with explanations about the gradient, animations and timelines etc. too

Last edited by Baertram : 07/26/18 at 09:10 AM.
  Reply With Quote
07/26/18, 10:05 AM   #3
AddOn Author - Click to view addons
Join Date: Apr 2018
Posts: 11
Man you are awesome!

This was exactly what I was looking for, thanks a lot!!!
  Reply With Quote

ESOUI » Developer Discussions » General Authoring Discussion » Ingame UI elements

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off