Starting from the beginning:
In EQUI_Templates.xml is the template "WDT_RoundedNoTitle." This defines all the different graphics which make up the entire window when pieced together. The opening tag for this template starts with:
"
<WindowDrawTemplate item="WDT_RoundedNoTitle">"
and ends with
"
</WindowDrawTemplate>"
In this template are three sections with similar opening and closing tags:
"
<CloseBox> . . . </CloseBox>" - graphics for the close button
"
<MinimizeBox> . . . </MinimizeBox>" - graphics for the minimize button
"
<QMarkBox> . . . </QMarkBox>" - graphics for the help button
Each individual button template is made up of a maximum of 5 images:
"
<Normal> . . . </Normal>" - this is the default graphic
"
<Pressed> . . . </Pressed>" - this is the graphic when the button is clicked
"
<Flyby> . . . </Flyby>" - this is the graphic when the button is moused over
"
<Disabled> . . . </Disabled>" - this is the graphic when the button is disabled, i.e. the graphic for the help button when the window doesn't have an associated help file
"
<PressedFlyby> . . . </PressedFlyby>" - this is the graphic when the button is pressed and moused over. It's mostly irrelevant for the close, help and minimize buttons since they only have two states, pressed or unpressed. This template is only really used on checkbox type buttons.
None of the above five images are required. They will not crash the UI if not included. For example, <Disabled> I often just omit entirely for a blank graphic.
In each individual graphic tag is the individual graphic template, for example: "<A_MinimizeBtnNormal>." This is the default graphic used for:
<MinimizeBox>
<Normal> . . . </Normal>
</MinimizeBox>
This image template is found in EQUI_Animations.xml starting with:
"
<Ui2DAnimation item="A_QMarkBtnPressedFlyby">"
and ending with:
"
</Ui2DAnimation>"
The image template consists of two parts:
"
<Cycle>true</Cycle>" - true / false: This defines whether the images has one static image (frame) or rotates through multiple images (frames). This is not a required parameter. The UI will not crash if you omit it entirely. I often do.
"
<Frames> . . . </Frames>" -
AT LEAST ONE FRAME IS REQUIRED If you don't have at least one frame, there is no image to be drawn. This defines the number of images the graphic will rotate through if <Cycle> is set to true.
The <Frames> consists of five sections:
"
<Texture>window_pieces01.tga</Texture>" -
TEXTURE IS REQUIRED! This defines the file which contains the graphic. If you open this image and look at it, you will see the graphic the button looks like. The texture file must scaled by powers of two to render properly in EQ: 2px x 2px, 4px x 4px, 8px x 8px, 16px x 16px, 32px x 32px, 64px x 64px, 128px x 128px, 256px x 256px, 512px x 512px. 512px should be the maximum dimensions due to performance issues. I have personally used up to 1024px x 1024px in EQ just to see if it would work.
"
<Location><X>136</X>
<Y>90</Y>
</Location>"
LOCATION IS IMPORTANT! This tells the game the X and Y coordinates in pixels of the top, left hand corner of the image, in this case 136px from the left of the image and 90px from the top of the texture file "window_pieces01.tga." If you open the texture file and count over 136px and down 90px you will see the button graphic. Location is not required, it will not crash the UI if omitted, it will default to 0, 0.
"
<Size><CX>12</CX>
<CY>12</CY>
</Size>"
SIZE IS REQUIRED! This tells the game the dimensions of the graphic to draw, in this case 12px x 12px. If you open the texture file and count to the right 12px and down 12px from the starting point defined in <Location> you will see the bottom, left hand corner of the graphic.
"
<Duration> . . . </Duration>" - This defines the duration in milliseconds each frame will display if <Cycle> is set to true.
"
<Hotspot> . . . </Hotspot>" - I don't know what this does. Never used it. Always deleted it and it has never broken anything.
So, to draw your own graphics, you need to define the texture, define the location and define the size of the new graphic. Then insert the animation into the button template, insert the button template into the windowdraw template, and insert the windowdraw template into the window.
The End.
This is a terrible tutorial. Feel free to ask for clarification.