{"id":145731,"date":"2024-07-03T11:25:41","date_gmt":"2024-07-03T09:25:41","guid":{"rendered":"https:\/\/hifivem.com\/?p=145731"},"modified":"2025-12-23T16:32:46","modified_gmt":"2025-12-23T15:32:46","slug":"trew-hud","status":"publish","type":"post","link":"https:\/\/fivemx.com\/nl\/trew-hud\/","title":{"rendered":"Trew HUD (qbCore\/ESX) &#8211; FiveMX"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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&#8217;s been 6 months since I last played GTA5 RP, and continuing this project no longer makes sense.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Video Voorbeeld<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"TREW HUD UI - An User Interface for FiveM\" width=\"1290\" height=\"726\" src=\"https:\/\/www.youtube.com\/embed\/u1QTJ5aHcGA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Download Mirror<\/h2>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Functies<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Server logo;<\/li>\n\n\n\n<li>Job and job grade;<\/li>\n\n\n\n<li>Money, dirty money, bank and society (this last one is for ESX only);<\/li>\n\n\n\n<li>Status like health, armor, stamina, hunger and thirst;<\/li>\n\n\n\n<li>Speedometer with seatbelt <a class=\"wpil_keyword_link\" href=\"https:\/\/fivemx.com\/nl\/support\/\" title=\"ondersteuning\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"1187\">ondersteuning<\/a>, fuel detection, lights, gear changing, alerts and sirens (for emergency vehicles);<\/li>\n\n\n\n<li>Location and time;<\/li>\n\n\n\n<li>Voice controller (OneSync ready);<\/li>\n\n\n\n<li>User Interface for Weapons;<\/li>\n\n\n\n<li>Custom status inclusion.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Installatie-instructies<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/fivemx.com\/nl\/how-to-install-fivem-hud\/\">How To Install FiveM HUD<\/a><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Extract the Files:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Pak de <code>.zip<\/code> file or open it directly.<\/li>\n\n\n\n<li>Place <code>trew_hud_ui<\/code> in your resources directory.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Update <code>server.cfg<\/code>:<\/strong>\n<ul class=\"wp-block-list\">\n<li>Add the following line to your <code>server.cfg<\/code> file:sqlCode kopieren<code>start trew_hud_ui<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Special Instructions for the ESX Version<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Vereisten:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>es_extended<\/code><\/li>\n\n\n\n<li><code>esx_society<\/code><\/li>\n\n\n\n<li><code>esx_addonaccount<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Optional:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>esx_basicneeds<\/code><\/li>\n\n\n\n<li><code>esx_status<\/code><\/li>\n\n\n\n<li><code>LegacyFuel<\/code> (it should be started <strong>before<\/strong> <code>trew_hud_ui<\/code>)<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Disabling Default HUD:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <code>es_extended\/config.lua<\/code> and set <code>Config.EnableHud<\/code> naar <code>false<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Replacing Code in <code>esx_basicneeds\/main.lua<\/code>:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Replace the existing code: <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) <\/code>with: <code>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)<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Special Instructions for the VRP\/VRPEX Versions<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Config.vRP Settings:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up necessary items like black money by specifying the item ID in <code>config.lua<\/code>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Config.vRP Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>Config.vRP = {<br>  blackMoney = \"dirty_money\" -- Change this to your black money item ID<br>}<br><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>General Configurations:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Config.Locale:<\/strong> Set language (default is <code>en<\/code>).<\/li>\n\n\n\n<li><strong>Config.serverLogo:<\/strong> Set your server logo URL.<\/li>\n\n\n\n<li><strong>Config.font:<\/strong> Customize UI font (default is Montserrat).<\/li>\n\n\n\n<li><strong>Config.date:<\/strong> Set date format for the GPS location.<\/li>\n\n\n\n<li><strong>Config.voice:<\/strong> Configure voice settings (OneSync compatible).<\/li>\n\n\n\n<li><strong>Config.vehicle:<\/strong> Configure vehicle and speedometer settings.<\/li>\n\n\n\n<li><strong>Config.ui:<\/strong> Toggle display elements of the HUD.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Adding Custom Status<\/strong><\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">You can create custom indicators for existing statuses like stress or drunkenness.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Voorbeeld:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">n<code>exports.trew_hud_ui.createStatus({<br>  status = 'stress',<br>  color = '#FF0090',<br>  icon = '&lt;i class=\"fas fa-brain\"&gt;&lt;\/i&gt;'<br>});<br><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Updating Custom Status:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>Citizen.CreateThread(function()<br>  while true do<br>    Citizen.Wait(1000)<br>    <br>    local STRESS_STATUS<br><br>    TriggerEvent('esx_status:getStatus', 'stress', function(status)<br>      STRESS_STATUS = status.getPercent()<br>    end)<br><br>    exports.trew_hud_ui:setStatus({<br>      name = 'stress',<br>      value = STRESS_STATUS<br>    });<br>  einde<br>end)<br><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Chat Commands:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\/toggleui:<\/strong> Enables\/Disables HUD information elements, <a href=\"https:\/\/fivemx.com\/nl\/how-to-become-gta-rp-content-creator\/\" id=\"498\">useful for streamers<\/a>.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Usage Example:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\/toggleui<br><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: The HUD date is wrong! Can you fix it?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A:<\/strong> The HUD date uses the game <a href=\"https:\/\/fivemx.com\/nl\/performance\/\" title=\"FiveM Server Performance &amp; Optimization\" data-wpil-monitor-id=\"1519\">server\u2019s time and default functions for FiveM<\/a>, so it is not wrong. If you want to display the real date, you can edit <code>app.js<\/code> using JavaScript&#8217;s <code>Date()<\/code> function. Google it for more info.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: How can I edit the \/toggleui command to hide the elements?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A:<\/strong> To edit the <code>\/toggleui<\/code> command, go to the <code>ui.html<\/code> files and look for the <code>id<\/code> attribute of the elements you want to hide. Then, edit the <code>toggleui<\/code> command in <code>client.lua<\/code> to suit your needs.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: Do you intend to release a version that supports THIS or THAT script?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A:<\/strong> Not at the moment. LegacyFuel is shown as an optional feature because it changes the fuel behavior but doesn&#8217;t require special functions to work.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Q: I want to change the positions of the elements. How can I do it?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>A:<\/strong> To change the positions of the elements, check the <code>main.css<\/code> file and modify the <code>top<\/code>, <code>left<\/code>, <code>right<\/code>, of <code>bottom<\/code> 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 <code>BOTTOM<\/code> property instead of <code>TOP<\/code>.<\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>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&#8217;s been 6 months since I last played GTA5 RP, and continuing this project no longer makes sense. Video [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":145732,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2297,2330,2877,2298],"tags":[2858,3001,2928,3000,2859],"class_list":["post-145731","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free","category-hud","category-free-fivem-job-scripts","category-scripts","tag-esx","tag-fivem-script","tag-free","tag-free-script","tag-qbcore"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/posts\/145731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/comments?post=145731"}],"version-history":[{"count":0,"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/posts\/145731\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/media\/145732"}],"wp:attachment":[{"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/media?parent=145731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/categories?post=145731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fivemx.com\/nl\/wp-json\/wp\/v2\/tags?post=145731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}