[FREE] [Release] [DISCONTINUED] Vrp Custom HUD UI | v0.2 Beta

Klay4 · September 30, 2018, 4:18am

Hi,
This is my first job with the css code. I hope you enjoy it.
If you have any problems contact me on discord (Klay4#4429).

VERSION 1.0 IS COMING

Info
In the hud you can see:

Money
Bank Money
Job Name
Job Icon
Level of the Voice

Installation:

Direct Download: GitHub - Klay4/Vrp-Custom-HUD-UI-v0.2-Beta-

OR

Replace resources\vrp\cfg\money.lua with this code


local cfg = {}

-- start wallet/bank values
local cfg = {}

-- start wallet/bank values
cfg.open_wallet = 1000
cfg.open_bank = 20000


cfg.display_css = [[
.div_money{
  position: absolute;
  top: 50px;
  right: 20px;
  color: white;
  background-color: rgba(0,0,0,0.40);
  padding: 7px;
  max-width: 170px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.533333px 0.833333px 0px, rgb(0, 0, 0) -0.416667px 0.916667px 0px, rgb(0, 0, 0) -0.983333px 0.133333px 0px, rgb(0, 0, 0) -0.65px -0.75px 0px, rgb(0, 0, 0) 0.283333px -0.966667px 0px, rgb(0, 0, 0) 0.966667px -0.283333px 0px;
}
.div_bmoney{
  position: absolute;
  top: 100px;
  right: 20px;
  background-color: rgba(0,0,0,0.40);
  padding: 7px;
  max-width: 170px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: bold;
  color: #FFFFFF;
  text-shadow: rgb(0, 0, 0) 1px 0px 0px, rgb(0, 0, 0) 0.533333px 0.833333px 0px, rgb(0, 0, 0) -0.416667px 0.916667px 0px, rgb(0, 0, 0) -0.983333px 0.133333px 0px, rgb(0, 0, 0) -0.65px -0.75px 0px, rgb(0, 0, 0) 0.283333px -0.966667px 0px, rgb(0, 0, 0) 0.966667px -0.283333px 0px;
}
  .div_money .symbol{

  content: url('https://i.imgur.com/doXvOm6.png'); 
 
}

.div_bmoney .symbol{
  content: url('https://i.imgur.com/glLG7gH.png');
  
}
]]

return cfg

Put in your server [vRP] Job icons for vRP jobs

Replace resources\vrp_job_display\cfg\display.lua with this code

--[[
    FiveM Scripts
    Copyright C 2018  Sighmir

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    at your option any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
]]

--      height: 50px;
--      width: 50px;
--	  top: 180px;
--      right: 20px;

--  top: 155px;
--  right: 20px;
--  font-size: 20px;
-- 240
-- 270

local cfg = {}

cfg.firstjob = false -- set this to your first job, for example "citizen", or false to disable

-- text display css
cfg.display_css = [[
.div_job{
  position: absolute;
  top: 150px;
  right: 20px;
  background-color: rgba(0,0,0,0.40);
  padding: 7px;
  max-width: 200px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: bold;
  color: white;
}
]]

-- icon display css
cfg.icon_display_css = [[
.div_job_icon{
  position: absolute;
}
]]

-- list of ["group"] => css for icons
cfg.group_icons = {
  ["LAPD Agente"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Police UnderCover"] = [[
    .div_job_icon{
      content: url(https://imgur.com/mvGAL20.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Police Captain"] = [[
    .div_job_icon{
      content: url(https://imgur.com/FA2AfIf.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["SWAT"] = [[
    .div_job_icon{
      content: url(https://imgur.com/74ujFr7.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Agent FBI"] = [[
    .div_job_icon{
      content: url(https://imgur.com/wBRfNaD.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["LAPD Sergente"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Detective"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Cadet"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Highway Patrol"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Sceriffo Vice"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["LAPD Vice"] = [[
    .div_job_icon{
      content: url(https://imgur.com/wkRXkJe.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Dispatcher"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["LAPD Capo"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Erch26X.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Sceriffo"] = [[
    .div_job_icon{
      content: url(https://imgur.com/wpmLqcM.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Pescatore"] = [[
    .div_job_icon{
      content: url(https://imgur.com/NZqhlak.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Pilota Cargo"] = [[
    .div_job_icon{
      content: url(https://imgur.com/srmr2ZH.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Justeat"] = [[
    .div_job_icon{
      content: url(https://imgur.com/NXjU4YC.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["UPS"] = [[
    .div_job_icon{
      content: url(https://imgur.com/NXjU4YC.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Trasporto Medicinali"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Mb1EyZb.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Pilota AirLine"] = [[
    .div_job_icon{
      content: url(https://imgur.com/zx0Lh2U.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Contrabbandiere Armi"] = [[
    .div_job_icon{
      content: url(https://imgur.com/2iMA2Ys.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["EMS Capo"] = [[
    .div_job_icon{
      content: url(https://imgur.com/KhhGjZA.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["EMS Paramedico"] = [[
    .div_job_icon{
      content: url(https://imgur.com/ipRqg4f.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["EMS Vice"] = [[
    .div_job_icon{
      content: url(https://imgur.com/KhhGjZA.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["EMS Search and Rescue"] = [[
    .div_job_icon{
      content: url(https://imgur.com/UHTCeuA.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
    ["Cacciatore di Taglie"] = [[
    .div_job_icon{
      content: url(https://imgur.com/BrHTyVN.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Meccanico"] = [[
    .div_job_icon{
      content: url(https://imgur.com/JZiYJVc.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Forger"] = [[
    .div_job_icon{
      content: url(https://imgur.com/NiK0A6v.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Taxi"] = [[
    .div_job_icon{
      content: url(https://imgur.com/4lwNwkm.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Sfaticato"] = [[
    .div_job_icon{
      content: url(https://cdn2.iconfinder.com/data/icons/mixed-rounded-flat-icon/512/briefcase-512.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Operatore Ecologico"] = [[
    .div_job_icon{
      content: url(https://imgur.com/deGxeWT.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Avvocato"] = [[
    .div_job_icon{
      content: url(https://imgur.com/K0CQXbA.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Trasporto Denaro"] = [[
    .div_job_icon{
      content: url(https://imgur.com/Q541aRG.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Spacciatore"] = [[
    .div_job_icon{
      content: url(https://imgur.com/XeXAFsr.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Hacker"] = [[
    .div_job_icon{
      content: url(https://imgur.com/MIkf9nd.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Giudice"] = [[
    .div_job_icon{
      content: url(https://imgur.com/KASiV3L.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Pizza"] = [[
    .div_job_icon{
      content: url(https://imgur.com/oGERpi4.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Mushroom Science"] = [[
    .div_job_icon{
      content: url(https://imgur.com/6QQEZIz.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
    ["Hooker"] = [[
    .div_job_icon{
      content: url(http://icons.iconarchive.com/icons/th3-prophetman/gta/256/Hooker-icon.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Builder"] = [[
    .div_job_icon{
      content: url(https://imgur.com/WqE090t.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],
  ["Poacher"] = [[
    .div_job_icon{
      content: url(https://imgur.com/JK6fWo2.png);
      height: 40px;
      width: 40px;
	  top: 200px;
      right: 20px;
    }
  ]],-- this is an example, add more under it using the same model, leave the } at the end.
}
return cfg

Download FiveM-Scripts/vrp/vrp_voice_display at master · Sighmir/FiveM-Scripts · GitHub

Replace resources\vrp_voice_display\cfg\display.lua with this code

--[[
    FiveM Scripts
    Copyright C 2018  Sighmir

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published
    by the Free Software Foundation, either version 3 of the License, or
    at your option any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
]]

-- Change key on client.lua, default key is PAGE UP

cfg = {
  { -- Default distance to voice
    distance = 7.001,
    text = "Normale", 
    css = [[
      .div_voice_text{
        position: absolute;
        top: 10200px;
        left: 20px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.80);
	  }
	  .div_voice_icon{
        position: absolute;
        content: url(https://i.imgur.com/42ctn5a.png);
        height: 40px;
        width: 40px;
	    top: 200px;
        right: 80px;
      }
    ]]
  },
  { -- High distance to voice
    distance = 16.001,
    text = "Urlo",
    css = [[
      .div_voice_text{
        position: absolute;
        top: 10200px;
        right: 20px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.80);
	  }
	  .div_voice_icon{
        position: absolute;
        content: url(https://i.imgur.com/uz7FKZf.png);
        height: 40px;
        width: 40px;
	    top: 200px;
        right: 80px;
      }
    ]]
  },
  { -- Low distance to voice
    distance = 3.001,
    text = "Sussurro",
    css = [[
      .div_voice_text{
        position: absolute;
        top: 10200px;
        right: 20px;
        font-size: 20px;
        font-weight: bold;
        color: white;
        text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.80);
	  }
	  .div_voice_icon{
        position: absolute;
        content: url(https://i.imgur.com/Suh0bUI.png);
        height: 40px;
        width: 40px;
	    top: 200px;
        right: 80px;
      }
    ]]
  }
}

return cfg

Script Main Language
Italian

100% working on Dunko servers!

Discord
Klay4 #4429

Klay4 · September 30, 2018, 6:16am

What? Please can you speak english?

Knight_Marshal · September 30, 2018, 6:26am

I run a custom framework so I wouldn’t particularly use it. However, it’s always nice to release resources for people as they sure do appreciate it. I’m sure people would find use for it, but I’d expect criticism at any level for any release no matter what it is. Just keep that in mind if and when you release it.

ZenZoop · September 30, 2018, 6:30am

I would so use it if you released it Klay4

Klay4 · September 30, 2018, 11:33am

Thank you, tomorrow i relase it in Beta!

Klay4 · September 30, 2018, 11:33am

Thank you, tomorrow i relase it.

Naifen · September 30, 2018, 12:26pm

Klay4 nice HUD UI respect from me

Nana · September 30, 2018, 1:37pm

And if you add (adapt) fuel and veh hp status its would be perfect

Klay4 · September 30, 2018, 2:32pm

Thank you very much

Klay4 · September 30, 2018, 2:33pm

certainly, I will try to add them.

Nana · September 30, 2018, 2:39pm

Thanks! im very wait this

ZenZoop · September 30, 2018, 6:00pm

Fantastic!! Thanks Klay4, I look forward to using it.

Klay4 · September 30, 2018, 6:14pm

Thank you very much, tomorrow i relase it!

ForasterowSP · September 30, 2018, 6:24pm

Sorry, I’m the guy who called you on the discord wanting the script.

Klay4 · October 1, 2018, 3:04pm

Do you use the dunko?

Klay4 · October 1, 2018, 3:18pm

Please send me the old money.lua file

Strixx1 · October 1, 2018, 3:30pm

money.lua (903 Bytes)

Klay4 · October 1, 2018, 3:33pm

Because in the Psycho there isn’t a Bank hud. Where do you look your Bank Money in game?

Strixx1 · October 1, 2018, 3:34pm

in a bank “Least 20 characters”

Klay4 · October 1, 2018, 3:37pm

You have to create a new section in the cfg for the Bank Money, then you use my codes in the money.lua css