Awful UI makes it easy to generate powerful elements within your new UI.

Let's go over some of them.

Elements are created using the methods found within tab objects. You create tab objects using ui:Tab(name), which returns the tab object for that tab. You can then declare them locally or retrieve them from ui.tabs["tab name"] and start populating them with elements using the methods we're about to go over.
tab:Checkbox({text="hi", var="hi"})
Now there's a checkbox on that tab!

Getting Started

Initial Setup

I'm starting under the assumption you've read everything from the introduction section, and have an understanding of how namespaces work. Most of this will be pseudocode.

gui.lua

local Unlocker, awful, project = ...

-- this is pseudo code, be sure to read "introduction" and configure your gui properly.
local ui, settings, cmd = awful.UI:New('example', {
  ...
})

-- making the settings available to the rest of our project
project.settings = settings

-- and this is the tab I'll be adding elements to
local General = ui:Tab("General")

example.lua

local Unlocker, awful, project = ...
-- now in any other file (spellbook, actor, etc.), we can pull in our settings like so:
local settings = project.settings


-- somewhere in our code:
if player.hp <= settings.healthstoneHP then
  healthstone:Use() -- example blabla
end

Elements

Checkbox

Checkboxes are the simplest form of control, allowing the user to toggle certain things off/on.

value type: boolean

Options:

text: {string}, required - the label next to the checkbox

var: {string}, required - the variable the value of this checkbox will be stored at within your UI's saved variables list.

default: {boolean}, optional - default checked value of the box

tooltip: {string}, optional - displays a tooltip when hovering the element to better explain its purpose to the user.

Examples:

General:Checkbox({
  text = "Fuhr Mode",
  var = "fuhrMode",
  tooltip = "Enables Fuhr Mode\n\n-20% damage"
})

-- example usage in our rotation
if settings.fuhrMode then
  return StopDoingDamage()
end

-- more examples
General:Checkbox({
  text = "Auto Blink",
  var = "autoBlink",
  default = true,
  tooltip = "Toggles auto blink usage in the routine"
})

if settings.autoBlink then
  blink()
end

Slider

Sliders allow the user to select a number from the range you set. This can apply to any number, from health percentages, measurements of time, diminishing return modifiers, etc. That's why you're able to set the valueType in the options, to better display what type of value the user is controlling.

value type: number

Options:

text: {string}, required - the label on top of the slider

var: {string}, required - the variable the value of this slider will be stored at within your UI's saved variables list.

min: {number}, recommended - minimum value of the slider, the "low end" - defaults to 0 if not specified

max: {number}, recommended - maximum value of the slider, the "high end" - defaults to 100 if not specified

default: {number}, recommended - default value of the slider. defaults to min if not specified.

valueType: {string}, optional - adds this string to the end of the slider's value(s) displayed in the GUI, making it clearer to the user what type of value they're controlling. e.g, ms, %, sec.

step: {number}, optional - allows you to control the value step for the slider - defaults to 1

tooltip: {string}, optional - displays a tooltip when hovering the element to better explain its purpose to the user.

Examples:

General:Slider({
	text = "Healthstone HP",
	var = "healthstoneHP",
	min = 0,
	max = 100,
	step = 1,
	default = 25,
	valueType = "%",
	tooltip = "HP the routine will use healthstone at"
})

-- in the routine
if player.hp <= settings.healthstoneHP then
  healthstone:Use()
end

-- more examples:
General:Slider({
	text = "Kick Delay",
	var = "kickDelay",
	min = 0,
	max = 450,
	step = 5,
	default = 250,
	valueType = "ms",
	tooltip = "Delay on interrupts from the routine (in milliseconds)\n\nAverage human reaction time is ~250ms. Blablabla."
})

if target.castTimeComplete > settings.kickDelay then
  kick()
end

Sliders from example above

note: values are only available in chat like this because i declared my ui object as _G.gui

Sometimes a Spell can have multiple IDs, such as Polymorph due to various Glyphs that can be applied to it. If you don't want to have one entry per Polymorph in e.g. your Interrupt dropdown, then you can do as the below example:

--! MULTI-DROPDOWN WITH MULTIPLE SPELL IDS FOR SAME ENTRY !--
General:Dropdown({
	var = "interrupts",
	multi = true,
	tooltip = "Choose the Spell you want to Interrupt",
	options = {
		{ label = "Repentance", value = 20066 },
		{ label = "Polymorph", value = "Polymorph", tvalue = {118,161355,161354,161353,126819,61780,161372,61721,61305,28272,28271,277792,277787} },
	},
	placeholder = "Select Interrupts",
	header = "Casts to Interrupt:",
  	default = {20066, "Polymorph"} -- optional default selections
})
-- example usage
local function SettingsCheck(settingsVar, castId)
    for k, v in pairs(settingsVar) do
        if k == castId and v == true then return true end
        if type(v) == "table" then
            for _, id in ipairs(v) do
                if castId == id then return true end
            end
        end
    end
end

awful.enemies.loop(function(unit, i, uptime)
    if not unit.casting then return end
    if unit.casting and unit.castint then return end
    if unit.castTimeComplete > 0.3 and unit.castRemains > awful.buffer then
        if SettingsCheck(settings.interrupts, unit.castingid) then
            if counterspell:Cast(unit) then
                return true
            end
        end
    end
end)