Lyre Scripts
  • Welcome
  • Create your own bridge
  • Paid resources
    • Illegal Missions
      • Installation
      • Configuration
        • Main Script
        • [FREE] Murderer DLC
        • [FREE] Money Truck DLC
        • [FREE] Go Fast DLC
        • [FREE] ATM Robbery DLC
        • [FREE] Car Theft DLC
    • Car Rental
      • Installation
      • Configuration
    • Car Wash
      • Installation
      • Configuration
    • ⛽Lyre advanced fuel
      • Installation
      • Configuration
  • free resources
    • 📄Lyre Text UI
      • Installation
      • Configuration
      • How to use it
Powered by GitBook
On this page
  1. free resources
  2. Lyre Text UI

How to use it

PreviousConfiguration

Lyre Text UI relies on exports to function. Here is the list of exports:

  1. addTextUI : Allows add a Text UI.

  2. removeTextUI : Allow you to remove a specific Text UI.

  3. setStyleArgs : Provides interaction with certain styling features.

  4. editTextUI : Allow edit an existing Text UI

There are several types of instructions that you can display on the text UI with the addTextUI export:

  1. text: This represents simple text, which can be formatted with HTML code.

  1. keyboard: This represents a key, followed by text.

  1. progress: This represents a progress bar.

Correct export usage will be something like:

local textui -- Init the text ui variable

-- Usage of export to create a text ui
-- This export will create a text ui, show it, and return the text ui table
-- You will be able to get textui's values (e.g textui.type, textui.content.text, textui.identifier) 
textui = textui or exports.lyre_textui:addTextUI({
    type = "keyboard", -- Chose the text ui type (keyboard, text, progress)
    content = { -- The content variable depend of the type of the textui
        text = "Press to open menu",
        keyboard = "E",
    }
})

-- Usage of export to remove a specific text ui
-- This export will delete the text ui only if it is correctly executed
textui = exports.lyre_textui:removeTextUI(textui and textui.identifier)

-- Usage of export to set style arguments
-- This export is related with the theme you use, some themes have style arguments and it's with this export you can use it
exports.lyre_textui:setStyleArgs(textui and textui.identifier, { "pressed" })
-- The "pressed" style argument is made for "keyboard" textui and make the key have a different style when pressed
-- You can also remove all arguments by doing :
exports.lyre_textui:setStyleArgs(textui and textui.identifier, {})

-- Usage of export to edit a specific text ui
-- This export allow you to edit an existing textui, the usage is very similar to addTextUI
textui = exports.lyre_textui:editTextUI(textui and textui.identifier, {
    type = "keyboard", -- Chose <<<<the text ui type (keyboard, text, progress)
    content = { -- The content variable depend of the type of the textui
        text = "Hey the text has changed", -- Put the thing you want to edit
        keyboard = textui.content.keyboard, -- Use textui table to change nothing for a value
    }
})

Here is a simple example of usage:

Citizen.CreateThread(function()
	local coords = vector3(150.0, 150.0, 150.0)
	local textui
	while true do
		local interval = 1000
		local ped = PlayerPedId()
		local pedCoords = GetEntityCoords(ped)
		if #(pedCoords - coords) < 5 then
			interval = 1
			textui = textui or exports.lyre_textui:addTextUI({ type = "keyboard", content = { text = "Open the menu", keyboard = "E" } } )
			if IsControlJustPressed(0, 38) then
				exports.lyre_textui:setStyleArgs(textui and textui.identifier, { "pressed" }) -- Avalaible style arguments depend of the theme you choose
				Citizen.SetTimeout(200, function()
					setStyleArgs(textui and textui.identifier, {})
				end)
				exports.lyre_textui:editTextUI(textui and textui.identifier, { type = textui.type, content = { text = "Has been pressed", keyboard = textui.content.keyboard } })
			end
		else
			textui = exports.lyre_textui:removeTextUI(textui and textui.identifier)
		end
		Citizen.Wait(interval)
	end
end)
📄
"Text" text ui example with the "heavy" theme
"Keyboard" text ui example with the "heavy" theme
"Progress" text ui example with the "heavy" theme