WoWInterface - How to make an GUI.

WoWInterface (https://www.wowinterface.com/forums/index.php)

- Lua/XML Help (https://www.wowinterface.com/forums/forumdisplay.php?f=16)

- - How to make an GUI. (https://www.wowinterface.com/forums/showthread.php?t=42691)

How to make an GUI.

Hello everyone so today, i was bored so i decied i wanted to do a GUI. But didn't find any useful info. So i'm posting here.

Basicly i just want to do somthing simple as this for my true & false options.

Just like this :)

Thanks!

Here are some resources to get you started. If you have questions after reading through these, ask away. :)

http://www.wowpedia.org/Using_the_In...s_Addons_panel

http://www.wowpedia.org/Creating_GUI...ration_options (This one uses XML, which I always stay away from, but there might be some good info in there for you.)

http://wowprogramming.com/docs/widgets_hierarchy

http://www.wowace.com/addons/ace3/pa...ptions-tables/ (If you decide you want to go the AceConfig route.)

Quote:

Originally Posted by Seerah (Post 253042)

Thanks Seerah! :D

And don't forget that you can use templates already set up for the Blizzard Options to make your job easier if you don't use AceConfig. There are also templates for fonts. You can find these by searching through the FrameXML.

Quote:

Originally Posted by Seerah (Post 253048)

true that :) i think i'm going to stick to blizzards for now, maybe try AceConfig later :)

Out of curiosity, is it possible to do these entirely in LUA instead of XML?

edit: c.c Sure looks like it is going the Ace3 route, anyway to do it without Ace3, just something quick and simple? o_o

Quote:

Originally Posted by unlimit (Post 253050)

Out of curiosity, is it possible to do these entirely in LUA instead of XML?

Yeah, i think so.

Going good so far ;>

And thanks alot Seerah! :)

I'm working on this as well with the same system, I still need to figure out a good system though for saved variable management. I want people to be able to easily set options for all chars/their own char, but I also want to make the GUI optional so lua settings can still be used. It's not simple. :p

Quote:

Originally Posted by Haleth (Post 253053)

Nice :) Yeah, that's gonna be a pain :P Nop, it's not ^^

If someones else wants to do this here is some code to get you started.

Good Luck!

LUA Code:

--Create an function so we can give all the frames texts!
 
function CreateOptions(self, TextTitle, DescriptionsText) -- CreateOptions(self, "Header Text", "Description Text")
    local title = self:CreateFontString(nil, "OVERLAY")
    title:SetFontObject('GameFontNormalLarge')
    title:SetPoint('TOPLEFT', 16, -16)
    title:SetText(TextTitle) -- Header Text
    
    local title2 = self:CreateFontString(nil, "OVERLAY")
    title2:SetFontObject('GameFontHighlightSmall')
    title2:SetPoint('TOPLEFT', 18, -35)
    title2:SetText(DescriptionsText) -- Description Text.
end
 
-- AftermathhUI_GUI (our main directory) 
 
AftermathhUI.panel = CreateFrame("Frame", "AftermathhUI", UIParent)
AftermathhUI.panel.name = "AftermathhUI" -- our name of the directory.
 
CreateOptions(AftermathhUI.panel, "AftermathhUI", "Welcome to AftermathhUI_GUI. Here you can find most of the options that are needed!") -- add the function to add some text!
 
InterfaceOptions_AddCategory(AftermathhUI.panel) -- add it to the interface category!
 
-- Unitframes (our subdirectory of "AftermathhUI")
 
AftermathhUI.Unitframes = CreateFrame("Frame", "Unitframes", AftermathhUI.panel)
AftermathhUI.Unitframes.name = "Unitframes"
AftermathhUI.Unitframes.parent = AftermathhUI.panel.name
 
CreateOptions(AftermathhUI.Unitframes, "Unitframes", "Options for the Unitframes")
 
InterfaceOptions_AddCategory(AftermathhUI.Unitframes)
 
-- Buffs (our subdirectory of "AftermathhUI")
 
AftermathhUI.Buffs = CreateFrame("Frame", "Buffs", AftermathhUI.panel)
AftermathhUI.Buffs.name = "Buffs"
AftermathhUI.Buffs.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Buffs)
 
-- Chat (our subdirectory of "AftermathhUI")
 
AftermathhUI.Chat = CreateFrame("Frame", "Chat", AftermathhUI.panel)
AftermathhUI.Chat.name = "Chat"
AftermathhUI.Chat.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Chat)
 
-- Loot (our subdirectory of "AftermathhUI")
 
AftermathhUI.Loot = CreateFrame("Frame", "Loot", AftermathhUI.panel)
AftermathhUI.Loot.name = "Loot"
AftermathhUI.Loot.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Loot)
 
-- Tooltip (our subdirectory of "AftermathhUI")
 
AftermathhUI.Tooltip = CreateFrame("Frame", "Tooltip", AftermathhUI.panel)
AftermathhUI.Tooltip.name = "Tooltip"
AftermathhUI.Tooltip.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Tooltip)
 
-- Panels (our subdirectory of "AftermathhUI")
 
AftermathhUI.Panels = CreateFrame( "Frame", "Panels", AftermathhUI.panel)
AftermathhUI.Panels.name = "Panels"
AftermathhUI.Panels.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Panels)
 
-- Repair (our subdirectory of "AftermathhUI")
 
AftermathhUI.Repair = CreateFrame("Frame", "Repair", AftermathhUI.panel)
AftermathhUI.Repair.name = "Repair"
AftermathhUI.Repair.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Repair)
 
-- CombatText (our subdirectory of "AftermathhUI")
 
AftermathhUI.CombatText = CreateFrame("Frame", "CombatText", AftermathhUI.panel)
AftermathhUI.CombatText.name = "Combat Text"
AftermathhUI.CombatText.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.CombatText)
 
-- GeneralOptions (our subdirectory of "AftermathhUI")
 
AftermathhUI.GeneralOptions = CreateFrame("Frame", "GeneralOptions", AftermathhUI.panel)
AftermathhUI.GeneralOptions.name = "General Options"
AftermathhUI.GeneralOptions.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.GeneralOptions)
 
-- Plugins (our subdirectory of "AftermathhUI")
 
AftermathhUI.Plugins = CreateFrame("Frame", "Plugins", AftermathhUI.panel)
AftermathhUI.Plugins.name = "Plugins"
AftermathhUI.Plugins.parent = AftermathhUI.panel.name
InterfaceOptions_AddCategory(AftermathhUI.Plugins)

I can't wait to see this implemented into your ui. Keep up the great work.

Found this over on WoWAce. It would make a cool base for a graphical control panel.
http://www.wowace.com/addons/neteaseui/

Quote:

Originally Posted by unlimit (Post 253050)

Out of curiosity, is it possible to do these entirely in LUA instead of XML?

edit: c.c Sure looks like it is going the Ace3 route, anyway to do it without Ace3, just something quick and simple? o_o

I've done that just using what was needed for the Blizzard options UI. All you do is create a frame, add some properties to it, then put whatever on it.

Full Blizzard-provided documentation is in InterfaceOptionsFrame.lua line 490:

Code:

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

-- HOWTO: Add new categories of options

--

-- The new Interface Options frame allows authors to place their configuration

-- frames (aka "panels") alongside the panels for modifying the default UI.

--

-- Adding a new panel to the Interface Options frame is a fairly straightforward process.

-- Any frame can be used as a panel as long as it implements the required values and methods.

-- Once a frame is ready to be used as a panel, it must be registered using the function

-- InterfaceOptions_AddCategory, i.e. InterfaceOptions_AddCategory(panel)

--

-- Panels can be designated as sub-categories of existing options. These panels are listed

-- with smaller text, offset, and tied to parent categories. The parent categories can be expanded

-- or collapsed to toggle display of their sub-categories.

--

-- When players select a category of options from the Interface Options frame, the panel associated

-- with that category will be anchored to the right hand side of the Interface Options frame and shown.

--

-- The following members and methods are used by the Interface Options frame to display and organize panels.

--

-- panel.name - string (required)        

--        The name of the AddOn or group of configuration options. 

--        This is the text that will display in the AddOn options list.

--

-- panel.parent - string (optional)

--        Name of the parent of the AddOn or group of configuration options. 

--        This identifies "panel" as the child of another category.

--        If the parent category doesn't exist, "panel" will be displayed as a regular category.

--

-- panel.okay - function (optional)

--        This method will run when the player clicks "okay" in the Interface Options. 

--

-- panel.cancel - function (optional)

--        This method will run when the player clicks "cancel" in the Interface Options. 

--        Use this to revert their changes.

--

-- panel.default - function (optional)

--        This method will run when the player clicks "defaults". 

--        Use this to revert their changes to your defaults.

--

-- panel.refresh - function (optional)

--  This method will run when the Interface Options frame calls its OnShow function and after defaults

--  have been applied via the panel.default method described above.

--  Use this to refresh your panel's UI in case settings were changed without player interaction.

--

-- EXAMPLE -- Use XML to create a frame, and through its OnLoad function, make the frame a panel.

--

--        MyAddOn.xml

--                <Frame name="ExamplePanel">

--                        <Scripts>

--                                <OnLoad>

--                                        ExamplePanel_OnLoad(self);

--                                </OnLoad>

--                        </Scripts>

--                </Frame>

--

--        MyAddOn.lua

--                function ExamplePanel_OnLoad (panel)

--                        panel.name = "My AddOn"

--                        InterfaceOptions_AddCategory(panel);

--                end

--

-- EXAMPLE -- Dynamically create a frame and use it as a subcategory for "My AddOn".

--

--        local panel = CreateFrame("FRAME", "ExampleSubCategory");

--        panel.name = "My SubCategory";

--        panel.parent = "My AddOn";

--

--        InterfaceOptions_AddCategory(panel);

--

-- EXAMPLE -- Create a frame with a control, an okay and a cancel method

--

--        --[[ Create a frame to use as the panel ]] -- 

--        local panel = CreateFrame("FRAME", "ExamplePanel");

--        panel.name = "My AddOn";

--

--        -- [[ When the player clicks okay, set the original value to the current setting ]] --

--        panel.okay = 

--                function (self)

--                        self.originalValue = MY_VARIABLE;

--                end

--

--        -- [[ When the player clicks cancel, set the current setting to the original value ]] --

--        panel.cancel =

--                function (self)

--                        MY_VARIABLE = self.originalValue;

--                end

--

--        -- [[ Add the panel to the Interface Options ]] --

--        InterfaceOptions_AddCategory(panel);

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

How do you make tick box? i haven't found it yet :(

Also how do you make this?

Quote:

Originally Posted by unlimit (Post 253050)

Out of curiosity, is it possible to do these entirely in LUA instead of XML?

Of course. :)

Quote:

Originally Posted by Game92 (Post 253067)

How do you make tick box? i haven't found it yet :(

Also how do you make this?

You're looking for checkbuttons and sliders.

http://wowprogramming.com/docs/widgets/CheckButton
http://wowprogramming.com/docs/widgets/Slider

I logged into wow to try out your code, Aftermath, then Fatality popped up and I figured I may as well see what makes it's check buttons click. c.c

Sooo, credit to oomp for his buttons. <_<

...and to my wife for the motivation for the screenshot. <_<

lua Code:

function TRUESYS.Checkbox(self, selfid, px, py, description)
    local checkbox = CreateFrame("CheckButton", "TrueAuiEnableButton_" .. selfid, self, "OptionsSmallCheckButtonTemplate")
    checkbox:SetScript("OnClick", Checkbox_OnClick)
    checkbox:SetPoint("TOPLEFT", self, px, py)
    checkbox:SetWidth(28)
    checkbox:SetHeight(28)
    checkbox:SetHitRectInsets(0, -60, 0, 0)
    checkbox:GetNormalTexture():SetAlpha(0.6)
 
    local checkboxtexture = checkbox:CreateTexture(nil, "ARTWORK")
    checkboxtexture:SetWidth(22)
    checkboxtexture:SetHeight(22)
    checkboxtexture:SetAlpha(0.9)
    checkboxtexture:SetPoint("LEFT", 2, 1)
    checkboxtexture:SetTexture("Interface\\RAIDFRAME\\ReadyCheck-Ready")
    checkbox:SetCheckedTexture(checkboxtexture)
    
    local checkboxtext = self:CreateFontString(nil, "ARTWORK", "GameFontNormal")
    checkboxtext:SetPoint("LEFT", checkbox, "RIGHT", 5, 1)
    checkboxtext:SetFontObject("GameFontNormal")
    checkboxtext:SetText(description)
end
 
function TRUESYS.CreateOptions(self, TextTitle, DescriptionsText)
    local title = self:CreateFontString(nil, "OVERLAY")
    title:SetFontObject('GameFontNormalLarge')
    title:SetPoint('TOPLEFT', 16, -16)
    title:SetText(TextTitle)
 
    local title2 = self:CreateFontString(nil, "OVERLAY")
    title2:SetFontObject('GameFontHighlightSmall')
    title2:SetPoint('TOPLEFT', 18, -35)
    title2:SetText(DescriptionsText)
end
 
TRUESYS.panel = CreateFrame("Frame", "TrueAuiOptions", UIParent)
TRUESYS.panel.name = "|cff89F559True|r|c007ffcffAui|r"
TRUESYS.CreateOptions(TRUESYS.panel, "|cff89F559(True)|r |c007ffcffAdaptive User Interface|r", "http://www.wowrdx.com")
 
TRUESYS.Checkbox(TRUESYS.panel, 1, 18, -60, "Enable ability priority system")
TRUESYS.Checkbox(TrueAuiEnableButton_1, 2, 1, -25, "Enable PVP trinket tracking")
TRUESYS.Checkbox(TrueAuiEnableButton_2, 3, 1, -25, "Enable loving your incredibly fussy wife forever")
 
InterfaceOptions_AddCategory(TRUESYS.panel)

I don't know how to make it actually work yet, but, just thought I'd share the good looking button code. c.c

Quote:

Originally Posted by Seerah (Post 253069)

You're looking for checkbuttons and sliders.

http://wowprogramming.com/docs/widgets/CheckButton
http://wowprogramming.com/docs/widgets/Slider

Quote:

Originally Posted by unlimit (Post 253070)

lua Code:

function TRUESYS.Checkbox(self, selfid, px, py, description)
    local checkbox = CreateFrame("CheckButton", "TrueAuiEnableButton_" .. selfid, self, "OptionsSmallCheckButtonTemplate")
    checkbox:SetScript("OnClick", Checkbox_OnClick)
    checkbox:SetPoint("TOPLEFT", self, px, py)
    checkbox:SetWidth(28)
    checkbox:SetHeight(28)
    checkbox:SetHitRectInsets(0, -60, 0, 0)
    checkbox:GetNormalTexture():SetAlpha(0.6)
 
    local checkboxtexture = checkbox:CreateTexture(nil, "ARTWORK")
    checkboxtexture:SetWidth(22)
    checkboxtexture:SetHeight(22)
    checkboxtexture:SetAlpha(0.9)
    checkboxtexture:SetPoint("LEFT", 2, 1)
    checkboxtexture:SetTexture("Interface\\RAIDFRAME\\ReadyCheck-Ready")
    checkbox:SetCheckedTexture(checkboxtexture)
    
    local checkboxtext = self:CreateFontString(nil, "ARTWORK", "GameFontNormal")
    checkboxtext:SetPoint("LEFT", checkbox, "RIGHT", 5, 1)
    checkboxtext:SetFontObject("GameFontNormal")
    checkboxtext:SetText(description)
end
 
function TRUESYS.CreateOptions(self, TextTitle, DescriptionsText)
    local title = self:CreateFontString(nil, "OVERLAY")
    title:SetFontObject('GameFontNormalLarge')
    title:SetPoint('TOPLEFT', 16, -16)
    title:SetText(TextTitle)
 
    local title2 = self:CreateFontString(nil, "OVERLAY")
    title2:SetFontObject('GameFontHighlightSmall')
    title2:SetPoint('TOPLEFT', 18, -35)
    title2:SetText(DescriptionsText)
end
 
TRUESYS.panel = CreateFrame("Frame", "TrueAuiOptions", UIParent)
TRUESYS.panel.name = "|cff89F559True|r|c007ffcffAui|r"
TRUESYS.CreateOptions(TRUESYS.panel, "|cff89F559(True)|r |c007ffcffAdaptive User Interface|r", "http://www.wowrdx.com")
 
TRUESYS.Checkbox(TRUESYS.panel, 1, 18, -60, "Enable ability priority system")
TRUESYS.Checkbox(TrueAuiEnableButton_1, 2, 1, -25, "Enable PVP trinket tracking")
TRUESYS.Checkbox(TrueAuiEnableButton_2, 3, 1, -25, "Enable loving your incredibly fussy wife forever")
 
InterfaceOptions_AddCategory(TRUESYS.panel)

I don't know how to make it actually work yet, but, just thought I'd share the good looking button code. c.c

Thanks both! :)

Basic template for creating and calling a panel

TOC

lua Code:

## Interface: 40300
## Title: rConfig
## Author: zork
## Notes: A config template
## Version: 0.001
## SavedVariables: RCONFIG_DB_GLOB
## SavedVariablesPerCharacter: RCONFIG_DB_CHAR
core.lua

LUA

lua Code:

--VARIABLES/CONSTANTS
 
--init the addon frame
local addon = CreateFrame("Frame")
local db_glob, db_char
local _G = _G
 
--FUNCTIONS
 
--default values
local function loadDefaultsGlobal()
  local t = {
    name = 'green',
  }
  return t
end
local function loadDefaultsChar()
  local t = {
    width = 100,
  }
  return t
end
 
local function loadDatabase()
  db_glob = _G["RCONFIG_DB_GLOB"] or loadDefaultsGlobal()
  _G["RCONFIG_DB_GLOB"] = db_glob
  --saved variables per character
  db_char = _G["RCONFIG_DB_CHAR"] or loadDefaultsChar()
  _G["RCONFIG_DB_CHAR"] = db_char
end
 
local function resetAllValues()
  db_glob = loadDefaultsGlobal()
  _G["RCONFIG_DB_GLOB"] = db_glob
  db_char = loadDefaultsChar()
  _G["RCONFIG_DB_CHAR"] = db_char
end
 
--do you really want to reset all values?
StaticPopupDialogs["RESET"] = {
  text = "Reset all values for rConfig?",
  button1 = ACCEPT,
  button2 = CANCEL,
  OnAccept = function() resetAllValues() print('reset done') end,
  OnCancel = function() print('reset canceled') end,
  timeout = 0,
  whileDead = 1,
}
 
local function createSubPanel(parent, name)
  local panel = CreateFrame("FRAME")
  panel.name = name
  panel.parent = parent.name
  panel.okay = function (self)
    print(name..' okay')
  end
  panel.cancel = function (self)
    print(name..' cancel')
  end
  panel.default = function (self)
    --resetAllValues()
    StaticPopup_Show("RESET")
    print(name..' default')
  end
  panel.refresh = function (self)
    print(name..' refresh')
  end
  InterfaceOptions_AddCategory(panel)
end
 
local function initPanel()
  local mainpanel = CreateFrame("FRAME")
  mainpanel.name = "rConfig"
  InterfaceOptions_AddCategory(mainpanel)
  createSubPanel(mainpanel,"rConfigSubPanel1")
  createSubPanel(mainpanel,"rConfigSubPanel2")
  return mainpanel
end
 
local function initSlashCmd(panel)
  SLASH_RCONFIG1, SLASH_RCONFIG2 = '/rc', '/rconfig'
  function SlashCmdList.RCONFIG(msg, editbox)
    InterfaceOptionsFrame_OpenToCategory(panel)
  end
end
 
--INIT
 
function addon:VARIABLES_LOADED(...)
  local self = self
  --load the database
  loadDatabase()
  self:UnregisterEvent("VARIABLES_LOADED")
end
 
function addon:PLAYER_LOGIN(...)
  local self = self
  print(db_glob.name)
  local mainpanel = initPanel()
  initSlashCmd(mainpanel)
  self:UnregisterEvent("PLAYER_LOGIN")
end
 
--CALL
 
--by doing this the addon will call functions based on registered events by itself
addon:SetScript("OnEvent", function(self, event)
  self[event](self)
  --return self[event](self)
end)
--register events
addon:RegisterEvent("VARIABLES_LOADED")
addon:RegisterEvent("PLAYER_LOGIN")

Result is a blank panel.
Example shows loading the DB, creating the panel/subpanel and adding a slashcmd to call the panel.

Quote:

Originally Posted by zork (Post 253199)

Basic template for creating and calling a panel

TOC

lua Code:

## Interface: 40300
## Title: rConfig
## Author: zork
## Notes: A config template
## Version: 0.001
## SavedVariables: RCONFIG_DB_GLOB
## SavedVariablesPerCharacter: RCONFIG_DB_CHAR
core.lua

LUA

lua Code:

--VARIABLES/CONSTANTS
 
--init the addon frame
local addon = CreateFrame("Frame")
local db_glob, db_char
local _G = _G
 
--FUNCTIONS
 
--default values
local function loadDefaultsGlobal()
  local t = {
    name = 'green',
  }
  return t
end
local function loadDefaultsChar()
  local t = {
    width = 100,
  }
  return t
end
 
local function loadDatabase()
  db_glob = _G["RCONFIG_DB_GLOB"] or loadDefaultsGlobal()
  _G["RCONFIG_DB_GLOB"] = db_glob
  --saved variables per character
  db_char = _G["RCONFIG_DB_CHAR"] or loadDefaultsChar()
  _G["RCONFIG_DB_CHAR"] = db_char
end
 
local function resetAllValues()
  db_glob = loadDefaultsGlobal()
  _G["RCONFIG_DB_GLOB"] = db_glob
  db_char = loadDefaultsChar()
  _G["RCONFIG_DB_CHAR"] = db_char
end
 
--do you really want to reset all values?
StaticPopupDialogs["RESET"] = {
  text = "Reset all values for rConfig?",
  button1 = ACCEPT,
  button2 = CANCEL,
  OnAccept = function() resetAllValues() print('reset done') end,
  OnCancel = function() print('reset canceled') end,
  timeout = 0,
  whileDead = 1,
}
 
local function createSubPanel(parent, name)
  local panel = CreateFrame("FRAME")
  panel.name = name
  panel.parent = parent.name
  panel.okay = function (self)
    print(name..' okay')
  end
  panel.cancel = function (self)
    print(name..' cancel')
  end
  panel.default = function (self)
    --resetAllValues()
    StaticPopup_Show("RESET")
    print(name..' default')
  end
  panel.refresh = function (self)
    print(name..' refresh')
  end
  InterfaceOptions_AddCategory(panel)
end
 
local function initPanel()
  local mainpanel = CreateFrame("FRAME")
  mainpanel.name = "rConfig"
  InterfaceOptions_AddCategory(mainpanel)
  createSubPanel(mainpanel,"rConfigSubPanel1")
  createSubPanel(mainpanel,"rConfigSubPanel2")
  return mainpanel
end
 
local function initSlashCmd(panel)
  SLASH_RCONFIG1, SLASH_RCONFIG2 = '/rc', '/rconfig'
  function SlashCmdList.RCONFIG(msg, editbox)
    InterfaceOptionsFrame_OpenToCategory(panel)
  end
end
 
--INIT
 
function addon:VARIABLES_LOADED(...)
  local self = self
  --load the database
  loadDatabase()
  self:UnregisterEvent("VARIABLES_LOADED")
end
 
function addon:PLAYER_LOGIN(...)
  local self = self
  print(db_glob.name)
  local mainpanel = initPanel()
  initSlashCmd(mainpanel)
  self:UnregisterEvent("PLAYER_LOGIN")
end
 
--CALL
 
--by doing this the addon will call functions based on registered events by itself
addon:SetScript("OnEvent", function(self, event)
  self[event](self)
  --return self[event](self)
end)
--register events
addon:RegisterEvent("VARIABLES_LOADED")
addon:RegisterEvent("PLAYER_LOGIN")

Result is a blank panel.
Example shows loading the DB, creating the panel/subpanel and adding a slashcmd to call the panel.

Thanks Zork :D

Anyways i started on a new GUI

Here is it!

The thing is i need to figure how to create new windows for the tabs :<

LUA Code:

-- Create an function so we can give all the frames texts in a smart way!
 
function CreateOptions(self, TextTitle, DescriptionsText) -- CreateOptions(self, "Header Text", "Description Text")
    local title = self:CreateFontString(nil, "OVERLAY")
    title:SetFontObject('GameFontNormalLarge')
    title:SetPoint('TOPLEFT', 16, -16)
    title:SetText(TextTitle) -- Header Text
    
    local title2 = self:CreateFontString(nil, "OVERLAY")
    title2:SetFontObject('GameFontHighlightSmall')
    title2:SetPoint('TOPLEFT', 17, -37)
    title2:SetText(DescriptionsText) -- Description Text.
end
 
function Checkbox(self, selfid, px, py, description, SetChecked, OnClick) -- Checkbox(self, 1, 14, -55, "Description Text", SetChecked, OnClick)
    local checkbox = CreateFrame("CheckButton", "CheckBoxButton" .. selfid, self, "OptionsSmallCheckButtonTemplate")
    checkbox:SetPoint("TOPLEFT", self, px, py)
    checkbox:SetScript("OnClick", OnClick)
    checkbox:SetWidth(28)
    checkbox:SetHeight(28)
    checkbox:SetFrameStrata("HIGH")
    checkbox:SetChecked(SetChecked)
    checkbox:SetHitRectInsets(0, -60, 0, 0)
    checkbox:GetNormalTexture():SetAlpha(0.6)
    checkbox:SetNormalTexture("")
    checkbox:SetPushedTexture("")
    checkbox:SetHighlightTexture("")
    checkbox:SetBackdrop({
        bgFile = AftermathhUI.media.backdrop,
        insets = {top = 1, left = 1, bottom = 1, right = 1}, 
    })
 
    CreateBorderLight(checkbox, AftermathhUI.media.bordersize, AftermathhUI.bordercolor, AftermathhUI.bordercolor, AftermathhUI.bordercolor, -4)
    
    checkbox:HookScript("OnEnter", function(self) 
        ColorBorder(checkbox, 1.0, 0.82, 0)
    end)
    
    checkbox:HookScript("OnLeave", function(self)
        ColorBorder(checkbox, AftermathhUI.bordercolor, AftermathhUI.bordercolor, AftermathhUI.bordercolor)
    end)
    
    local checkboxtexture = checkbox:CreateTexture(nil, "ARTWORK")
    checkboxtexture:SetWidth(25)
    checkboxtexture:SetHeight(22)
    checkboxtexture:SetAlpha(0.9)
    checkboxtexture:SetPoint("LEFT", 2, 1)
    checkboxtexture:SetTexture("Interface\\RAIDFRAME\\ReadyCheck-Ready")
    checkbox:SetCheckedTexture(checkboxtexture)
    
    local checkboxtext = self:CreateFontString(nil, "ARTWORK", "GameFontNormal")
    checkboxtext:SetPoint("LEFT", checkbox, "RIGHT", 5, 1)
    checkboxtext:SetFontObject("GameFontNormal")
    checkboxtext:SetTextColor(1, 1, 1)
    checkboxtext:SetText(description)
end
 
function ShowBuffs_OnClick()
 
end
 
local AftermathhUIFrame = CreateFrame("Frame", "AftermathhUIFrame", UIParent)
AftermathhUIFrame:SetSize(800, 550)
AftermathhUIFrame:SetFrameStrata("HIGH")
AftermathhUIFrame:SetFrameLevel(25)
AftermathhUIFrame:SetBackdrop({
    bgFile = AftermathhUI.media.blank,
    insets = {top = -1, left = -1, bottom = -1, right = -1},
})
AftermathhUIFrame:SetBackdropColor(unpack(AftermathhUI.media.backdropcolor))
AftermathhUIFrame:Hide()
 
CreateOptions(AftermathhUIFrame, "AftermathhUI_Config", "Welcome to AftermathhUI_Config. Here you can find most of the options that are needed!")
 
CreateBorderLight(AftermathhUIFrame, AftermathhUI.media.bordersize, AftermathhUI.bordercolor, AftermathhUI.bordercolor, AftermathhUI.bordercolor, 1)
 
AftermathhUIFrame:SetClampedToScreen(true)
AftermathhUIFrame:SetMovable(true)
AftermathhUIFrame:SetUserPlaced(true)
AftermathhUIFrame:EnableMouse(true)
AftermathhUIFrame:RegisterForDrag("LeftButton")
AftermathhUIFrame:SetHitRectInsets(-15, -15, -5, -5)
 
AftermathhUIFrame:ClearAllPoints()
AftermathhUIFrame.ClearAllPoints = function() end
AftermathhUIFrame:SetPoint("CENTER", UIParent)
AftermathhUIFrame.SetPoint = function() end
 
AftermathhUIFrame:SetScript("OnDragStart", function(self) 
    AftermathhUIFrame:StartMoving()
end)
 
AftermathhUIFrame:SetScript("OnDragStop", function(self) 
    AftermathhUIFrame:StopMovingOrSizing()
end)
 
Checkbox(AftermathhUIFrame, 1, 14, -95, "Show PvP Icon.", AftermathhUI.ouf.showpvpicon)
Checkbox(AftermathhUIFrame, 2, 14, -115, "Show Buffs.", AftermathhUI.ouf.showbuffs, ShowBuffs_OnClick)
Checkbox(AftermathhUIFrame, 3, 14, -135, "Show Debuffs.", AftermathhUI.ouf.showdebuffs)
Checkbox(AftermathhUIFrame, 4, 14, -155, "Only Show Player Debuffs.", AftermathhUI.ouf.onlyshowplayerdebuffs)
Checkbox(AftermathhUIFrame, 5, 14, -175, "Show Aggroo.", AftermathhUI.ouf.showaggroo)
Checkbox(AftermathhUIFrame, 6, 14, -195, "Show Debuff Highlight", AftermathhUI.ouf.showdebuffhighlight)
Checkbox(AftermathhUIFrame, 7, 14, -215, "Tooltip On Mouseover (Player etc).", AftermathhUI.ouf.tooltiponouf)
Checkbox(AftermathhUIFrame, 8, 14, -235, "Show Role Icon.", AftermathhUI.ouf.showroleicon)
Checkbox(AftermathhUIFrame, 9, 14, -255, "Show Boss Frames.", AftermathhUI.ouf.bossframes)
Checkbox(AftermathhUIFrame, 10, 14, -275, "Show Party Frames.", AftermathhUI.ouf.showparty)
Checkbox(AftermathhUIFrame, 11, 14, -295, "Tooltip On Mouseover (Raidframes).", AftermathhUI.ouf.tooltiponraid)
Checkbox(AftermathhUIFrame, 12, 14, -315, "Highlight On Mouseover (Raidframes).", AftermathhUI.ouf.highlightontarget)
Checkbox(AftermathhUIFrame, 13, 14, -335, "Make Raid Frames Vertical.", AftermathhUI.ouf.raidframesvertical)
Checkbox(AftermathhUIFrame, 14, 14, -355, "Aura Watch (Raidframes).", AftermathhUI.ouf.aurawatch)
Checkbox(AftermathhUIFrame, 15, 14, -375, "Raid Debuffs.", AftermathhUI.ouf.raiddebuffs)
Checkbox(AftermathhUIFrame, 16, 14, -395, "Show Aggro On Raidframes.", AftermathhUI.ouf.showaggroonraidframes)
Checkbox(AftermathhUIFrame, 17, 14, -415, "Experiance Bar.", AftermathhUI.ouf.expbar)
Checkbox(AftermathhUIFrame, 18, 14, -435, "Reputation Bar.", AftermathhUI.ouf.repbar)
Checkbox(AftermathhUIFrame, 19, 14, -455, "Moveable Frames.", AftermathhUI.ouf.moveableframes)
Checkbox(AftermathhUIFrame, 20, 14, -475, "Totembar from oUF.", AftermathhUI.ouf.totembar)
Checkbox(AftermathhUIFrame, 21, 14, -495, "Heal Prediction.", AftermathhUI.ouf.healprediction)
Checkbox(AftermathhUIFrame, 22, 14, -515, "Combat Feedback.", AftermathhUI.ouf.combatfeedback)
 
--- Coulum 2
 
Checkbox(AftermathhUIFrame, 23, 350, -95, "Classcolor on Castbar.", AftermathhUI.ouf.castbarclasscolor)
Checkbox(AftermathhUIFrame, 24, 350, -115, "Show Safe Zone.", AftermathhUI.ouf.showsafezone)
Checkbox(AftermathhUIFrame, 25, 350, -135, "Show Latency.", AftermathhUI.ouf.showlatency)
Checkbox(AftermathhUIFrame, 26, 350, -155, "Target Castbar Icon.", AftermathhUI.ouf.targetcastbaricon)
Checkbox(AftermathhUIFrame, 27, 350, -175, "Focus Castbar Icon.", AftermathhUI.ouf.focuscastbaricon)
Checkbox(AftermathhUIFrame, 28, 350, -195, "Show Interrupt Highlight.", AftermathhUI.ouf.showinterrupthighlight)
 
local function AftermathhUIFrameOnEnter(self, fontsub)
    self:HookScript("OnEnter", function(self) 
        ColorBorder(self, 1.0, 0.82, 0)
    end)
    self:HookScript("OnLeave", function(self)
        ColorBorder(self, AftermathhUI.bordercolor, AftermathhUI.bordercolor, AftermathhUI.bordercolor)
    end)
end
 
local function AftermathhUIFontOnEnter(self)
    self:HookScript("OnEnter", function(self) 
        self:SetTextColor(1, 1, 1)
    end)
    self:HookScript("OnLeave", function(self)
        self:SetTextColor(1.0, 0.82, 0)
    end)
end
 
local AftermathhUIFrameSub1 = CreateFrame("Button", nil, UIParent)
AftermathhUIFrameSub1:SetSize(75, 20)
AftermathhUIFrameSub1:SetFrameStrata("HIGH")
AftermathhUIFrameSub1:SetFrameLevel(26)
AftermathhUIFrameSub1:SetBackdrop({
    bgFile = AftermathhUI.media.texture2,
    --insets = {top = -1, left = -1, bottom = -1, right = -1},
})
AftermathhUIFrameSub1:SetBackdropColor(.40, .40, .40, 1)
AftermathhUIFrameSub1:SetPoint("TOPLEFT", AftermathhUIFrame, 16, -65)
AftermathhUIFrameSub1:Hide()
 
CreateBorderLight(AftermathhUIFrameSub1, AftermathhUI.media.bordersize, AftermathhUI.bordercolor, AftermathhUI.bordercolor, AftermathhUI.bordercolor, 1)
 
AftermathhUIFrameOnEnter(AftermathhUIFrameSub1)
 
local AftermathhUIFrameSub1Font = AftermathhUIFrameSub1:CreateFontString(nil, "OVERLAY")
AftermathhUIFrameSub1Font:SetFontObject('GameFontHighlightSmall')
AftermathhUIFrameSub1Font:SetText("Unitframes")
AftermathhUIFrameSub1Font:SetTextColor(1.0, 0.82, 0)
AftermathhUIFrameSub1Font:SetPoint("CENTER")
 
local AftermathhUIFrameSub2 = CreateFrame("Button", nil, UIParent)
AftermathhUIFrameSub2:SetSize(75, 20)
AftermathhUIFrameSub2:SetFrameStrata("HIGH")
AftermathhUIFrameSub2:SetFrameLevel(26)
AftermathhUIFrameSub2:SetBackdrop({ 
    bgFile = AftermathhUI.media.texture2,
    --insets = {top = -1, left = -1, bottom = -1, right = -1},
})
AftermathhUIFrameSub2:SetBackdropColor(.40, .40, .40, 1)
AftermathhUIFrameSub2:SetPoint("TOPLEFT", AftermathhUIFrame, 95, -65)
AftermathhUIFrameSub2:Hide()
 
CreateBorderLight(AftermathhUIFrameSub2, AftermathhUI.media.bordersize, AftermathhUI.bordercolor, AftermathhUI.bordercolor, AftermathhUI.bordercolor, 1)
 
AftermathhUIFrameOnEnter(AftermathhUIFrameSub2)
 
local AftermathhUIFrameSub2Font = AftermathhUIFrameSub2:CreateFontString(nil, "OVERLAY")
AftermathhUIFrameSub2Font:SetFontObject('GameFontHighlightSmall')
AftermathhUIFrameSub2Font:SetText("Buffs")
AftermathhUIFrameSub2Font:SetTextColor(1.0, 0.82, 0)
AftermathhUIFrameSub2Font:SetPoint("CENTER")