Thread Tools Display Modes
09-18-14, 03:07 AM   #1
Danielps1
Guest
Posts: n/a
creating 3px border

Hey, I'm kind of starting with Lua and I am in the process of building a UI with Lua only addons. What I mean by that is no in game config.

I was wondering if somebody could help me achieve the look f.e. TukUi or qMinimap achieved. It looks like that


A 3px border with black at the outside and grey inside. I looked into the code of qMinimap but I mean nowhere near to understand it.
It would really help if someone could explain to me how to achieve this look/ or how qMinimap does it.

here some of the border code of qMinimap

Atleast I think it is.
Code:
local shadows = {
	edgeFile = "Interface\\Addons\\qMinimap\\media\\glowTex", 
	edgeSize = 4,
	insets = { left = 3, right = 3, top = 3, bottom = 3 }
}
function CreateShadow(f)
	if f.shadow then return end
	local shadow = CreateFrame("Frame", nil, f)
	shadow:SetFrameLevel(1)
	shadow:SetFrameStrata(f:GetFrameStrata())
	shadow:SetPoint("TOPLEFT", -4, 4)
	shadow:SetPoint("BOTTOMRIGHT", 4, -4)
	shadow:SetBackdrop(shadows)
	shadow:SetBackdropColor(0, 0, 0, 0)
	shadow:SetBackdropBorderColor(0, 0, 0, 1)
	f.shadow = shadow
	return shadow
end
function CreateInnerBorder(f)
	if f.iborder then return end
	f.iborder = CreateFrame("Frame", nil, f)
	f.iborder:SetPoint("TOPLEFT", 1, -1)
	f.iborder:SetPoint("BOTTOMRIGHT", -1, 1)
	f.iborder:SetFrameLevel(f:GetFrameLevel())
	f.iborder:SetBackdrop({
	  edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = 1,
	  insets = { left = -1, right = -1, top = -1, bottom = -1}
	})
	f.iborder:SetBackdropBorderColor(0, 0, 0)
	return f.iborder
end
function frame1px(f)
	f:SetBackdrop({
		bgFile =  [=[Interface\ChatFrame\ChatFrameBackground]=],
        edgeFile = "Interface\\Buttons\\WHITE8x8", edgeSize = 1, 
		insets = {left = -1, right = -1, top = -1, bottom = -1} 
	})
	f:SetBackdropColor(.06,.06,.06,1)
	f:SetBackdropBorderColor(.29,.302,.29,1)
CreateInnerBorder(f)	
end

local function StripTextures(object, kill)
	for i=1, object:GetNumRegions() do
		local region = select(i, object:GetRegions())
		if region:GetObjectType() == "Texture" then
			if kill then
				region:Hide()
			else
				region:SetTexture(nil)
			end
		end
	end		
end
  Reply With Quote
09-18-14, 04:12 AM   #2
Lombra
A Molten Giant
 
Lombra's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2006
Posts: 554
Yes, it's all there, but to break it down, here's what you'll need to do.

First set the backdrop of the frame to one with a solid texture and a edge size (border size) of 3, and color it black.

Code:
f:SetBackdrop({
	edgeFile = [[Interface\Buttons\WHITE8x8]],
	edgeSize = 3,
})
f:SetBackdropBorderColor(0, 0, 0)
To add the inner border stripe, you'll create a new frame, and set the backdrop on that. (which should appear on top if frame stratas are left untouched) Offset it from the edges by 1, set edge size to 1 and color it gray.
Code:
local iborder = CreateFrame("Frame", nil, f)
iborder:SetPoint("TOPRIGHT", -1, -1)
iborder:SetPoint("BOTTOMLEFT", 1, 1)
iborder:SetBackdrop({
	edgeFile = [[Interface\Buttons\WHITE8x8]],
	edgeSize = 1,
})
iborder:SetBackdropBorderColor(0.5, 0.5, 0.5)
There are other ways to do it, also.
__________________
Grab your sword and fight the Horde!
  Reply With Quote
09-18-14, 07:10 AM   #3
Danielps1
Guest
Posts: n/a
Ok thanks!

The problem i could see with this that the inner Border would only be black when the main frame is black. Correct me If I'm wrong I haven't tried, yet.
  Reply With Quote
09-18-14, 07:35 AM   #4
Lombra
A Molten Giant
 
Lombra's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2006
Posts: 554
No, the "inner" border is the gray stripe. The "main" border is 3 pixels wide, and the inner border runs on top, in the middle of that.
__________________
Grab your sword and fight the Horde!
  Reply With Quote
09-18-14, 08:27 AM   #5
Danielps1
Guest
Posts: n/a
Hm, nice! Thanks.

I still have a problem though. When I add my Backdrop (for the tooltip in this case, I miss the inner black border.)

it looks like this (might have to zoom in to see the borders):



This is what my code looks like
Code:
local tooltips = { GameTooltip, ItemRefTooltip, ShoppingTooltip1, ShoppingTooltip2, ShoppingTooltip3, WorldMapTooltip, }
    for idx, tooltip,f in ipairs(tooltips) do

     -- tooltip:SetBackdrop(cfg.backdrop)


      local f = CreateFrame("Frame", nil, tooltip)

      f:SetBackdrop({
       edgeFile = [[Interface\Buttons\WHITE8x8]],
       edgeSize = 3,
                          })
      f:SetBackdropBorderColor(0, 0, 0)

    local iborder = CreateFrame("Frame", nil, tooltip)
      iborder:SetPoint("TOPRIGHT", -1, -1)
      iborder:SetPoint("BOTTOMLEFT", 1, 1)
      iborder:SetBackdrop({
        edgeFile = [[Interface\Buttons\WHITE8x8]],
        edgeSize = 1,
                          })
      iborder:SetBackdropBorderColor(0.5, 0.5, 0.5)


    tooltip:SetScale(cfg.scale)
    tooltip:HookScript("OnShow", TooltipOnShow)

 end
  Reply With Quote
09-18-14, 08:47 AM   #6
Lombra
A Molten Giant
 
Lombra's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2006
Posts: 554
You should set the main border on the original frame instead creating your own. You don't have to, but in this case the new border frame does not have its points set, so it won't be visible. Since it already has a backdrop, you'll also want to retain the background bit. Try this:
Code:
local tooltips = { GameTooltip, ItemRefTooltip, ShoppingTooltip1, ShoppingTooltip2, ShoppingTooltip3, WorldMapTooltip, }
for idx, tooltip in ipairs(tooltips) do
	tooltip:SetBackdrop({
		bgFile = [[Interface\Tooltips\UI-Tooltip-Background]],
		edgeFile = [[Interface\Buttons\WHITE8x8]],
		edgeSize = 3,
	})
	tooltip:SetBackdropColor(TOOLTIP_DEFAULT_BACKGROUND_COLOR.r, TOOLTIP_DEFAULT_BACKGROUND_COLOR.g, TOOLTIP_DEFAULT_BACKGROUND_COLOR.b);
	tooltip:SetBackdropBorderColor(0, 0, 0)

	local iborder = CreateFrame("Frame", nil, tooltip)
	iborder:SetPoint("TOPRIGHT", -1, -1)
	iborder:SetPoint("BOTTOMLEFT", 1, 1)
	iborder:SetBackdrop({
		edgeFile = [[Interface\Buttons\WHITE8x8]],
		edgeSize = 1,
	})
	iborder:SetBackdropBorderColor(0.5, 0.5, 0.5)

	tooltip:SetScale(cfg.scale)
	tooltip:HookScript("OnShow", TooltipOnShow)
end
__________________
Grab your sword and fight the Horde!
  Reply With Quote
09-18-14, 09:12 AM   #7
Danielps1
Guest
Posts: n/a
Okay, I'm confused now what my actual backdrop is.

I think
Code:
 tooltip:SetBackdrop({
    bgFile = [[Interface\Tooltips\UI-Tooltip-Background]],
is my actual tooltip background. Is there a "bgColor" or something to not use a texture for the backdrop and still keep the edges?
Because using my own texture created something wrong, not the actual color of my texture or what I wanted.

Edit: Im dumb.
Code:
tooltip:SetBackdrop({
    bgFile = [[Interface\Addons\WrathsUI\media\141414.tga]],
    edgeFile = [[Interface\Buttons\WHITE8x8]],
    edgeSize = 3,
  })
  tooltip:SetBackdropColor(TOOLTIP_DEFAULT_BACKGROUND_COLOR.r, TOOLTIP_DEFAULT_BACKGROUND_COLOR.g, TOOLTIP_DEFAULT_BACKGROUND_COLOR.b);
I have to change my SetBackdropColor to white otherwise the texture gets filtered.

Last edited by Danielps1 : 09-18-14 at 09:27 AM.
  Reply With Quote
09-18-14, 01:46 PM   #8
Lombra
A Molten Giant
 
Lombra's Avatar
AddOn Author - Click to view addons
Join Date: Nov 2006
Posts: 554
Ah, yes. SetBackdrop color will multiply the values passed with the colors of the texture. Full white means use original texture colors. I think it will be set to white when you call SetBackdrop, though, so you shouldn't need to SetBackdropColor there.
__________________
Grab your sword and fight the Horde!
  Reply With Quote

WoWInterface » Developer Discussions » Lua/XML Help » creating 3px border

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