HUD (ID and Money)

FiveM Server Development Server Discussion
1

Hi does anyone know why the ID is always on 390 and the money is not displayed it always remains on Loading?

Screenshot (3)
Screenshot (3)1920×1086 217 KB

2

A) What HUD are you using?
B) Are there any Errors in the F8 Console
C) Do you have all dependencies installed?

3

I help out a server I was told that the hud does not throw errors in the F8 console. So the hud is called Chaoscity

4

can u show me the code

5

HTML:

	<div class="time-box">		
		<span id="clock">3:02</span>	
	</div>

	<div class="time-box2">
		<span id="date">26.01.2022</span>
	</div>		

	<div class="logo">
		<div class="txt-box">
			<span class="lg-txt"><span id="palermo">NightCity </span>ROLEPLAY</span>
			<div class="box">
				<span id="playerId">ID:</span><span id="playerId2">390</span>
				<img class="radio-icon" src="assets/images/radio.png"/>
				<img class="mic-icon" src="assets/images/mic.png"/>
				<div class="mic-level">
					<div class="circle vr1"></div>
					<div class="circle vr2"></div>
					<div class="circle vr3"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="square"></div>
	</div>

	<div class="notify-box">

	<img class="player_icon" id="player_icon" src="assets/images/clock.png">
	</div>

		<!-- <div class="notify-info">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>Info</span>
				<span>You rent a car</span>
			</div>
		</div>
		<div class="notify-warning">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>Warning</span>
				<span>You can't do it</span>
			</div>
		</div>
		<div class="notify-error">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>Error</span>
				<span>The engine is already running</span>
			</div>
		</div>
		<div class="notify-success">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>Successfull</span>
				<span>Engine is running</span>
			</div>
		</div>
		<div class="notify-success">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>Successfull</span>
				<span>Engine is running</span>
			</div>
		</div>
		<div class="notify-success">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>Successfull</span>
				<span>Engine is running</span>
			</div>
		</div> -->

	</div>

	<div class="money-box">
		<span class="money" id="playerMoney">Loading... $</span>
		<div class="container">
			<img class="money-img" src="assets/images/money.png"/>
		</div>
	</div>

	<div class="ammo-box" style="display: none;">
		<span id="ammoCount">1291</span>
		<div class="icon-box">
			<img src="assets/images/ammo.png"/>
		</div>
	</div>
	</div>
        </div>
    </div>
	
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>
6

can you show me the client and js file to

7

JS:

window.addEventListener(‘message’, function(event) {
var item = event.data;
if (item.action == “setMoney”) {
$(“#playerId2”).text(item.playerId)
$(“#playerMoney”).text(“$” + formatNumber(item.money))
}

if (item.action == "setAmmo") {
    if (item.state == true) {
        $(".ammo-box").fadeIn();
        $("#ammoCount").text(item.clip + " / " + item.ammo)
    } else {
        $(".ammo-box").fadeOut();
    }
}
if (item.action == "setVoiceLevel") {
    if (item.level == 1) {
        $(".vr1").removeClass("actv")
        $(".vr2").removeClass("actv")
        $(".vr3").removeClass("actv")
    } else if (item.level == 2) {
        $(".vr1").addClass("actv")
        $(".vr2").removeClass("actv")
        $(".vr3").removeClass("actv")
    } else if (item.level == 3) {
        $(".vr1").addClass("actv")
        $(".vr2").addClass("actv")
        $(".vr3").removeClass("actv")
    } else if (item.level == 4) {
        $(".vr1").addClass("actv")
        $(".vr2").addClass("actv")
        $(".vr3").addClass("actv")
    }
}
if (item.action == "setFunkState") {
    if (item.active == true) {
        $(".radio-icon").attr("src", "https://cdn.discordapp.com/attachments/572488648143011860/936787125955854436/grun_radio.png")
    } else {
        $(".radio-icon2").attr("src", "https://cdn.discordapp.com/attachments/936773450217951313/936779406775570452/radio.png")
    }
}
if (item.action == "setMicState") {
    if (item.type == "muted") {
        if (item.state == true) {
            $(".mic-icon").attr("src", "https://cdn.discordapp.com/attachments/572488648143011860/936787126878629888/rot_mic.png")
        } else {
            $(".mic-icon").attr("src", "https://cdn.discordapp.com/attachments/936773450217951313/936779407811567616/mic.png")
        }
    }
    if (item.type == "talk") {
        if (item.state == true) {
            $(".mic-icon").attr("src", "https://cdn.discordapp.com/attachments/572488648143011860/936787125662257172/grun_mic.png")
        } else {
            $(".mic-icon").attr("src", "https://cdn.discordapp.com/attachments/936773450217951313/936779407811567616/mic.png")
        }
    }
}
if (item.action == "notify") {
    var $html = $(`
		<div class="notify-${item.type}">
			<img class="logo-img" src="assets/images/logo.png"/>
			<div class="text-box">
				<span>${item.title}</span>
				<span>${item.message}</span>
			</div>
		</div>
    `)
    
    $(".notify-box").prepend($html).fadeIn();

    setTimeout(() => {
        $html.animate({
            opacity: 0.0
        }, 500);
        setTimeout(() => {
            $html.remove();
        }, 850);
    }, 5000);
}  
if (item.action == "carHud") {
    if (item.state == true) {
		const MaxFuelTank = 100;
		const MaxSpeed = 300;

		let fuelRatio = MaxFuelTank / item.fuel;
		let fuelPercent = 100 / fuelRatio;
	
		let speedRatio = MaxSpeed / item.speed;
		let speedPercent = 100 / speedRatio;

        $(".speedometer").fadeIn();
        $("#speed").text(item.speed);
        $("#fuel").text(item.fuel + "L");
	
		setProgressFuel(fuelPercent);
		setProgressSpeed(speedPercent);
    } else {
        $(".speedometer").fadeOut();
    }
}
if (item.action == "carEngine") {
    if (item.state == true) {
        $(".engine-icon").attr("href", "https://cdn.discordapp.com/attachments/572488648143011860/936790258140467210/grun_speed.png")
    } else {
        $(".engine-icon").attr("href", "https://cdn.discordapp.com/attachments/572488648143011860/936789906989150278/speed.png")
    }
}
if (item.action == "carLock") {
    if (item.state == true) {
        $(".lock-icon").attr("href", "https://cdn.discordapp.com/attachments/572488648143011860/936787125175721984/grun_key.png")
    } else {
        $(".lock-icon").attr("href", "https://cdn.discordapp.com/attachments/572488648143011860/936790100115849276/key.png")
    }
}
if (item.action == "job") {
    $("#Top-Left-Text-1").text(item.job)
}

})

function formatNumber(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, ‘$1.’)
}

function startTime() {
const today = new Date();
let ds = today.getDate() + “.” + (today.getMonth()+1) + “.” + today.getFullYear()
let h = today.getHours();
let m = today.getMinutes();
m = checkTime(m);
$(“#date”).text(ds)
$(“clock”).text(h + “:” + m)
setTimeout(startTime, 1000);
}

function checkTime(i) {
if (i < 10) {i = “0” + i};
return i;
}

startTime()

const fuelProgress = document.getElementById(‘fuel-progress’);
const speedProgress = document.getElementById(‘speed-progress’);

// FUNCTION FOR SET FUEL PROGRESS
function setProgressFuel(percent) {
offsetFuel = 746.31 - (118 - percent / 100 * 118);
if (offsetFuel < 746.31) {
fuelProgress.style.strokeDashoffset = offsetFuel;
if(offsetFuel < 628.31) fuelProgress.style.strokeDashoffset = 628.31;
} else fuelProgress.style.strokeDashoffset = 746.31;
}

// FUNCTION FOR SET SPEED PROGRESS
function setProgressSpeed(percent) {
offsetSpeed = 301.31 + (327 - percent / 100 * 327);
if (offsetSpeed > 301.31) {
speedProgress.style.strokeDashoffset = offsetSpeed;
if(offsetSpeed > 628.31) speedProgress.style.strokeDashoffset = 628.31;
} else speedProgress.style.strokeDashoffset = 301.31;
}

8

The Client is waiting for Approval

9

the js looks good either the player is recognized as nil or something is wrong with the client/server lua

10

Client:

local ESX, micmuted, voicelevel, hudActive = nil, true, 0, true

Citizen.CreateThread(function()
while ESX == nil do
TriggerEvent(‘esx:getSharedObject’, function(obj) ESX = obj end)
Citizen.Wait(0)
end

TriggerEvent('esx:setMoneyDisplay', 0.0)
ESX.UI.HUD.SetDisplay(0.0)
hudActive = true

while ESX.GetPlayerData() == nil do
    Citizen.Wait(50)
end

while ESX.GetPlayerData().job == nil do
	Citizen.Wait(100)
end

ESX.PlayerData = ESX.GetPlayerData()

StartShowHudThread()

local data = ESX.GetPlayerData()
local accounts = data.accounts

for _, account in pairs(accounts) do
	if account.name == "bank" then
		if account.money > 0 then
            SendNUIMessage({
                action = "setBankMoney", 
                money = account.money
            })
		end
	end
end
SendNUIMessage({action = "setVoiceLevel", level = 1})

SendNUIMessage({action = "setMoney", money = data.money, playerId = GetPlayerServerId(PlayerId())})
SendNUIMessage({action = "setBlackMoney", black_money = data.black_money, playerId = GetPlayerServerId(PlayerId())})

end)

RegisterNetEvent(‘esx:setJob’)
AddEventHandler(‘esx:setJob’, function(job)
ESX.PlayerData.job = job
SendNUIMessage({action = “job”, job = job.label})
end)

Citizen.CreateThread(function()
while true do
Citizen.Wait(1000)

     if hudActive then
         SendNUIMessage({
             action = "setMoney", 
             money = data.money,
             playerId = GetPlayerServerId(PlayerId())
         })
     end
 end

end)

Citizen.CreateThread(function()
while true do
Citizen.Wait(500)

     local data = exports.■■■■■■■■■:GetRadioChannel(true)
    
     if data == nil or data == '' then
         SendNUIMessage({
             action = "setFunkState",
             active = false
         })
     else
         SendNUIMessage({
             action = "setFunkState",
             active = true
         })
     end
 end

end)

AddEventHandler(‘■■■■■■■■■_RadioChannelChanged’, function(radioName, isPrimary)
if radioName ~= nil then
SendNUIMessage({
action = “setFunkState”,
active = true
})
else
SendNUIMessage({
action = “setFunkState”,
active = false
})
end
end)

local loadedAmmo = false
local toggledArm = false

Citizen.CreateThread(function()
while true do
Citizen.Wait(500)

	if IsPedArmed(PlayerPedId(), 6) and not toggledArm then
        toggledArm = true
        loadedAmmo = true
        local ped = PlayerPedId()
        local _, weapon = GetCurrentPedWeapon(ped)
        local _, clipAmmo = GetAmmoInClip(ped, weapon)

        SendNUIMessage({
            action = "setAmmo",
            state = true,
            ammo = GetAmmoInPedWeapon(ped, weapon),
            clip = clipAmmo
        })
    elseif not IsPedArmed(PlayerPedId(), 6) and toggledArm then
        toggledArm = false
        if loadedAmmo then
            loadedAmmo = false
            SendNUIMessage({
                action = "setAmmo",
                state = false
            })
        end
        Citizen.Wait(500)
    end
end

end)

AddEventHandler(‘CEventGunShot’, function(entities, eventEntity, args)
if eventEntity == PlayerPedId() then
local ped = PlayerPedId()
local _, weapon = GetCurrentPedWeapon(ped)
local _, clipAmmo = GetAmmoInClip(ped, weapon)

    SendNUIMessage({
        action = "setAmmo",
        state = true,
        ammo = GetAmmoInPedWeapon(ped, weapon),
        clip = clipAmmo
    })
end

end)

Citizen.CreateThread(function()
while true do
local ped = PlayerPedId()

    if IsPedInAnyVehicle(ped) then
        local vehicle = GetVehiclePedIsIn(ped, false)
        
        if vehicle and GetPedInVehicleSeat(vehicle, -1) == ped then
            local carSpeed = math.ceil(GetEntitySpeed(vehicle) * 3.6)
            local carRPM = GetVehicleCurrentRpm(vehicle)
            local fuel = round(GetVehicleFuelLevel(vehicle), 1)
            
            SendNUIMessage({
                action = "carHud",
                state = true,
                speed = carSpeed,
                fuel = fuel,
                RPM = carRPM
            })
            SendNUIMessage({
                action = "carEngine",
                state = GetIsVehicleEngineRunning(vehicle)
            })
            if GetVehicleDoorLockStatus(vehicle) == 1 then
                SendNUIMessage({
                    action = "carLock",
                    state = true
                })
            else 
                SendNUIMessage({
                    action = "carLock",
                    state = false
                })
            end

            if GetEntitySpeed(vehicle) <= 10 then
                Citizen.Wait(350)
            elseif GetEntitySpeed(vehicle) <= 5 then
                Citizen.Wait(750)
            end
            Citizen.Wait(1)
        else
            SendNUIMessage({
                action = "carHud",
                state = false
            })
            Citizen.Wait(1000)
        end
    else
        SendNUIMessage({
            action = "carHud",
            state = false
        })
        Citizen.Wait(1000)
    end

    Citizen.Wait(0)
end

end)

function StartShowHudThread()
Citizen.CreateThread(function()
while true do
Citizen.Wait(1000)

		if ESX.PlayerData.job ~= nil then
			SendNUIMessage({action = "job", job = ESX.PlayerData.job.label})
		end
    end
end)

end

RegisterNetEvent(‘esx:playerLoaded’)
AddEventHandler(‘esx:playerLoaded’, function(xPlayer)
local data = xPlayer
local accounts = data.accounts

for _, account in pairs(accounts) do
	if account.name == "bank" then
		if account.money > 0 then
            SendNUIMessage({
                action = "setBankMoney", 
                money = account.money
            })
		end
	end
end
SendNUIMessage({action = "setVoiceLevel", level = 1})

SendNUIMessage({action = "setMoney", money = data.money, playerId = GetPlayerServerId(PlayerId())})
SendNUIMessage({action = "setBlackMoney", black_money = data.black_money, playerId = GetPlayerServerId(PlayerId())})

end)

RegisterNetEvent(‘■■■■■■■■■_MicStateChanged’)
AddEventHandler(‘■■■■■■■■■_MicStateChanged’, function(isMicrophoneMuted)
SendNUIMessage({
action = “setMicState”,
type = “muted”,
state = isMicrophoneMuted
})
end)

RegisterNetEvent(‘■■■■■■■■■_TalkStateChanged’)
AddEventHandler(‘■■■■■■■■■_TalkStateChanged’, function(SaltyisTalking)
SendNUIMessage({
action = “setMicState”,
type = “talk”,
state = SaltyisTalking
})
end)

RegisterNetEvent(‘esx:setAccountMoney’)
AddEventHandler(‘esx:setAccountMoney’, function(account)
if account.name == “money” then
SendNUIMessage({
action = “setMoney”,
money = account.money,
playerId = GetPlayerServerId(PlayerId())
})
end
end)

RegisterNetEvent(‘esx:setAccountMoney’)
AddEventHandler(‘esx:setAccountMoney’, function(account)
if account.name == “black_money” then
SendNUIMessage({
action = “setBlackMoney”,
money = account.black_money,
playerId = GetPlayerServerId(PlayerId())
})
end
end)

AddEventHandler(‘■■■■■■■■■_MicStateChanged’, function(isMicrophoneMuted)
micmuted = isMicrophoneMuted

if micmuted == false then
	SendNUIMessage({
        action = "setVoiceLevel", 
        level = voicelevel
    })
end

end)

AddEventHandler(‘■■■■■■■■■_VoiceRangeChanged’, function(voiceRange, index, availableVoiceRanges)
if voiceRange == 3.0 then
SendNUIMessage({
action = “setVoiceLevel”,
level = 2
})
voicelevel = 1
TriggerEvent(“cs_notify”, “■■■■■■■■■”, “Sprachreichweite: 3.5 Meter”, ‘info’, ‘3000’)
end

if voiceRange == 8.0 then
    SendNUIMessage({
        action = "setVoiceLevel", 
        level = 3
    })
    voicelevel = 2
    TriggerEvent("cs_notify", "■■■■■■■■■", "Sprachreichweite: 8 Meter", 'info', '3000')
end

if voiceRange == 15.0 then
    SendNUIMessage({
        action = "setVoiceLevel", 
        level = 4
    })
    voicelevel = 3
    TriggerEvent("cs_notify", "■■■■■■■■■", "Sprachreichweite: 15 Meter", 'info', '3000')
end

[if voiceRange == 32.0 then
    SendNUIMessage({
        action = "setVoiceLevel", 
        level = 1
    })
    voicelevel = 4
    TriggerEvent("cs_notify", "■■■■■■■■■", "Sprachreichweite: 32 Meter", 'info', '3000')
end]]

end)

RegisterNetEvent(‘esx:activateMoney’)
AddEventHandler(‘esx:activateMoney’, function(e)
SendNUIMessage({
action = “setMoney”,
money = e,
playerId = GetPlayerServerId(PlayerId())
})
end)

[RegisterCommand(“notifytest”, function()
TriggerEvent(“cs_notify”, “Title”, “Message”)
Wait(500)
TriggerEvent(“cs_notify”, “warning”, “Title”, “Message”)
Wait(500)
TriggerEvent(“cs_notify”, “error”, “Title”, “Message”)
Wait(500)
TriggerEvent(“cs_notify”, “success”, “Title”, “Message”)
end)

RegisterNetEvent(“cs_notify”)
AddEventHandler(“cs_notify”, function(type, title, message)
if title ~= nil and title ~= “” and message ~= nil and message ~= “” and type ~= nil and type ~= “” and isStringValid(type) and isStringValid(title) and isStringValid(message) then
SendNUIMessage({
action = “notify”,
type = type,
title = title,
message = message
})
PlaySoundFrontend(-1, “ATM_WINDOW”, “HUD_FRONTEND_DEFAULT_SOUNDSET”, 1)
end
end)

RegisterNetEvent(‘notifications’)
AddEventHandler(‘notifications’, function(color, title, message)
local type = “info”
if title ~= nil and title ~= “” and message ~= nil and message ~= “” and type ~= nil and type ~= “” and isStringValid(type) and isStringValid(title) and isStringValid(message) then
SendNUIMessage({
action = “notify”,
type = type,
title = title,
message = message
})
PlaySoundFrontend(-1, “ATM_WINDOW”, “HUD_FRONTEND_DEFAULT_SOUNDSET”, 1)
end
end)

blacklistedStrings = {
“<”,
“>”,
“script”,
“img”,
“video”,
“iframe”,
“audio”,
“mp3”,
“mp4”,
“ogg”,
“webm”
}]]

function isStringValid(string)
for _, bString in pairs(blacklistedStrings) do
if string.find(string.lower(string), string.lower(bString)) then
return false
end
end
return true
end

function round(number, decimals)
local power = 10^decimals
return math.floor(number * power) / power
end

local range = true
local voicerange

Citizen.CreateThread(function ()
while true do
Citizen.Wait(0)
if range then
local pedCoords = GetEntityCoords(PlayerPedId())
DrawMarker(1, pedCoords.x, pedCoords.y, pedCoords.z-1.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, voicerange, voicerange, 1.0, 205, 30, 118, 125, false, true, 2, nil, nil, false)
end
end
end)

RegisterNetEvent(‘■■■■■■■■■_VoiceRangeChanged’)
AddEventHandler(‘■■■■■■■■■_VoiceRangeChanged’,function (voiceRange,index,availableVoiceRanges)
voicerange = voiceRange
range = true
Citizen.Wait(1000)
range = false
end)

-Tempomat
local vehicleCruiser
local vehiclesCars = {0,1,2,3,4,5,6,7,8,9,10,11,12,17,18,19,20};

function has_value(tab, val)
for index, value in ipairs(tab) do
if value == val then
return true
end
end

 return false

end

RegisterKeyMapping(‘tempomat’, “Tempomat”, “keyboard”, “J”)
RegisterCommand(‘tempomat’, function(source, args)
local player = PlayerPedId()
local vehicle = GetVehiclePedIsIn(player, false)
local vehicleClass = GetVehicleClass(vehicle)

if GetPedInVehicleSeat(vehicle, -1) == player and (has_value(vehiclesCars, vehicleClass) == true) then
	
	local vehicleSpeedSource = GetEntitySpeed(vehicle)

	if vehicleCruiser == 'on' then
		vehicleCruiser = 'off'
		SetEntityMaxSpeed(vehicle,98.0)

         TriggerEvent('cs_notify', 'Tempomat', 'Der Tempomat wurde deaktiviert.', 'info', '3000')
	else
		vehicleCruiser = 'on'
		SetEntityMaxSpeed(vehicle, vehicleSpeedSource)
         TriggerEvent('cs_notify', 'Tempomat', 'Der Tempomat wurde aktiviert.', 'info', '3000')
	end
end

end, false)

Citizen.CreateThread(function()
while true do
Citizen.Wait(0)
HideHudComponentThisFrame(3) – CASH
HideHudComponentThisFrame(4) – MP CASH
HideHudComponentThisFrame(2) – weapon icon
HideHudComponentThisFrame(9) – STREET NAME
HideHudComponentThisFrame(7) – Area NAME
HideHudComponentThisFrame(8) – Vehicle Class
HideHudComponentThisFrame(6) – Vehicle Name
end
end)

11

Client.lua is uploaded

12

sorry that I’m so late anyway I think this event is never getting triggeret so instead of you use this event:

RegisterNetEvent(‘esx:activateMoney’)
AddEventHandler(‘esx:activateMoney’, function(e)
SendNUIMessage({
action = “setMoney”,
money = e,
playerId = GetPlayerServerId(PlayerId())
})
end)

could you create a callback that queries the money directly

server.lua:

ESX.RegisterServerCallback(“getMoney”, function(source, cb)
local xPlayer = ESX.GetPlayerFromId(source)
if xPlayer ~= nil then
local money = xPlayer.getAccount(‘money’).money
cb(money)
end
end)

trigger it now from the client lua in a thread so the money is getting updatet and so that there is no overflow you can make a wait of e.g. 2 seconds

Citizen.CreateThread(function()
while true do
Citizen.Wait(2000) – 2 seconds

    ESX.TriggerServerCallback("getMoney", function(money) 
        SendNUIMessage({
            action = "setMoney", 
            money = money, 
            playerId = GetPlayerServerId(PlayerId())
        })
    end)

end

end)

and in the js you can change the item.action == “setMoney” with this

if (item.action == “setMoney”) {
document.getElementById(“playerId2”).innerHTML = item.playerId;
document.getElementById(“playerMoney”).innerHTML = item.money + “$”;
}

hope it helps

13

So I tried it but it does not work maybe I did it wrong

So I created a folder called Server where I put the Server.lua with the code: ESX.RegisterServerCallback(“getMoney”, function(source, cb)
local xPlayer = ESX.GetPlayerFromId(source)
if xPlayer ~= nil then
local money = xPlayer.getAccount(‘money’).money
cb(money)
end
end)

__

Maybe it is better if you see it from your own eyes.
Sorry for my English btw, its not my native language.

chaoscityhud.rar (5.6 MB)
This File has a Password, I send it to you.

14

yeah i can look at it what is your native language?

15

German

16

alles klar ich hab deine probleme gefunden in der manifest wahr die server datei als client dateu angegeben und deine client.lua hatte viele fehler habe sie alle behoben passwort schicke ich dir privat
chaoscityhud.rar (5.6 MB)

1 Like
17

Danke dir ich werde es jetzt mal ausprobieren und das dann weiterleiten

18

Hat funktioniert

19

freut mich zuhören

1 Like
20

whats the passsowrd