Thread Tools Display Modes
04/29/20, 01:47 PM   #1
Fooberticus
AddOn Author - Click to view addons
Join Date: Apr 2020
Posts: 2
Centering Controls (Lua/XML)

Hello, I've written my first addon and will publish it as soon as I figure out this one issue.

I started out simple, with a TopLevelControl that contained a Label. The desired display would be the text in the label appearing centered on the screen, just above the reticle. This was easy and direct enough in XML (pretty much straight from the "build your first addon" tutorial):

Code:
...
<TopLevelControl name="SomeTopLevelControl" hidden="true" mouseEnabled="true" movable="true" clampedToScreen="true">
      <Dimensions x="300" y="25" />
      <Anchor point="BOTTOM" relativeTo="GuiRoot" relativePoint="CENTER" offsetY="-40"/>
 
      <Controls> 

        <Label name="FooLabel" font="ZoFontWinH1" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            wrapMode="TRUNCATE" verticalAlignment="CENTER" horizontalAlignment="CENTER" text="Example Text Blah">
          <Anchor point="TOP" relativeTo="$(parent)" relativePoint="TOP" />
        </Label>

      </Controls>
</TopLevelControl>
...
Things got a little tricky when I wanted to add an icon to the left of the text. In order to get the texture to appear directly to the left of the text, I had to basically left-justify everything and make the anchors for the texture and the text relative to one another, something like:

Code:
...
<TopLevelControl name="SomeTopLevelControl" hidden="true" mouseEnabled="true" movable="true" clampedToScreen="true">
      <Dimensions x="300" y="25" />
      <Anchor point="BOTTOM" relativeTo="GuiRoot" relativePoint="CENTER" offsetY="-40"/>
 
      <Controls> 
	  
	<Texture hidden="true" name="$(parent)Icon" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            textureFile="/esoui/art/lfg/lfg_icon_healer.dds">
          <Dimensions x="40" y="40"/>
          <Anchor point="RIGHT" relativeTo="FooLabel" relativePoint="LEFT"/>
        </Texture>

        <Label name="FooLabel" font="ZoFontWinH1" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            wrapMode="TRUNCATE" verticalAlignment="CENTER" horizontalAlignment="CENTER" text="Example Text Blah">
          <Anchor point="LEFT" relativeTo="$(parent)Icon" relativePoint="RIGHT" />
        </Label>

      </Controls>
</TopLevelControl>
...
The problem is, of course now the Icon-Text combination are no longer centered in the screen since it's left justified. And I can't for the life of me figure out the solution to get the Icon-Text control combo to be centered on screen. I've worked with HTML and CSS for a couple of decades but the solution to this simple problem is eluding me.

I've considered shimming the placement of the controls using Lua logic to calculate the position, but that seems ridiculous and there has to be a simple solution using anchors that I'm just not seeing. I've messed with it for several hours at this point and I thought I'd ask the experts.

Thank you for any help in the matter!
  Reply With Quote
04/29/20, 01:54 PM   #2
sirinsidiator
 
sirinsidiator's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2014
Posts: 1,566
From the code you posted it looks you are getting the order wrong. You are trying to anchor the texture to the label control, but define the label after the texture. When the game sees the line defining the anchor, FooLabel is nil, so instead it used the parent control SomeTopLevelControl as anchor target.
  Reply With Quote
04/29/20, 02:12 PM   #3
Fooberticus
AddOn Author - Click to view addons
Join Date: Apr 2020
Posts: 2
Yes. Yes, that worked. Goddammit. Thanks very much for the assist!

Working solution that centers the texture+label correctly:

Code:
...
<TopLevelControl name="SomeTopLevelControl" hidden="true" mouseEnabled="true" movable="true" clampedToScreen="true">
      <Dimensions x="300" y="25" />
      <Anchor point="BOTTOM" relativeTo="GuiRoot" relativePoint="CENTER" offsetY="-40"/>
 
      <Controls> 
        <Label name="FooLabel" font="ZoFontWinH1" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            wrapMode="TRUNCATE" verticalAlignment="CENTER" horizontalAlignment="CENTER" text="Example Text Blah">
          <Anchor point="TOP" relativeTo="$(parent)" relativePoint="TOP" />
        </Label>

        <Texture hidden="true" name="$(parent)Icon" inheritAlpha="true" inheritScale="true" pixelRoundingEnabled="true"
            textureFile="/esoui/art/lfg/lfg_icon_healer.dds">
          <Dimensions x="40" y="40"/>
          <Anchor point="RIGHT" relativeTo="FooLabel" relativePoint="LEFT"/>
        </Texture>

      </Controls>
</TopLevelControl>
...
  Reply With Quote

ESOUI » Developer Discussions » Lua/XML Help » Centering Controls (Lua/XML)

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