Quantcast
Flexible height of 2 panels / correct positioning - ESOUI
Thread Tools Display Modes
07/01/21, 04:38 AM   #1
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Flexible height of 2 panels / correct positioning

Hi there,

it should be simple but it isnt (for me). For some hours I am trying to position 2 labels with dynamic content directly beneath one after the other.
This is not working They are allways placed in the center of the control.

The text is set with the setText(string) function and is an item property (GetItemLink...). Thats why the contentheight differs. The control height will be set with GetTextHeight and so on. But this is making it currently worse They are truncated all the time and not correclty positioned.

This should be simple or not? There is definitly something wrong with the second anchor wich defines the height of the label... if its just one row (without second anchor) its working.

What am I not seeing?

Here is the (simplified) xml of the 2 labels:

<GuiXml>
<Controls>
<TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true">
<Dimensions x="300" y="500" />
<Controls>
<Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />

<Label name="$(parent)ItemTex1" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
<Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>
<Anchor point="BOTTOMRIGHT" relativeTo="$(parent)" relativePoint="RIGHT" offsetX="-15" offsetY="-5" />
</Label>

<Label name="$(parent)ItemTex2" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
<Anchor point="TOPLEFT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMLEFT" offsetX="15" offsetY="10"/>
<Anchor point="BOTTOMRIGHT" relativeTo="$(parent)" relativePoint="RIGHT" offsetX="-15" offsetY="-5" />
</Label>

</Controls>
</TopLevelControl>
</Controls>
</GuiXml>
  Reply With Quote
07/01/21, 04:50 AM   #2
votan
 
votan's Avatar
AddOn Author - Click to view addons
Join Date: Oct 2014
Posts: 555
From just looking at it, I would guess it is the second anchor of the second label causing it.

You should 2. anchor the second label like this:
<Anchor point="TOPRIGHT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />
__________________
@votan73 (EU - megaserver)
  Reply With Quote
07/01/21, 04:54 AM   #3
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
like this?

<Label name="$(parent)ItemTex2" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
<Anchor point="TOPLEFT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMLEFT" offsetX="15" offsetY="10"/>
<Anchor point="TOPRIGHT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />
</Label>
  Reply With Quote
07/01/21, 04:58 AM   #4
votan
 
votan's Avatar
AddOn Author - Click to view addons
Join Date: Oct 2014
Posts: 555
Originally Posted by rp12439_3 View Post
like this?

<Label name="$(parent)ItemTex2" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
<Anchor point="TOPLEFT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMLEFT" offsetX="15" offsetY="10"/>
<Anchor point="TOPRIGHT" relativeTo="$(parent)ItemTex1" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />
</Label>
yes. like this.
__________________
@votan73 (EU - megaserver)
  Reply With Quote
07/01/21, 05:00 AM   #5
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
thanks will try...

I guess my understanding of anchors is in great need of improvement...
  Reply With Quote
07/01/21, 05:06 AM   #6
Baertram
Super Moderator
 
Baertram's Avatar
WoWInterface Super Mod
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 3,687
https://wiki.esoui.com/Control:SetAn...mically_sizing

2nd Label's offsetX should be 0 though! Else you will move the label2 15 pixels more accordingly to the Label1 which already was moved by 15pixel on x axis.

Last edited by Baertram : 07/01/21 at 05:09 AM.
  Reply With Quote
07/01/21, 05:09 AM   #7
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Ive studied this... a lot...
  Reply With Quote
07/01/21, 05:22 AM   #8
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
The change to the second anchor in the second label had no effect.
  Reply With Quote
07/01/21, 05:23 AM   #9
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Here is the full XML:

Code:
<GuiXml>
    <Controls>
        <TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true">
            <!--Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="0" offsetY="0"/-->
            <Dimensions x="300" y="500" />
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
                <Texture name="$(parent)ItemIcon" textureFile="" tier="HIGH">
					<Dimensions x="50" y="50"/>
					<Anchor point="CENTER" relativeTo="$(parent)" relativePoint="TOP" offsetY="-10" />
				</Texture>
                <Label name="$(parent)ItemLink" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">
                    <Anchor point="TOP" relativeTo="$(parent)ItemIcon" relativePoint="BOTTOM" offsetX="0" offsetY="10"/>
                </Label>
				<Label name="$(parent)ItemType" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">
                    <Anchor point="TOP" relativeTo="$(parent)ItemLink" relativePoint="BOTTOM" offsetX="0" offsetY="5"/>
                </Label>
                
                <Texture name="$(parent)Divider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">
					<Dimensions x="300" y="4"/>
					<Anchor point="CENTER" relativeTo="$(parent)ItemType" relativePoint="BOTTOM" offsetY="10" />
				</Texture>
				
				<Label name="$(parent)TraitTypeText" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
                    <Anchor point="TOPLEFT" relativeTo="$(parent)Divider" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>
                    <Anchor point="BOTTOMRIGHT" relativePoint="RIGHT" offsetX="-15" offsetY="0"/>
                </Label>
				
                <Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
                    <Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>
                    <Anchor point="TOPRIGHT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMRIGHT" offsetX="-15" offsetY="10" />
                </Label>

            </Controls>
        </TopLevelControl>      
    </Controls>
</GuiXml>
and some part of the lua:

Code:
local itemIcon
  local itemLink
  local traitText
  local traitType
  local traitTypeText
  local traitTypeDesc
  local itemType
  local itemTypeSpec
  local itemTypeSpecText
  local itemFlavor
  local traitTypeTextHeight = 0
  local itemFlavorTextHeight = 0
  
  itemIcon = GetItemLinkIcon(control.data.link)
  itemLink = control.data.link
  if GetItemLinkTraitType(control.data.link) ~= 0 then
    traitType, traitTypeDesc =  GetItemLinkTraitInfo(control.data.link)
    traitTypeText = GetString("SI_ITEMTRAITTYPE", traitType).."\n"..traitTypeDesc
  end
  itemType, itemTypeSpec = GetItemLinkItemType(control.data.link)
  itemTypeSpecText = GetString("SI_SPECIALIZEDITEMTYPE", itemTypeSpec)
  itemFlavor = GetItemLinkFlavorText(control.data.link)

  CraftyStockListTooltipItemIcon:SetTexture(itemIcon)
  CraftyStockListTooltipItemLink:SetText(itemLink)
  CraftyStockListTooltipItemType:SetText(itemTypeSpecText)
  CraftyStockListTooltipTraitTypeText:SetText(traitTypeText)
  CraftyStockListTooltipItemFlavor:SetText(itemFlavor)
  Reply With Quote
07/01/21, 05:33 AM   #10
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Thats how it look like:

http://imageserver.ocis-network.de/tooltip.png
  Reply With Quote
07/01/21, 08:41 AM   #11
Baertram
Super Moderator
 
Baertram's Avatar
WoWInterface Super Mod
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 3,687
From my understanding, if you want the ItemFlavor to be directly below the TraitTypeText.
I've added resizeToFitDescendants="true" to your TLC so it will change it's size depending on the text and other contents and also DimensionConstraints so the maximum size will not be above 300 width and 500 height (change the height to your maximal needs).

Code:
<GuiXml>
    <Controls>
        <TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true" resizeToFitDescendants="true">
            <!--Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="0" offsetY="0"/-->
            <Dimensions x="300" y="0" />
            <DimensionConstraints minX="300" minY="0" maxX="300" maxY="500" />
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
                <Texture name="$(parent)ItemIcon" textureFile="" tier="HIGH">
					<Dimensions x="50" y="50"/>
					<Anchor point="CENTER" relativeTo="$(parent)" relativePoint="TOP" offsetY="-10" />
				</Texture>
                <Label name="$(parent)ItemLink" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">
                    <Anchor point="TOP" relativeTo="$(parent)ItemIcon" relativePoint="BOTTOM" offsetX="0" offsetY="10"/>
                </Label>
				<Label name="$(parent)ItemType" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">
                    <Anchor point="TOP" relativeTo="$(parent)ItemLink" relativePoint="BOTTOM" offsetX="0" offsetY="5"/>
                </Label>

                <Texture name="$(parent)Divider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">
					<Dimensions x="300" y="4"/>
					<Anchor point="CENTER" relativeTo="$(parent)ItemType" relativePoint="BOTTOM" offsetY="10" />
				</Texture>

				<Label name="$(parent)TraitTypeText" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
                    <Anchor point="TOPLEFT" relativeTo="$(parent)Divider" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>
                </Label>

                <Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
                    <Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>
                </Label>

            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>
The labels do not necessarily need any 2nd anchor for your usecase except if you want to tell the ItemFlavor label to be anchored to the bottom of the tooltip. But the labels should resize themselves to the size they will need. Else you can set the Dimension Constraints for the labels as well so they will not get bigger than/smaller than...
If you anchor the middle label (TraitTypeText) to the RIGHT it will ALWAYS be the size from Divider to the middle (RIGHT) of the tlc (tooltip control).
And the following anchored label will then begin below that RIGHT (middle) of the tlc.


Last edited by Baertram : 07/01/21 at 08:55 AM.
  Reply With Quote
07/01/21, 08:50 AM   #12
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Originally Posted by Baertram View Post
From my understanding, if you want the ItemFlavor to be directly below the TraitTypeText.
I've added resizeToFitDescendants="true" to your TLC so it will change it's size depending on the text and other contents and also DimensionConstraints so the maximum size will not be above 300 width and 500 height (change the height to your maximal needs).

Code:
<GuiXml>
    <Controls>
        <TopLevelControl name="CraftyStockListTooltip" hidden="true" mouseEnabled="true" movable="false" clampedToScreen="true" resizeToFitDescendants="true">
            <!--Anchor point="TOPLEFT" relativeTo="$(parent)" relativePoint="TOPRIGHT" offsetX="0" offsetY="0"/-->
            <Dimensions x="300" y="0" />
            <DimensionConstraints minX="300" minY="0" maxX="300" maxY="500" />
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
                <Texture name="$(parent)ItemIcon" textureFile="" tier="HIGH">
					<Dimensions x="50" y="50"/>
					<Anchor point="CENTER" relativeTo="$(parent)" relativePoint="TOP" offsetY="-10" />
				</Texture>
                <Label name="$(parent)ItemLink" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">
                    <Anchor point="TOP" relativeTo="$(parent)ItemIcon" relativePoint="BOTTOM" offsetX="0" offsetY="10"/>
                </Label>
				<Label name="$(parent)ItemType" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="CENTER" text="">
                    <Anchor point="TOP" relativeTo="$(parent)ItemLink" relativePoint="BOTTOM" offsetX="0" offsetY="5"/>
                </Label>

                <Texture name="$(parent)Divider" textureFile="/esoui/art/miscellaneous/horizontaldivider.dds" tier="HIGH">
					<Dimensions x="300" y="4"/>
					<Anchor point="CENTER" relativeTo="$(parent)ItemType" relativePoint="BOTTOM" offsetY="10" />
				</Texture>

				<Label name="$(parent)TraitTypeText" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
                    <Anchor point="TOPLEFT" relativeTo="$(parent)Divider" relativePoint="TOPLEFT" offsetX="15" offsetY="10"/>
                </Label>

                <Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
                    <Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>
                </Label>

            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>
The labels do not necessarily need any 2nd anchor for your usecase except if you want to tell the ItemFlavor label to be anchored to the bottom of the tooltip. But the labels should resize themselves to the size they will need. Else you can set the Dimension Constraints for the labels as well so they will not get bigger than/smaller than...
If you anchor the middle label (TraitTypeText) to the RIGHT it will ALWAYS be the size from Divider to the middle (RIGHT) of the tlc (tooltip control).
And the following anchored label will then begin below that RIGHT (middle) of the tlc.
Thank you so much. I will try this!

I had to add the second anchor to the labels because they did not wrap without it. Dont know why.
  Reply With Quote
07/01/21, 09:52 AM   #13
Baertram
Super Moderator
 
Baertram's Avatar
WoWInterface Super Mod
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 3,687
Originally Posted by rp12439_3 View Post
Thank you so much. I will try this!

I had to add the second anchor to the labels because they did not wrap without it. Dont know why.
I guess because there was no height of the label defined via Dimensions or DimensionConstraints.
You could also add a 2nd anchor to the bottom label so it anchors to the bottom of the TLC.
This will span the label from topleft to bottomright.
Only the 1st label needs to be defined with a dimensin so the 2nd knows where to anchor to.

<Label name="$(parent)ItemFlavor" font="ZoFontGameLargeBold" color="CFDCBD" wrapMode="ELLIPSIS" verticalAlignment="TOP" text="">
<Anchor point="TOPLEFT" relativeTo="$(parent)TraitTypeText" relativePoint="BOTTOMLEFT" offsetX="0" offsetY="0"/>
<Anchor point="BOTTOMRIGHT" relativeTo="$(parent)" relativePoint="BOTTOMRIGHT" offsetX="0" offsetY="0"/>
</Label>

Last edited by Baertram : 07/01/21 at 09:56 AM.
  Reply With Quote
07/01/21, 10:08 AM   #14
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Well.. the result is interesting

http://imageserver.ocis-network.de/tt2.png

I will try somethings.
  Reply With Quote
07/01/21, 10:21 AM   #15
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Originally Posted by rp12439_3 View Post
Well.. the result is interesting

http://imageserver.ocis-network.de/tt2.png

I will try somethings.
Dimension Constraints to the labels do the trick for the wrapping now i just need a working background.
  Reply With Quote
07/01/21, 10:25 AM   #16
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
Originally Posted by rp12439_3 View Post
Dimension Constraints to the labels do the trick for the wrapping now i just need a working background.
Calculated the height with GetTextHeight and now its working! Great, and thanks again!
  Reply With Quote
07/01/21, 10:27 AM   #17
rp12439_3
AddOn Author - Click to view addons
Join Date: Jun 2021
Posts: 41
and now i know how to add an image to the post
Attached Thumbnails
Click image for larger version

Name:	tt3.png
Views:	31
Size:	669.5 KB
ID:	1406  
  Reply With Quote
07/02/21, 01:08 AM   #18
Baertram
Super Moderator
 
Baertram's Avatar
WoWInterface Super Mod
AddOn Author - Click to view addons
Join Date: Mar 2014
Posts: 3,687
Oh okay, I thought the resizeToFitDescendents at the Tlc would do the trick. Try to add it to the background backdrop, and remove the AnchorFill there (both at the same time do not work).
Without the text height calculated it could resize to the Labels then as they got constraints for their dimensions.
  Reply With Quote

ESOUI » Developer Discussions » Lua/XML Help » Flexible height of 2 panels / correct positioning

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