EQInterface Forums - View Single Post

OK, so before this change, we had the power to determine the size, spacing, and location of everything in the buff and song windows by just using the various size and location tags. You could have whatever element you want specifically where you wanted it and whatever size you wanted and it'd just work - it would look great, and you could do some really creative things like the old VERT UI staggered buff windows.

With the changes they made, much of that control is gone. What we have to do now is put everything in TileLayoutBoxes. Think of a TileLayoutBox as tiling a floor. in Llaffer's, there ended up being 3 different TileLayoutBoxes: we are laying 3 layers of tiles - on top of each other. The first layer in his is the buff button itself (the one we have the least control over), then the second layer is the number labels (1, 2, 3, 4, 5, 6, etc), and the third layer is the buff names (Brell's Tenacious Barrier, Temperance, etc). In yours, it's looking like 2 layers: one for the buff, one for the name.

You can still make things in multiple rows or columns by playing with the offsets as seen in how Vert UI was updated

So, step 1 to fixing any old buff window is to update the actual buffs themselves from the old buttons

Code:

<Button item="BW_Buff0_Button">
		<ScreenID>Buff0</ScreenID>
		<RelativePosition>true</RelativePosition>
		<Location>
			<X>2</X>
			<Y>0</Y>
		</Location>
		<Size>
			<CX>170</CX>
			<CY>12</CY>
		</Size>
		<Template>BDT_BlueBuff</Template>
		<DecalOffset>
			<X>0</X>
			<Y>0</Y>
		</DecalOffset>
		<DecalSize>
			<CX>12</CX>
			<CY>12</CY>
		</DecalSize>
	</Button>

To the new tile system:

Code:

<Button item="BW_Player_Buff_Template">
		<ScreenID>Player_Buff_Template</ScreenID>
		<RelativePosition>true</RelativePosition>
		<Size>
			<CX>170</CX>
			<CY>12</CY>
		</Size>
		<Template>BDT_PlayerBuff</Template>
		<DecalOffset>
			<X>0</X>
			<Y>0</Y>
		</DecalOffset>
		<DecalSize>
			<CX>12</CX>
			<CY>12</CY>
		</DecalSize>
	</Button>

So, you'd delete all the buttons (BW_Buff0_Button through to BW_Buff41_Button), and replace it with the new "Buff Template." The next step would to be to put the template in it's tilelayoutbox so that EQ can automatically lay out the tiles for us as Darkpaw intends:

Code:

<TileLayoutBox item="BW_Buttons">
		<ScreenID>Buff_Buttons</ScreenID>
		<RelativePosition>true</RelativePosition>
		<AutoStretch>true</AutoStretch>
                <TopAnchorOffset>0</TopAnchorOffset>
		<LeftAnchorOffset>2</LeftAnchorOffset>
		<RightAnchorOffset>0</RightAnchorOffset>
		<BottomAnchorOffset>0</BottomAnchorOffset>
		<BottomAnchorToTop>false</BottomAnchorToTop>
		<RightAnchorToLeft>false</RightAnchorToLeft>
		<Style_Transparent>true</Style_Transparent>
		<Spacing>0</Spacing>
		<SecondarySpacing>0</SecondarySpacing>
		<HorizontalFirst>true</HorizontalFirst>
		<AnchorToTop>true</AnchorToTop>
		<AnchorToLeft>true</AnchorToLeft>
		<FirstPieceTemplate>true</FirstPieceTemplate>
		<SnapToChildren>true</SnapToChildren>
		<Style_Sizable>false</Style_Sizable>
			<Pieces>BW_Player_Buff_Template</Pieces>
	</TileLayoutBox>

We don't get to choose where the tiles are specifically though, so if we want them to cover the same amount of area, they need to be the same size. If they're not the same size, they won't scale properly and you'll have issues, especially in a re-sizable window. If they're not, you end up with things like:

Now we've got our first layer of tiles set, and it's time to look at other layers. Some people tried to repair theirs by keeping the name and number labels like the old system, and not turning them into tiles, but I don't recommend that because then it won't allow you to interact (right and left click) with the window, so you can't link buffs, or look at descriptions, or click them off, etc.

So, as I showed above, we need our name label tile to be the same size as our buff tiles, and we need them to be in a tilelayout box:

Code:

<Label item="BW_Buff0">
		<ScreenID>Buff0Label</ScreenID>
		<EQType>500</EQType>
		<Font>1</Font>
		<RelativePosition>true</RelativePosition>
		<Style_Tooltip>false</Style_Tooltip>
		<Size>
			<CX>170</CX>
			<CY>12</CY>
		</Size>
		<Style_Transparent>true</Style_Transparent>
		<NoWrap>true</NoWrap>
	</Label>
	<TileLayoutBox item="BW_Labels">
		<RelativePosition>true</RelativePosition>
		<AutoStretch>true</AutoStretch>
                <TopAnchorOffset>0</TopAnchorOffset>
		<LeftAnchorOffset>2</LeftAnchorOffset>
		<RightAnchorOffset>0</RightAnchorOffset>
		<BottomAnchorOffset>0</BottomAnchorOffset>
		<BottomAnchorToTop>false</BottomAnchorToTop>
		<RightAnchorToLeft>false</RightAnchorToLeft>
		<Style_Transparent>true</Style_Transparent>
		<Spacing>0</Spacing>
		<SecondarySpacing>0</SecondarySpacing>
		<HorizontalFirst>true</HorizontalFirst>
		<AnchorToTop>true</AnchorToTop>
		<AnchorToLeft>true</AnchorToLeft>
		<FirstPieceTemplate>true</FirstPieceTemplate>
		<SnapToChildren>true</SnapToChildren>
		<Style_Sizable>false</Style_Sizable>
		<Style_Tooltip>false</Style_Tooltip>
			<Pieces>BW_Buff0</Pieces>
			<Pieces>BW_Buff1</Pieces>
			<Pieces>BW_Buff2</Pieces>
			<Pieces>BW_Buff3</Pieces>
			<Pieces>BW_Buff4</Pieces>
			<Pieces>BW_Buff5</Pieces>
			<Pieces>BW_Buff6</Pieces>
			<Pieces>BW_Buff7</Pieces>
			<Pieces>BW_Buff8</Pieces>
			<Pieces>BW_Buff9</Pieces>
			<Pieces>BW_Buff10</Pieces>
			<Pieces>BW_Buff11</Pieces>
			<Pieces>BW_Buff12</Pieces>
			<Pieces>BW_Buff13</Pieces>
			<Pieces>BW_Buff14</Pieces>
			<Pieces>BW_Buff15</Pieces>
			<Pieces>BW_Buff16</Pieces>
			<Pieces>BW_Buff17</Pieces>
			<Pieces>BW_Buff18</Pieces>
			<Pieces>BW_Buff19</Pieces>
			<Pieces>BW_Buff20</Pieces>
			<Pieces>BW_Buff21</Pieces>
			<Pieces>BW_Buff22</Pieces>
			<Pieces>BW_Buff23</Pieces>
			<Pieces>BW_Buff24</Pieces>
			<Pieces>BW_Buff25</Pieces>
			<Pieces>BW_Buff26</Pieces>
			<Pieces>BW_Buff27</Pieces>
			<Pieces>BW_Buff28</Pieces>
			<Pieces>BW_Buff29</Pieces>
			<Pieces>BW_Buff30</Pieces>
			<Pieces>BW_Buff31</Pieces>
			<Pieces>BW_Buff32</Pieces>
			<Pieces>BW_Buff33</Pieces>
			<Pieces>BW_Buff34</Pieces>
			<Pieces>BW_Buff35</Pieces>
			<Pieces>BW_Buff36</Pieces>
			<Pieces>BW_Buff37</Pieces>
			<Pieces>BW_Buff38</Pieces>
			<Pieces>BW_Buff39</Pieces>
			<Pieces>BW_Buff40</Pieces>
			<Pieces>BW_Buff41</Pieces>
	</TileLayoutBox>

This is what making those changes looks like on your window so far Finchy, as you can see, still not quite right - the buff names are overlapping the buff images.

Now, you COULD fix that by changing the <LeftAnchorOffset>2</LeftAnchorOffset> to 15 instead of 2 since your window isn't resizable, but in a resizable window you wouldn't want to do that because it causes more issues with scaling and you end up with names all over the place again like I showed above. Another reason you don't really want to settle for just that is that it'll cause the names to go over top of the timers on the right side.

You'd have the same problem with everything covering the timers on the right side if you tried to fix it by using the <AlignRight>true</AlignRight> tag.

You could also use the <AlignCenter>true</AlignCenter> tag, but you'd still have that problem with overlap on buffs with very long names (like the cleric Rallied Greater Blessing of Vie Rk. III), and aligning things to the center just looks weird in my opinion.

So... how do we want to fix it properly so we can avoid the overlap? We add an invisible spacer label to both the front and back so our buff name can't fill that space.

Code:

<Label item="BW_Buff_FrontSpacer">
		<ScreenID>BuffFrontSpacer</ScreenID>
		<RelativePosition>true</RelativePosition>
		<Font>2</Font>
		<Location>
			<X>0</X>
			<Y>2</Y>
		</Location>
		<Size>
			<CX>16</CX>
			<CY>12</CY>
		</Size>
		<Style_Tooltip>false</Style_Tooltip>
	</Label>

	<Label item="BW_Buff0">
		<ScreenID>Buff0Label</ScreenID>
		<EQType>500</EQType>
		<Font>1</Font>
		<RelativePosition>true</RelativePosition>
		<Style_Tooltip>false</Style_Tooltip>
		<Location>
			<X>16</X>
			<Y>0</Y>
		</Location>
		<Size>
			<CX>141</CX>
			<CY>12</CY>
		</Size>
		<Style_Transparent>true</Style_Transparent>
		<NoWrap>true</NoWrap>
	</Label>

	<Label item="BW_Buff_BackSpacer">
		<ScreenID>BuffBackSpacer</ScreenID>
		<RelativePosition>true</RelativePosition>
		<Font>2</Font>
		<Location>
			<X>157</X>
			<Y>2</Y>
		</Location>
		<Size>
			<CX>13</CX>
			<CY>12</CY>
		</Size>
		<Style_Tooltip>false</Style_Tooltip>
	</Label>

Oh no! Now we've got 3 different elements that are the wrong size though, so what do we do to fix that? We wrap it in a screen item - we're wrapping our 3 little tiles in plastic wrap so they count as one big tile of the right size.

Code:

<Screen item="BW_00_Screen">
		<Size>
			<CX>170</CX>
			<CY>12</CY>
		</Size>
			<Pieces>BW_Buff_FrontSpacer</Pieces>
			<Pieces>BW_Buff0_</Pieces>
			<Pieces>BW_Buff_BackSpacer</Pieces>
	</Screen>

Once we've got all our Buff label bricks and spacers all wrapped up into their 42 different screens, we need to adjust the tilelayoutbox so that it's calling for the screen items instead of just the buff piece by itself.

Code:

<TileLayoutBox item="BW_Labels">
		<RelativePosition>true</RelativePosition>
		<AutoStretch>true</AutoStretch>
		<TopAnchorOffset>0</TopAnchorOffset>
		<LeftAnchorOffset>2</LeftAnchorOffset>
		<RightAnchorOffset>0</RightAnchorOffset>
		<BottomAnchorOffset>0</BottomAnchorOffset>
		<BottomAnchorToTop>false</BottomAnchorToTop>
		<RightAnchorToLeft>false</RightAnchorToLeft>
		<Style_Transparent>true</Style_Transparent>
		<Spacing>0</Spacing>
		<SecondarySpacing>0</SecondarySpacing>
		<HorizontalFirst>true</HorizontalFirst>
		<AnchorToTop>true</AnchorToTop>
		<AnchorToLeft>true</AnchorToLeft>
		<FirstPieceTemplate>true</FirstPieceTemplate>
		<SnapToChildren>true</SnapToChildren>
		<Style_Sizable>false</Style_Sizable>
		<Style_Tooltip>false</Style_Tooltip>
			<Pieces>Screen:BW_00_Screen</Pieces>
			<Pieces>Screen:BW_01_Screen</Pieces>
			<Pieces>Screen:BW_02_Screen</Pieces>
			<Pieces>Screen:BW_03_Screen</Pieces>
			<Pieces>Screen:BW_04_Screen</Pieces>
			<Pieces>Screen:BW_05_Screen</Pieces>
			<Pieces>Screen:BW_06_Screen</Pieces>
			<Pieces>Screen:BW_07_Screen</Pieces>
			<Pieces>Screen:BW_08_Screen</Pieces>
			<Pieces>Screen:BW_09_Screen</Pieces>
			<Pieces>Screen:BW_10_Screen</Pieces>
			<Pieces>Screen:BW_11_Screen</Pieces>
			<Pieces>Screen:BW_12_Screen</Pieces>
			<Pieces>Screen:BW_13_Screen</Pieces>
			<Pieces>Screen:BW_14_Screen</Pieces>
			<Pieces>Screen:BW_15_Screen</Pieces>
			<Pieces>Screen:BW_16_Screen</Pieces>
			<Pieces>Screen:BW_17_Screen</Pieces>
			<Pieces>Screen:BW_18_Screen</Pieces>
			<Pieces>Screen:BW_19_Screen</Pieces>
			<Pieces>Screen:BW_20_Screen</Pieces>
			<Pieces>Screen:BW_21_Screen</Pieces>
			<Pieces>Screen:BW_22_Screen</Pieces>
			<Pieces>Screen:BW_23_Screen</Pieces>
			<Pieces>Screen:BW_24_Screen</Pieces>
			<Pieces>Screen:BW_25_Screen</Pieces>
			<Pieces>Screen:BW_26_Screen</Pieces>
			<Pieces>Screen:BW_27_Screen</Pieces>
			<Pieces>Screen:BW_28_Screen</Pieces>
			<Pieces>Screen:BW_29_Screen</Pieces>
			<Pieces>Screen:BW_30_Screen</Pieces>
			<Pieces>Screen:BW_31_Screen</Pieces>
			<Pieces>Screen:BW_32_Screen</Pieces>
			<Pieces>Screen:BW_33_Screen</Pieces>
			<Pieces>Screen:BW_34_Screen</Pieces>
			<Pieces>Screen:BW_35_Screen</Pieces>
			<Pieces>Screen:BW_36_Screen</Pieces>
			<Pieces>Screen:BW_37_Screen</Pieces>
			<Pieces>Screen:BW_38_Screen</Pieces>
			<Pieces>Screen:BW_39_Screen</Pieces>
			<Pieces>Screen:BW_40_Screen</Pieces>
			<Pieces>Screen:BW_41_Screen</Pieces>
	</TileLayoutBox>

Now we need to make the final buff window use our tilelayoutbox's as their pieces:

Code:

<Screen item="BuffWindow">
		<Text>Effects</Text>
		<RelativePosition>false</RelativePosition>
		<Location>
			<X>450</X>
			<Y>240</Y>
		</Location>
		<Size>
			<CX>185</CX>
			<CY>515</CY>
		</Size>
		<Style_Transparent>true</Style_Transparent>
		<DrawTemplate>WDT_RoundedNoTitle</DrawTemplate>
		<Style_Titlebar>false</Style_Titlebar>
		<Style_Closebox>true</Style_Closebox>
		<Style_Minimizebox>true</Style_Minimizebox>
		<Style_Border>true</Style_Border>
		<Style_Sizable>false</Style_Sizable>
		<Escapable>false</Escapable>
		<Style_ClientMovable>true</Style_ClientMovable>
			<Pieces>TileLayoutBox:BW_Buttons</Pieces>
			<Pieces>TileLayoutBox:BW_Labels</Pieces>
	</Screen>

Looking much better now!

Bonus points if you decide you want to make your buff window resizable (NOTE: I didn't do this to your windows - I left them as-is). Add:

Code:

<LayoutStrategy item="BW_Snap_Both">
		<Padding>0</Padding>
		<ResizeHorizontal>true</ResizeHorizontal>
		<ResizeVertical>true</ResizeVertical>
	</LayoutStrategy>

Then, in the final screen item, add this line: <Layout>BW_Snap_Both</Layout>

Example:

Code:

<LayoutStrategy item="BW_Snap_Both">
		<Padding>0</Padding>
		<ResizeHorizontal>true</ResizeHorizontal>
		<ResizeVertical>true</ResizeVertical>
	</LayoutStrategy>
	<Screen item="BuffWindow">
		<Text>Effects</Text>
		<RelativePosition>false</RelativePosition>
		<Layout>BW_Snap_Both</Layout>
		<Location>
			<X>450</X>
			<Y>240</Y>
		</Location>
		<Size>
			<CX>185</CX>
			<CY>515</CY>
		</Size>
		<Style_Transparent>true</Style_Transparent>
		<DrawTemplate>WDT_RoundedNoTitle</DrawTemplate>
		<Style_Titlebar>false</Style_Titlebar>
		<Style_Closebox>true</Style_Closebox>
		<Style_Minimizebox>true</Style_Minimizebox>
		<Style_Border>true</Style_Border>
		<Style_Sizable>false</Style_Sizable>
		<Escapable>false</Escapable>
		<Style_ClientMovable>true</Style_ClientMovable>
			<Pieces>TileLayoutBox:BW_Buttons</Pieces>
			<Pieces>TileLayoutBox:BW_Labels</Pieces>
	</Screen>

If you did want to add a layer of numbers, and you wanted them to not show when there is a buff in that slot, unlike in Llaffer's, you'd simply adjust your TileLayoutBox's like so that the numbers are on the bottom, the buffs in the middle, and the labels on top like:

Code:

             <Pieces>TileLayoutBox:BW_Numbers</Pieces>
			<Pieces>TileLayoutBox:BW_Buttons</Pieces>
			<Pieces>TileLayoutBox:BW_Labels</Pieces>

Updating the song window is exactly the same process as the buff window, so I'm not going to repeat myself and take pretty pictures of that process.

Your target window is actually the easiest to adjust because there's not much change. Again, all they did was hard-code things so that Darkpaw determines the number of buffs and where they are, so instead of:

Code:

<Button item="Target_Buff0_Button">
		<ScreenID>Buff0</ScreenID>
		<Size>
			<CX>20</CX>
			<CY>20</CY>
		</Size>
		<Style_VScroll>false</Style_VScroll>
		<Style_HScroll>false</Style_HScroll>
		<Style_Transparent>false</Style_Transparent>
		<Style_Checkbox>false</Style_Checkbox>
		<DecalOffset>
			<X>1</X>
			<Y>2</Y>
		</DecalOffset>
		<DecalSize>
			<CX>18</CX>
			<CY>18</CY>
		</DecalSize>
	</Button>

and it's 96 friends... delete them all and replace that section with:

Code:

<Button item="Target_Buff_Template">
		<ScreenID>TargetBuffSlot</ScreenID>
		<Size>
			<CX>20</CX>
			<CY>20</CY>
		</Size>
		<Template>BDT_TargetBuff</Template>
		<DecalOffset>
			<X>1</X>
			<Y>2</Y>
		</DecalOffset>
		<DecalSize>
			<CX>18</CX>
			<CY>18</CY>
		</DecalSize>
	</Button>

Also, don't forget to update the pieces in the Target_Buttons TileLayoutBox to the new Buff Template we added:

Code:

<TileLayoutBox item="Target_Buttons">
		<RelativePosition>true</RelativePosition>
                <ScreenID>TargetBuffsButtons</ScreenID>
		<AutoStretch>true</AutoStretch>
		<BottomAnchorToTop>false</BottomAnchorToTop>
		<RightAnchorToLeft>false</RightAnchorToLeft>
		<Style_Transparent>true</Style_Transparent>
		<Spacing>0</Spacing>
		<SecondarySpacing>0</SecondarySpacing>
		<HorizontalFirst>true</HorizontalFirst>
		<AnchorToTop>true</AnchorToTop>
		<AnchorToLeft>true</AnchorToLeft>
		<FirstPieceTemplate>true</FirstPieceTemplate>
			<Pieces>Target_Buff_Template</Pieces>
	</TileLayoutBox>

Since I had to fix things anyways to show you the changes to the buff window, I am attaching fixed copies of all 3 files here for you to use as reference if needed. I hope this post makes things a bit clearer for you.