Circonians Menu Settings Tutorial

From ESOUI Wiki

Jump to: navigation, search



Contents

Tutorial Preface

In this tutorial we will be building on the previous tutorial Circonians Saved Variables Tutorial. We will be adding a menu in the games settings window to change the width & height of our stamina bar, an option to show or hide it, and a color picker to allow us to change the color of the status bar. This tutorial uses LibAddonMenu-2.0 r18 to create our settings menu so this tutorial also serves as an example on how to incorporate a library into your addon.


Tutorial Prerequisites

This tutorial carries on where Circonians Saved Variables Tutorial left off. It is expected that you have all ready worked through that tutorial and have the completed addon working. We will be adding features to that addon and we will not be covering any information that was all ready covered in that previous tutorial. If you have not yet worked through that tutorial, don't have the code for it, or just need to look back at it as a refresher you can find it here: [Circonians Saved Variables Tutorial]


Libraries

A library is basically a bunch of code that someone has all ready written and packaged up into one neat file that you can add to your addon. What is the point? Usually the basic idea is that the library contains code shortcuts. I will try to give a simplistic example using our current addon. In our addon we have a:


This may not be an extremely realistic or great example, but I want to use the addon we've all ready created (and hopefully we are familiar with) to create an example to make it easier to understand.


Lets say that we find in our code we very often need to alter all of the following properties (at the same time):


Now we could go through and set all of these settings the normal way:

CirconianStaminaBarWindow:SetHidden(true) -- Or false, whichever we need, its just an example
CirconianStaminaBarWindowBackdrop:SetAlpha(0.2)
CirconianStaminaBarWindowStatusBar:SetAlpha(0.6)
CirconianStaminaBarWindowBorder:SetAlpha(0.2)
CirconianStaminaBarWindowLabel:SetText("New Character Name)

But we would have to do all of that code every time we needed to alter those properties (remember the idea is that, for whatever reason, we need to do this a lot in our code or maybe what we need to do is a lot more complex than that and were wanting a shortcut to do it all)

Or we might have a library that contains a function that all ready does all of this for us like:

function SetStuff(_TopLevelControl, _Hidden, _BackdropAlpha, _StatusBarAlpha, _BorderAlpha, _LabelText)
	-- These lines find the control for TopLevelControl children with the given name --
	-- Of course in order for this code to work, your addon would have to use those names for its TopLevelControls children --
	local cntrlBackdrop = _TopLevelControl:GetNamedChild("Backdrop")
	local cntrlStatsBuar = _TopLevelControl:GetNamedChild("StatusBar")
	local cntrlBorder = _TopLevelControl:GetNamedChild("Border")
	local cntrlLabel = _TopLevelControl:GetNamedChild("Label")
 
	_TopLevelControl:SetHidden(_Hidden)
	cntrlBackdrop:SetAlpha(0.2)
	cntrlStatsBuar:SetAlpha(0.6)
	cntrlBorder:SetAlpha(0.2)
	cntrlLabel:SetText("New Character Name")
end

Now if we had a library embedded in our addon that did that for us, we could make all of our adjustments in our code by calling a single function.

SetStuff(CirconianStaminaBarWindow, true, 0.2, 0.6, 0.2, "New Character Name")

As I said that is not the greatest or most realistic example, but I want to stick to using what we have learned about so far. Hopefully that gives you some insight into the idea behind libraries.

Just in case you are thinking, "I don't get it, I could just write that SetStuff function myself in my code and use it so whats the big deal?"
As I said that is a pretty short/small simple example, but the big deal is that you wouldn't need to write that code it would be incorporated into the library and you would just add the library to your addon, saving you a lot of time, energy, and debugging because (hopefully) the library has been thoroughly tested and works as advertised!

Library Structure

The location of your libraries should be in a folder named Libs (short for libraries) in your addon folder. That is where you will place all of the library folders. So in our example, we would have:

\Documents\Elder Scrolls Online\live\AddOns
                                      |
                                      +---CirconianStaminaBar
                                           |
                                           +---Libs  -- You will place your library folders in here --
                                           |
                                           +---CirconianStaminaBar.txt
                                           |
                                           +---CirconianStaminaBar.lua
                                           |
                                           +---CirconianStaminaBar.xml



Add LibAddonMenu-2.0

You can download the latest version of LibAddonMenu-2.0 here: [LibAddonMenu-2.0]
If that link ever breaks go to the addon section of esoui and click on the Libraries link and try searching for it there or google it.

Download the LibAddonMenu-2.0 and unzip it. When you unzip it I recommend that you choose the option "unzip here" or "extract here" (depending upon what software your using to unzip it). Add the LibAddonMenu-2.0 folder to your addon Libs folder.

Do be careful which folder you add to your Libs folder.

Depending upon how you unzip the folder you may get different results. For example if when you unzip it you choose "Unzip to LibAddon-2.0" you would end up with the following file/folder structure:

LibAddonMenu-2.0  -- You do not need this folder, just its contents --
   |
   + LibAddonMenu-2.0              -- You need this folder --
   |    |
   |	+---LibAddonMenu-2.0.lua      -- which contains this file--
   |
   + LibStub                       -- and this folder --
   |	|
   |	+---LibStub.lua            -- which contains this file --
   |
   +---LibAddonMenu-2.0.txt         -- and this file --

If you choose "unzip here" when unzipping it you wont have that problem, but either way I suggest you double check the folders structure and see what is inside. In the end your addon folder should look like this:

Elder Scrolls Online\live\AddOns
                           |
                           +---CirconianStaminaBar
                                 |
                                 +---Libs
                                 |     |
                                 |     +---LibAddonMenu-2.0  
                                 |     |     |
                                 |     |     +---LibAddonMenu-2.0.lua 
                                 |     |     |
                                 |     |     +---controls
                                 |     |         |
                                 |     |         +---button.lua
                                 |     |         |
                                 |     |         +---checkbox.lua
                                 |     |         |
                                 .     .         .   <colorpicker...submenu>
                                 |     |         |
                                 |     |         +---texture.lua
                                 |     |    
                                 |     +---LibStub  
                                 |     |     |
                                 |     |     +---LibStub.lua  
                                 |     |
                                 |     +---LibAddonMenu-2.0.txt 
                                 |
                                 +---CirconianStaminaBar.txt
                                 |
                                 +---CirconianStaminaBar.lua
                                 |
                                 +---CirconianStaminaBar.xml




The txt File

Now that we have added the lib folders/files to our addon folder we need to tell ESO that we want to use it. We discussed how to do this in the original tutorial which you can find here: [Circonians Stamina Bar Tutorial] If you need a refresher on the text file.

We need to add the following lines to our txt file:

## OptionalDependsOn: LibAddonMenu-2.0
Libs/LibStub/LibStub.lua
Libs/LibAddonMenu-2.0/LibAddonMenu-2.0.lua
Libs/LibAddonMenu-2.0/controls/panel.lua
Libs/LibAddonMenu-2.0/controls/submenu.lua
Libs/LibAddonMenu-2.0/controls/button.lua
Libs/LibAddonMenu-2.0/controls/checkbox.lua
Libs/LibAddonMenu-2.0/controls/colorpicker.lua
Libs/LibAddonMenu-2.0/controls/custom.lua
Libs/LibAddonMenu-2.0/controls/description.lua
Libs/LibAddonMenu-2.0/controls/dropdown.lua
Libs/LibAddonMenu-2.0/controls/editbox.lua
Libs/LibAddonMenu-2.0/controls/header.lua
Libs/LibAddonMenu-2.0/controls/slider.lua
Libs/LibAddonMenu-2.0/controls/texture.lua
Libs/LibAddonMenu-2.0/controls/iconpicker.lua

I will give a really brief explanation of what these do, where to put them in the txt file, or if you need more information about what all of this is see: [Circonians Stamina Bar Tutorial]

## OptionalDependsOn: LibAddonMenu-2.0

This tells ESO that your addon uses the library LibAddonMenu-2.0 (a library used to create in game settings windows for your addon). The Optional DependsOn part tells ESO that if the user has LibAddonMenu-2.0 installed then your addon wants to use it, but its OPTIONAL. If it doesn't exist, no big deal.

Libs/LibStub/LibStub.lua

This line tells ESO where to find LibStub.lua, do note that the path starts in your addons folder.

libs/LibAddonMenu-2.0/LibAddonMenu-2.0.lua

This line tells ESO where to find LibAddonMenu-2.0.lua, do note that the path starts in your addons folder. Since your addon is in the location:

C:\Users\<your user name>\Documents\Elder Scrolls Online\live\AddOns

That line is really saying look for LibAddonMenu-2.0.lua here:

C:\Users\<your user name>\Documents\Elder Scrolls Online\live\AddOns\libs\LibAddonMenu-2.0\LibAddonMenu-2.0.lua


Libs/LibAddonMenu-2.0/controls/panel.lua
...
Libs/LibAddonMenu-2.0/controls/iconpicker.lua

These are LibAddonMenu-2.0's individual controls. We're only using a few of these in this example, but we might as well load all of them.


Final txt File

Your CirconianStaminaBar.txt file should now look like this:

## Title: Circonians Stamina Bar
## Description: Circonians Stamina Bar Version 2.0
## APIVersion: 100008
## OptionalDependsOn: LibAddonMenu-2.0
## SavedVariables: CirconianStaminaBarVars
 
Libs/LibStub/LibStub.lua
Libs/LibAddonMenu-2.0/LibAddonMenu-2.0.lua
Libs/LibAddonMenu-2.0/controls/panel.lua
Libs/LibAddonMenu-2.0/controls/submenu.lua
Libs/LibAddonMenu-2.0/controls/button.lua
Libs/LibAddonMenu-2.0/controls/checkbox.lua
Libs/LibAddonMenu-2.0/controls/colorpicker.lua
Libs/LibAddonMenu-2.0/controls/custom.lua
Libs/LibAddonMenu-2.0/controls/description.lua
Libs/LibAddonMenu-2.0/controls/dropdown.lua
Libs/LibAddonMenu-2.0/controls/editbox.lua
Libs/LibAddonMenu-2.0/controls/header.lua
Libs/LibAddonMenu-2.0/controls/slider.lua
Libs/LibAddonMenu-2.0/controls/texture.lua
Libs/LibAddonMenu-2.0/controls/iconpicker.lua
 
CirconianStaminaBar.lua
CirconianStaminaBar.xml




The lua File

Version Number

First lets change the version number for our addon.

-- Find this line
-- CirconianStaminaBar.version = 2
-- change it to this, version 3
CirconianStaminaBar.version = 3

The reason for this is because we are going to need to use the version number in more than one place in our addon. By assigning that value to a variable we can just call that variable wherever we need the version number. Then whenever the version number changes we only have to change it on one place.

In the Initialize function change the ZO_SavedVars:New(..) function to use the variable name for our current addons version number:

CirconianStaminaBar.savedVariables = ZO_SavedVars:New("CirconianStaminaBarVars", CirconianStaminaBar.version, nil, CirconianStaminaBar.Default)

Adding our Library

At the very top of your lua file add the following code:

-------------------------------------------------------------------------------------------------
--  Libraries --
-------------------------------------------------------------------------------------------------
local LAM2 = LibStub:GetLibrary("LibAddonMenu-2.0")

Here we are calling the GetLibrary function on LibStub and passing it a value of "LibAddonMenu-2.0".
Basically this is getting a way for us to access the LibAddonMenu-2.0 library and storing it in the name LAM2.

Default Settings

We need to set up default values for the settings we are going to offer. Add the following lines to your default settings table (Remember we named it CirconianStaminaBar.Default).

Show = true,
StaminaBarColor = {1, 0, 0, 1},
BarWidth = 300,
BarHeight = 50,


I think most of those default settings are pretty self explanatory except the StaminaBarColor, so I will give a litte input on that.

StaminaBarColor = {1, 0, 0, 1}
-- That means:  StaminaBarColor = {red, green, blue, alpha}

The { ... } refers to a table. So we are creating a table inside of our CirconianStaminaBar.default table, to hold the default color and alpha value for our stamina bar.

1, 0, 0, 1

Refers to the red, green, blue, alpha values that we will use for the default values.




Final Default Settings Table

Your default settings table should now look like this:

CirconianStaminaBar.Default = {
	OffsetX = 20,
	OffsetY = 75,
	Show = true,
	StaminaBarColor = {0, 1, 0, 1},
	BarWidth = 300,
	BarHeight = 50,
}


Initialize

In order for our saved settings to be applied when our addon loads we need to add the following lines to the initialize() function in our lua file:

-- Add these lines
CirconianStaminaBar.CreateSettingsWindow()
CirconianStaminaBarWindow:SetHidden(not CirconianStaminaBar.savedVariables.Show)
CirconianStaminaBar.SetBarSize(CirconianStaminaBar.savedVariables.BarWidth, CirconianStaminaBar.savedVariables.BarHeight)
CirconianStaminaBarWindowStatusBar:SetColor(unpack(CirconianStaminaBar.savedVariables.StaminaBarColor))



CirconianStaminaBar.CreateSettingsWindow()

This is a function that we will create later to create the settings window in the game. It will need to be run in our Initialize function to set up the settings window when the addon loads.


CirconianStaminaBarWindow:SetHidden(not CirconianStaminaBar.savedVariables.Show)

This is to set up the visibility of our stamina bar window when the addon loads.

not basically means the opposite of CirconianStaminaBar.savedVariables.Show So if CirconianStaminaBar.savedVariables.Show is set to true, then not CirconianStaminaBar.savedVariables.Show will return false and vice-versa. The reason we have to do this is because we are saving a variable that states whether or not we should show the control, but to set visibility the game uses a SetHidden function. So if our variable says: CirconianStaminaBar.savedVariables.Show = true That means we want it to show, so we need to set the hidden property to false:
CirconianStaminaBarWindow:SetHidden(false)

Which is why we have the not in front of it.

You might be thinking thats crazy, then why don't we just save the variable as whether or not we want the control to be hidden and then we dont have to do that crazy not thing. Yeah, but its a learning experience. You need to understand what not is and what it does.



CirconianStaminaBar.SetBarSize(CirconianStaminaBar.savedVariables.BarWidth, CirconianStaminaBar.savedVariables.BarHeight)

This is a function that we will create later to set the size of our stamina bar. We could just add the code here in the initialize function but we are also going to need to do the same code two more times in our settings menu when we create it. There is no need to write the code three times so we'll create one function to do the work for us and then just call it where we need it. This also helps us if we ever need to edit (or during debugging) because all of the code controlling the size of the stamina bar will be in one spot.



CirconianStaminaBarWindowStatusBar:SetColor(unpack(CirconianStaminaBar.savedVariables.StaminaBarColor))

This line sets the new color for our status bar. (since our CirconianStaminaBar.savedVariables.StaminaBarColor table also contains an alpha value it could also be used to reset the alpha value, but were only changing the color).


unpack

unpack(CirconianStaminaBar.savedVariables.StaminaBarColor)

unpack does what it sounds like...It unpacks the table that we pass to it and returns just the values inside of that table. So in our example (using our default values as an example)

CirconianStaminaBar.savedVariables.StaminaBarColor = {1, 0, 0, 1}

when we call the unpack function on CirconianStaminaBar.savedVariables.StaminaBarColor would return the values inside the table: 1, 0, 0, 1

If it helps to give you a better idea of what is going on:
CirconianStaminaBarWindowStatusBar:SetColor(unpack(CirconianStaminaBar.savedVariables.StaminaBarColor))

Is the same thing as doing:

local red, green, blue, alpha = unpack(CirconianStaminaBar.savedVariables.StaminaBarColor)
CirconianStaminaBarWindowStatusBar:SetColor(red, green, blue, alpha)



Final Initialize File

Your Initialize function should now look like this:

function CirconianStaminaBar:Initialize()
	CirconianStaminaBar.savedVariables = ZO_SavedVars:New("CirconianStaminaBarVars", CirconianStaminaBar.version, nil, CirconianStaminaBar.Default)
 
	-- Add these lines
	CirconianStaminaBar.CreateSettingsWindow()
	CirconianStaminaBarWindow:SetHidden(not CirconianStaminaBar.savedVariables.Show)
	CirconianStaminaBar.SetBarSize(CirconianStaminaBar.savedVariables.BarWidth, CirconianStaminaBar.savedVariables.BarHeight)
	CirconianStaminaBarWindowStatusBar:SetColor(unpack(CirconianStaminaBar.savedVariables.StaminaBarColor))		
 
	local ourName = GetUnitName("player")
	CirconianStaminaBarWindowLabel:SetText(ourName)
 
	local current, max, effectiveMax = GetUnitPower("player", POWERTYPE_STAMINA)
	CirconianStaminaBarWindowStatusBar:SetMinMax(0, max)
	CirconianStaminaBarWindowStatusBar:SetValue(current)
 
	CirconianStaminaBarWindow:ClearAnchors()
	CirconianStaminaBarWindow:SetAnchor(TOPLEFT, GuiRoot, TOPLEFT, CirconianStaminaBar.savedVariables.OffsetX, CirconianStaminaBar.savedVariables.OffsetY)
 
	EVENT_MANAGER:UnregisterForEvent(CirconianStaminaBar.name, EVENT_ADD_ON_LOADED)
end



SetBarSize function

Now we will create the function that changes the size of our stamina bar. We all ready added some code (above) to our initialize function to run it when our addon loads, so we all ready decided on a name for it. I called it CirconianStaminaBar.SetBarSize.

Create the following function, in the restore functions section of your code, to resize our stamina bar.

-------------------------------------------------------------------------------------------------
--  Restore Functions --
-------------------------------------------------------------------------------------------------
function CirconianStaminaBar.SetBarSize(_width, _height)
	CirconianStaminaBarWindowStatusBar:SetDimensions(_width, _height)
	CirconianStaminaBarWindowBackdrop:SetDimensions(_width, _height)
	CirconianStaminaBarWindowBorder:SetDimensions(_width, _height)
	CirconianStaminaBarWindow:SetDimensions(_width, _height)	
end



CirconianStaminaBarWindowStatusBar:SetDimensions(_width, _height)
CirconianStaminaBarWindowBackdrop:SetDimensions(_width, _height)
CirconianStaminaBarWindowBorder:SetDimensions(_width, _height)
CirconianStaminaBarWindow:SetDimensions(_width, _height)

We resize each of the controls that make up our stamina bar by calling the SetDimensions function on each and passing it the new width & height. The new width and height will be passed into this function as parameters I have named _width and _height.

If all we had was a simple status bar and that is it we could just set the dimensions in one line. But our stamina bar is made up of several pieces. It has a backdrop (for the background), a backdrop (for the border), and a status bar. If we just set the size of the status bar both backdrops would stay the same size and it would not look right. So in order to resize it we must reset the size of all of them.

Also notice that we are resizing the TopLevelControl, "CirconianStaminaBarWindow". If you recall from the first tutorial we had a problem moving the control around with the mouse because the TopLevelControl was to small. By resizing the TopLevelControl to the new size of our status bar this ensures we wont have that problem again.


Creating the Settings Menu

First lets create a function to do all of the setup for us. Remember we all ready added a call to this function in our Initialize() function so we have all ready decided to call it CirconianStaminaBar.CreateSettingsWindow(). This function is fairly large so we will start by creating an empty function and then add a little bit of code at a time so we can discuss it as we go.
In your lua code file create a new section and the empty function:

-------------------------------------------------------------------------------------------------
--  Menu Functions --
-------------------------------------------------------------------------------------------------
function CirconianStaminaBar.CreateSettingsWindow()
 
end

Registering the Settings Menu Panel


Inside of that function we will add all of the following code:

local panelData = {
	type = "panel",
	name = "Circonians Stamina Bar",
	displayName = "Circonians Stamina Bar",
	author = "Circonian",
	version = CirconianStaminaBar.version,
	slashCommand = "/stambar",
	registerForRefresh = true,
	registerForDefaults = true,
}
  • panelData -- Is a table that will hold the information necessary to register a settings menu "panel" with LibAddonMenu. Basically panel just means its the window that holds our addons & only our addons settings.
  • type -- Tells LibAddonMenu what we are registering, a panel.
  • name -- This is the name of the panel that will be displayed in the addon selection area of the settings menu.
  • displayName -- Is the name that will be displayed in the settings menu panel (at the top of the settings menu).
  • slashCommand -- is the slashcommand that a user can type to open up this addons settings menu panel.
  • registerForRefresh -- When true libAddonMenu will refresh all options controls when a setting is changed or the panel is shown.
  • registerForDefaults -- When true libAddonMenu enables the "Reset To Defaults" button to set all options controls back to default values.


local cntrlOptionsPanel = LAM2:RegisterAddonPanel("Circonians_StaminaBar", panelData)
  • cntrolOptionsPanel -- Will hold a reference to the object returned by LAM2:RegisterAddonPanel (our settings menu panel)
  • LAM2 -- Tells the game were going to call a function that belongs to the LAM2 library
    RegisterAddonPanel -- Tells the game to call the RegisterAddonPanel (in the LAM2 library)
  • "Circonians_StaminaBar" -- -- Is a unique name (as a string) for our control that we are creating
  • panelData -- Is the table we created above that contains information necessary for LibAddonMenu to register our panel.

Registering the Settings Controls

Now add the following table (it is empty for the moment, we will fill it in next).

local optionsData = {
 
}

This table will hold all of the information necessary to register all of the controls for our settings menu.

Inside of that table add the following (be very careful with the commas , !!!!):

[1] = {
	type = "header",
	name = "Stamina Bar Settings",
},
  • [1] -- This is the index in our optionsData table where the first control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • name -- This is the name that will be displayed for this control.


[2] = {
	type = "description",
	text = "Here you can adjust how the stamina bar works.",
},
  • [2] -- This is the index in our optionsData table where the second control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • text -- This is the text that will be displayed for this control.


[3] = {
	type = "checkbox",
	name = "Show Stamina Bar",
	tooltip = "When ON the stamina bar will be visible. When OFF the stamina bar will be hidden.",
	default = true,
	getFunc = function() return CirconianStaminaBar.savedVariables.Show end,
	setFunc = function(newValue) 
		CirconianStaminaBar.savedVariables.Show = newValue
		CirconianStaminaBarWindow:SetHidden(not newValue)  end,
},
  • [3] -- This is the index in our optionsData table where the third control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • name -- This is the text that will be displayed for this control.
  • tooltip -- This is the text that will be displayed, as a tooltip, when the user hoovers their mouse over the control.
  • default -- This is the default value for the control.
  • getFunc -- This is the function that will be run whenever LibAddonMenu attempts to get the value of the control.
    • function ... -- When LibAddonMenu attempts to get the value of the control it will call this function, which will return the value CirconianStaminaBar.savedVariables.Show
  • setFunc -- This is the function that will be run whenever LibAddonMenu attempts to set the value of the control.
    • function ... -- When LibAddonMenu attempts to set the value of the control it will call this function, it will set the value of CirconianStaminaBar.savedVariables.Show to newValue (the new value the user set on the control). It will also set the hidden property of CirconianStaminaBarWindow to the opposite of newValue. So if the user selected ON/true the opposite would be OFF/false so the window would not be hidden.


[4] = {
	type = "slider",
	name = "Select Width",
	tooltip = "Adjusts the width of the stamina bar.",
	min = 100,
	max = 1000,
	step = 1,
	default = 300,
	getFunc = function() return CirconianStaminaBar.savedVariables.BarWidth end,
	setFunc = function(newValue) 
                CirconianStaminaBar.savedVariables.BarWidth = newValue
                CirconianStaminaBar.SetBarSize(newValue, CirconianStaminaBar.savedVariables.BarHeight)
                end,
},
  • [4] -- This is the index in our optionsData table where the third control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • name -- This is the text that will be displayed for this control.
  • tooltip -- This is the text that will be displayed, as a tooltip, when the user hoovers their mouse over the control.
  • min -- This is the minimum value for the control.
  • max -- This is the maximum value for the control.
  • default -- This is the default value for the control.
  • getFunc -- This is the function that will be run whenever LibAddonMenu attempts to get the value of the control.
    • function ... -- When LibAddonMenu attempts to get the value of the control it will call this function, which will return the value CirconianStaminaBar.savedVariables.BarWidth
  • setFunc -- This is the function that will be run whenever LibAddonMenu attempts to set the value of the control.
    • function ... -- When LibAddonMenu attempts to set the value of the control it will call this function, it will set the value of CirconianStaminaBar.savedVariables.BarWidth to newValue (the new value the user set on the control). It will also call the function CirconianStaminaBar.SetBarSize and pass it (newValue, CirconianStaminaBar.savedVariables.BarHeight) which are the new width & height for the stamina bar.




[5] = {
	type = "slider",
	name = "Select Height",
	tooltip = "Adjusts the height of the stamina bar.",
	min = 25,
	max = 100,
	step = 1,
	default = 50,
	getFunc = function() return CirconianStaminaBar.savedVariables.BarHeight end,
	setFunc = function(newValue) 
                CirconianStaminaBar.savedVariables.BarHeight= newValue
                CirconianStaminaBar.SetBarSize(CirconianStaminaBar.savedVariables.BarWidth, newValue)
                end,
},
  • [5] -- This is the index in our optionsData table where the third control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • name -- This is the text that will be displayed for this control.
  • tooltip -- This is the text that will be displayed, as a tooltip, when the user hoovers their mouse over the control.
  • min -- This is the minimum value for the control.
  • max -- This is the maximum value for the control.
  • default -- This is the default value for the control.
  • getFunc -- This is the function that will be run whenever LibAddonMenu attempts to get the value of the control.
    • function ... -- When LibAddonMenu attempts to get the value of the control it will call this function, which will return the value CirconianStaminaBar.savedVariables.BarHeight
  • setFunc -- This is the function that will be run whenever LibAddonMenu attempts to set the value of the control.
    • function ... -- When LibAddonMenu attempts to set the value of the control it will call this function, it will set the value of CirconianStaminaBar.savedVariables.BarHeight to newValue (the new value the user set on the control). It will also call the function CirconianStaminaBar.SetBarSize and pass it (CirconianStaminaBar.savedVariables.BarWidth, newValue) which are the width & new Height of for the stamina bar.



[6] = {
	type = "submenu",
	name = "Colors",
	tooltip = "Allows you to change colors.",
	controls = {
 
        },
},
This is for a submenu. Notice that the controls = { } table is empty. We will put other controls inside of it next, but first lets look at what we have added so far:
  • [6] -- This is the index in our optionsData table where the third control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • name -- This is the text that will be displayed for this control.
  • tooltip -- This is the text that will be displayed, as a tooltip, when the user hoovers their mouse over the control.



[6] = {
	type = "submenu",
	name = "Colors",
	tooltip = "Allows you to change colors.",
	controls = {
		[1] = {
			type = "colorpicker",
			name = "Bar Color",
			tooltip = "Changes the color of the stamina bar background.",
			getFunc = function() return unpack( CirconianStaminaBar.savedVariables.StaminaBarColor ) end,
			setFunc = function(r,g,b,a) 
				local alpha = CirconianStaminaBarWindowStatusBar:GetAlpha()
				CirconianStaminaBar.savedVariables.StaminaBarColor = { r, g, b, a}
				CirconianStaminaBarWindowStatusBar:SetColor( r,  g,  b,  a)  
				end,
		},
	}
},
Here we are going to add the color picker control inside of the submenu controls = { } table. Notice that since we are starting inside of a new table the index starts over at 1.
  • r = red, g = green, b = blue, a = alpha
  • [1] -- This is the index in our optionsData table where the third control will be stored and the order that the control will appear in the settings menu panel.
  • = { -- Is the opening of a new table to hold the information about this control.
  • type -- This tells LibAddonMenu what type of control we want to create.
  • name -- This is the text that will be displayed for this control.
  • tooltip -- This is the text that will be displayed, as a tooltip, when the user hoovers their mouse over the control.
  • getFunc -- This is the function that will be run whenever LibAddonMenu attempts to get the value of the control.
    • function ... -- When LibAddonMenu attempts to get the value of the control it will call this function, which will unpack & return the values stored in CirconianStaminaBar.savedVariables.StaminaBarColor.
  • setFunc -- This is the function that will be run whenever LibAddonMenu attempts to set the value of the control.
    • function ... -- When LibAddonMenu attempts to set the value of the control it will call this function, it will pack the new r,g,b,a values into a table & store them in CirconianStaminaBar.savedVariables.StaminaBarColor. It will also call the SetColor function for our statusBar passing it the new r,g,b,a values.



LAM2:RegisterOptionControls("Circonians_StaminaBar", optionsData)
Once were done creating the optionsData table that holds all of our controls for our settings menu panel we can register them with LibAddonMenu by calling this function:
  • LAM2 -- Tells the game we are going to call a function that belongs to the LAM2 library
  • RegisterOptionControls -- This is the function we are going to call
  • "Circonians_StaminaBar" -- Tells LibAddonMenu we are registering option controls for this panel.
  • optionsData -- Is the table that contains the controls we want to register.

Final CreateSettingsWindow Function

Your CreateSettingsWindow() function should now look like this:

-------------------------------------------------------------------------------------------------
--  Menu Functions --
-------------------------------------------------------------------------------------------------
function CirconianStaminaBar.CreateSettingsWindow()
	local panelData = {
		type = "panel",
		name = "Circonians Stamina Bar",
		displayName = "Circonians Stamina Bar..",
		author = "Circonian",
		version = CirconianStaminaBar.version,
		slashCommand = "/stambar",
		registerForRefresh = true,
		registerForDefaults = true,
	}
	local cntrlOptionsPanel = LAM2:RegisterAddonPanel("Circonians_StaminaBar", panelData)
 
	local optionsData = {
		[1] = {
			type = "header",
			name = "Stamina Bar Settings"
		},
		[2] = {
			type = "description",
			text = "Here you can adjust how the stamina bar works."
		},
		[3] = {
			type = "checkbox",
			name = "Show Stamina Bar",
			tooltip = "When ON the stamina bar will be visible. When OFF the stamina bar will be hidden.",
			default = true,
			getFunc = function() return CirconianStaminaBar.savedVariables.Show end,
			setFunc = function(newValue) 
				CirconianStaminaBar.savedVariables.Show = newValue
				CirconianStaminaBarWindow:SetHidden(not newValue)  end,
		},
		[4] = {
			type = "slider",
			name = "Select Width",
			tooltip = "Adjusts the width of the stamina bar.",
			min = 100,
			max = 1000,
			step = 1,
			default = 300,
			getFunc = function() return CirconianStaminaBar.savedVariables.BarWidth end,
			setFunc = function(newValue) 
						CirconianStaminaBar.savedVariables.BarWidth = newValue
						CirconianStaminaBar.SetBarSize(newValue, CirconianStaminaBar.savedVariables.BarHeight)
						end,
		},
		[5] = {
			type = "slider",
			name = "Select Height",
			tooltip = "Adjusts the height of the stamina bar.",
			min = 25,
			max = 100,
			step = 1,
			default = 50,
			getFunc = function() return CirconianStaminaBar.savedVariables.BarHeight end,
			setFunc = function(newValue) 
						CirconianStaminaBar.savedVariables.BarHeight= newValue
						CirconianStaminaBar.SetBarSize(CirconianStaminaBar.savedVariables.BarWidth, newValue)
						end,
		},
		[6] = {
			type = "submenu",
			name = "Colors",
			tooltip = "Allows you to change colors.",
			controls = {
				[1] = {
					type = "colorpicker",
					name = "Bar Color",
					tooltip = "Changes the color of the stamina bar background.",
					getFunc = function() return unpack( CirconianStaminaBar.savedVariables.StaminaBarColor ) end,
					setFunc = function(r,g,b,a) 
						local alpha = CirconianStaminaBarWindowStatusBar:GetAlpha()
						CirconianStaminaBar.savedVariables.StaminaBarColor = { r, g, b, a}
						CirconianStaminaBarWindowStatusBar:SetColor( r,  g,  b,  a)  
						end,
				},
			}
		},
	}
	LAM2:RegisterOptionControls("Circonians_StaminaBar", optionsData)
end



You should now have a working settings menu with the ability to show/hide your stamina bar, adjust its width & height, and pick a color for the status bar.

glhfdgb ;)


Circonians Tutorials Page: Tutorials Index



Personal tools
Namespaces
Variants
Actions
Menu
Wiki
Toolbox