[FREE] Vein: an easy-to-use GUI library for FiveM

FiveM Releases
, , , ,
44

Update

Download (ver 3.1.0)

Improved documentation

Visit website for API documentation.

Custom Items

Use new getContext export and it’s methods to define your own items.
Check custom item from demo to make sure how easy it is.

image

Improved text management

(BREAKING CHANGE)
TextEntry related API was removed - simply pass any string you need to the item API directly.

Fixed width setting ambiguities

(BREAKING CHANGE)
Now you always have to pass width manually to the item which requires it:

  • progressBar
  • separator
  • slider
  • textArea
1 Like
45

Update

Download (ver 3.2.0)

Collapsing Header

image

Improved window positioning

(BREAKING CHANGE)
beginWindow now uses (x, y) as the top-left window coords.
endWindow now returns { x, y, w, h } (size added).
Check updated demo to learn how to center a window on the screen.

46

is it possible to make it compatible with redm?

47

I didn’t run RedM for a few years, but I think there is a high chance yes.

48

Update

Download (ver 3.3.0)

Introduced mouse cursor support

image
image813×90 5.87 KB

  • Added grab cursor during window moving and finger cursor for hyperlink item.
  • Added IPainter.setMouseCursor API for custom items (see SetMouseCursorSprite description)

Hyperlink

image
image813×89 7.94 KB

Opens specified URL in web browser on click.

Notable changes

  • (BREAKING CHANGE) Removed setWindowSkipNextDrawing API
  • Improved collapsingHeader design
1 Like
49

Update

Download (ver 4.0.1)

Multi-window support

Now vein has all necessary APIs to support multiple windows (or frames, as they called now):

  • endFrame returns frameRect, which can be used to detect clicks for inactive frames by using natives
  • setNextFrameDisableInput to disable input for inactive frames

Code your own frame id system for managing their states and use SetScriptGfxDrawOrder for drawing windows in proper order.
(the whole GUI should now be possible to be created with vein only)

Improved CSS support

Resolved a lot of inconsistences and misunderstandings.
And now it’s possible to use CSS for custom items (check updated
example from demo).
(it’s a great time to create and publish your own vein item libraries and styles)

Notable changes

  • Revised a lot of APIs for better consistency and usability
  • Added new APIs such as setNextFrameDisableInput and CSS related ones
  • Improved internal structure resulted in more readable and less error-prone code
1 Like
50

Let me know which widgets or features you would like to see.

51

Update

Download (ver 4.2.0)

Frame ID system

It allows to process multiple frames correctly.
beginFrame now accepts id: string | null as the only parameter.
Use setNextFramePosition if you need to specify the exact position.
endFrame now returns frameResponse object, which contains frame rect.

New slider design

It also shows value text by default.
Use new text optional parameter to customize it.

image

Notable changes

  • Bugfixes and improvements for multi-frame support
  • Fixed style property getter infinite recursion
  • Updated slider and progressBar API
  • Renamed setNextFramePositionFixed to setNextFrameDisableMove
  • Improved IInput API
  • Improved style related API
52

Update

Download (ver 5.1.0)

Improved demo

Browse Sources

Improved design

Color theme and some items design were improved.
Added CSS :active state to provide visual feedback on user interaction.
Added frame border and setNextFrameDisableBorder API.

Custom Scale

Use setNextFrameScale to scale the whole UI.

Improved API

Introduced tons of API improvements based on usage feedback.

Notable changes

  • Improved documentation by using categories
  • Fixed textEdit width calculation
  • Fixed isItemClicked reacted on mouse button being pressed instead of released
  • Fixed some style parsing bugs
2 Likes
53

Update

Download (ver 6.2.2)

textEdit placeholder

New textEdit argument.

image

disabled item state

Use setNextItemDisabled API.

image

Notable changes

  • (BREAKING CHANGE) endFrame returns IRect (was IFrameResponse)
  • Added setNextFrameSize API
  • Added IFrame.isItemDisabled API
  • Added IFrame.isItemPressed API
  • Added default arguments for some items API
54

That’s a cool addition. Before I had to not draw the buttons before the user met all the requirements, which tends to be confusing for some players.

Cool menu overall, I use it for my ATM script. [removed performance “issue” talk because it’s not real]

image
image1920×1080 128 KB

55

Update

Download (ver 7.0.1)

Improved layouting

Introduced new beginHorizontal/beginVertical API, which supports nested layouts.
It makes easier to create complex layouts such as tables for example.

(beginRow, endRow, pushItemWidth and popItemWidth API was removed)

image

Code 
-- Lua
local vein = exports.vein
local w = 0.067

vein:beginFrame()

local h = w * GetAspectRatio()

RequestStreamedTextureDict('heisthud')

vein:heading('Select Your Companion')

vein:beginHorizontal()
	vein:beginVertical()
		vein:sprite('heisthud', 'hc_lester', w, h)
		vein:button('Lester')
	vein:endVertical()
	vein:spacing()
	vein:beginVertical()
		vein:sprite('heisthud', 'hc_franklin', w, h)
		vein:button('Franklin')
	vein:endVertical()
	vein:spacing()
	vein:beginVertical()
		vein:sprite('heisthud', 'hc_trevor', w, h)
		vein:button('Trevor')
	vein:endVertical()
vein:endHorizontal()

vein:endFrame()
56

What is your real performance loss?

57

Actually nvm, it looks like the increased resmon is caused mostly by the draw natives themselves, which is working as intended, and that most likely won’t change with not using exports.

The example that I have is a bit extreme, since I have a lot of elements in it, but it still almost triple the recorded resmon.

image
image1422×825 86 KB

image
image1673×937 106 KB

The profiler doesn’t really help, except that it points at the overall menu event handler, and that the menu takes most of the tick:
Without the menu open:

image
image1232×120 12.6 KB

With the menu open:

image
image1148×153 14.1 KB

Although, compared with other big servers on FiveM, like* RSM, those are still good numbers.

58

Update

Download (ver. 7.1.0)

Custom item positioning

vein.setNextItemPosition(0.5, 0.5);
vein.button('Center Button');

Such items are not the part of frame layout, but affected with its modifiers such as setNextFrameScale.

Notable changes

  • Added rect and sprite color default arguments
59

Update

Download (ver 8.0.1)

Improved design

Everything was downscaled by roughly 10%.
Spacings are now equal for both orientations.
Adjusted collapsingHeader design.

FiveM Vein Demo

Custom item spacings

Use setNextItemSpacing API to specify the exact spacing for the next item.
Use getFrame().getSpacing() API to get current frame spacings.

Notable changes

  • (BREAKING CHANGE) Removed spacing API
2 Likes
60

Drag & Drop support is coming soon!

61

That’s really cool! I really need to update the vein version I use on my server.

Quick thing, can you add an export function that simply opens up a link? Basically, just an export to expose SendNUIMessage({ openUrl: { url: url } }); to other resources.

I sort-of need that for other applications, and modifying vein on every update, or copying the NUI, seems redundant.

62

can you add an export function that simply opens up a link

Yes, I think I could add it.
EDIT: Done

1 Like
63

Update

Download (ver 9.0.0)

Introduced Drag & Drop support

See demo for usage example and updated docs for API reference.

Notable changes

  • (BREAKING CHANGE) textEdit now returns text only if actual input happened
  • (BREAKING CHANGE) Removed pushItemStyleId/popItemStyleId API
  • Added control optional parameter for isItemClicked API
  • Introduced openUrl API
  • Fixed text flickering in case of dynamic layouting
  • Introduced Frame on-screen keyboard API
  • Introduced Painter.getFontSize API
  • Minor performance improvements