SYNQ UI

UI Elements

All available UI elements - checkboxes, sliders, dropdowns, and more

SYNQ UI provides a variety of elements to build your interface. Each element saves its value to the settings table using the var option you specify.

Checkbox

Simple on/off toggles for boolean settings.

Value type: boolean

tab:Checkbox({
    text = "Enable Burst Mode",
    var = "burstMode",
    default = false,
    tooltip = "Automatically use Bestial Wrath and Aspect of the Wild together\n\nCoordinates major cooldowns for maximum burst damage"
})

-- Use checkbox setting in your BM Hunter routine logic
if settings.burstMode and synq.burst then
    bestialWrath("burst")
    aspectOfTheWild("burst")
end

Text

Display headers, explanations, or interactive text elements.

tab:Text({
    text = "General Settings",
    header = true,
    size = 14,
    paddingBottom = 10,
    OnClick = function(self, event)
        synq.alert("Clicked!", spellID)
    end
})

-- Display text with embedded spell texture icon
tab:Text({
    text = synq.textureEscape(19574, 16, "0:2") .. " Beast Mastery Hunter:",
    size = 14,
})

-- Display multi-colored text using WoW color codes
tab:Text({
    text = "|cFF6eff86Green text|r, wait.. |cFF43caf7blue text!",
})

Slider

Allow users to select numeric values from a specified range.

Value type: number

tab:Slider({
    text = "Focus Threshold",
    var = "focusThreshold",
    min = 0,
    max = 100,
    step = 5,
    default = 50,
    valueType = "%",
    tooltip = "Maintain Focus above this percentage\n\nPrevents wasting Focus on filler abilities"
})

-- Use slider value in BM Hunter routine logic
if player.focus < settings.focusThreshold then
    cobraShot() -- Generate Focus when below threshold
end

Single or multi-selection dropdowns for choosing from lists of options.

Single Selection Value type: string
Multi-Selection Value type: associative array

Single Selection Dropdown

tab:Dropdown({
    var = "rotationMode",
    options = {
        { label = "Single Target", value = "st", tooltip = "Optimized for single target DPS" },
        { label = "Multi Target", value = "aoe", tooltip = "Optimized for AoE situations" },
        { label = "Auto", value = "auto", tooltip = "Automatically switch based on enemy count" },
    },
    placeholder = "Select rotation mode",
    header = "Rotation Mode:",
    default = "auto"
})

-- Use dropdown selection value in BM Hunter routine logic
if settings.rotationMode == "aoe" or (settings.rotationMode == "auto" and #enemies >= 3) then
    -- Execute AoE rotation
    multiShot()
elseif settings.rotationMode == "st" or (settings.rotationMode == "auto" and #enemies < 3) then
    -- Execute single target rotation
    killCommand()
    barbedShot()
end

Multi-Selection Dropdown

tab:Dropdown({
    var = "interruptTargets",
    multi = true,
    options = {
        { label = "Healers", value = "healer" },
        { label = "Casters", value = "caster" },
        { label = "DPS", value = "dps" },
    },
    placeholder = "Select interrupt targets",
    header = "Interrupt Priority:",
    default = {"healer", "caster"} -- Optional: set default selected items
})

-- Use multi-selection dropdown values in BM Hunter routine logic
synq.enemies.loop(function(enemy)
    -- Skip enemies not in our interrupt priority list
    if not settings.interruptTargets[enemy.role] then return end
    if enemy.casting and intimidation.cd == 0 then
        if intimidation:Cast(enemy) then
            synq.alert("Interrupted " .. enemy.casting, intimidation.id)
        end
    end
end)

StatusFrames

StatusFrames display interactive heads-up status information that saves its position separately from your main UI. Perfect for displaying real-time rotation information, cooldowns, or other dynamic data.

local statusFrame = ui:StatusFrame(options)

Options

  • colors - Custom color configuration with enabled/disabled/value colors
  • fontSize - Base font size (other sizes scale relative to this)
  • maxWidth - Maximum width before elements wrap to new row
  • column - Stack all elements vertically

Example

local statusFrame = ui:StatusFrame({
    fontSize = 12,
    colors = {
        background = {0, 0, 0, 0}, -- Transparent background
        value = {255, 191, 0, 1}, -- Amber color for value text (matches UI theme)
        enabled = {255, 215, 0, 1}, -- Gold for enabled states
        disabled = {128, 128, 128, 1}, -- Gray for disabled states
    },
    maxWidth = 450,
})

-- Add status elements to display BM Hunter rotation info
statusFrame:Add("Focus", function() return math.floor(player.focus) end)
statusFrame:Add("Bestial Wrath", function() return bestialWrath.active and "Active" or math.floor(bestialWrath.cd) .. "s" end)
statusFrame:Add("Pet HP", function() return pet.exists and math.floor(pet.hp) .. "%" or "No Pet" end)

Next: See a complete Getting Started Example putting it all together.