ESOUI - API : Controls and Offset

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

- Lua/XML Help (https://www.esoui.com/forums/forumdisplay.php?f=175)

- - API : Controls and Offset (https://www.esoui.com/forums/showthread.php?t=811)

API : Controls and Offset

Hello,

I am currently writting my own extension, i have done a small code part ^^ but i am blocked with the UI style :(

I am trying to add some controls headers and controls lines one above the other on a constant background but without knowing the exact offset (or height) of each element, and each element can have one or more lignes and never the same height.

so is it possible please ? if it's possible can you help me to know how ?

I have actualy something like that :

Lua Code:

MMQTbg = WM:CreateControl("MMQT_Background", MMQTmain, CT_STATUSBAR)
MMQTbg:SetSimpleAnchorParent(0,0)
MMQTbg:SetResizeToFitDescendents(true)
 
function AddNewTitle(qindex, qlevel, qname)
    if not MMQTlabel[qindex] then
        MMQTlabel[qindex] = WM:CreateControl("MMQT_Label_"..qindex, MMQTbg , CT_LABEL)
        if qindex == 1 then
            local offsetTitle = 0
            MMQTlabel[qindex]:SetSimpleAnchorParent(0,offsetTitle)
        else
            local offsetTitle = (qindex -1) * 25
            MMQTlabel[qindex]:SetSimpleAnchorParent(0,offsetTitle)
        end
    end
    MMQTlabel[qindex]:SetFont("ZoFontAnnounceMessage")
    MMQTlabel[qindex]:SetText("["..qlevel.."] - "..qname)
end
 
for i=1, 6 do
    AddNewTitle(qindex, qlevel, qname)
end

this code work fine, but i'm looking for a way to automatically place the object

Thanks in advance ^^

What's wrong with GetDimensions() and GetAnchor() ?

Quote:

Originally Posted by Iyanga (Post 4050)

What's wrong with GetDimensions() and GetAnchor() ?

It's not realy documented, no example.. maybe it's doing what i want maybe not ^^

But thanks for info, i will try ^^

I'd love to know if you manage to figure out SetResizeToFitDescendents(bool resize). I have only managed to get it to work with SetDimensionConstraints(number minWidth, number minHeight, number maxWidth, number maxHeight) and SetResizeToFitPadding(number width, number height).

Also, depending on what you want to achieve at the end, you could also use SetAnchor instead of SetSimple so you can have control over the objects alignment. I find it much easier to use the alignment with parenting windows to control how and where they show up in relation to other frames. Instead of trying to find specific offsets to use.

For a descending order for example, TOP alignment for the windows self alignment and BOTTOM for the windows target alignment would ensure that no matter how long (wide) a label's text is, it will always be centered underneath its parent frame.

Hi ^^ thanks for your answers ^^

I tryed with GetDimension() and GetHeight() but nothing, the return give me a '0' value.

I will try today what Nogaruk said...

The problem is i have no examples...

Nogaruk can you give me an short example please, for placing automaticaly several child one above the other ? (I have only one parent, it's the background...) ?

Otherwise, i use SetResizeToFitDescendents() without argument and it auto resize width and height from is content -> set on my background (the background is the parent of all content)

I am looking for a way to use a constraint on the width value, to permit players to specify width in the menu settings ... but i don't know if it's possible to keep the 2 possibilities .. i need to do some tries ^^

Something you can do, that I have working nicely in my main addon is to chain components together on the screen with anchor points.

Say you have two labels: LABELA & LABELB.

You set the position of LABELA as normal, within your top-level container.

You can then use SetAnchor to anchor the TOP of LABELB to the BOTTOM of LABELA.

If you change the height of LABELA, then the position of LABELB on the screen will automatically adjust without you having to do any additional scripting to move it.

Code:

<GuiXml>

    <Controls>

        <TopLevelControl name="MyAddon" mouseEnabled="true" movable="true" clampedToScreen="true">

            <Dimensions x="200" y="150" />

            <Controls>

                <Label name="$(parent)LabelA" font="ZoFontWinH1" color="FFFFFF" inheritAlpha="true" wrapMode="TRUNCATE" verticalAlignment="TOP" horizontalAlignment="CENTER" text="This is Label A" />

                <Label name="$(parent)LabelB" font="ZoFontWinH5" color="FFFFFF" inheritAlpha="true" wrapMode="TRUNCATE" verticalAlignment="TOP" horizontalAlignment="CENTER" text="This is Label B" />

            </Controls>

        </TopLevelControl>

    </Controls>

</GuiXml>

then in your LUA:

Code:

MyAddonLabelB:SetAnchor(TOP, MyAddonLabelA, BOTTOM, 0, 0)

This means set the anchor of LabelB. We are anchoring the TOP of label B to the BOTTOM of Label A, with zero offsets.

Now when you change the size or position of LabelA, you'll see LabelB adjusts as well.

I'll try to give a short example. Since storm gave you one with xml, I'll give you one with just lua.

Code:

--        Variable to hold the window manager object

local wm = GetWindowManager()



function addonName:CreateWindowFrames()



        -- Lets create our TOPLEVELWINDOW first

        --                @param - CreateTopLevelWindow just takes a string for the name

        local mainWindow = wm:CreateTopLevelWindow("addonName_mainWindow")



        --        Give it a size

        mainWindow:SetDimensions(100,100)

        

        --        Give it constraints so it can't be bigger than what you tell it

        --                @param iirc it's (minimum width, minimum height, max width, max height)

        mainWindow:SetDimensionConstraints(-1,-1,200,200)

        

        mainWindow:SetMovable(true) -- This plus MouseEnabled let you move the window around

        mainWindow:SetMouseEnabled(true)

        mainWindow:SetClampedToScreen(true) -- Lets make sure the window can't go out of the screen

        mainWindow:SetDrawLayer(0) -- This helps ensure that the window stays behind any children frames

        

        --        Lets get rid of any anchors it might already have

        mainWindow:ClearAnchors()



        --        Now set the anchor to where we want it

        --                @param alignSelf - this is the point on the window itself that you want to align from

        --                        anchorParent - the control you want this to be parented to

        --                        alignTarget - this is the point on the parent you want to align this window from

        --                        offsetX,offsetY - how far you want this window to be away from it's parent in 

        --                    the X and Y directions



        --                - By setting the offsets to 25,100 and the aligns to TOPLEFT the window will have its' 

        --                TOPLEFT corner as the point that attaches to the parents' TOPLEFT corner and then 

        --                it will be moved 25 units to the right and 100 units down.



        local alignSelf = TOPLEFT, anchorParent = GuiRoot, alignTarget = TOPLEFT, offsetX = 25, offsetY = 100

        mainWindow:SetAnchor(alignSelf, anchorParent, alignTarget, offsetX, offsetY)



        mainWindow:SetHandler("OnReceiveDrag",function(self) self:StartMoveing() end)

        mainWindow:SetHandler("OnMouseUp",function(self) self:StopMovingOrResizing() end)

        

        --        Lets make sure there's something to see with this window

        --                @param it takes a string for the name, control to parent to, and a string for the template to base it off

        mainWindow.bd = wm:CreateControlFromVirtual("addonName_mainWindow_bd",mainWindow,"ZO_DefaultBackdrop")

        mainWindow.bd:SetAnchorFill(mainWindow)

        

        --        Now lets create some labels

        local labelOne = wm:CreateControl("addonName_label1",mainWindow,CT_LABEL)

        labelOne:SetText("LEFT")

        labelOne:ClearAnchors()

        labelOne:SetAnchor(TOPLEFT,mainWindow,TOPLEFT,0,0)

        

        local labelTwo = wm:CreateControl("addonName_label2",mainWindow,CT_LABEL)

        labelOne:SetText("CENTER")

        labelOne:ClearAnchors()

        labelOne:SetAnchor(TOPLEFT,labelOne,TOPRIGHT,0,0)



        local labelThree = wm:CreateControl("addonName_label3",mainWindow,CT_LABEL)

        labelOne:SetText("RIGHT")

        labelOne:ClearAnchors()

        labelOne:SetAnchor(TOPLEFT,labelTwo,TOPRIGHT,0,0)

end

It's a very simple example of chaining controls or windows next to eachother. If you wanted to have them chain vertically you would just change their self align to TOP and the target aligns to BOTTOM. Keep in mind though that the first control being parented to the "main window" or "main control" would have its target align be TOP as well, otherwise the labels (or other controls) would start at the bottom of the main window outside of its background.

There are chain functions examples on here for creating things or you could make your own functions to simplify, lower code reuse, or even automate the window creations.

Ok I'm going to bed. I'll double check this tomorrow to see if it was useful for ya and in case I typed something wrong. Can't think...clowns will eat me...night.

Great !!

I thinks your examples are very helpful ^^ and very nicely commented ^^ thanks a lot :)

I'm sure with that, it can do ^^

Good job !

Hi ^^

Definitivly helpful ^^ find a way to do what i want thx a lot ^^

-> notice that you have some errors ^^ like "Anchor" not "Anchors" and some variables was incorrect in the example but it's was awesome :)

Glad it helped. Fixed some of the typos in case someone else comes across it later. I did write it when I was about to pass out, some typos were bound to happen. :)