Vein is an immediate mode GUI library for FiveM.
The main goal was to create a newbie-friendly and fun-to-use GUI library without Web technologies.
Vein uses GTA V graphics API for input handling and rendering.
It is written on TypeScript, but you can use it with your favourite programming language, thanks to FiveM exports mechanism.
Vein provides a decent built-in item library, which you can customize with a CSS subset or even extend with your own ones.
local labelWidth = 0.09
local vein = exports.vein
local function drawLabel(text)
vein:pushWidgetWidth(labelWidth)
vein:label(text)
vein:popWidgetWidth()
end
local function EnterPin()
local text = {}
local textReturn = ""
while true do
Citizen.Wait(0)
vein:beginWindow()
vein:heading('Enter Code')
vein:spacing()
vein:beginRow()
_, textReturn = vein:textEdit(table.concat(text), 'Enter Pin...', 100, true)
vein:endRow()
vein:spacing()
vein:beginRow()
if vein:button(' 1') then
table.insert(text, "1")
end
vein:spacing()
if vein:button('2') then
table.insert(text, "2")
end
vein:spacing()
if vein:button('3') then
table.insert(text, "3")
end
vein:endRow()
vein:spacing()
vein:beginRow()
if vein:button('4') then
table.insert(text, "4")
end
vein:spacing()
if vein:button('5') then
table.insert(text, "5")
end
vein:spacing()
if vein:button('6') then
table.insert(text, "6")
end
vein:endRow()
vein:spacing()
vein:beginRow()
if vein:button('7') then
table.insert(text, "7")
end
vein:spacing()
if vein:button('8') then
table.insert(text, "8")
end
vein:spacing()
if vein:button('9') then
table.insert(text, "9")
end
vein:endRow()
vein:spacing()
if vein:button('Enter') then
return textReturn
end
if vein:button('Close') then
return nil
end
vein:endWindow()
end
end
RegisterCommand('veinpin', function()
Citizen.CreateThread(function()
while true do
Citizen.Wait(0)
local returnedpin = EnterPin()
if returnedpin ~= nil then
print(returnedpin)
break
end
end
end)
end)
Really enjoying this framework, but I do have some questions / possible bugs or limitations.
this there / will there be a way to add long text on the menu, like paragraphs? Currently, from my testing I only managed to add 99 character length labels at max. Having a proper text box could also help with automatic text breaking (pic related of current behavior).
Header text font, has symbols for some characters (blank box for #, filled box for /, and bold : is what I found). If it’s a GTA original font, we might need to stream a different one.
That’s because text parameter is based on STRING text entry, which is limited to 99 characters.
You should use AddTextEntry and text entry API to display more characters.
Multiline text will be added later.
