├── README.md ├── client.lua ├── fxmanifest.lua ├── html ├── index.html ├── script.js └── style.css └── server.lua /README.md: -------------------------------------------------------------------------------- 1 |

Hi 👋, we are Compass Soft

2 |

Compass Car Hud

3 | 4 | - Compass Soft Car Hud **For FiveM** 5 | 6 | - Hello, this is our first script we shared. **We can say that it is a bit lacking in terms of optimization because we wanted to publish our script as soon as possible. We will of course make updates.** 7 | 8 | - 👨‍💻 **Discord Invite Link** [https://discord.gg/zxAMWdFntP](https://discord.gg/zxAMWdFntP) 9 | 10 | - **Features** 11 | - + 0.02 Client Side Resmon and No Server Side 12 | - + Standalone 13 | - + Seat Belt 14 | - + RPM Indicator 15 | - + Gear Indicator 16 | - + Speedometer 17 | - + Headlight Indicator 18 | - + Handbrake + Engine Health Indicator 19 | - + You can edit colors from Javascript and CSS files. 20 | - + Compatible with every screen resolution, if you send the problematic screen resolution or fix it yourself and send me a message, we can share it as an update.** 21 | 22 | - **Installation** 23 | - +Add the cs-carHud folder to your FiveM resources directory and server.cfg add "ensure cs-carHud" 24 | 25 |

Contact Me:

26 |

27 | zxAMWdFntP 28 |

29 | 30 |

Languages and Tools:

31 |

css3 html5 javascript

32 | 33 | 34 | **WITH TURBO INDICATOR VERSION** 35 | https://github.com/justmaiklas/cs-carhud/tree/feature/turbo-indicator 36 | 37 | 38 | -------------------------------------------------------------------------------- /client.lua: -------------------------------------------------------------------------------- 1 | local seatbeltToggle = false 2 | local antiSpam = false 3 | 4 | local function convertToPercentage(value) 5 | return math.ceil(value * 10000 - 2001) / 80 6 | end 7 | 8 | local function Normalize(value, min, max) 9 | return (value - min) / (max - min) 10 | end 11 | 12 | local function GetVehicleTurboPressureNormalized(vehicle) 13 | local hasTurbo = IsToggleModOn(vehicle,18) 14 | if not hasTurbo then return false end 15 | local normalizedTurboPressure = Normalize(GetVehicleTurboPressure(vehicle), -1, 1) 16 | return convertToPercentage(normalizedTurboPressure) 17 | end 18 | 19 | Citizen.CreateThread(function() 20 | while true do 21 | Citizen.Wait(70) 22 | local ply = PlayerPedId() 23 | if IsPauseMenuActive() then 24 | SendNUIMessage({ 25 | process = 'hide'; 26 | }) 27 | elseif IsPedInAnyVehicle(ply) then 28 | local veh = GetVehiclePedIsUsing(ply) 29 | local fuel = GetVehicleFuelLevel(veh) 30 | local gear = GetVehicleCurrentGear(veh) 31 | local speedo = (GetEntitySpeed(veh)*3.6) --mph *2.236936 32 | local rpm = GetVehicleCurrentRpm(veh) 33 | local rpmMat = convertToPercentage(rpm) 34 | local turboPressure = GetVehicleTurboPressureNormalized(veh) 35 | local engineHp = GetVehicleEngineHealth(veh) 36 | local handbrake = GetVehicleHandbrake(veh) 37 | local _, lightsOne, lightsTwo = GetVehicleLightsState(veh) 38 | local lightsState 39 | local indicatorsState = GetVehicleIndicatorLights(veh) 40 | if indicatorsState == 0 then 41 | indicatorsState = 'off' 42 | elseif indicatorsState == 1 then 43 | indicatorsState = 'left' 44 | elseif indicatorsState == 2 then 45 | indicatorsState = 'right' 46 | elseif indicatorsState == 3 then 47 | indicatorsState = 'both' 48 | end 49 | if (lightsOne == 1 and lightsTwo == 0) then 50 | lightsState = 1; 51 | elseif (lightsOne == 1 and lightsTwo == 1) or (lightsOne == 0 and lightsTwo == 1) then 52 | lightsState = 2; 53 | else 54 | lightsState = 0; 55 | end 56 | 57 | SendNUIMessage({ 58 | process = 'show'; 59 | fuelLevel = fuel; 60 | gearLevel = gear; 61 | speedLevel = speedo; 62 | rpmLevel = rpmMat; 63 | engineLevel = engineHp; 64 | handbrakeLevel = handbrake; 65 | seatbeltLevel = seatbeltToggle; 66 | lightsLevel = lightsState; 67 | indicatorsState = indicatorsState; 68 | turboPressureLevel = turboPressure; 69 | }) 70 | else 71 | SendNUIMessage({ 72 | process = 'hide'; 73 | }) 74 | end 75 | end 76 | end) 77 | 78 | 79 | RegisterKeyMapping('leftIndicator', 'Vehicle left indicator', 'keyboard', 'LEFT') 80 | RegisterKeyMapping('rightIndicator', 'Vehicle right indicator', 'keyboard', 'RIGHT') 81 | RegisterKeyMapping('bothIndicators', 'Vehicle both indicators', 'keyboard', 'UP') 82 | 83 | RegisterCommand('leftIndicator', function() 84 | if not IsPedInAnyVehicle(PlayerPedId()) then return end 85 | TriggerServerEvent('cs-carhud:syncIndicators', VehToNet(GetVehiclePedIsUsing(PlayerPedId())), 1) 86 | end) 87 | 88 | RegisterCommand('rightIndicator', function() 89 | if not IsPedInAnyVehicle(PlayerPedId()) then return end 90 | TriggerServerEvent('cs-carhud:syncIndicators', VehToNet(GetVehiclePedIsUsing(PlayerPedId())), 2) 91 | end) 92 | 93 | RegisterCommand('bothIndicators', function() 94 | if not IsPedInAnyVehicle(PlayerPedId()) then return end 95 | TriggerServerEvent('cs-carhud:syncIndicators', VehToNet(GetVehiclePedIsUsing(PlayerPedId())), 3) 96 | end) 97 | 98 | RegisterNetEvent("cs-carhud:syncIndicators", function(vehNetId, indicatorState) 99 | if not NetworkDoesEntityExistWithNetworkId(vehNetId) then return end 100 | local vehicle = NetToVeh(vehNetId) 101 | SetVehicleIndicators(vehicle, indicatorState) 102 | end) 103 | 104 | function SetVehicleIndicators(vehicle, indicator) 105 | local currentIndicator = GetVehicleIndicatorLights(vehicle) 106 | if currentIndicator == indicator then 107 | SetVehicleIndicatorLights(vehicle, 0, false) 108 | SetVehicleIndicatorLights(vehicle, 1, false) 109 | return 110 | end 111 | if vehicle and vehicle ~= 0 and vehicle ~= nil then 112 | local class = GetVehicleClass(vehicle) 113 | if class ~= 15 and class ~= 16 and class ~= 14 then 114 | if indicator == 1 then 115 | SetVehicleIndicatorLights(vehicle, 0, false) 116 | SetVehicleIndicatorLights(vehicle, 1, true) 117 | elseif indicator == 2 then 118 | SetVehicleIndicatorLights(vehicle, 0, true) 119 | SetVehicleIndicatorLights(vehicle, 1, false) 120 | elseif indicator == 3 then 121 | SetVehicleIndicatorLights(vehicle, 0, true) 122 | SetVehicleIndicatorLights(vehicle, 1, true) 123 | end 124 | end 125 | end 126 | end 127 | 128 | RegisterKeyMapping('seatbelt', 'Seat Belt', 'keyboard', 'K') 129 | 130 | RegisterCommand('seatbelt', function() 131 | local ply = PlayerPedId() 132 | local veh = GetVehiclePedIsIn(player, false) 133 | local vehicleCategories = GetVehicleClass(veh) 134 | if IsPedInAnyVehicle(ply) then 135 | if antiSpam == false then 136 | if vehicleCategories ~= 13 and vehicleCategories ~= 8 then 137 | seatbeltToggle = not seatbeltToggle 138 | if seatbeltToggle == true then 139 | antiSpam = true 140 | Wait(2000) 141 | antiSpam = false 142 | SetFlyThroughWindscreenParams(10000.0, 10000.0, 17.0, 500.0); 143 | while seatbeltToggle do 144 | DisableControlAction(0,75) 145 | Citizen.Wait(5) 146 | end 147 | else 148 | SetFlyThroughWindscreenParams(16.0, 19.0, 17.0, 2000.0) 149 | SetPedConfigFlag(PlayerPedId(), 32, true) 150 | seatbeltToggle = false 151 | antiSpam = true 152 | Wait(2000) 153 | antiSpam = false 154 | end 155 | end 156 | end 157 | end 158 | end, false) 159 | -------------------------------------------------------------------------------- /fxmanifest.lua: -------------------------------------------------------------------------------- 1 | fx_version 'adamant' 2 | 3 | game 'gta5' 4 | 5 | description 'compass script' 6 | 7 | version '1.0.0' 8 | 9 | client_script { 10 | 'client.lua' 11 | } 12 | 13 | server_script { 14 | 'server.lua' 15 | } 16 | 17 | ui_page { 18 | 'html/index.html' 19 | } 20 | 21 | files { 22 | 'html/index.html', 23 | 'html/style.css', 24 | 'html/script.js', 25 | } 26 | -------------------------------------------------------------------------------- /html/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Document 12 | 13 | 14 |
15 |
16 |
17 |

GEAR

18 |

KM/H

19 |
20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |
34 |
35 | 36 | 37 | 38 |
39 | 40 |
41 | 42 |
43 |
44 | 45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 |
61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /html/script.js: -------------------------------------------------------------------------------- 1 | window.addEventListener("message", function (event) { 2 | var incomData = event.data; 3 | switch (incomData.process) { 4 | case 'show': 5 | $('body').css({'display': `block`}) 6 | var speedsInt = incomData.speedLevel.toFixed() 7 | if (incomData.gearLevel == 0 && incomData.rpmLevel > 1) { 8 | $('#gear span').text(`R`) 9 | } else if (incomData.gearLevel == 0) { 10 | $('#gear span').text(`N`) 11 | } else if (incomData.gearLevel > 0) { 12 | $('#gear span').text(incomData.gearLevel) 13 | } 14 | $('#speeds span').text(speedsInt) 15 | $('.progressRpm').css({ 'width': incomData.rpmLevel + `%` }) 16 | if (!incomData.turboPressureLevel) { 17 | $('.progressInnerTurbo').hide() 18 | } else { 19 | $('.progressInnerTurbo').show() 20 | $('.progressTurbo').css({'width': incomData.turboPressureLevel + `%`}) 21 | } 22 | 23 | if (incomData.fuelLevel > 80.0) { 24 | $('.pump svg').css({'fill': `#209d05`}) 25 | $('.pump svg').css({'filter': `drop-shadow(3px 5px 2px #209d059c)`}) 26 | } else if (incomData.fuelLevel > 60.0) { 27 | $('.pump svg').css({'fill': `#86e62c`}) 28 | $('.pump svg').css({'filter': `drop-shadow(3px 5px 2px #86e62c9c)`}) 29 | } else if (incomData.fuelLevel > 40.0) { 30 | $('.pump svg').css({'fill': `#ebff0a`}) 31 | $('.pump svg').css({'filter': `drop-shadow(3px 5px 2px #ebff0a9c)`}) 32 | } else if (incomData.fuelLevel > 20.0) { 33 | $('.pump svg').css({'fill': `#f3ce03`}) 34 | $('.pump svg').css({'filter': `drop-shadow(3px 5px 2px #f3ce039c)`}) 35 | } else if (incomData.fuelLevel > 0.0) { 36 | $('.pump svg').css({'fill': `#fe0a0a`}) 37 | $('.pump svg').css({'filter': `drop-shadow(3px 5px 2px #fe0a0a9c)`}) 38 | } 39 | if (incomData.engineLevel > 800.0) { 40 | $('.engineHp svg').css({'fill': `#209d05`}) 41 | $('.engineHp svg').css({'filter': `drop-shadow(3px 5px 2px #209d059c)`}) 42 | } else if (incomData.engineLevel > 600.0) { 43 | $('.engineHp svg').css({'fill': `#86e62c`}) 44 | $('.engineHp svg').css({'filter': `drop-shadow(3px 5px 2px #86e62c9c)`}) 45 | } else if (incomData.engineLevel > 400.0) { 46 | $('.engineHp svg').css({'fill': `#ebff0a`}) 47 | $('.engineHp svg').css({'filter': `drop-shadow(3px 5px 2px #ebff0a9c)`}) 48 | } else if (incomData.engineLevel > 200.0) { 49 | $('.engineHp svg').css({'fill': `#f3ce03`}) 50 | $('.engineHp svg').css({'filter': `drop-shadow(3px 5px 2px #f3ce039c)`}) 51 | } else if (incomData.engineLevel > 0.0) { 52 | $('.engineHp svg').css({'fill': `#fe0a0a`}) 53 | $('.engineHp svg').css({'filter': `drop-shadow(3px 5px 2px #fe0a0a9c)`}) 54 | } 55 | if (incomData.handbrakeLevel) { 56 | $('.handbrake svg').css({'fill': `#eb2323`}) 57 | $('.handbrake svg').css({'filter': `drop-shadow(3px 5px 2px #eb232396)`}) 58 | } else { 59 | $('.handbrake svg').css({'fill': `#e0e0e0`}) 60 | $('.handbrake svg').css({'filter': `drop-shadow(3px 5px 2px #dbdbdb96)`}) 61 | } 62 | if (incomData.lightsLevel == 1) { 63 | $('.headlights svg').css({'fill': `#209d05`}) 64 | $('.headlights svg').css({'filter': `drop-shadow(3px 5px 2px #209d059c)`}) 65 | } else if (incomData.lightsLevel == 2) { 66 | $('.headlights svg').css({'fill': `#0fa4e9`}) 67 | $('.headlights svg').css({'filter': `drop-shadow(3px 5px 2px #0fa4e99c)`}) 68 | } else if (incomData.lightsLevel == 0) { 69 | $('.headlights svg').css({'fill': `#e0e0e0`}) 70 | $('.headlights svg').css({'filter': `drop-shadow(3px 5px 2px #e0e0e09c)`}) 71 | } 72 | if (incomData.seatbeltLevel) { 73 | $('.seatbelt svg').css({'fill': `#209d05`}) 74 | $('.seatbelt svg').css({'filter': `drop-shadow(3px 5px 2px #209d059c)`}) 75 | } else { 76 | $('.seatbelt svg').css({'fill': `#e0e0e0`}) 77 | $('.seatbelt svg').css({'filter': `drop-shadow(3px 5px 2px #e0e0e09c)`}) 78 | } 79 | if (incomData.indicatorsState) { 80 | if (incomData.indicatorsState == 'off') { 81 | $('.indicator.mxPack').removeClass('active') 82 | $('#bothIndicators').show() 83 | $('#leftIndicator').hide() 84 | $('#rightIndicator').hide() 85 | } else if (incomData.indicatorsState == 'left') { 86 | $('.indicator.mxPack').addClass('active') 87 | $('#bothIndicators').hide() 88 | $('#leftIndicator').show() 89 | $('#rightIndicator').hide() 90 | } else if (incomData.indicatorsState == 'right') { 91 | $('.indicator.mxPack').addClass('active') 92 | $('#bothIndicators').hide() 93 | $('#leftIndicator').hide() 94 | $('#rightIndicator').show() 95 | } else if (incomData.indicatorsState == 'both') { 96 | $('.indicator.mxPack').addClass('active') 97 | $('#bothIndicators').show() 98 | $('#leftIndicator').hide() 99 | $('#rightIndicator').hide() 100 | } 101 | } 102 | break 103 | case 'hide': 104 | $('body').css({'display': `none`}) 105 | break 106 | } 107 | }); 108 | -------------------------------------------------------------------------------- /html/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | display: none; 8 | } 9 | 10 | .mainBody { 11 | width: 100%; 12 | height: 100%; 13 | } 14 | 15 | .progressBorder { 16 | position: absolute; 17 | bottom: 5vh; 18 | right: 2vw; 19 | } 20 | 21 | .progressInnerRpm{ 22 | width: 20vw; 23 | height: 5vh; 24 | background: rgba(63, 63, 63, 0.5); 25 | -webkit-clip-path: url(#my-clip-path); 26 | clip-path: url(#my-clip-path); 27 | overflow: hidden; 28 | position: absolute; 29 | top: 0; 30 | right: 0; 31 | } 32 | 33 | .progressInnerTurbo{ 34 | width: 20vw; 35 | height: 5vh; 36 | background: rgba(63, 63, 63, 0.5); 37 | -webkit-clip-path: url(#turboPressurePath); 38 | clip-path: url(#turboPressurePath); 39 | overflow: hidden; 40 | position: absolute; 41 | top: 0; 42 | right: 0; 43 | } 44 | 45 | .progressRpm{ 46 | width: 25%; 47 | height: 5vh; 48 | background: rgb(241, 19, 74); 49 | transition: 200ms; 50 | } 51 | 52 | .progressTurbo{ 53 | width: 50%; 54 | height: 5vh; 55 | background: rgb(247, 148, 0); 56 | transition: 200ms; 57 | filter: drop-shadow(3px 5px 2px rgba(247, 148, 0, 0.588)); 58 | } 59 | 60 | 61 | .svg { 62 | width: 0; 63 | height: 0; 64 | } 65 | 66 | .vehObject { 67 | display: flex; 68 | } 69 | 70 | .vehObject svg { 71 | width: 1.5vw; 72 | } 73 | 74 | .headlights svg { 75 | fill: #0fa4e9; 76 | filter: drop-shadow(3px 5px 2px rgba(0, 0, 0, 0.4)); 77 | } 78 | 79 | .handbrake svg { 80 | fill: #e0e0e0; 81 | filter: drop-shadow(3px 5px 2px #dbdbdb96); 82 | } 83 | 84 | .engineHp svg { 85 | fill : rgb(170, 185, 104); 86 | filter: drop-shadow(3px 5px 2px rgba(0,0,0,0.4)) 87 | } 88 | 89 | .pump svg { 90 | fill: #8eda50; 91 | filter: drop-shadow(3px 5px 2px #8eda509a); 92 | } 93 | 94 | .seatbelt svg { 95 | fill: #8eda50; 96 | filter: drop-shadow(3px 5px 2px #8eda509a); 97 | } 98 | 99 | .indicator svg { 100 | fill: #ffffff; 101 | filter: drop-shadow(3px 5px 2px #ffffff9a); 102 | } 103 | 104 | .indicator.active svg { 105 | fill: #00ff37; 106 | filter: drop-shadow(3px 5px 2px #8eda509a); 107 | animation: blinker 1s steps(2, start) infinite; 108 | } 109 | 110 | .mxPack { 111 | margin-right: auto; 112 | margin-left: auto; 113 | } 114 | 115 | .speedo { 116 | width: 100%; 117 | font-weight: 600; 118 | font-family: 'Montserrat'; 119 | font-size: 1vw; 120 | place-content: space-around; 121 | display: flex; 122 | } 123 | 124 | .speedo .speeds { 125 | display: flex; 126 | align-items: center; 127 | width: 50%; 128 | text-align: center; 129 | } 130 | 131 | .speedo span { 132 | color :rgb(241, 19, 74); 133 | font-size: 1.5vw; 134 | width: 50%; 135 | } 136 | 137 | .speedo .gear { 138 | display: flex; 139 | align-items: center; 140 | width: 50%; 141 | text-align: center; 142 | justify-content: flex-end; 143 | } 144 | 145 | .speedo p { 146 | color: white; 147 | width: 50%; 148 | } 149 | 150 | @keyframes blinker { 151 | to { 152 | visibility: hidden; 153 | } 154 | } 155 | 156 | .outer { 157 | width: 20vw; 158 | height: 5vh; 159 | position: relative; 160 | } -------------------------------------------------------------------------------- /server.lua: -------------------------------------------------------------------------------- 1 | RegisterServerEvent("cs-carhud:syncIndicators", function(vehNetId, indicatorState) 2 | TriggerClientEvent("cs-carhud:syncIndicators", -1, vehNetId, indicatorState) 3 | end) --------------------------------------------------------------------------------