Quantcast
Giving Juked (Interrupt Bar) Simple borders/edges - WoWInterface
Thread Tools Display Modes
07-03-12, 05:01 AM   #1
mewe
A Murloc Raider
Join Date: Jul 2012
Posts: 5
Giving Juked (Interrupt Bar) Simple borders/edges

For the past week I've been trying to find a way to give my Juked bar an improved look. I was inspired by the NAO Tournaments, and the looks would really fit my UI better. Here is an example of what I mean (for better view, watch fullscreen in HD, around 12:45 into the video):
http://www.youtube.com/watch?v=vhDG8...ailpage#t=453s
In each corner of the video you can see the CDs of each team, what I'm simply after is the rounded edges of the CD icons. Because this is how Juked looks originally http://www.curse.com/addons/wow/juked ; plain flat without edges.

So I've looked around and trying to understand how to modify LUA files. I got Notepad++, but I can't figure out exactly where, or what, to add in the file. And with little (next to none) experience in coding, I'm stuck. Although you might say that if I don't know what I'm doing I shouldn't even bother trying, I got the impression that it wouldn't be that hard to find a solution for this.

All help and suggestions are welcome.
  Reply With Quote
07-03-12, 06:13 AM   #2
Haleth
This Space For Rent
 
Haleth's Avatar
Featured
Join Date: Sep 2008
Posts: 1,173
You'll have to find the relevant function that creates the frame (if it's in a function at all, could just be loose in the code) and use SetBackdrop on it, like this:

Code:
frame:SetBackdrop({
	bgFile = "Interface\\AddOns\\YourAddon\\SomeTexture",
	edgeFile = "Interface\\AddOns\\YourAddon\\SomeOtherTexture",
	edgeSize = YourBorderSize,
	insets = {left = someNumber, right = someNumber, top = someNumber, bottom = someNumber},
})
You might have to reposition the contents of the frame to allow the border to show, because borders cannot extend the frame itself. You could also create a separate frame, attach it to the main frame, and let it stick out a little.
  Reply With Quote
07-03-12, 09:22 AM   #3
mewe
A Murloc Raider
Join Date: Jul 2012
Posts: 5
Thanks for your reply.
So I tried to add the code you suggested (I also looked for example here: http://www.wowwiki.com/API_Frame_SetBackdrop)
I figured it would be easier to experiment on the original Interrupt Bar since it has a lot less code than Juked, and after looking through everything, my best guess was that the code for the border would be placed within this portion:
Lua Code:
  1. local function InterruptBar_AddIcons()
  2.     local x = -45
  3.     local y = 0
  4.     local r = 0
  5.     for _,ability in ipairs(order) do
  6.         local btn = CreateFrame("Frame",nil,bar)
  7.         btn:SetWidth(30)
  8.         btn:SetHeight(30)
  9.         if x < (InterruptBarDB.columns * 30 - 45) then
  10.         btn:SetPoint("CENTER",bar,"CENTER",x,y)
  11.         else
  12.         x = x-(InterruptBarDB.columns * 30)
  13.         y = y-30
  14.             btn:SetPoint("Center",bar,"Center",x,y)
  15.            
  16.         end
  17.         btn:SetFrameStrata("LOW")
  18.        
  19.         local cd = CreateFrame("Cooldown",nil,btn)
  20.         cd.noomnicc = true
  21.         cd.noCooldownCount = true
  22.         cd:SetAllPoints(true)
  23.         cd:SetFrameStrata("MEDIUM")
  24.         cd:Hide()
  25.        
  26.         local texture = btn:CreateTexture(nil,"BACKGROUND")
  27.         texture:SetAllPoints(true)
  28.         texture:SetTexture(abilities[ability].icon)
  29.         texture:SetTexCoord(0.07,0.9,0.07,0.90)
  30.    
  31.         local text = cd:CreateFontString(nil,"ARTWORK")
  32.         text:SetFont(STANDARD_TEXT_FONT,18,"OUTLINE")
  33.         text:SetTextColor(1,1,0,1)
  34.         text:SetPoint("LEFT",btn,"LEFT",2,0)
  35.        
  36.         local backdrop = {
  37.         bgFile = "Interface/Tooltips/UI-Tooltip-Background",
  38.         edgeFile = "Interface/Tooltips/UI-Tooltip-Background",
  39.         tile = true,
  40.         tileSize = 16,
  41.         edgeSize = 16,
  42.         insets = {
  43.             left = 4,
  44.             right = 4,
  45.             top = 4,
  46.             bottom = 4
  47.             }
  48.         }
  49.        
  50.         btn.texture = texture
  51.         btn.text = text
  52.         btn.duration = abilities[ability].duration
  53.         btn.cd = cd
  54.        
  55.         bar[ability] = btn
  56.        
  57.         x = x + 30
  58.     end
  59. end

Lines 36 to 48 is the code that I added myself. But it didn't affect the addon's appearance, the buttons are still "border-less".
I apologize if I do obvious mistakes, I don't know much. But I'm here to learn more about addons and how they work, so bear with me
  Reply With Quote
07-03-12, 09:40 AM   #4
Haleth
This Space For Rent
 
Haleth's Avatar
Featured
Join Date: Sep 2008
Posts: 1,173
You declared a local backdrop variable, but you didn't actually call the function to set the backdrop.

Try this instead:

Code:
btn:SetBackdrop({
        bgFile = "Interface/Tooltips/UI-Tooltip-Background", 
        edgeFile = "Interface/Tooltips/UI-Tooltip-Background",
        tile = true,
        tileSize = 16,
        edgeSize = 16,
        insets = {
            left = 4,
            right = 4,
            top = 4,
            bottom = 4
            }
        })
  Reply With Quote
07-03-12, 10:56 AM   #5
mewe
A Murloc Raider
Join Date: Jul 2012
Posts: 5
Perfect, it works Thanks a lot, now it just needs some tweaking. I would like to have a little bit of spacing between each icon, because as it is now, some of the boarders are overlapping each other. To space the icons, I guess there is some value in the beginning of the portion I posted in my previous post that needs some changing. Although, I can't figure out which. I would love to get some guidance in this as well if it's not too much to ask
  Reply With Quote
07-03-12, 11:50 AM   #6
Haleth
This Space For Rent
 
Haleth's Avatar
Featured
Join Date: Sep 2008
Posts: 1,173
Hmm, looking at the code I assume you mean horizontal spacing. It's a little confusing, but you could change '30' to something a little higher at the code at the top (for the x values only).
  Reply With Quote
07-04-12, 02:50 AM   #7
mewe
A Murloc Raider
Join Date: Jul 2012
Posts: 5
Thank you, Haleth, for all the help. I've gotten really close to the result I want, and I feel I've also learned quite a bit about basic coding This is how it all looks at the moment: http://img3.imageshack.us/img3/2522/...0412103656.jpg

If I should be really picky, the only last thing that I would like to have fixed is the black corners of some of the icons. If you look closely, specifically Feral Charge, Kick, Psychic Scream and Skull Bash, you can see there are black corners peeking outside the borders. But since this only applies to some of the icons, I guess it has to do with their individual texture that Blizzard created, and would be pretty messy to modify.

However, I feel happy with the result anyway. And I appreciate the knowledge base WoWInteface.com has been for me
  Reply With Quote
07-04-12, 03:02 AM   #8
Phanx
Cat.
 
Phanx's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2006
Posts: 5,617
Originally Posted by mewe View Post
... I guess it has to do with their individual texture that Blizzard created, and would be pretty messy to modify.
Yep. Blizzard has changed their icon templates in every expansion so far (not sure if they've changed again in MoP).

If you want them all to look the same, you can either modify* the textures yourself, or install a package of pre-modified icons, such as CleanIcons - Original.

* By "modify", I don't mean modify the actual texture; I mean edit a copy of the texture and save it inside the appropriate directory tree in your WoW program file so that it overrides the original texture loaded from the game's MPQ data archives.
__________________
Retired author of too many addons.
Message me if you're interested in taking over one of my addons.
Donít message me about addon bugs or programming questions.
  Reply With Quote
07-04-12, 03:45 AM   #9
mewe
A Murloc Raider
Join Date: Jul 2012
Posts: 5
Brilliant! Thank you for the tip, Phanx. It now looks exactly like I want it to
/salute
  Reply With Quote
07-04-12, 06:53 AM   #10
Haleth
This Space For Rent
 
Haleth's Avatar
Featured
Join Date: Sep 2008
Posts: 1,173
What I always do to get a nice border around my icons is to use SetTexCoord(.08, .92, .08, .92) on the textures. This crops them just enough to hide any default border that might be 'integrated' into the icon. Then, I just add my own.
  Reply With Quote

WoWInterface » AddOns, Compilations, Macros » AddOn Help/Support » Giving Juked (Interrupt Bar) Simple borders/edges

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