DarkRP HUD Spacing

[SkyJSMC]

Hello peoples, so I recently began working on a HUD and this forum has been extremely helpful with any errors I have, I have learned a lot just from posting a couple threads so thank you!

I have one issue that I would like some help on, basically I need to create spacing between each element on the HUD.

https://files.facepunch.com/forum/upload/341720/cef39230-a1ab-42b8-8ac8-208a55e8ca67/rp_downtown_v4c_v40003.jpg

Where the lines for the spacing are (Between the job, health, armor etc) I need them to automatically move over depending on the length of the job name. I've tinkered around with it but I've only been able to make a basic if statement that cuts off the job name when it reaches a certain length and replaces it with "...". Any help would be appreciated!

Heres the code:

surface.CreateFont( "Apollo",
{
    font        = "Roboto-Light",
    size        = 16,
    weight      = 800,
})

surface.CreateFont( "ApolloSmall", 
{
    font        = "Roboto-Light",
    size        = 12,
    weight      = 800,
})

surface.CreateFont( "ApolloLarge",
{
    font        = "Roboto-Light",
    size        = 17,
    weight      = 800,
}) 

local function Base()

-- Declaring Variables 

local DrawHealth = LocalPlayer():Health() or 0 
local TextHealth = LocalPlayer():Health() or 0 
local DrawArmor = LocalPlayer():Armor() or 0 
local TextArmor = LocalPlayer():Armor() or 0 
local wallet = LocalPlayer():getDarkRPVar("money")
local plysalary = LocalPlayer():getDarkRPVar("salary") or "Error" 
local plyjob = LocalPlayer():getDarkRPVar("job") or "Error"

-- If statements to fix the HP/Armor bars becoming too large.

if DrawHealth > 100 then DrawHealth = 100 end 
if DrawHealth < 0 then DrawHealth = 0 end 
if DrawArmor > 100 then DrawArmor = 100 end
if DrawArmor < 0 then DrawArmor = 0 end

-- Creating Materials 

local myid = Material( "blackline/id.png", "smooth" )
local heart = Material( "blackline/heart.png", "smooth" )
local shield = Material( "blackline/shield.png", "smooth" )
local jobicon = Material( "blackline/briefcase.png", "smooth" )
local cmat = Material( "blackline/cash.png", "smooth" )
local cmat2 = Material( "blackline/cash2.png", "smooth" )
local burger = Material( "blackline/burger.png", "smooth" )

-- Drawing HUD Boxes 

    surface.SetFont("Apollo")
    surface.SetTextColor(255, 255, 255, 255)
    surface.SetDrawColor(25, 25, 25, 245)
    surface.DrawRect(0, 0, ScrW() - 0, ScrH() / 30)                                    -- Main HUD box 

    surface.SetDrawColor(255, 255, 255, 255)
    surface.DrawLine(ScrW() / 1522 + 108, 0, ScrW() / 1522 + 108, ScrH() / 30)                    -- Line seperation 
    surface.DrawLine(ScrW() / 1453 + 180, 0, ScrW() / 1453 + 180, ScrH() / 30)                     -- Line seperation 

-- Drawing Watermark

    surface.SetTextPos(ScrW() - 115, ScrH() / 50 - 10)
    surface.SetTextColor(0, 255, 0, 255)
    surface.DrawText("Apollo Networks")                                              

    surface.SetDrawColor(255, 255, 255, 255 )                                  
    surface.DrawOutlinedRect(ScrW() / 2000, ScrH() / 2000, ScrW() * 1, ScrH() / 30)    -- White border for HUD

-- Drawing Job Name 
if string.len( plyjob ) > 15 then
    plyjob = string.sub ( plyjob, 1, 10 ) .. " ..."
else
    plyjob = string.format ( "%9s" , plyjob ) 
end

    surface.SetFont("Apollo")
    surface.SetTextColor(255, 255, 255, 255)
    surface.SetTextPos(ScrW() / 1570 + 25, ScrH() / 50 - 10)                                     -- Text position for job name
    surface.DrawText(plyjob)                                                            -- Drawing job name
    surface.SetDrawColor(255, 255, 255, 255)  

-- Drawing Health

    surface.SetTextPos(ScrW() / 1495 + 137, ScrH() / 50 - 10)                                     -- Text position for drawing health.
    surface.SetTextColor(255, 145, 145, 255)                                              
    surface.DrawText(DrawHealth .. "%")
    surface.SetDrawColor(255, 145, 145, 255)
    surface.SetMaterial(heart)
    surface.DrawTexturedRect(ScrW() / 1518 + 113, ScrH() / 125, ScrW() / 1580 + 20, ScrH() / 50 )  -- Health Icon 

-- Drawing Armor

    surface.SetTextPos(ScrW() / 1430 + 205, ScrH() / 50 - 10)
    surface.SetTextColor(155, 193, 255, 255)
    surface.SetDrawColor(255, 255, 255, 255)
    surface.DrawText(DrawArmor .. "%")
    surface.DrawLine(ScrW() / 1388 + 250, 0, ScrW() / 1388 + 250, ScrH() / 30)
    surface.SetDrawColor(155, 193, 255, 255)
    surface.SetMaterial(shield)
    surface.DrawTexturedRect(ScrW() / 1452 + 185, ScrH() / 125, ScrW() / 85, ScrH() / 50 )    -- Armor Icon 

-- Job Icon

    surface.SetDrawColor(255, 255, 255, 255)
    surface.SetMaterial(jobicon)
    surface.DrawTexturedRect(ScrW() / 1585 + 5, ScrH() / 130, ScrW() / 95, ScrH() / 50 )    -- Job Icon 

-- Drawing Wallet

   surface.SetDrawColor(255, 255, 255, 255)
   surface.SetTextColor(181, 255, 181, 255)    

   surface.SetTextPos(ScrW() / 1380 + 258, ScrH() / 50 - 10)
   surface.DrawText("$" .. string.Comma(wallet)) 

end
hook.Add("HUDPaint", "ApolloHUD", Base)

[cptn.sheep]

i assume you want this: surface.GetTextSize

[SkyJSMC]

That part I understand but I don't know how to incorporate it into a function that will calculate the spacing between each element in the HUD. That's where my problem lies. If someone could possibly explain the concept or give me an example that would be fantastic.

[cptn.sheep]

would look something like this:
surface.SetFont("Apollo")
local jobwidth, jobheight = surface.GetTextSize( plyjob )

-- hud boxes
--...
surface.DrawLine(jobwidth + 20, 0, jobwidth + 20, ScrH() / 30) -- add the width on to whatever spacing youre using
--...

-- drawing job text stuff

--...

-- drawing other text stuff
--...
surface.SetTextPos(jobwidth + 20 , ScrH() / 50 - 10) -- again, add the width on to whatever spacing youre using
--...

in this situation it may be easier to understand by adding more variables to define the width of the other boxes and icons rather than just putting in the pixel positions, also why are you using the screen width to define the position of these things?? basically just add the spacing and icon widths onto the job width when defining an elements position.

[Septonix]

An easy way of doing this is by using : surface.GetTextSize

All you need to do is set the positions by using ICON_WIDTH + THE_VALUE_FROM_GETTEXTSIZE + YOUR_START_POINT

Example:

draw.SimpleText( "Hello", "Trebuchet24", 24+TEXT_WIDTH+30, 2, Color( 255,255,255 ) )

[SkyJSMC]

I tried yours out but the text changes position every time the job changes, sometimes it goes out of the HUD and sometimes it it fits, I'm unsure why its doing this.

https://files.facepunch.com/forum/upload/341720/ca06b992-3a57-41bd-8db2-2b5b2768c99f/rp_downtown_v4c_v40004.jpg

[cptn.sheep]

the whole "jobwidth + 20" i did as an example, you have to go through each draw line and re position based on the jobwidth and the width of the spacing youre using, ie change the 20 and add the change to other surface.DrawLine surface.SetTextPos parts yourself (im not going to rewrite your code for you).

[Livaco]

I did something like this recently for a custom job. How I did it was like this:
local HPPos = surface.GetTextSize(LocalPlayer():Nick()) + ScrW() * 0.1 -- Get size of LocalPlayer():Nick since it's being drawn before the health, and add ScrW() * 0.1 too it.

draw.SimpleText(LocalPlayer():Nick(), "FibreHUD_1", ScrW() * 0.035, (ScrH() * 0.06) / 2, Color(255, 255, 255, 255), 0, 1) -- Doesn't need a dynamic pos because it's the first one.
draw.SimpleText(LocalPlayer():Health(), "FibreHUD_1", HPPos, (ScrH() * 0.06) / 2, Color(255, 255, 255, 255), 0, 1) -- Draw the HP after, since it's after it uses HPPos to make sure it fits and doesn't overlap with anything.