[RELEASE] TREW HUD UI - A lightweight HUD for ESX, VRP AND VRPEX

Trew HUD UI

__

BE SURE TO READ THE F.A.Q. at the end of README

__

User Interface created for ESX/VRP/VRPEX. It has:

  • Server logo;
  • Job and job grade;
  • Money, dirty money, bank and society (this last one is for ESX only);
  • Status like health, armor, stamina, hunger and thirst;
  • Speedometer with seatbelt support, fuel detection, lights, gear changing, alerts and sirens (for emergency vehicles);
  • Location and time;
  • Voice controller (OneSync ready);
  • User Interface for Weapons;
  • Custom status inclusion.

Demo - click to watch the video

https://www.youtube.com/watch?v=u1QTJ5aHcGA

Screenshots

Download

Installation

  1. Extract the .zip or Open the .zip.
  2. Place trew_hud_ui in your resources directory.
  3. Add start trew_hud_ui to your server.cfg

Special Instructions for the ESX version

Requirements

Optional

What you can disable

Post Installation

  • Go to es_extended config.lua and turn Config.EnableHud to false
  • If needed, go to esx_basicneeds main.lua and replace this code
	TriggerEvent('esx_status:registerStatus', 'hunger', 1000000, '#CFAD0F', function(status)
		return true
	end, function(status)
		status.remove(1000)
	end)
	
	TriggerEvent('esx_status:registerStatus', 'thirst', 1000000, '#0C98F1', function(status)
		return true
	end, function(status)
		status.remove(750)
	end)
			

for this one

	TriggerEvent('esx_status:registerStatus', 'hunger', 1000000, '#CFAD0F', function(status)
		return false
	end, function(status)
		status.remove(1000)
	end)
	
	TriggerEvent('esx_status:registerStatus', 'thirst', 1000000, '#0C98F1', function(status)
		return false
	end, function(status)
		status.remove(750)
	end)
			

Special Instructions for the VRP/VRPEX versions

Inside config.lua you will see a Config.vRP with certain items needed to set up properly, like black money. Since black money is considered an item on VRP/VRPEX versions, you need to put the ID of said item on this configuration. On most VRP versions, the ID is dirty_money .

Config.vRP
Special settings for vRP/vRPEX

  • items
    • blackMoney: The item ID for Black Money.

Config.lua settings

Config.Locale
The language. Default is en .

Config.serverLogo
Logo for your server. It’s suggested that you upload a PNG file to websites like imgur.com and then paste the link there.

Config.font
Font configuration for the UI. Default is Montserrat and the link points up to Google Fonts . It’s suggested that you look up for a font there and place the name and the link on it’s location.

  • name : The name of the font
  • link : CSS Stylesheet file link for the font

Config.date
Date format for the GPS location.

  • format :
    • default: It’s the default format;
    • withWeekDay: Format that shows week day names, like monday, tuesday, wednesday , etc;
    • withHours: Format that shows the current time in game;
    • withWeekdayAndHours: A mix of withWeekDay and withHours .
    • simple: Format that shows only day and month;
    • simpleWithHours: Same as simple , but also showing the time.
  • AmPm : set it to true if you want to use AM/PM time format, false if you don’t.

Config.voice
Voice settings for the UI. OneSync compatible

  • levels :
    • default: Distance in meters for a default distance. Default is 5.0 ;
    • shout: Distance in meters for a shout distance. Default is 12.0 ;
    • whisper: Distance in meters for a whisper distance. Default is 1.0 ;
    • current: It’s important that this is left unchanged.
  • keys :
    • distance: Distance in meters for a default distance. Default is HOME .

Config.vehicle
Vehicle and speedometer settings

  • speedUnit : It should be set either KMH or MPH . Default is KMH ;
  • maxSpeed : The top speed the Speedometer is allowed to go. Default is 240 ;
  • keys :
    • seatbelt: Buckle/unbuckle seatbelt. Default is K ;
    • cruiser: Activate/deactivate cruiser speed. Default is CAPS ;
    • signalLeft: Activate/deactivate car left signal. Default is LEFT ;
    • signalRight: Activate/deactivate car right signal. Default is RIGHT ;
    • signalBoth: Activate/deactivate car danger signal. Default is DOWN ;

Config.ui
Display or hide elements of the HUD

  • showJob : Displays the job name. Default is true ;
  • showWalletMoney : Displays the money on your wallet. Default is true ;
  • showBankMoney : Displays the money on your bank account. Default is true ;
  • showBlackMoney : Displays the black money you have. Default is true ;
  • showSocietyMoney : If you are the boss of a job, it displays the money you have in the society vault. Default is true ; (Society money only works on ESX)
  • showDate : Displays the date. Default is true ;
  • showLocation : Displays the location. Default is true ;
  • showHealth : Displays your health. Default is true ;
  • showArmor : Displays your armor. Default is true ;
  • showStamina : Displays your stamina. Default is true ;
  • showHunger : Displays hunger. Default is true ;
  • showThirst : Displays thirst. Default is true ;
  • showMinimap : Displays the minimap while off the vehicle. Default is false ;
  • showVoice : Displays/use the voice controller. Default is true ;
  • showWeapons : Displays the weapons you have on your hand, with ammo. Default is true ;

ADDING CUSTOM STATUS

https://streamable.com/kzns5

Check by the thirst indicator

You can create custom indicators for status you already have, like stress status, drunken, shit, piss, you name it! You would just have to use the new exports functions. I would recommend you create a new script with the code and load it below trew_hud_ui on your server.cfg.

exports.trew_hud_ui.createStatus
Creates a new indicator after the existing ones.

Example:

	local STRESS_ACTIVE = false

	AddEventHandler('playerSpawned', function()
		
		if STRESS_ACTIVE == false then
			exports.trew_hud_ui:createStatus({
			    status = 'stress',
			    color = '#FF0090',
			    icon = '<i class="fas fa-brain"></i>'
			});
			STRESS_ACTIVE = true
		end

	end)
			

Usage:

  • status : The status ID. It’s purely to identify it;
  • color : The color you want for the status;
  • icon : The HTML code for the icon. You can search on FontAwesome for an icon and when you find one of your liking, change it there.

exports.trew_hud_ui.setStatus
It is what makes the status update. It should be set on a Wait() timer to update on whenever your custom status is. The example below ticks while getting from a custom status registered on esx_status .

Example:

	Citizen.CreateThread(function()
		while true do
			Citizen.Wait(1000)
			
			local STRESS_STATUS
	
			TriggerEvent('esx_status:getStatus', 'stress', function(status)
			    STRESS_STATUS = status.getPercent()
			end)
	
			exports.trew_hud_ui:setStatus({
			    name = 'stress',
			    value = STRESS_STATUS
			});
		end
	end)
			

Usage:

  • name : The name of the status. It should be correspondent with the ID when you created it;
  • value : The percentage value for the status, from 0 to 100.

Chat commands

/toggleui
Enables/Disables HUD information elements, like and job all types money . Useful for streamers.

Usage example: /toggleui

__

FREQUENTLY ASKED QUESTIONS - F.A.Q.

A: The HUD date is wrong! Can you fix it?
R: It’s not wrong. It uses the game server’s time and default functions for FiveM. If you want to show the real date, I suggest you edit app.js using javascript’s Date() function. Google it for more info.

A: How can I edit the /toggleui command to hide the elements?
R: Go to the ui.html files and look for the id attribute of the elements you wanna hide. Then edit the toggleui command on client.lua to better suit your needs.

A: Do you intent to release a version that supports THIS or THAT script?
R: Not at the moment. It shows LegacyFuel as an optional because it changes the fuel behavior, but it doesn’t require special functions to work.

A: I want to change the positions of the elements. How can I do it?
R: Check the main.css file and change the top, left, right or bottom positioning of the elements you want. But be careful: you should read about absolute positioning on CSS. Example: if you want to make it to appear on the bottom, you don’t use the TOP property, you should use BOTTOM.
__

Disclaimer

I’m offering the HUD AS IT IS. I won’t be adding or modifying anything that It’s not already there (unless I want to) neither answering things that are on the instructions/readme.

!!! PLEASE READ THE INSTRUCTIONS !!!

This is now an Open Source Project. If you want specific functions, feel free to fork my HUD and modify it to your needs. Other than that, I’ll be glad to help.

I’ve tested the HUD on serveral ESX servers, on Dunko VRP servers and on servers based on Creative RP VRPEX servers. They work flawlessly there. The only thing I reserve myself to do is bug fixes and on my free time, when I have time to do it.

–

This will be my one of my last contributions for the FiveM community. It was fun to play FiveM, learn LUA, create some unique stuff for the servers I’ve been a dev/partner and meet people that I have the privilege to call friends.

I don’t know how this community will grow in the future, but I hope it will be for the best.

91 Likes

Amazing release bro ! Beautiful hud thank you for the community VRP & ESX :wink:

3 Likes

it’s really well made! And it looks really good! :+1:

2 Likes

This is… SICK! Cant wait to try this out, looks amazing! Thank you for sharing this! :heartbeat::black_heart:

1 Like

Its Love Vortis

1 Like

Congratulations for the work!

1 Like

please help me how to fix it ?

2 Likes

Well, my HUD doesn’t look or deals with anything inventory-wise … the only thing that it does is on the VRP version, which is check the amount of dirty money the person has.

Do you have ESX_SOCIETY installed? If not, install it.

The config.lua doesnt work right. I disabled the voice and location but its still there

Which version are you using? And did you set it to FALSE or just delete the line?
EDIT: It’s working here. As soon as I set Config.ui.showVoice to false, it disables the voice ui.

I saw what was wrong. It was on the ui.html. Solved it and updated on Github.
Download it and try it again.

1 Like

yes I have already installed it but it still error

I don’t know, then.

esx_society:getSocietyMoney is a default trigger event from esx_society, server side. It works here. Are you loading trew_hud_ui before or after esx_society? If you’re loading before, put it after.

the logo of the server remains displayed even putting “showServerLogo = false,”

I updated the code. It should work now. Download it again and try it.

Looks amazing!
Bom Trabalho

1 Like

Speedometer no fonctionnel for me :frowning:

how to synchronize the current date? for me it’s December 26, 2019

1 Like

It synced with game server’s date, which I get using default functions. I did that because the time inside the game is faster than real time. If you want to sync with the real time date, you need to mess with the javascript.