API
To use the UI elements within other resources you can do so by using the following exports client side.
Exports
Action Menu
The action menu can be used to replace the use of a "radial menu", this has been demonstrated in boii_core
Usage
exports.boii_ui:action_menu(test_menu)Example
local test_menu = {
{
label = 'Level 1',
icon = 'fa-solid fa-sitemap',
colour = 'red',
submenu = {
{
label = 'Level 2',
icon = 'fa-solid fa-operations',
colour = 'orange',
submenu = {
{
label = 'Level 3',
icon = 'fa-solid fa-truck-moving',
colour = 'yellow',
submenu = {
{
label = 'Level 4',
icon = 'fa-solid fa-boxes',
colour = 'green',
submenu = {
{
label = 'Level 5',
icon = 'fa-solid fa-map-marked-alt',
colour = 'blue',
submenu = {
{
label = 'Confirm',
icon = 'fa-solid fa-check-circle',
colour = 'purple',
action_type = 'client',
action = 'example_event',
params = { example_param = 'example_value' }
}
}
}
}
}
}
}
}
}
}
},
{
label = 'Quick Access',
icon = 'fa-solid fa-toolbox',
action_type = 'client',
action = 'boii_target:cl:open_toolbox',
params = {}
}
}
RegisterCommand('test_action_menu', function()
SetNuiFocus(true, true)
exports.boii_ui:action_menu(test_menu)
end, false)Context Menu
Context menu supports a variety of different menu types this will be worked on a little more and improved as time progresses.
Usage
exports.boii_ui:menu(test_menu)Example
local test_menu = {
header = {
message = 'Example Header', -- Menu header title
icon = 'fa-solid fa-bell', -- Menu header icon
image = '/html/assets/images/logo.png', -- Menu header image
},
options = {
{
type = 'regular', -- Menu option type this is a regular context menu option like you are used too
header = 'Example Menu Item', -- Menu option header
icon = 'fa-solid fa-car', -- Menu option icon
message = 'This is an example standard menu item', -- Menu icon message
action_type = 'client', -- Type of action to trigger: options; 'client', 'server'
action = 'test_event', -- Action to perform
params = {}, -- Parameters for the above action
should_close = true -- Toggle if clicking menu option should close the menu or not
},
{
type = 'regular', -- Menu option type this is a regular context menu option like you are used too
header = 'Example Disabled Menu Item', -- Menu option header
icon = 'fa-solid fa-car', -- Menu option icon
message = 'This is an example standard menu item', -- Menu icon message
action_type = 'client', -- Type of action to trigger: options; 'client', 'server'
action = 'test_event', -- Action to perform
params = {}, -- Parameters for the above action
disabled = true, -- Adding this will disable the menu option so it appears grayed out
should_close = true -- Toggle if clicking menu option should close the menu or not
},
{
type = 'regular', -- Menu option type this is a regular context menu option like you are used too
header = 'Example None Interactable', -- Menu option header
icon = 'fa-solid fa-car', -- Menu option icon
message = 'This is an example standard menu item', -- Menu icon message
action_type = 'client', -- Type of action to trigger: options; 'client', 'server'
action = 'test_event', -- Action to perform
params = {}, -- Parameters for the above action
interactable = false, -- Adding this retains the original look however the option cannot be interacted with
should_close = true -- Toggle if clicking menu option should close the menu or not
},
{
type = 'drop', -- This is the drop down option type
header = 'Example Drop Down Item',
icon = 'fa-solid fa-car',
message = 'This is an example drop down menu item',
submenu = { -- Submenu is created when clicking on main menu item, you handle the actions here instead.
{
header = 'Example Sub Header',
message = 'This is an example sub menu item',
action_type = 'client',
action = 'test_event',
params = {},
},
{
header = 'Example Sub Header 2',
message = 'This is an example sub menu item 2',
action_type = 'client',
action = 'test_event',
params = {},
},
}
},
{
type = 'input', -- This is the input option type
header = 'Example Input Item',
icon = 'fa-solid fa-house',
message = 'This is an example input menu item',
fields = {
id = true, -- Toggle if players ID is required
number = false, -- Toggle a number value input
text = true, -- Toggle a text value input
},
button = { -- This is the first entry for a button in the test menu the submit button will submit the values of the input fields
text = 'Submit', -- Button text
icon = 'fa-solid fa-plus', -- Button icon
action_type = 'client', -- Type of action to trigger: options; 'client', 'server'
action = 'test_event', -- Action to perform
params = {}, -- Parameters for the above action
},
},
{
type = 'list', -- This is the list selector option type
header = 'Example List Selector',
icon = 'fa-solid fa-house',
message = 'This is an example input menu item',
options = {'Option 1', 'Option 2', 'Option 3'}, -- This is your list of available options
button = {
text = 'Submit',
icon = 'fa-solid fa-plus',
action_type = 'client',
action = 'test_event',
params = {},
},
},
{
type = 'colour', -- This is the colour picker option type
header = 'Example Colour Picker',
message = 'This is an example colour picker',
button = {
text = 'Submit',
icon = 'fa-solid fa-plus',
action_type = 'client',
action = 'test_event',
params = {},
},
},
{
type = 'checklist', -- This is the checklist option type
header = 'Example Checklist',
message = 'This is an example checklist',
items = { -- This is where you input items for the checklist
{ id = 'item1', value = 'item1', label = 'Example Item 1' },
{ id = 'item2', value = 'item2', label = 'Example Item 2' },
},
button = {
text = 'Submit',
icon = 'fa-solid fa-plus',
action_type = 'client',
action = 'test_event',
params = {},
},
},
{
type = 'slider', -- This is the slider option type
header = 'Example Sliders',
message = 'This is an example slider item',
sliders = { -- This is where you add the sliders and adjust values
{ min = 0, max = 100, default = 50 },
{ min = 0, max = 200, default = 100 },
},
button = {
text = 'Submit',
icon = 'fa-solid fa-plus',
action_type = 'client',
action = 'test_event',
params = {},
},
},
{
type = 'toggle', -- This is the toggle switches option type
header = 'Example Toggle Switches',
message = 'This is an example toggle switch item',
toggles = {
{
label = 'Toggle 1', -- Label text for switch
checked = true, -- Sets the toggle switch to active
action_type = 'client',
action = 'test_event',
params = {},
},
{
label = 'Toggle 2',
checked = false,
action_type = 'client',
action = 'test_event',
params = {},
},
},
},
},
}
RegisterCommand('test_context_menu', function()
SetNuiFocus(true, true)
exports.boii_ui:menu(test_menu)
end)Dialogue
To access the dialogue system we need the ped to face, and the coordinates for validation.
Usage
exports.boii_ui:dialogue(test_dialogue, ped, coords)Example
--- Test dialogue conversation
local test_dialogue = {
header = {
message = 'Quarry Employee', -- Dialogue header text
icon = 'fa-solid fa-hard-hat', -- Header icon
image = '/html/assets/images/logo.png', -- Header Image
},
conversation = {
{
id = 1, -- This is the ID of the conversation option this is used to navigate through conversation options
response = 'Hello, welcome to the quarry. How can I assist you today?', -- This is the NPC response message displayed to players
options = {
{
icon = 'fa-solid fa-question-circle', -- Player response option icon
message = 'Can you tell me more about what you do here?', -- Player response option message
next_id = 2, -- Next conversation ID to move to when clicking option
should_end = false -- Toggles if clicking on the option should end the conversation
},
{
icon = 'fa-solid fa-briefcase',
message = 'What kind of jobs are available at the quarry?',
next_id = 3,
should_end = false
},
{
icon = 'fa-solid fa-shield-alt',
message = 'Are there any safety protocols I should be aware of?',
next_id = 4,
should_end = false
},
{
icon = 'fa-solid fa-door-open',
message = 'Goodbye!',
next_id = nil, -- Next ID is nil since we are using should_end = true below
should_end = true, -- Since this is true clicking this option will end the conversation and run the action below if provided
action_type = 'client', -- Type of action to trigger: options; 'client', 'server'
action = 'testevent', -- Action to perform
params = {} -- Parameters for the action
}
}
},
{
id = 2,
response = 'We primarily focus on extracting minerals and processing them for various uses. It\'s challenging but fulfilling work.',
options = {
{
icon = 'fa-solid fa-arrow-left',
message = 'Back to previous options',
next_id = 1,
should_end = false
},
{
icon = 'fa-solid fa-door-open',
message = 'Thank you, that\'s all for now.',
next_id = nil,
should_end = true,
action_type = 'client',
action = 'testevent',
params = {}
}
}
},
{
id = 3,
response = 'There are several roles here, from equipment operators to safety inspectors. We\'re always looking for dedicated workers.',
options = {
{
icon = 'fa-solid fa-arrow-left',
message = 'Back to previous options',
next_id = 1,
should_end = false
},
{
icon = 'fa-solid fa-door-open',
message = 'Thanks, I\'ll consider applying.',
next_id = nil,
should_end = true,
action_type = 'client',
action = 'testevent',
params = {}
}
}
},
{
id = 4,
response = 'Safety is our top priority. Everyone is required to wear protective gear, and we have regular training sessions.',
options = {
{
icon = 'fa-solid fa-arrow-left',
message = 'Back to previous options',
next_id = 1,
should_end = false
},
{
icon = 'fa-solid fa-door-open',
message = 'Good to know. Thanks for the information.',
next_id = nil,
should_end = true,
action_type = 'client',
action = 'testevent',
params = {}
}
}
},
{
id = 5,
response = 'Please report it to our maintenance team immediately. We need to ensure a safe working environment.',
options = {
{
icon = 'fa-solid fa-arrow-left',
message = 'Back to previous options',
next_id = 1,
should_end = false
},
{
icon = 'fa-solid fa-door-open',
message = 'I will let them know. Thanks!',
next_id = nil,
should_end = true,
action_type = 'client',
action = 'testevent',
params = {}
}
}
}
}
}
--- Function to get closest ped
-- This was copied from `boii_utils`.
local function get_closest_ped(coords, max_distance)
local peds = GetGamePool('CPed')
local closest_ped, closest_coords
max_distance = max_distance or 2.0
for i = 1, #peds do
local ped = peds[i]
if not IsPedAPlayer(ped) then
local ped_coords = GetEntityCoords(ped)
local distance = #(coords - ped_coords)
if distance < max_distance then
max_distance = distance
closest_ped = ped
closest_coords = ped_coords
end
end
end
return closest_ped, closest_coords
end
--- Test command to open dialogue.
RegisterCommand('test_dialogue', function()
local ped, coords = get_closest_ped(vector3(224.13, -1393.95, 30.59), 5.0)
exports.boii_ui:dialogue(test_dialogue, ped, coords)
end)DrawText
Just a straight forward replacement for drawing text on screen.
Usage
exports.boii_ui:show_drawtext(header, text, icon)Example
RegisterCommand('test_show_drawtext', function()
local header = "Test Header"
local text = "This is a test message."
local icon = "fa fa-info-circle"
exports.boii_ui:show_drawtext(header, text, icon)
end, false)Notifications
Notifications natively supports a large variety of different types, you can create more in html/scripts/notifications.js
Usage
Client Side:
exports.boii_ui:notify(options)Server Side:
TriggerClientEvent('boii_ui:notify', source, options)Example
Client Side:
exports.boii_ui:notify({
header = 'Test Header',
message = 'Test message..',
type = 'success',
duration = 3500
})Server Side:
TriggerClientEvent('boii_ui:notify', source {
header = 'Test Header',
message = 'Test message..',
type = 'success',
duration = 3500
})Progress Bar
Another straight forward one just a progress bar except it supports multiple props.
Usage
exports.boii_ui:show_progress(options)Example
exports.boii_ui:show_progress({
header = 'Trimming Buds..', -- Progressbar header text
icon = 'fa-solid fa-cannabis', -- Header icon
duration = 15000, -- Total duration for bar to run in (ms)
disable_controls = { -- COntrol disables added in for ease of use with bridging qb-progressbar along with providing that extra familiarity.
mouse = false, -- Disables mouse controls
movement = false, -- Movement controls
car_movement = false, -- In vehicle movement controls
combat = false -- Disables firing
},
animation = { -- Here you can input optional animation settings to use no animation remove the section
dict = 'amb@prop_human_parking_meter@female@base', -- Animation dictionary used if animation provided
anim = 'base_female', -- Animation type used
flags = 49, -- Animation flags used
blend_in = 8.0, -- Optional setting this is hard coded in function above
blend_out = -8.0, -- Optional setting this is hard coded in function above
duration = -1, -- Optional setting this is hard coded in function above
playback = 1, -- Optional setting this is hard coded in function above
lock_x = 0, -- Optional setting this is hard coded in function above
lock_y = 0, -- Optional setting this is hard coded in function above
lock_z = 0 -- Optional setting this is hard coded in function above
},
props = {
{
model = 'h4_prop_h4_weed_bud_02b', -- Prop model type to create and attach
bone = 28422, -- Bone to attach prop to
coords = vector3(0.09, -0.075, 0.0), -- Coords for the prop placement
rotation = vector3(-90.0, 0.0, 0.0), -- Rotation of the prop
soft_pin = false, -- Optional setting this is hard coded in function above
collision = false, -- Optional setting this is hard coded in function above
is_ped = true, -- Optional setting this is hard coded in function above
rot_order = 1, -- Optional setting this is hard coded in function above
sync_rot = true -- Optional setting this is hard coded in function above
}
}
}, function(success) -- Callback function
if success then
print('Progress successful')
else
print('Progress cancelled')
end
end)Last updated