Is there an easier way to be doing dxTextDraw?

[XeroXipher]

Hey guys... I used DXTextDraw for my OnScreenText...
This is an example of my local Time and Date Text and Branding:

 

function TimeDisplay() 
    local time = getRealTime()
	local hours = time.hour
	local minutes = time.minute
	local seconds = time.second
    local monthday = time.monthday
	local month = time.month
	local year = time.year
    local formattedTime = string.format("%04d-%02d-%02d %02d:%02d:%02d", year + 1900, month + 1, monthday, hours, minutes, seconds)


	dxDrawRectangle(x*1000, y*850, x*1050, y*890, tocolor(130, 130, 110, 100))
	--dxDrawText(""..formattedTime.."", x*1460, y*0.456, x*0.23206442594528, y*0.06119791790843, tocolor(184, 184, 43), 1.0, pricedown, "center", "center", , false, true, false, false)
	dxDrawText("Sneaky Owl", x*9, y*880, x*246, y*890, tocolor(255, 255, 255, 255), 1.00, "pricedown", "center", "center", false, false, true, false, false) -- Your Text Bottom Left
    dxDrawText("Local Time: "..formattedTime.."", x*1270, y*870, x*1320, y*890, tocolor(255,255,255,255), 0.65, "bankgothic", "center", "center", false, false, true, false, false)

end 
	
addEventHandler('onClientPreRender',getRootElement(), TimeDisplay)

For the most part I guess a lot at the x and y coordinates before deciding I like it.
I am making an Overlay for a Job System when in Vehicle...
It is in the beginning stages:
 

screenWidth, screenHeight = guiGetScreenSize()
px, py = 1600, 900
x, y =  (screenWidth/px), (screenHeight/py)

function DrawJobHud()
	dxDrawRectangle(x*1200, y*120, x*1400, y*400, tocolor(0, 0, 0, 150)) 
	dxDrawText("Job: RS Haul Driver", x*20, y*10, tocolor(255, 255, 255),1.0, "bankgothic", "center", "center", false, false, false, false, false)
end

addEventHandler("onClientRender", root, DrawJobHud)

This is probably really simple, but is there a way to do like local onScreenHud = dxDrawRectangle(etc) and then in dxDrawText use an x/y definition based off of the dxDrawRectangle (onScreenHudi)...

So instead of doing dxDrawText("Text", x*1210, y* 130... ) I could do dxDrawText("Text", x*20, y* 10.. ) (for 20 pixels right of the Draw Rectangle and 10 pixels down)?

[DarkStalker30]

You can save your coordinates to the variables, and the use them to build text.

Like:

local rectangleStartX = x*1200
local rectangleWidth = x*1400
dxDrawText(rectangleStartX + rectangleWidth + 10, etc...)

But i'm not sure right now about your coordinates, because "width" for dxDrawRectangle - it's not the endpoint, if wiki is right
And then code will be more easy, because for width you can use just "200".

As for take coordinates from rectangle - well, looks like it can't be done in MTA.

P.S. I'm not good in UI scripting, just trying to help with simple logic.

[DiSaMe]

You can make your own functions that operate in terms of your custom concepts, and use dxDrawRectangle/dxDrawText under the hood for actual drawing. An example:

function getCoords(coordSys, x, y)
    if coordSys then
        x, y = coordSys.x+x, coordSys.y+y
    end
    return x, y
end

function makeCoordSystem(parent, x, y)
    local finalX, finalY = getCoords(parent, x, y)
    return { x = finalX, y = finalY }
end

function drawText(coordSys, text, x, y)
    local finalX, finalY = getCoords(coordSys, x, y)
    dxDrawText(text, finalX, finalY)
end

function drawRectangle(coordSys, x, y, width, height, color)
    local finalX, finalY = getCoords(coordSys, x, y)
    dxDrawRectangle(finalX, finalY, width, height, color)
end

This implements a concept of coordinate system, the coordinate offset described by table with keys x and y. With this, you can do:

local onScreenHud = makeCoordSystem(false, x*1200, y*120) -- false means onScreenHud will be placed in absolute coordinates

function drawHUD()
    drawRectangle(onScreenHud, 0, 0, x*1400, y*400, tocolor(0, 0, 0, 150))
    drawText(onScreenHud, "Text", x*20, y*10)
end

Since makeCoordSystem has parent as first argument, even coordinate systems themselves can be positioned with respect to other coordinate systems:

local someInnerHud = makeCoordSystem(onScreenHud, x*20, x*40)

function drawInnerHUD()
    drawText(someInnerHud, "Text in the inner HUD", x*20, y*10)
end

It's all about coming up with the right abstractions. As an example, you could modify this to add width and height properties to coordinate systems, and use them in calculations so you wouldn't have to write x* and y* everywhere.

[XeroXipher]

2 hours ago, DarkStalker30 said:

You can save your coordinates to the variables, and the use them to build text.

Like:

local rectangleStartX = x*1200
local rectangleWidth = x*1400
dxDrawText(rectangleStartX + rectangleWidth + 10, etc...)

But i'm not sure right now about your coordinates, because "width" for dxDrawRectangle - it's not the endpoint, if wiki is right
And then code will be more easy, because for width you can use just "200".

As for take coordinates from rectangle - well, looks like it can't be done in MTA.

P.S. I'm not good in UI scripting, just trying to help with simple logic.

Thanks for helping me out there.
 

 

2 hours ago, DiSaMe said:

You can make your own functions that operate in terms of your custom concepts, and use dxDrawRectangle/dxDrawText under the hood for actual drawing. An example:

function getCoords(coordSys, x, y)
    if coordSys then
        x, y = coordSys.x+x, coordSys.y+y
    end
    return x, y
end

function makeCoordSystem(parent, x, y)
    local finalX, finalY = getCoords(parent, x, y)
    return { x = finalX, y = finalY }
end

function drawText(coordSys, text, x, y)
    local finalX, finalY = getCoords(coordSys, x, y)
    dxDrawText(text, finalX, finalY)
end

function drawRectangle(coordSys, x, y, width, height, color)
    local finalX, finalY = getCoords(coordSys, x, y)
    dxDrawRectangle(finalX, finalY, width, height, color)
end

This implements a concept of coordinate system, the coordinate offset described by table with keys x and y. With this, you can do:

local onScreenHud = makeCoordSystem(false, x*1200, y*120) -- false means onScreenHud will be placed in absolute coordinates

function drawHUD()
    drawRectangle(onScreenHud, 0, 0, x*1400, y*400, tocolor(0, 0, 0, 150))
    drawText(onScreenHud, "Text", x*20, y*10)
end

Since makeCoordSystem has parent as first argument, even coordinate systems themselves can be positioned with respect to other coordinate systems:

local someInnerHud = makeCoordSystem(onScreenHud, x*20, x*40)

function drawInnerHUD()
    drawText(someInnerHud, "Text in the inner HUD", x*20, y*10)
end

It's all about coming up with the right abstractions. As an example, you could modify this to add width and height properties to coordinate systems, and use them in calculations so you wouldn't have to write x* and y* everywhere.

And Thank You too... the first answer was easier to understand but the example of the second answer was what I was looking for.
Thanks.

[IIYAMA]

 

On 07/03/2025 at 20:35, XeroXipher said:

So instead of doing dxDrawText("Text", x*1210, y* 130... ) I could do dxDrawText("Text", x*20, y* 10.. )

There is also this useful function:

https://wiki.multitheftauto.com/wiki/GetScreenStartPositionFromBox

 

[XeroXipher]

6 hours ago, IIYAMA said:

 

There is also this useful function:

https://wiki.multitheftauto.com/wiki/GetScreenStartPositionFromBox

 

Thanks IIYAMA... I am looking it over... Also, I notice you're famous XD (You made the wiki page to the function you just described)

[IIYAMA]

 

34 minutes ago, XeroXipher said:

Also, I notice you're famous XD (You made the wiki page to the function you just described)

Haha, I also updated it just for you XD

[#\_oskar_/#]

local hudTexts = {}
function createHUDText(text, x, y, fontSize, bgColor, textColor)
  local hud = {text = text, x = x, y = y, fontSize = fontSize or 1.0, visible = true,bgColor = bgColor or tocolor(0, 0, 0, 200), textColor = textColor or tocolor(255, 255, 255)}
  table.insert(hudTexts, hud)
  return hud
end

function setHUDText(hud, newText) if hud then hud.text = newText end end
function setHUDVisible(hud, state) if hud then hud.visible = state end end

addEventHandler("onClientRender", root, function()
    for _, hud in ipairs(hudTexts) do
        if hud.visible then
            local w, h = dxGetTextWidth(hud.text, hud.fontSize, "bankgothic") + 20, dxGetFontHeight(hud.fontSize, "bankgothic") + 20
            dxDrawRectangle(hud.x, hud.y, w, h, hud.bgColor) dxDrawText(hud.text, hud.x, hud.y, hud.x + w, hud.y + h, hud.textColor, hud.fontSize, "bankgothic", "center", "center")
        end
    end
end)
--HudVariable = createHUDText("Displayed Text", X, Y, FontSize, BackgroundColor, TextColor) -- This function creates an on-screen text inside a box, with customization options for position, font size, background color, and text color.
--setHUDVisible(HudVariable,true or false) --show or hide any HUD element
--setHUDText(HudJob, "New Job Assigned!") -- Updates the text to "New Job Assigned!"

--Example

HudDateTime = createHUDText("Date & Time: --/--/-- --:--:-- --", 282, 145, 0.7, tocolor(50, 50, 150, 200), tocolor(255, 255, 255))
HudOwl = createHUDText("Sneaky Owl", 667, 217, 0.8, tocolor(100, 0, 100, 200), tocolor(255, 255, 0))
HudJob = createHUDText("Job: RS Haul Driver", 282, 289, 0.65, tocolor(0, 100, 0, 200), tocolor(255, 255, 255))
setTimer(function()
    local time = getRealTime()
    local year, month, day = time.year + 1900, time.month + 1, time.monthday
    local hours, minutes, seconds = time.hour, time.minute, time.second
    local ampm = (hours >= 12 and "PM" or "AM")
    hours = (hours % 12 == 0) and 12 or (hours % 12)
    setHUDText(HudDateTime, string.format("Date & Time: %04d-%02d-%02d %02d:%02d:%02d %s", year, month, day, hours, minutes, seconds, ampm))
end, 1000, 0)