[Tutorial] Creating a simple UI with kgPanels

[Undertaker]

Edit: 2009 / 10 / 30 - Changed image host to Tinypic.

Creating a basic addon, by Undertaker <Immersion> @ Al'Akir EU.

This seriously took me like 3-4 hours to write, so hope you find it a little useful. If you got any questions, PM me or ask here, whatever floats your boat. Oh by the way, I only posted it on Mmo-champion.

Addons Required:

Align
ButtonFacade
ButtonFacade_Caith
Buffalo
Dominos or Bartender4
SharedMedia
Lib: SharedMedia-2.0 \ 3.0
kgPanels
MinimapButtonBag
Pitbull 3.0
SexyMap
SLDataText

- Creating the Border in Photoshop -
Before I start everything I'm going to go ahead and create the borders I'm going to use for this tutorial.

Create a new document in 128x16 pixels @ 72 dpi.
As far as I know, .tga files cannot handle transparency without the use of Alpha channels, so you cannot leave out empty space. WoW Is simply going to replace the transparency with the color white.

I made mine very very simple for the purpose of this tutorial.
(zoomed in)

Once you're happy with the looks of your border texture, go to File > Save As > border.tga (or whatever you wish to call it, but be sure you remember it at least)
Place border.tga inside "World of Warcraft\texture\border.tga" Create the folder texture if you don't already have it. Now all of our work is going to be inside of WoW and you can close down Photoshop.

- Introduction -
Once you log in it's most likely going to be very confusing to tell the difference between each addon being spread out across the screen, but it's going to be easier as we go.

- Starting the mess -

At first I suggest starting with your buttons. Each class need more buttons than others, so it might be a good to get a general idea of how large in height your Ui is going to be.

To load ui Dominos, simply type "/dominos" In this tutorial I'll be using 2 sets of bars, so once inside Dominos press the "Configure Bars" button.

As I mentioned before I don't need bar 3 to 10 so I'm going to hide them. To hide bars press the Middle Mouse Button or Shift + Right click.
Most people use Shift+B to open up all bags at once, so I don't need to see the bags infront of me, so I'm going to hide the bags along with Menu frame, Cast, Pet, Vehicle, XP Bar and Class.

I usually place them in a corner somewhere where they don't bother me as much.


--------------------------

Now (while still having dominos configure up) we're going to type "/align" in the chat. Use the red line to determine the middle of your screen and position the bars accordingly. Try not to put them too low on the screen.

Once you've positioned the bars, type "/align" in the chat again to remove all the lines.

- Button Textures -

Now that we have our bars in place we're going to add textures to our action bars. To do this type "/buttonfacade" in the chat. In buttonfacade you're able to add different textures to different addons, but to keep it as clean as possible, press the main tab and select Caith, or any other you've chosen.



The gloss slider does exactly what you think it does, it adds glossiness to your buttons, but personally I never go above 40%. The caith texture will be applied to Buffalo as well as any other addon you've got that uses buttons, oPie etc.

- kgPanels -

Now that we have the textures and buttons in place we're going to start working with kgPanels. Start by typing "/kgpanels config" in the chat.

First we're going to add the border we created into kgPanels. To do this we head over to the Art Library tab. Once inside we need to determine whether it's going to be a background texture or a border, and obviously it's going to be a border. So on the right hand side, be sure that "Border" is selected.

Now we need to apply a name to our border, it really doesn't matter what you call it, but it makes it easyer to select later on. So I'm going to call it: MyBorder. Once you've typed the name in, be sure to press Enter or the "Okay" button.

Next kgPanels need to be able to know what border to look for. We created a folder called "texture" so we're going to direct kgpanels to that folder. This does not mean you type "C:\Program\World of Warcraft\texture\border.tga", kgPanels already know we're playing WoW so go ahead and type "\\texture\border.tga" adding "\\" tells Kgpanels to look inside the WoW folder. Press "Okay -> Add"

If you've done this correctly you should be able to see the texture listed in the Border category.



Now, in order to be able to add any panels to the game you first need to create a layout. To do this, go to "General Options -> Layouts" within kgPanels. Name it whatever you want and be sure to press Enter or the "okay" button.

- The panels -

Now that we've added the texture and created the layout, we're free to create our panels. You do this within the "Active Panels" tab. I'm first going to create the border for my buttons, so I'll name this panel "Buttons" Press "Okay -> Create"

Now in the background you should notice that we added our first panel, it doesn't look pretty so it's time to change the looks of it.

Head over to the Active Panels > Buttons
In here we have all our settings for this specific panel. We'll start by adding our border texture to this panel. To do this we need to head over to "Active Panels > Buttons > Texture Options". Here you will find all options that is relevant to textures. Background texture, border texture etc.

If we scroll down, there's a section called "Border Texture". Here there's a tab where we need to locate the border we wish to use. As before I called my border "MyBorder".



The "Border Edge Size" controls the size of your border, personally 16 was a little large so I changed mine to 14. Remember to press Enter if you do not use the slider. Also, change all the "Background Insets" to 0

Now you're going to notice that there's a transparent (see through) hole in the middle of the panel, to change this we need to head over to the main settings, which is inside "Active Panels > Buttons". In here we control most settings for this panel such as size and location on the screen.

To fill out the empty space we need to modify the transparency of the background. In the section called "Color and Opacity Settings" we need to set the "Background Color Style" to Solid. Press the small square to your right and select pure black by dragging the slider all the way down. To the right of color is transparency, this controls the amount you can see through, put this to a 100% (100% visibility).

If you are like me and don't like to have it completely black and white, you can change "Background Color Blending" to Blend and change the opacity of the Border Color to 50% as well as Background Color to 50% opacity.

There's still going to be a hole in the middle, but this is barely going to be visible once we attach them to our bars



Now move down your panel and position them



Go ahead and scroll up and press "Lock Panel"

- Minimap Border -

Now we're going to add a border to our minimap, though we have this blue circle around it to remove first. Right click the minimap to bring up the options.

Select the SexyMap tab and on "Select Preset to Load" select "Simple Square".

Go down to the "Borders" tab and un check Enable in "Borders > Bakground \ edge"



Since SLDataText already offers most of what is displayed on a minimap, we can go over to the "buttons" tab and set everything to but Battleground icons to Never. As well as "Zone Button > Never" go ahead and close down SexyMap.

Now we need to go back to kgPanels, and as always "/kgpanels config". We need to create a new panel for the minimap, but luckily we don't need to redo everything. Go ahead and name your panel to something relevant, like "Minimap".

kgPanel offer you to copy specific or all settings from a certain panel to your current panel, you can find this at the top of the "Minimap" settings. Be sure to press Paste.



Since we copied all settings it also copied the location coordinates of the buttons panel, so it's going to be located on top of the existing one, simply drag it away. Change the size of the panel to a moderate sized square, position it over the minimap and tweak it. Then lock the panel.

Now you can go ahead and move the green, red and blue squares and position it as you like, I personally prefer them in level with the minimap. (Green = Buffs, Red = Debuffs, Blue = Weapon Enchantment)



Close buffalo by typing "/buffalo lock"

- SLData Text -

Some people prefer having their dedicated panel for the statblock \ sldata so we're going to create one very easy. Same as before, Create a new panel (I named mine SLDT) and copy all settings from Buttons.

I positioned my panel at the bottom like this:



Now the problem with transparency now is that we got nothing that hides the empty space, as the minimap and action bars did, so we have two options (let me know if there's anything simpler).

A) We can increase the background opacity to 80-100%
B) We create a new panel with no border, simply a black "box" with the same opacity as the black inner border.

But since I'm an incredibly awesome slacker I'm just going to increase the background opacity. Lock your panels.

Now we're going to put the important Sldt text into our panel we created, so type "/sldt" un check the "lock elements". Move the ones you like down and remove the other ones. Note that some of them are added ontop of the minimap automatically.



If you don't want "FPS" and such to be colored in class color, you can change it in Global Options.

- Unit Frames -

Time for lovely pitbull to be configured. It has loads of options and might be very confusing, though all this was simplified in Pitbull 4.0. Sadly enough, I can't work with it cause it was too simplified. Yup.

Anyways, "/pitbull" to get all the options. In Modules you can remove "internal addons" to pitbull. Since we're already using eCastingBar we can remove "Cast Bar". Note that 3D Portrait is also inside here, so if you wish to use it, enable it. I also don't want CombatText and Visual Heal.

If you're using ora2 you really don't need main tank, main tank assist and all that other crap, so select them individually and check the "Disable" check box. We're using Grid so we don't need Raid either. Personally I don't care about Party Targets or Party pets as well as Pet Target either.

Now all of a sudden pitbull starts to look more manageable and less confusing. If you want to re-enable something you can find it inside "Extra Units".

To make our life easier we're mostly going to work inside "All Units" and change the individual parts later. Go to: "All Units > Bars > Blank Space" and Enable it. You can change the height to about 3 or 4. Go to the main Pitbull tab and you'll find one option. Configuration Mode. Set it to Solo.

Now it all varies from person to person but I never really cared about seeing the buffs on the player bar, so I'm going to remove it. Head over to: "Player > Other > Auras > Enable" and deselect Buffs and Debuffs \ Weapon Buffs.

I'm assuming you know what class you're playing and your name, we can remove that text too. Head over to: "Player > Text > Class" and disable it, as well as "Player > Text > Name.

This also varies from player to player, but I personally can't stand having my name \ mana \ hp on top of the designated frames as it takes up space, this is where the Blank Space we enabled earlier comes in handy. Since pitbull uses Dogtag we can make our own text strings. So we can Disable Health and Power.

Now we'll create our own text string to show both HP and Mana in one piece, this makes it easier to position. Go to: "Player > Text > Other" and you can type in the name for your new panel, I chose "Hp\Mana" and press enter.

Now "hp\mana" is listed with all the other text fields available to us. I want to position my text in the blank space, to the right. So this is easily done here.



Now it's in position, but pitbull doesnt know what the text should display. It literally displays hp\mana. Dogtag is very easy to learn, you can get lots of strings by pressing "DogTag Help".

Where it says Style - Custom is where we add our string. Type: "[HP] | [MP]". We add the "|" to simply add some space between the HP and the Mana. Pitbull will try to simplify it by doing [HP MP] but this will display it together.

Time to change the texture of Pitbull. SharedMedia offers loads of textures to choose from, and you can find them all in: Pitbull > Global Settings. Just at the bottom you can scroll through the one you like the most. I'll choose Glamour7.

Now there are a few things I need to change.



as you can see my buffs and debuffs are positioned downwards, we'll change so they go upwards instead.

Target > Other > Auras > Layout. Change growth direction to up and side to top.

For the sake of looks later on, I'm going to disable some of the icons I dont need. Raid icon, Voice, Leader, Master Looter etc. So if you don't wish to have these like me, go to All Units > Icons. I kept Combat.

Since I didn't include my name on my player frame, I got some space to the left which I can use for these icons. Player > Icons > Combat, and set it to Blank Space - Left.

Change the Width of Target's Target and remove auras from it. (Target's Target > Other > Size)

Also, change the width of Player and Target so you get something that has the same amount of space between the action bars and the unit frames. Like this.



Now go ahead and Disable Configuration mode (Pitbull > Configuration mode > Disable) and Lock pitbull (Pitbull > global settings > Locked)

If you want to move some of the text from the target frame to the blank space, you should know how to by now.

- KgPanels, Player, Target, Anchoring -

Now we're going to create panels for the player and target frame. The problem with target frame is obvious. We're not always targeting someone or something, so we need the panel to disappear if we're not targeting anything. This is done by parenting frames.

Go ahead and create a new panel with the name "Player". Copy All from Buttons and move it into place, very simple.

Now that we've made it fit with the player frame, the target frame will use the same dimensions. So it's going to be very easy for us. Make a new panel named "Target" and copy all from Player. Sometimes, as in my case it refuse to copy, simply type "/rl" and do it again.

Lock the panel once it's in place. Now we need to figure out what the target frame is called, so that we can parent the panel to the frame. Do this by using this macro. "/run ChatFrame1:AddMessage(GetMouseFocus():GetName())" while your mouse is hovering over the target frame. My target frame is called: "PitBullUnitFrame3". Remember that you need to copy EXACTLY what it says, including capital letters.

At the absolute bottom of Target are two options. Anchor and Parent. Anchor decides the position, if you move the target frame, it will move with. The Parent frame follows whatever action happens. Shown, Hidden etc.

So set the Parent to "PitBullUnitFrame3" or whatever yours was, be sure to press Okay. You don't need to anchor this frame unless you're planning on moving your target frame constantly.



For casting bar, omen, recount and any other addon, same rules apply.



-----


After lots of requests for the panels, here they are.

http://www.megaupload.com/?d=JA3AOI6G

I don't have time to make an entire UI using the panels, so you will have to make use of the tutorial on page 1 to make the setup.

-------------------

Place left.tga and right.tga into your "C:\Program\World of Warcraft\texture\" folder

Add the textures to kgpanels, position them, and use whatever Actionbar mod to position the buttons in place.

[miLl3niUm]

AWESOME Undertaker! I'll do it on my shaman alt when I got time.

[Merham]

WoW! That helps alot 8)

I think im gonna try doing that someday :P

[Undertaker]

Glad you enjoy it

[Undertaker]

Sorry for double posting, but I created something incredibly simple using MyWarcraftStudio and photoshop to make this with kgpanels,



If I get enough requests I can make another tutorial from start to finish on how to create the above.

Edit: I just realized the birds are mirrored -_-

[Deleted]

To the poster above, lal.
Undertaker explained the basics and you want everything.

It's like basic HTML explained and you ask for a PHP script

- Creating the Border in Photoshop -
Before I start everything I'm going to go ahead and create the borders I'm going to use for this tutorial.

Create a new document in 128x16 pixels @ 72 dpi.
As far as I know, .tga files cannot handle transparency without the use of Alpha channels, so you cannot leave out empty space. WoW Is simply going to replace the transparency with the color white.

I made mine very very simple for the purpose of this tutorial.
(zoomed in)

Hello there, I'd like to say awesome tutorial, for me it wasn't much good since I knew most of it already, but I'm 100% sure this is amazing to those who never toyed with these addons before. Great job!

I do however, have 1 question. I can toy with existing arts and borders, know how to create my panels and plug them everywhere I like, stick them with unitframes etc. My question is though, how do I create my own borders.

In the part I just quoted you say you just create a border and photoshop, then come up with an image of a border that is completely out of order. Can I just create a rectangle with a border I like and save that as border.tga and it will work? Or do I have to make it as strange as the example border? I'm confused on that part, if I knew how to make a proper border I could create my own art.

I know how to add .tga pics into kgpanels, but I don't know how to setup my own border

[Rètárdìn]

Could you explain me how to make "exactly" this Ui?

<Image removed>

Try checking
http://www.spartanui.com/download.html

[Undertaker]

To the poster above, lal.
Undertaker explained the basics and you want everything.

It's like basic HTML explained and you ask for a PHP script

Hello there, I'd like to say awesome tutorial, for me it wasn't much good since I knew most of it already, but I'm 100% sure this is amazing to those who never toyed with these addons before. Great job!

I do however, have 1 question. I can toy with existing arts and borders, know how to create my panels and plug them everywhere I like, stick them with unitframes etc. My question is though, how do I create my own borders.

In the part I just quoted you say you just create a border and photoshop, then come up with an image of a border that is completely out of order. Can I just create a rectangle with a border I like and save that as border.tga and it will work? Or do I have to make it as strange as the example border? I'm confused on that part, if I knew how to make a proper border I could create my own art.

I know how to add .tga pics into kgpanels, but I don't know how to setup my own border

You create small pieces of the border in chunks, that way WoW can split the image and stretch it out according to the size you want.

Use this, http://hdimage.org/images/z4p3l7m61r...3wb_border.jpg

Open it up in photoshop, create a new layer above it and paint with your own colors. Use it as a template.

[Shanai]

Sorry for double posting, but I created something incredibly simple using MyWarcraftStudio and photoshop to make this with kgpanels,



If I get enough requests I can make another tutorial from start to finish on how to create the above.

Edit: I just realized the birds are mirrored -_-

Please, do the tutorial for this

[Deleted]

Looks pretty good, i might gonna try this.

Thanks ;D

[BobCharabini]

Thanks for the tutorial, helped a lot.

Just one script question:
How would I phrase a script like...
If in Combat show Panel_A
If not in Combat hide Panel_A

Sorry this is probably all over the intarwebz but I don't have time to search atm.

[Taryble]

To have something show on combat/not-in-combat, you have to register your script to look for the events that WoW fires to say if you're in combat or not.

Put these items in the script sections named for the panel you want to hide/show.

OnLoad:

self:RegisterEvent("PLAYER_REGEN_DISABLED")
self:RegisterEvent("PLAYER_REGEN_ENABLED")

OnEvent:

if event == "PLAYER_REGEN_ENABLED" then
 self:Hide()
elseif event == "PLAYER_REGEN_DISABLED" then
 self:Show()
end

[Undertaker]

Thanks for the tutorial, helped a lot.

Just one script question:
How would I phrase a script like...
If in Combat show Panel_A
If not in Combat hide Panel_A

Sorry this is probably all over the intarwebz but I don't have time to search atm.

If you parent the panel to, let's say, your action bars. You can tell your action bars to hide outside of combat and the assigned panel will hide with it.

Else, you have to use the above script, but I've had problems with it. It doesn't hide until you actually go in and out of combat. So when you log in, it's going to be visible.

[Taryble]

Yeah, it does have that issue. I'm tempted to add a command to set it to hide on load. That would end up with the following. The OnEvent section doesn't change.

OnLoad

self:RegisterEvent("PLAYER_REGEN_DISABLED")
self:RegisterEvent("PLAYER_REGEN_ENABLED")
self:Hide()

[Viridiel]

Great tutorial! I have a messy UI and can't wait to make it more sleek, and I'll probably use this tutorial.

Anyway, to my main issue, I was wondering if I could make a kgpanel change size with pallypower, like, say somebody joins my group and pallypower adds a button for them, could I make the panel change size with it?

[Undertaker]

Great tutorial! I have a messy UI and can't wait to make it more sleek, and I'll probably use this tutorial.

Anyway, to my main issue, I was wondering if I could make a kgpanel change size with pallypower, like, say somebody joins my group and pallypower adds a button for them, could I make the panel change size with it?

I'm not going to say that it's not, but I can say with a certainty that it would require lots of coding.

[Taryble]

Lemme dig up the script I use for the kgPanel that's parented/anchored to MonkeyQuest - it changes size fairly regularly.

For PallyPower, or other items that resize on the fly, replace "MonkeyQuestFrame" with the name of the frame that you need your panel to resize with.

OnLoad:

self.resized = false

OnUpdate:

if not self.resized then
 MonkeyQuestFrame:SetScript("OnSizeChanged", function(f)
  self:SetWidth(f:GetWidth())
  self:SetHeight(f:GetHeight())
 end)
 self:SetWidth(MonkeyQuestFrame:GetWidth())
 self:SetHeight(MonkeyQuestFrame:GetHeight())
end

[Undertaker]

Lemme dig up the script I use for the kgPanel that's parented/anchored to MonkeyQuest - it changes size fairly regularly.

For PallyPower, or other items that resize on the fly, replace "MonkeyQuestFrame" with the name of the frame that you need your panel to resize with.

OnLoad:

self.resized = false

OnUpdate:

if not self.resized then
 MonkeyQuestFrame:SetScript("OnSizeChanged", function(f)
  self:SetWidth(f:GetWidth())
  self:SetHeight(f:GetHeight())
 end)
 self:SetWidth(MonkeyQuestFrame:GetWidth())
 self:SetHeight(MonkeyQuestFrame:GetHeight())
end

Think you still need to tweak it.

As far as I know, Pallypower is built with several frames. There's C1 to C9 and all of them are individual panels. I'm assuming C1 = Class 1.

You can make,

if not self.resized then
 PallyPowerC1:SetScript("OnSizeChanged", function(f)
  self:SetWidth(f:GetWidth())
  self:SetHeight(f:GetHeight())
 end)
 self:SetWidth(PallyPowerC1:GetWidth())
 self:SetHeight(PallyPowerC1:GetHeight())
end

But that is still only going to get the width and height from C1 panel.

A theory would be,

If PallyPowerC1 is visible then it would expand the panel by X in height. If C2 is visible it would add another X dimensions in height.

[Viridiel]

Oh okay, thanks. I'll try see if I can find something that works.

[pablingt]

Sorry for double posting, but I created something incredibly simple using MyWarcraftStudio and photoshop to make this with kgpanels,



If I get enough requests I can make another tutorial from start to finish on how to create the above.

Edit: I just realized the birds are mirrored -_-

Plz Plz show how do you do that