ESOUI - Ingame UI elements

ESOUI (https://www.esoui.com/forums/index.php)

- General Authoring Discussion (https://www.esoui.com/forums/forumdisplay.php?f=174)

- - Ingame UI elements (https://www.esoui.com/forums/showthread.php?t=7955)

Ingame UI elements

Hello,

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:

Code:

/script

                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);





/script

                local pp = ZO_AchievementsContentsSummaryInsetProgressBarsScrollChildTotalGloss;

                Kaf_1:SetMinMax(pp:GetMinMax());

                Kaf_1:SetValue(pp:GetValue() + 5000);

                Kaf_1:SetColor(0,0.4,0.7,1);



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

esoui/art/miscellaneous/progressbar_frame.dds

esoui/art/miscellaneous/progressbar_frame_bg.dds

esoui/art/miscellaneous/progressbar_genericfill_gloss.dds

esoui/art/miscellaneous/progressbar_genericfill_leadingedge_blunt.dds

esoui/art/miscellaneous/progressbar_genericfill_leadingedge_gloss.dds

esoui/art/miscellaneous/progressbar_genericfill_tall.dds

esoui/art/miscellaneous/progressbar_texture_overlay.dds

]]



/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

Result:

As you can see the edge is wrong.

1) Check the esoui wiki for GUI / XML stuff:
http://wiki.esoui.com/UI_XML

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".

Edit:
Maybe this is the xml ui element for that bar you showed:
https://github.com/esoui/esoui/blob/...hievements.xml

Code:

<StatusBar name="ZO_AchievementsStatusBar" inherits="ZO_ArrowStatusBarWithBG" virtual="true">

            <Controls>

                <Label name="$(parent)Label" inherits="ZO_AchievementsDefaultLabel_Keyboard" font="ZoFontWinH4">

                    <Anchor point="BOTTOMLEFT" relativePoint="TOPLEFT" offsetY="-4" />

                </Label>

                <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" />

                </Label>

            </Controls>

        </StatusBar>

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:
https://github.com/esoui/esoui/blob/...rtemplates.xml

And the appropriate lua file for the functions and code:
https://github.com/esoui/esoui/blob/...rtemplates.lua

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

:eek: Man you are awesome!

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