Fix dxDraw elements' size for any resolution

[koragg]

Heyo, so recently I got an awesome toptimes resource from a friend and today I fixed the positions of all elements drawn with dxDraw so that the toptimes window doesn't go outside of screen boundary on any resolution. So far, so good. But there is one problem, I don't know how to fix the elements' size to be same for all resolutions. I tried with something like " local x_,y_ = x/1680,y/1080 " and put " *y_ " after the size but it still looks ugly, also tried more combinations such as " x/1440,y/900 " and so on, to no success. Below is just the function which draws the F5 tops window, I always had trouble with fixing the size and here i am again, same problem...for the Nth time. Any help is appreciated.

sX,sY = guiGetScreenSize()

function drawToptimesIntreface()
	local x,y = guiGetScreenSize()
    if toptimes.animState == "closed" then
        local tick = getTickCount() - toptimes.tick
        local progress = tick/1000
		toptimes.anim = interpolateBetween(0,0,0,390,0,0,progress,"OutBack")
    else
        local tick = getTickCount() - toptimes.tick
        local progress = tick/1000
		toptimes.anim = interpolateBetween(390,0,0,0,0,0,progress,"InBack")
    end
    local clanColor 		= tocolor(255, 205, 0, 255)	-- Clan Color	
	local titleColor 		= tocolor(0, 255, 255, 255)	-- Toptimes Title
	local displayColor 		= tocolor(0, 0, 0, 150)			-- Toptimes Blackground
    if toptimes.state then
        local sY = sY-toptimes.anim*1.2
		dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.5, x*0.1979166666666667, y*0.0231481481481481, clanColor)
		dxDrawText("Toptimes - "..toptimes.mapname, sX-x*0.6713541666666667, (sY/2)-y*0.8509259259259259,sX-x*0.0046875, (sY/2)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","center","center",true)
		dxDrawText("Toptimes - "..toptimes.mapname, sX-x*0.671875, (sY/2)-y*0.8518518518518519, sX-x*0.0052083333333333, (sY/2)-y*0.125, titleColor, 1, "default-bold", "center","center",true)
		dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.4768518518518519, x*0.1979166666666667, y*0.1666666666666667, displayColor)
        for i=1,9 do
			-- Show when player have toptime in any map
			dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)+((i-1)*20)-y*0.4759259259259259, x*0.1979166666666667, y*0.017022792022792, tocolor(255,255,255,toptimes.color[i]))
		end
		for i=1,9 do
			-- Shadow
			dxDrawText(i..".          "..removeColorCoding(toptimes.label[i]), sX-x*0.4310416666666667, (sY/2)+((i-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((i)*20)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.time[i], sX-x*0.3132291666666667, (sY/2)+((i-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((i)*20)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.data[i], sX-x*0.2744791666666667, (sY/2)+((i-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((i)*20)-y*0.1240740740740741, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
			--
			dxDrawText(i..".          "..toptimes.label[i], sX-x*0.4315625, (sY/2)+((i-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((i)*20)-y*0.125, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.time[i], sX-x*0.31375, (sY/2)+((i-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((i)*20)-y*0.125, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.data[i], sX-x*0.275, (sY/2)+((i-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((i)*20)-y*0.125, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            if toptimes.country[i] ~= "" then
                if fileExists(":admin/client/images/flags/"..toptimes.country[i]..".png") then
                    dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((i-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/"..toptimes.country[i]..".png", tocolor(255,255,255,255))
                end
            else
			    if fileExists(":admin/client/images/flags/gtasa.png") then
                    dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((i-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/gtasa.png", tocolor(255,255,255,255))
                end
			end
        end
		if toptimes.personal[1] then
            dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.3101851851851852, x*0.1979166666666667, y*0.017592592592596, displayColor)
            dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.3089506172839506, x*0.1979166666666667, y*0.0166666666666667, tocolor(255,255,255,100))
			-- Shadow
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..removeColorCoding(toptimes.personal.name), sX-x*0.4341666666666667, (sY/2)-y*0.6673611111111111, sX-x*0.0244791666666667, (sY/2)+y*0.0668981481481481, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.3132291666666667, (sY/2)-y*0.6645833333333333, sX-x*0.0244791666666667, (sY/2)+y*0.0641203703703704, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.2744791666666667, (sY/2)-y*0.6645833333333333, sX-x*0.0244791666666667, (sY/2)+y*0.0641203703703704, tocolor(0,0,0,255), 1, "default-bold","left","center",true,false,false,true)
			--
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..toptimes.personal.name, sX-x*0.4346875, (sY/2)-y*0.668287037037037, sX-x*0.025, (sY/2)+y*0.0659722222222222, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.31375, (sY/2)-y*0.6655092592592593, sX-x*0.025, (sY/2)+y*0.0631944444444444, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.275, (sY/2)-y*0.6655092592592593, sX-x*0.025, (sY/2)+y*0.0631944444444444, tocolor(255,255,255,255), 1, "default-bold","left","center",true,false,false,true)
			if toptimes.personal.country ~= "" then
				if fileExists(":admin/client/images/flags/"..toptimes.personal.country..".png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)-y*0.30625, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/"..toptimes.personal.country..".png", tocolor(255,255,255,255))
				end
            else
			if fileExists(":admin/client/images/flags/gtasa.png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)-y*0.30625, x*0.0083333333333333, y*0.0101851851851852, ":admin/client/images/flags/gtasa.png", tocolor(255,255,255,255))
			end
			end
        end
    end
end
addEventHandler("onClientRender",getRootElement(),drawToptimesIntreface)

  This is how it should look like, on any screen : 

Edited October 29, 2016 by koragg
Here is full resource if you need to test it : https://www.dropbox.com/s/38j8wdrsvqag7i9/new_toptimes.zip?dl=0

[Gravestone]

This is just a single line of your code, do this to the other ones.

local psWidth, psHeight = guiGetScreenSize()
local cX, cY = psWidth/1980, psHeight/1080
dxDrawText("Toptimes - "..toptimes.mapname, sX-x*0.671875, (sY/2)-y*0.8518518518518519, sX-x*0.0052083333333333, (sY/2)-y*0.125, titleColor, cX*1, cY*1, "default-bold", "center","center",true)

Btw, you don't have to be so specific about the positioning, you can round the values to 2 or 3 decimal places.

Edited October 29, 2016 by Gravestone
Typo

[koragg]

@Gravestone after I did what you said, size of dxtexts seems to be fine but the size of the background rectangle is smaller than it should be on small resolutions + the personal best is totally dispositioned  (should be under top9)

And I can't put size argument in dxDrawRectangle as far as i know.

Edited October 29, 2016 by koragg
I'm scared so I write all numbers after the dot xD

[Gravestone]

Is it fine on bigger resolutions? The personal best's position I meant.

Edited October 29, 2016 by Gravestone

[koragg]

2 minutes ago, Gravestone said:

Is it fine on bigger resolutions? The personal best's position I meant.

On FullHD it is, yea. Anything under and it goes bad (more or less).

Edited October 29, 2016 by koragg

[Gravestone]

Try changing 

sX,sY = guiGetScreenSize()

function drawToptimesIntreface()
	local x,y = guiGetScreenSize()

to this

sX,sY = guiGetScreenSize()

function drawToptimesIntreface()
	local x,y = sX/1980, sY/1080

 

[koragg]

Doesn't even show on screen now. Which is ok as I used the guigetscreensize to divide positions and everything, not x/1980 and y/1080.

 

OK, I managed to fix the background rectangle's size by dividing the last y value by cY.

dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)-y*0.5, x*0.1979166666666667, y*0.0231481481481481/cY, clanColor)

 

Edited October 29, 2016 by koragg

[koragg]

The personal best though does not go to the correct position no matter what I do. Other things are fine now, just personal best rectangles, name, date, time and flag gotta be right under top9...idk why they aren't.

[koragg]

So I fixed the personal time's position by using the same lines as for the top1-top9 lines, just changed 'i' to '10' and it worked

if toptimes.personal[1] then
			dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)+((10-1)*20)-y*0.4759259259259259-1, x*0.1979166666666667, y*0.017022792022792/cY, displayColor)
			dxDrawRectangle(sX-x*0.4354166666666667, (sY/2)+((10-1)*20)-y*0.4759259259259259-1, x*0.1979166666666667, y*0.017022792022792/cY, tocolor(255,255,255,100))
			-- Shadow
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..removeColorCoding(toptimes.personal.name), sX-x*0.4341666666666667, (sY/2)+((10-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((10)*20)-y*0.1240740740740741, tocolor(0,0,0,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.3132291666666667, (sY/2)+((10-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((10)*20)-y*0.1240740740740741, tocolor(0,0,0,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.2744791666666667, (sY/2)+((10-1)*20)-y*0.8277777777777778, sX-x*0.0244791666666667, (sY/2)+((10)*20)-y*0.1240740740740741, tocolor(0,0,0,255), cY*1, "default-bold","left","center",true,false,false,true)
			--
			dxDrawText(""..toptimes.personal.pos..".    "..toptimes.personal.spacement..toptimes.personal.name, sX-x*0.4346875, (sY/2)+((10-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((10)*20)-y*0.125, tocolor(255,255,255,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.time, sX-x*0.31375, (sY/2)+((10-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((10)*20)-y*0.125, tocolor(255,255,255,255), cY*1, "default-bold","left","center",true,false,false,true)
            dxDrawText(toptimes.personal.data, sX-x*0.275, (sY/2)+((10-1)*20)-y*0.8287037037037037, sX-x*0.025, (sY/2)+((10)*20)-y*0.125, tocolor(255,255,255,255), cY*1, "default-bold","left","center",true,false,false,true)
			if toptimes.personal.country ~= "" then
				if fileExists(":admin/client/images/flags/"..toptimes.personal.country..".png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((10-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852/cY, ":admin/client/images/flags/"..toptimes.personal.country..".png", tocolor(255,255,255,255))
				end
            else
			if fileExists(":admin/client/images/flags/gtasa.png") then
					dxDrawImage(sX-x*0.4227083333333333, (sY/2)+((10-1)*20)-y*0.4731481481481481, x*0.0083333333333333, y*0.0101851851851852/cY, ":admin/client/images/flags/gtasa.png", tocolor(255,255,255,255))
			end
			end
        end