[UI] [Early Access] Vein - IMGUI Framework

Vein

Vein is a FiveM IMGUI framework.
It’s written on Lua and uses exports to be available for other resources.

Widgets

Showcase

Getting Started

  • Download and put into resources/ directory
  • Add ensure vein to server.cfg

Usage

Vein is responsible for layouting/drawing UI and input handling only.
Organizing and managing data for it is user task as a programmer.

Visit GitHub project page to learn more.
Also check demo source code for usage example.

32 Likes

the Image and the Video dont appear to be showing the same thing… Can we get a better showcase? not entirely certain what this does

4 Likes

Why they should show the same things?
Screenshot is for demonstrating widgets library and video is for window example.

Uuu, I’ve been waiting for this. Gonna try something with it soon-ish

1 Like

Nice replacement for NativeUi/RageUI or even your old warmenu.

Look forward to testing this out.

1 Like

ahh i see so the weather UI is an example of what you create with the script… got it

Wow! Amazing work!

1 Like

Amazing!

2 Likes

Good job just Amazing

1 Like

This is beautiful.


Thank you for your amazing work, as an example of what people could do as below.

It seems to keep active even after breaking or returning the loop, that Early Access, AmIRight?

Simple Pin Code

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)
3 Likes

Remove while-true loop from RegisterCommand handler.

Really enjoying this framework, but I do have some questions / possible bugs or limitations.

  1. 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).

  2. 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.

1 Like

Odd, even from your original demo.lua.

It still stayed or looked like it was running when completed… I’ll try and grab a screen when Im backon my pc and add an issue to github if so.

Insane! Great job

1 Like

Thanks for feedback!

  1. 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.

  2. Heading font was updated.

2 Likes

This is for me THE release of 2021! Any idea of the date for the official release?

2 Likes

No, but I think it’s ready to use for 99% cases.
I expect people using it and sharing feedback, so I could improve API and fix bugs.

1 Like

Is there a Documentation? I would like to make a script using it like today :slight_smile:

All links are in first post.

Great release with nice documentation! And it’s FREE! I’m going to start converting a couple interfaces tonight

1 Like