Trew HUD (qbCore/ESX)

It was a great experience playing GTA5 RP and learning LUA to code the Trew HUD UI. However, after numerous challenges with the FiveM community and the project itself, I have decided to discontinue further development. It’s been 6 months since I last played GTA5 RP, and continuing this project no longer makes sense.

Videovoorvertoning

Downloaden Mirror

Kenmerken

• Serverlogo;
• Job and job grade;
• Money, dirty money, bank and society (this last one is for ESX only);
• Status zoals gezondheid, pantser, uithoudingsvermogen, honger en dorst;
• Speedometer with seatbelt ondersteuning, fuel detection, lights, gear changing, alerts and sirens (for emergency vehicles);
• Locatie en tijd;
• Spraakbesturing (geschikt voor OneSync);
• Gebruikersinterface voor wapens;
• Aangepaste status opnemen.

Installatie-instructies

Hoe FiveM HUD installeren

1. Extract the Files:
   • Extraheer de .zip file or open it directly.
   • Plaats trew_hud_ui in je bronnenmap.
2. Update server.cfg:
   • Voeg de volgende regel toe aan uw server.cfg file:sqlCode kopierentrew_hud_ui starten

Special Instructions for the ESX Version

Vereisten:

• es_uitgebreid
• esx_samenleving
• esx_addonaccount

Optioneel:

• esx_basisbehoeften
• esx_status
• LegacyFuel (it should be started voor trew_hud_ui)

Disabling Default HUD:

• Ga naar es_extended/config.lua and set Config.EnableHud naar vals.

Replacing Code in esx_basicneeds/main.lua:

• Replace the existing 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) with: 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

Config.vRP Settings:

• Set up necessary items like black money by specifying the item ID in config.lua.

Config.vRP Example:

Config.vRP = {
  blackMoney = "dirty_money" -- Change this to your black money item ID
}

General Configurations:

• Config.Locale: Set language (default is en).
• Config.serverLogo: Set your server logo URL.
• Config.font: Customize UI font (default is Montserrat).
• Config.date: Set date format for the GPS location.
• Config.stem: Configure voice settings (OneSync compatible).
• Config.vehicle: Configure vehicle and speedometer settings.
• Config.ui: Toggle display elements of the HUD.

Adding Custom Status

You can create custom indicators for existing statuses like stress or drunkenness.

Voorbeeld:

Nexports.trew_hud_ui.createStatus({
  status = 'stress',
  color = '#FF0090',
  icon = '<i class="fas fa-brain"></i>'
});

Updating Custom Status:

Citizen.CreateThread(functie()
  terwijl waar do
    Citizen.Wait(1000)
    
    local STRESS_STATUS

    TriggerEvent('esx_status:getStatus', 'stress', function(status)
      STRESS_STATUS = status.getPercent()
    einde)

    exports.trew_hud_ui:setStatus({
      name = 'stress',
      value = STRESS_STATUS
    });
  einde
einde)

Chat Commands:

• /toggleui: Enables/Disables HUD information elements, useful for streamers.

Usage Example:

/toggleui

FAQ

Q: The HUD date is wrong! Can you fix it?

• A: De HUD date uses the game server’s time and default functions for FiveM, so it is not wrong. If you want to display the real date, you can edit app.js using JavaScript’s Date() function. Google it for more info.

Q: How can I edit the /toggleui command to hide the elements?

• A: To edit the /toggleui command, go to the ui.html files and look for the id attribute of the elements you want to hide. Then, edit the toggleui command in client.lua to suit your needs.

Q: Do you intend to release a version that supports THIS or THAT script?

• A: Not at the moment. LegacyFuel is shown as an optional feature because it changes the fuel behavior but doesn’t require special functions to work.

Q: I want to change the positions of the elements. How can I do it?

• A: To change the positions of the elements, check the main.css file and modify the bovenkant, links, rechts, of onderkant properties of the elements you want. Be careful and read about absolute positioning in CSS. For example, to position an element at the bottom, use the BOTTOM property instead of TOP.