TextUI (ed_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

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

config.lua
translations.lua
-- 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",
      },
   },
}

API

Push

Pushing a textui:

Client
Server
-- Using exports:
exports.ed_textui:push(options)

-- Using event:
TriggerEvent("ed_textui:push", options)
title required string
Title of the textui.
id?string
Unique id for textui to update later on.
type?'info' | 'success' | 'error' | 'warning' | 'loading' | customType
Type of the textui.
description?string
Description of the textui.
duration?number
Duration of the textui. If not passed, textui will stay until you dismiss it.

Update

Updating a textui:

Client
Server
-- Using exports:
exports.ed_textui:update(options)

-- Using event:
TriggerEvent("ed_textui:update", options)
title required string
Title of the textui.
id required string
ID of the textui to update.
type?'info' | 'success' | 'error' | 'warning' | 'loading' | customType
Type of the textui.
description?string
Description of the textui.
duration?number
Duration of the textui.

Dismiss

Dismissing a textui:

Client
Server
-- Using exports:
exports.ed_textui:dismiss(id)

-- Using event:
TriggerEvent("ed_textui:dismiss", id)
id?string
ID of the textui to dismiss. If not passed, all textui's will be dismissed.

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")
Notify (ed_notify)
A simple & elegant notification system.
Reports (ed_reports)
Advanced report system.