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

probably not the script you most likely changed the name of it which stops it from working, since the config shouldn’t make it stop if you just change true to false

Link ???

Thank you I appreciate it!

Is there an English version?

when im in the water im still alive we need hud for oxygen

Hey guys!

I was wondering what’s the easiest way to remove the speedometer? I use custom speedos, so I don’t need this one.

Is there some way to add it to “/toggleui” ? Thanks for you help!

Are u using es extended v1 final? Ok go to this line https://github.com/esx-framework/es_extended/blob/v1-final/config.lua#L13 and change to false.

how to solve it?

Not going to lie this is one of the best HUDs I have seen, keep up the great work.

for the ones who want the hud on left side of minimap here it go

.info.player #status { position: fixed; width: 0%; height 0%; bottom: 30px; left: 0px; clear: both; }
.info.player #status ul { margin: 10px 0 0 0; }
.info.player #status ul li { float: left; display: inline-block; text-align: center;padding-bottom: 6px; margin-bottom: 5px;}

Does anyone know how to bring in the side for the location box? I have tried again and again, but can’t seem to get it.

Yea bro that’s an easy one open main.css and check for .info.time-and-place, line 181 and play with that “right” value as well as line 190 for the padding if you want.

So that is what I was already messing with when taking this photo. For some reason the bat stretches the whole way. Any ideas? Here is a photo of my current configuration.

You have that ‘left: 320px’ value which shouldn’t be there at all. Replace linees 178-179 with this code:

.info.time-and-place {     position: absolute;
    bottom: 18px;
    right: 65px; 
    height: 38px;
    font-size: 11px;
    color: #060606;
    background: rgb(242 242 242 / 35%) ; 
    border-radius: 100px;
    text-align: right; }

Nope, still has that darn issue. Check this photo out, I also added my code below.

.info.radio { bottom: 19px; left: 310px; z-index: 11; }
.info.radio #voice { width: 35px; height: 35px; border-radius: 50%; overflow: hidden; background: linear-gradient(180deg, #18b70b 0%, #128c08 100%); text-align: center; padding: 7px 0 0 0; transition: all 0.1s linear; }

.info.radio #voice.whisper { background: linear-gradient(180deg, #ffb700 0%, #e0a102 100%); }
.info.radio #voice.normal { background: linear-gradient(180deg, #18b70b 0%, #128c08 100%); }
.info.radio #voice.shout { background: linear-gradient(180deg, #ff0000 0%, #aa0000 100%); }
.info.radio #voice i.fas { font-size: 18px; color: #FFF; }
.info.radio #voice.speak { animation: trew-soundwave 1s infinite; }

.info.time-and-place {     position: absolute;
    bottom: 18px;
    left: 65px; 
    height: 38px;
    font-size: 11px;
    color: #060606;
    background: rgb(242 242 242 / 28%) ; 
    border-radius: 5px;
    text-align: right; }

.info.time-and-place .data { position: relative; top: 50%; transform: translate(0,-50%); }
.info.time-and-place .data div { padding: 0 15px;  }

My goal is to have the time-and-place next to the mini map.

I thought you wanted it on the right sorry.

If you haven’t messed with anything else, on a fresh main.css file that code works perfectly fine for me. You might want to change the ‘left:600px’ value to suit your needs.

.info.time-and-place { position: absolute; bottom: 18px; left: 600px; height: 38px; font-size: 11px; color: #FFF; background: rgba(0,0,0,0.35); border-radius: 100px; text-align: right; }

.info.time-and-place .data { position: relative; top: 50%; transform: translate(0,-50%); }
.info.time-and-place .data div { padding: 0 25px; }

This is pretty similar to what you initially tried, it should work.

So unfortunately again, it moves everything over to where I want it but does not bring the right side of the bar over with it. Instead it just stretches the bar across the screen.