SYNQ Logo SYNQ
SYNQ UI

UI Configuration

Configure your SYNQ UI with colors, sizing, and options

The synq.UI:New() function creates a new UI instance and returns three important objects you'll use throughout your project.

UI:New

Parameters:

  1. The name of your UI (string) - This becomes your slash command
  2. The configuration of your UI (table)

Returns:

  1. The UI object - Contains the UI frame, all SYNQ UI methods, tabs, elements, etc. Mainly used to create new tabs via ui:Tab("Tabname")
  2. The settings table - Saved variables for this GUI. Access them like a normal table using the var option you set for each element
  3. The command object - Set up with the name you passed as the first arg. By default, this slash command will open/close your UI
synq.UI:New(name, config) : gui, settings, cmd

Example Usage

local Unlocker, synq, example = ...
local ui, settings, cmd = synq.UI:New("example", {
    title = "BM Hunter Settings",
    colors = {
        title = {255, 215, 0, 1},
        primary = {255, 255, 255, 1},
        accent = {255, 191, 0, 1},
        background = {15, 15, 20, 0.85},
    }
})

example.settings = settings

-- Use settings from UI in your BM Hunter routine logic
if player.hp <= settings.exhilarationHP then 
    exhilaration() 
end

-- Add custom slash commands to extend the UI command functionality
cmd:New(function(msg)
    if msg == "burst" then
        synq.burst = not synq.burst
        synq.alert("Burst mode " .. (synq.burst and "enabled" or "disabled"), 19574)
        -- Returning true officially registers this command handler
        return true
    end
end)

Configuration Options

title

You can pass title as a string, or an array of strings for multi-colored titles:

title = {"example", "ui"},

For multi-colored titles, pass a matching array of RGBA colors:

local gold, amber = {255, 215, 0, 1}, {255, 191, 0, 1}

-- ...
colors = {
    title = {gold, amber},
    -- ...
}

colors

SYNQ UI uses red, green, blue, alpha color format. r/g/b 0-255, alpha 0-1.

colors = {
    primary = {255, 255, 255, 1}, -- general purpose text
    accent = {255, 191, 0, 1}, -- checkboxes, sliders, scroll bars (amber)
    background = {15, 15, 20, 0.85}, -- background color (dark with slight blue tint)
    tertiary = {r, g, b, a}, -- sidebar and minor elements
}

width / height / scale

UI:New('example', {
    width = 350,
    height = 225,
    scale = 1.2
})

Defaults:

  • width = 325
  • height = 195
  • scale = 1

Other Options

  • show - Set to true to open UI on each load
  • defaultTab - Tab name to select when first opened
  • sidebar - Set to false to disable the sidebar under tabs
  • tabs_w - Custom width for the tab section (default: 110)

Next: Learn how to create and manage Tabs & Groups.

Introduction

Build sleek, customizable in-game GUIs for your SYNQ routines

Tabs & Groups

Organize your UI with tabs and collapsible groups