Picture of the authoredeverce

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

Terminal
refresh
start ed_textui

Finally, if everything is right, you can put it inside your server.cfg as follows:

server.cfg
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:

es_extended/client/functions.lua
-- ...
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:

qb-core/client/drawtext.lua
---@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)
PropTypeDefault
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)
PropTypeDefault
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)
PropTypeDefault
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")