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.
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
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!",
})
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
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
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 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)
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.