TextUI
A simple & elegant textui system.
Installation
Download the Script
Download the script using keymaster.
Add it to your resources
Open the downloaded zip, copy ed_textui
& put it inside your resources.
Start the Script
refresh
start ed_textui
Finally, if everything is right, you can put it inside your server.cfg
as follows:
ensure ed_textui
Well done! You can now enjoy your new script.
You are free to change the resource name.
If you change the resource name, all exports & events will be renamed to new resource name.
ESX Integration
If you want to change the default textui system to ed_textui
, you'll need to replace ESX.TextUI
& ESX.HideUI
functions as follows:
-- ...
function ESX.TextUI(message, notifyType)
if GetResourceState("ed_textui") ~= "missing" then
exports.ed_textui:push({
title = message,
id = "default",
type = notifyType
})
return
end
print("[^1ERROR^7] ^5ed_textui^7 is Missing!")
end
function ESX.HideUI()
if GetResourceState("ed_textui") ~= "missing" then
exports.ed_textui:dismiss("default")
return
end
print("[^1ERROR^7] ^5ed_textui^7 is Missing!")
end
-- ...
QBCore Integration
If you want to change the default notification system to ed_textui
, you'll need to replace qb-core/client/drawtext.lua
file as follows:
---@type "info"|"success"|"error"|"warning"|"loading"|string|nil
-- You can add more types at ed_textui/config.lua
local defaultType = "info"
local function hideText()
exports.ed_textui:dismiss("default")
end
local function drawText(text)
exports.ed_textui:push({
title = text,
id = "default",
type = defaultType
})
end
local function changeText(text)
exports.ed_textui:update({
title = text,
id = "default",
type = defaultType
})
end
local function keyPressed()
exports.ed_textui:dismiss("default")
end
RegisterNetEvent("qb-core:client:DrawText", drawText)
RegisterNetEvent("qb-core:client:ChangeText", changeText)
RegisterNetEvent("qb-core:client:HideText", hideText)
RegisterNetEvent("qb-core:client:KeyPressed", keyPressed)
exports("DrawText", drawText)
exports("ChangeText", changeText)
exports("HideText", hideText)
exports("KeyPressed", keyPressed)
Configuration
-- https://edeverce.com/scripts/textui
Config = {
---@type "default"|"blue"|"green"|"red"|"rose"|"orange"|"violet"|"yellow"
-- UI theme. See https://edeverce.com/guides/theming for more advanced configuration.
theme = "default",
---@type string?
-- Command to open textui settings. Can be set to nil if you don't want users to change their preferences.
settingsCommand = "textuisettings",
---@type boolean
-- Default light mode state. Can be overwritten by user's preferences.
defaultLightMode = false,
---@type boolean
-- Default rich colors state. Can be overwritten by user's preferences.
defaultRichColors = true,
---@type "top-left"|"top-center"|"top-right"|"bottom-left"|"bottom-center"|"bottom-right"
-- Default position. Can be overwritten by user's preferences.
defaultPosition = "top-right",
---@type number
-- Default offset (px). Can be overwritten by user's preferences.
defaultOffset = 25,
---@type number
-- Default volume (0-1). Can be overwritten by user's preferences.
defaultVolume = 0.5,
---@type table<string, { icon?: string, color?: string }>
-- Icon is optional, must be a font awesome icon name. Color is optional, must be a HEX value.
-- See https://fontawesome.com/icons for icon names.
customTypes = {
example = {
icon = "fas fa-location-dot",
color = "#6644ff",
},
},
}
Translations = {
settings = "TextUI Settings",
settings_description = "Change TextUI settings.",
settings_theme = "Theme",
settings_theme_description = "Toggle light mode & rich colors.",
settings_theme_toggle_light_mode = "Toggle Light Mode",
settings_theme_toggle_rich_colors = "Toggle Rich Colors",
settings_position = "Position",
settings_position_description = "Side & alignment of TextUI.",
settings_position_top_left = "top-left",
settings_position_top_center = "top-center",
settings_position_top_right = "top-right",
settings_position_bottom_left = "bottom-left",
settings_position_bottom_center = "bottom-center",
settings_position_bottom_right = "bottom-right",
settings_offset = "Offset",
settings_offset_description = "Offset of TextUI from the edges of screen.",
settings_volume = "Volume",
settings_volume_description = "Volume of TextUI sound.",
}
Make sure to restart the script after changing one of these files.
API
Push
Pushing a textui:
-- Using exports:
exports.ed_textui:push(options)
-- Using event:
TriggerEvent("ed_textui:push", options)
-- Using exports:
exports.ed_textui:push(source, options)
-- Using event:
TriggerClientEvent("ed_textui:push", source, options)
Prop | Type | Default |
---|---|---|
title | string | - |
id? | string | - |
type? | 'info' | 'success' | 'error' | 'warning' | 'loading' | customType | - |
description? | string | - |
duration? | number | - |
Update
Updating a textui:
-- Using exports:
exports.ed_textui:update(options)
-- Using event:
TriggerEvent("ed_textui:update", options)
-- Using exports:
exports.ed_textui:update(source, options)
-- Using event:
TriggerClientEvent("ed_textui:update", source, options)
Prop | Type | Default |
---|---|---|
title | string | - |
id | string | - |
type? | 'info' | 'success' | 'error' | 'warning' | 'loading' | customType | - |
description? | string | - |
duration? | number | - |
Dismiss
Dismissing a textui:
-- Using exports:
exports.ed_textui:dismiss(id)
-- Using event:
TriggerEvent("ed_textui:dismiss", id)
-- Using exports:
exports.ed_textui:dismiss(source, id)
-- Using event:
TriggerClientEvent("ed_textui:dismiss", source, id)
Prop | Type | Default |
---|---|---|
id? | string | - |
Usage
Push
exports.ed_textui:push({
title = "TextUI Title",
id = "unique-id",
type = "success",
description = "TextUI Description",
duration = 5000
})
Update
exports.ed_textui:update({
title = "Updated TextUI Title",
id = "unique-id",
type = "error",
description = "Updated TextUI Description",
duration = 2500
})
Dismiss
exports.ed_textui:dismiss("unique-id")