Adding new tab to the character frame

AeroMaxxD · 04-26-23, 05:28 AM

I am looking to add a new tab to the character panel, I did some googling and found a post here which mentioned how to add a new tab to the collections journal which I have amended to add the tab to the character panel instead, except unfortunately it doesn't seem to work.

The code is as follows. Is there any error in this code somewhere? the game itself doesn't report any errors.

Code:

local TabName="MyNewTab";
 
local TabID=CharacterFrame.numTabs+1;
local Tab=CreateFrame("Button","$parentTab"..TabID,CharacterFrame,"CharacterFrameTab",TabID);
PanelTemplates_SetNumTabs(CharacterFrame,TabID);
Tab:SetPoint("LEFT","$parentTab"..(TabID-1),"RIGHT",-16,0);
Tab:SetText(TabName);
 
local Panel=CreateFrame("Frame",nil,CharacterFrame);
Panel:SetAllPoints(CharacterFrame);
 
hooksecurefunc("CharacterFrame_UpdateSelectedTab",function(self)
    local selected=PanelTemplates_GetSelectedTab(self);
    if selected==TabID then CharacterFrameTitleText:SetText(TabName); end
    Panel:SetShown(selected==TabID);
end);

Fizzlemizz · 04-26-23, 09:29 AM

Lua Code:

local TabName="MyNewTab";
local TabID=CharacterFrame.numTabs+1;
local Tab=CreateFrame("Button" ,"$parentTab"..TabID, CharacterFrame, "CharacterFrameTabTemplate");
PanelTemplates_SetNumTabs(CharacterFrame,TabID);
Tab:SetPoint("LEFT","$parentTab"..(TabID-1),"RIGHT",-16,0);
Tab:SetText(TabName);
Tab:SetID(TabID)
 
local Panel=CreateFrame("Frame", "A_Test_Panel", CharacterFrame);
tinsert(CHARACTERFRAME_SUBFRAMES, "A_Test_Panel")
Panel:Hide()
Panel:SetAllPoints(CharacterFrame);
Panel.Text = Panel:CreateFontString()
Panel.Text:SetFontObject(GameFontNormal)
Panel.Text:SetText("My character panel!")
Panel.Text:SetPoint("CENTER")
 
hooksecurefunc("CharacterFrameTab_OnClick",function(self, button)
    if self:GetID() == TabID then
        ToggleCharacter("A_Test_Panel")
    end
end);

AeroMaxxD · 04-26-23, 11:08 AM

That works great thank you!

I added some comments, so I'd remember what does what in the future when I need to look at it again.

I do have a question if I wanted to add stuff to the new Frame from an xml file how would I do that.

The below sort of works in that it creates a new frame which is great, but it doesn't add to the tab on the character frame, instead it creates a standalone frame over the top of character pane, but slightly offset, this new frame does open when I click on my new tab.

Also for my new tab is it possible to change the icon that is in the top left corner of my new tab to something else?

Code:

<Ui xmlns="http://www.blizzard.com/wow/ui/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.blizzard.com/wow/ui/ http://wowprogramming.com/FrameXML/UI.xsd">
	<Frame name="OuterContent" parent="A_Test_Panel" frameStrata="HIGH" enableMouse="true" movable="true">
		<Size x="205" y="512"/>
		<Anchors>
			<Anchor point="CENTER" relativePoint="CENTER" relativeTo="A_Test_Panel"/>
		</Anchors>
		<Frames>
			<Frame name="InnerContent" parent="OuterContent">
				My character panel!
			</Frame>
			<Button name="Button1" inherits="UIPanelButtonTemplate" text="Button1">
				<Size x="109" y="22"/>
				<Anchors>
					<Anchor point="BOTTOMLEFT" x="-127" y="83"/>
				</Anchors>
			</Button>
			<Button name="Button2" inherits="UIPanelButtonTemplate" text="Button2">
				<Size x="100" y="22"/>
				<Anchors>
					<Anchor point="BOTTOMLEFT" x="95" y="83"/>
				</Anchors>
			</Button>
			<Button name="ButtonTab" inherits="PanelTopTabButtonTemplate" text="ButtonTab" id="1">
				<Anchors>
					<Anchor point="BOTTOMLEFT" x="98" y="440"/>
				</Anchors>
				<ButtonText parentKey="Text">
					<Size x="0" y="10"/>
					<Anchors>
						<Anchor point="CENTER" x="0" y="-8"/>
					</Anchors>
				</ButtonText>
			</Button>
		</Frames>
		<Layers>
			<Layer level="BORDER">
				<Texture file="Interface\LFGFRAME\UI-FRAME-THREEBUTTON-BLANK">
					<Anchors>
						<Anchor point="CENTER"/>
					</Anchors>
				</Texture>
			</Layer>
			<Layer level="BACKGROUND">
				<Texture name="$parent_Portrait" parentKey="portrait" file="Interface\ICONS\INV_Misc_Book_12">
					<Size x="65" y="65"/>
					<Anchors>
						<Anchor point="TOPLEFT">
							<Offset x="-144" y="-4"/>
						</Anchor>
					</Anchors>
				</Texture>
			</Layer>
			<Layer level="OVERLAY">
				<FontString name="$parent_Title" parentKey="title" inherits="GameFontNormal" text="MyNewTab">
					<Anchors>
						<Anchor point="TOP">
							<Offset x="-60" y="-18"/>
						</Anchor>
					</Anchors>
				</FontString>
			</Layer>
		</Layers>
	</Frame>
</Ui>

Fizzlemizz · 04-26-23, 11:21 AM

Create the whole "Panel" frame in XML and use whatever name you give it in the

Code:

	<Frame name="AeroMaxxDCharacterFrame" parent="CharacterFrame" frameStrata="HIGH" enableMouse="true" setallpoints="true" id="4">
		<Frames>
			<Frame name="OuterContent" frameStrata="HIGH" enableMouse="true" movable="true">
			...
		</Frames>
	</Frame>

in lua:

Code:

tinsert(CHARACTERFRAME_SUBFRAMES, "AeroMaxxDCharacterFrame") -- or whatever name you gave it in XML

Because frame names are global, make sure it is unique to you/your addon. To do this with all the other frames, add $parent to the names

Code:

<Frame name="$parentOuterContent" parentKey="OuterContent"...>

the game will replace $parent with the parent frame's name.

and/or use the parentKey and in code you can use it as
[code]AeroMaxxDCharacterFrame.OuterContent[C/ODE]

AeroMaxxD · 04-26-23, 02:21 PM

Ok awesome I have some stuff on my new tab from the xml after lots of trial and error.

I do have something I can't figure when I the code below to the Frame that is the New tab on my character frame. A new frame shows up above the new tab frame, and it is slightly offset higher and more to the left.

Code:

		<Layers>
			<Layer level="BORDER">
				<Texture file="Interface\LFGFRAME\UI-FRAME-THREEBUTTON-BLANK">
					<Anchors>
						<Anchor point="CENTER"/>
					</Anchors>
				</Texture>
			</Layer>
		</Layers>

This is the code

Code:

	<Frame name="AMD_CharacterFrame" parent="CharacterFrame" frameStrata="HIGH" enableMouse="true" setallpoints="true" id="4">
		<Frames>
			<Frame name="AMD_OuterContent" frameStrata="HIGH" enableMouse="true" movable="true">
			</Frame>
		</Frames>
		<Layers>
			<Layer level="BORDER">
				<Texture file="Interface\LFGFRAME\UI-FRAME-THREEBUTTON-BLANK">
					<Anchors>
						<Anchor point="CENTER"/>
					</Anchors>
				</Texture>
			</Layer>
		</Layers>
	</Frame>

Fizzlemizz · 04-26-23, 02:30 PM

It's impossible to tell without all the code/xml.

If you type /fstack and place the mouse over the frame, you might get an idea of what it is (/fstack again to hide the tooltip).

AMD_OuterContent has no size and is not anchored to anything so it doesn't seem to have a purpose unless it's moved/sized in code.

AeroMaxxD · 04-27-23, 01:19 AM

I've made some small changes, the code below is the most current version, I've tried setting a size to the main frame, tried changing the anchor settings for the layer but it's never in the right place it's always offset a little.

I created a paste for you here. https://paste.ee/p/zzGka

The XML code is on one tab and the LUA Code on another tab.

Lua Code:

local TabName="AMD";
local TabID=CharacterFrame.numTabs+1;
local Tab=CreateFrame("Button", "$parentTab"..TabID, CharacterFrame, "CharacterFrameTabTemplate");
PanelTemplates_SetNumTabs(CharacterFrame, TabID);
Tab:SetPoint("LEFT", "$parentTab"..(TabID-1), "RIGHT", -16, 0);
Tab:SetText(TabName);
Tab:SetID(TabID);
 
tinsert(CHARACTERFRAME_SUBFRAMES, "AMD_TabOnCharacterFrame");
 
hooksecurefunc("CharacterFrameTab_OnClick", function(self, button)
    if self:GetID() == TabID then
        ToggleCharacter("AMD_TabOnCharacterFrame")
    end
end)

Fizzlemizz · 04-27-23, 10:20 AM

In your XML, you're using:

Lua Code:

<Layers>
            <Layer level="BORDER">
                <Texture file="Interface\LFGFRAME\UI-FRAME-THREEBUTTON-BLANK">
                    <Anchors>
                        <Anchor point="LEFT"/>
                    </Anchors>
                </Texture>
            </Layer>
        </Layers>

Which is just a texture image of a standard game frame border with a portrait circle at the top left. You don't really need it as it's just the same as the Character Frame. Get rid of that section from the xml or if you have to use it, you will need to adjust the texture anchor to move it where you want.
eg.

Lua Code:

<Layers>
            <Layer level="BORDER">
                <Texture file="Interface\LFGFRAME\UI-FRAME-THREEBUTTON-BLANK">
                    <Anchors>
                        <Anchor point="LEFT" x="-16" y="-33"/>
                    </Anchors>
                </Texture>
            </Layer>
        </Layers>

Fizzlemizz · 04-27-23, 10:44 AM

Probably better yet would be to get rid of the texture and if you need it, set your main panel frame to inherit the proper template, eg. the same as the CharacterFrame

Lua Code:

<Frame name="AMD_TabOnCharacterFrame" parent="CharacterFrame" frameStrata="HIGH" enableMouse="true" movable="true" setallpoints="true" id="4" inherits="ButtonFrameTemplate">

AeroMaxxD · 04-27-23, 11:52 AM

Yeah, your right, I don't need it I just liked the three buttons part at the bottom of the frame, but I have ditched it.

Would you happen to know where I can find out about what other templates I can use?

Fizzlemizz · 04-27-23, 12:11 PM

You could add your own (or a game) texture to the bottom of your panel frame as a button background.

Originally Posted by AeroMaxxD

Would you happen to know where I can find out about what other templates I can use?

The game has a ton of them for all sorts of different things. You can export all the game UI code (and artwork) to peruse at your pleasure (it has all the templates as well). It's a lot to chew on

AeroMaxxD · 04-27-23, 03:58 PM

Would you happen to know why there is a gold vertical line on this tab?

https://imgur.com/a/5FiQzbl

XML is here. https://paste.ee/p/zzGka

Code:

<Button name="$parent_Options" inherits="PanelTopTabButtonTemplate" text="Options">
				<Anchors>
					<Anchor point="BOTTOMLEFT" x="98" y="440"/>
				</Anchors>
				<ButtonText parentKey="Text">
					<Size x="0" y="10"/>
					<Anchors>
						<Anchor point="CENTER" x="0" y="-8"/>
					</Anchors>
				</ButtonText>
			</Button>

Fizzlemizz · 04-27-23, 04:41 PM

Originally Posted by AeroMaxxD

Would you happen to know why there is a gold vertical line on this tab?

It's one of the textures used by the PanelTopTabButtonTemplate the button is inheriting.

In your code you can (assuming I have the frame/tab name right):

Lua Code:

AMD_TabOnCharacterFrameOptions.MiddleActive:Hide()

But that will look worse

AeroMaxxD · 04-28-23, 12:04 AM

That didn't seem to work.

This is the button xml code.

Code:

<Button name="$parent_Options" inherits="PanelTopTabButtonTemplate" text="Options">

This is the main frame the button is nested inside.

Code:

<Frame name="AMD_TabOnCharacterFrame" parent="CharacterFrame" frameStrata="HIGH" enableMouse="true" movable="true" setallpoints="true" id="4">

I tried the following, but the gold vertical line remained.

Lua Code:

AMD_TabOnCharacterFrame.MiddleActive:Hide()
AMD_TabOnCharacterFrame_Options.MiddleActive:Hide()

Edit: Actually they do seem to work, they don't get rid of the gold vertical line, they do however remove some text I had put on the frame.

Fizzlemizz · 04-28-23, 12:18 AM

I didn't see the underscore so

Code:

AMD_TabOnCharacterFrame_Options.MiddleActive:Hide()

Should work.

Depending on where you put this in your code, you might need to make sure your .xml file is listed above your .lua file in the .toc (the files get loaded in order and the frame in the .xml file is created when the file is loaded).

It's not going to look the way you want though as hiding the MiddleActive texture carves a notch in the top of the tab.

You either need to live with the gold line or make a texture to replace the one being used for MiddleActive or create your own tab button and textures.

AeroMaxxD · 04-28-23, 06:46 AM

Originally Posted by Fizzlemizz

Depending on where you put this in your code, you might need to make sure your .xml file is listed above your .lua file in the .toc (the files get loaded in order and the frame in the .xml file is created when the file is loaded).

Oh I didn't know that, I will put it above now and see if it works.

Originally Posted by Fizzlemizz

It's not going to look the way you want though as hiding the MiddleActive texture carves a notch in the top of the tab.

Oh that is disappointing, I am not really sure why is even there. I can't seem to see anywhere that template is used in Blizzard own UI. I'm guessing they don't use it.

Originally Posted by Fizzlemizz

You either need to live with the gold line or make a texture to replace the one being used for MiddleActive or create your own tab button and textures.

If I did create my own tab button and textures, how would I reference them? Is it possible to edit the tab template and textures and then use the edited versions, how would I edit them? is it the blp files that I need to be looking at?

Addon development for a newbie/novice is a very long-winded process!

Fizzlemizz · 04-28-23, 08:23 AM

With some more digging, instead of hiding the MiddleActive texture, you should be able to use PanelTemplates functions to control the tab:

Change:

Lua Code:

AMD_TabOnCharacterFrame_Options.MiddleActive:Hide()

To:

Lua Code:

PanelTemplates_SetNumTabs(AMD_TabOnCharacterFrame, 1) -- assumes you only have 1 tab
PanelTemplates_SetTab(AMD_TabOnCharacterFrame, 1) -- select the 1 tab

I don't know if you have more tabs buttons on the frame so the code may need to change if you have more.

AeroMaxxD · 04-30-23, 01:59 AM

Originally Posted by Fizzlemizz

I didn't see the underscore so

Lua Code:

PanelTemplates_SetNumTabs(AMD_TabOnCharacterFrame, 1) -- assumes you only have 1 tab
PanelTemplates_SetTab(AMD_TabOnCharacterFrame, 1) -- select the 1 tab

I don't know if you have more tabs buttons on the frame so the code may need to change if you have more.

I just have one tab, but what if another user who used the addon had more tabs?

AeroMaxxD · 04-30-23, 02:07 AM

Also, the tab I was using to set options for the addon itself, but I am trying to use the Interface Options within the escape menu instead.