Drawtext UI

CLIENT SIDE ONLY

A unified system for managing multiple drawtext resources. Each supported resource is organized into a table of handlers, with functions for show and hide operations.

This approach enables easy integration and switching between resources. Developers can simply extend the handlers table to add support for additional resources if required.

Handlers

Table of handlers for drawtext resources. Covered by default: boii_ui, ox_lib, qb-core, es_extended, okokTextUi

local handlers = {
    boii_ui = {
        show = function(options)
            exports.boii_ui:show_drawtext(options.header, options.message, options.icon)
        end,
        hide = function()
            exports.boii_ui:hide_drawtext()
        end
    },
    ox_lib = {
        show = function(options)
            lib.showTextUI(options.message, { icon = options.icon })
        end,
        hide = function()
            lib.hideTextUI()
        end
    },
    ['qb-core'] = {
        show = function(options)
            exports['qb-core']:DrawText(options.message)
        end,
        hide = function()
            exports['qb-core']:HideText()
        end
    },
    es_extended = {
        show = function(options)
            exports.es_extended:TextUI(options.message)
        end,
        hide = function()
            exports.es_extended:HideUI()
        end
    },
    okokTextUI = {
        show = function(options)
            exports['okokTextUI']:Open(options.message, 'lightgrey', 'left', true)
        end,
        hide = function()
            exports['okokTextUI']:Close()
        end
    },
    --- Add other resources here
}

Functions

show_drawtext

Used to show the chosen drawtext ui, if handler is missing or not provided will default to boii_ui

Function

local function show_drawtext(options)
    if not options or not options.message then
        debug_log('err', 'Invalid drawtext data provided.')
        return
    end
    local handler = handlers[DRAWTEXT] or handlers['boii_ui']
    handler.show(options)
end

exports('show_drawtext', show_drawtext)
utils.ui.show_drawtext = show_drawtext

Example

--- Utils object
utils.ui.show_drawtext({
    header = 'Test Drawtext',
    message = 'Just another test..',
    icon = 'fa-solid fa-gear'
})

--- Direct export
exports.boii_utils:show_drawtext(...)

hide_drawtext

Used to hide the current shown drawtext ui.

Function

local function hide_drawtext()
    local handler = handlers[DRAWTEXT] or handlers['boii_ui']
    handler.hide()
end

exports('hide_drawtext', hide_drawtext)
utils.ui.hide_drawtext = hide_drawtext

Example

--- Utils object
utils.ui.hide_drawtext({
    header = 'Test Drawtext',
    message = 'Just another test..',
    icon = 'fa-solid fa-gear'
})

--- Direct export
exports.boii_utils:hide_drawtext(...)

Guides

Initial Setup

Currently the utils library requires the UI resources be defined within the config. This may be moved to resource detection in future however for now it has not been needed.

To set your chosen UI resources head to server/config.lua Find the following section and pick your choices.

--- UI Bridge settings
--- @field drawtext: Specifies the active progressbar system. Options: 'boii_ui', 'qb-core', 'es_extended', 'ox_lib', 'okokTextUI', 'custom'.
--- @field notify: Specifies the active notification system. Options: 'boii_ui', 'qb-core', 'es_extended', 'ox_lib', 'okokNotify', 'custom'.
--- @field progressbar: Specifies the active progressbar system. Options: 'boii_ui', 'custom'.
config.ui = {
    drawtext = 'boii_ui',
    notify = 'boii_ui',
    progressbar = 'boii_ui'
}

If your desired resource is not already covered by default follow the instructions below on how to add a new handler.

Adding Handlers

To add support for addition resources you need to add a handler into the handlers table inside client/bridges/drawtext.lua

local handlers = {
    ...

    ['your resource name'] = {
        show = function(options)
            --- Add custom implementation here
        end,
        hide = function()
            --- Add custom implementation here
        end
    }
}

Once you have added your handler, update the config.ui.drawtext value to what you have set 'your resource name' as and you should be good to go.

If for any reason you are unable to set this up yourself put a support post in the discord.