DX Comboboxes

[FlyingSpoon]

How can I make a DX Combobox? 

[NeXuS™]

Using tables, dxDrawRectangle, dxDrawText and some math.

[FlyingSpoon]

showCursor(true)

local combo = {
{"Skin #1", 1},
{"Skin #2", 2},
{"Skin #3", 3},
{"Skin #4", 4},
{"Skin #5", 5}
}


addEventHandler("onClientRender", root,
    function()
	    for i, v in pairs(combo) do 
	    dxDrawRectangle(525, 336, 214, 31, tocolor(0, 0, 0, 150), false)
		dxDrawText(v[1], 525, 336, 739, 367, tocolor(255, 255, 255, 255), 1.00, "default", "center", "center", false, false, false, false, false)
       end   
	    dxDrawRectangle(525, 305, 214, 31, tocolor(0, 0, 0, 255), false)
        dxDrawText(getElementData(localPlayer, "selected:item") or combo[1][1], 525, 305, 739, 336, tocolor(255, 255, 255, 255), 1.00, "default", "center", "center", false, false, false, false, false)
   end
)

I've got to here, kind of confused on what to do next?

[NeXuS™]

I mean, it's kinda bad coding. Using variables will save you a lot of time.

local sX, sY = guiGetScreenSize()
local contentList = {
	{"Skin #1", 1},
	{"Skin #2", 2},
	{"Skin #3", 3},
	{"Skin #4", 4},
	{"Skin #5", 5}
}

local boxW, boxH = 200, 30
local boxX, boxY = (sX-boxW)/2, (sY-boxH*#contentList)/2
local selectedItem = -1
local listOpened = false

_getCursorPosition = getCursorPosition
function getCursorPosition()
	local cX, cY = _getCursorPosition()
	if cX and cY then
		return cX*sX, cY*sY
	end
	return -1, -1
end

function inBox(x, y, w, h)
	local cX, cY = getCursorPosition()
	return (cX > x and cX < x + w and cY > y and cY < y + h)
end

addEventHandler("onClientRender", getRootElement(), function()
	dxDrawRectangle(boxX, boxY, boxW, boxH)
	dxDrawText(selectedItem > 0 and contentList[selectedItem] or "Select a skin", boxX+20, boxY, boxX+20, boxY+boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
	if listOpened then
		for i, k in ipairs(contentList) do
			dxDrawRectangle(boxX, boxY+i*boxH, boxW, boxH, inBox(boxX, boxY+i*boxH, boxW, boxH) and tocolor(255, 0, 0, 170) or tocolor(0, 0, 0, 170)
			dxDrawText(k, boxX+20, boxY+i*boxH, boxX+20, boxY+(i+1)*boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
		end
	end
end)

addEventHandler("onClientClick", getRootElement(), function()
	if inBox(boxX, boxY, boxW, boxH) then -- The main one
		listOpened = not listOpened
		return
	elseif listOpened then
		for i, k in ipairs(contentList) do
			if inBox(boxX, boxY+i*boxH, boxW, boxH) then
				selectedItem = i
				listOpened = false
				return
			end
		end
	end
end)

showCursor(true)

Try this, it's not tested tho.

Edited August 5, 2017 by NeXuS™

[FlyingSpoon]

local sX, sY = guiGetScreenSize()
local contentList = {
	{"Skin #1", 1},
	{"Skin #2", 2},
	{"Skin #3", 3},
	{"Skin #4", 4},
	{"Skin #5", 5}
}

local boxW, boxH = 200, 30
local boxX, boxY = (sX-boxW)/2, (sY-boxH*#contentList)/2
local selectedItem = -1
local listOpened = false

_getCursorPosition = getCursorPosition
function getCursorPosition()
	local cX, cY = _getCursorPosition()
	if cX and cY then
		return cX*sX, cY*sY
	end
	return -1, -1
end

function inBox(x, y, w, h)
	local cX, cY = getCursorPosition()
	return (cX > x and cX < x + w and cY > y and cY < y + h)
end

addEventHandler("onClientRender", getRootElement(), function()
	dxDrawRectangle(boxX, boxY, boxW, boxH, tocolor(0,0,0,255))
	dxDrawText(selectedItem > 0 and contentList[1][selectedItem] or "Select a skin", boxX+20, boxY, boxX+20, boxY+boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
	if listOpened then
		for i, k in ipairs(contentList) do
			dxDrawRectangle(boxX, boxY+i*boxH, boxW, boxH, inBox(boxX, boxY+i*boxH, boxW, boxH) and tocolor(255, 0, 0, 170) or tocolor(0, 0, 0, 170))
			dxDrawText(k[1], boxX+20, boxY+i*boxH, boxX+20, boxY+(i+1)*boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
		end
	end
end)

addEventHandler("onClientClick", getRootElement(), function()
	if inBox(boxX, boxY, boxW, boxH) then -- The main one
		listOpened = true
		return
	elseif listOpened then
		for i, k in ipairs(contentList) do
			if inBox(boxX, boxY+i*boxH, boxW, boxH) then
				selectedItem = i
				listOpened = false
				return
			end
		end
	end
end)

showCursor(true)

Okay fixed that too, but it started to return different values.

 

Edited August 5, 2017 by raysmta
Fixed

[NeXuS™]

Right, I :Oed up.

addEventHandler("onClientClick", getRootElement(), function(cButton, cState)
	if cButton == "left" and cState == "down" then
		if inBox(boxX, boxY, boxW, boxH) then -- The main one
			listOpened = not listOpened
			return
		elseif listOpened then
			for i, k in ipairs(contentList) do
				if inBox(boxX, boxY+i*boxH, boxW, boxH) then
					selectedItem = i
					listOpened = false
					return
				end
			end
		end
	end
end)

 

[FlyingSpoon]

I fixed that, but thanks, now the problem is that when I click on Skin #1 it works, and says Skin #1, I click Skin #2, and it says '1', then I click the rest, and they dont work.

[Jayceon]

Change this:

dxDrawText(selectedItem > 0 and contentList[1][selectedItem] or "Select a skin", boxX+20, boxY, boxX+20, boxY+boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
	

 

 

To:

dxDrawText(selectedItem > 0 and contentList[selectedItem][1] or "Select a skin", boxX+20, boxY, boxX+20, boxY+boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
	

 

[FlyingSpoon]

Thanks

[NeXuS™]

Ahh, ye, right. I forgot that it's a table, and you wrote that indexing without me realizing it.

local sX, sY = guiGetScreenSize()
local contentList = {
	{"Skin #1", 1},
	{"Skin #2", 2},
	{"Skin #3", 3},
	{"Skin #4", 4},
	{"Skin #5", 5}
}

local boxW, boxH = 200, 30
local boxX, boxY = (sX-boxW)/2, (sY-boxH*#contentList)/2
local selectedItem = -1
local listOpened = false

_getCursorPosition = getCursorPosition
function getCursorPosition()
	local cX, cY = _getCursorPosition()
	if cX and cY then
		return cX*sX, cY*sY
	end
	return -1, -1
end

function inBox(x, y, w, h)
	local cX, cY = getCursorPosition()
	return (cX > x and cX < x + w and cY > y and cY < y + h)
end

addEventHandler("onClientRender", getRootElement(), function()
	dxDrawRectangle(boxX, boxY, boxW, boxH, tocolor(0, 0, 0, 170))
	dxDrawText(selectedItem > 0 and contentList[selectedItem][1] or "Select a skin", boxX+20, boxY, boxX+20, boxY+boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
	if listOpened then
		for i, k in ipairs(contentList) do
			dxDrawRectangle(boxX, boxY+i*boxH, boxW, boxH, inBox(boxX, boxY+i*boxH, boxW, boxH) and tocolor(255, 0, 0, 170) or tocolor(0, 0, 0, 170))
			dxDrawText(k[1], boxX+20, boxY+i*boxH, boxX+20, boxY+(i+1)*boxH, tocolor(255, 255, 255, 255), 1, "default-bold", "left", "center")
		end
	end
end)

addEventHandler("onClientClick", getRootElement(), function(cButton, cState)
	if cButton == "left" and cState == "down" then
		if inBox(boxX, boxY, boxW, boxH) then -- The main one
			listOpened = not listOpened
			return
		elseif listOpened then
			for i, k in ipairs(contentList) do
				if inBox(boxX, boxY+i*boxH, boxW, boxH) then
					selectedItem = i
					listOpened = false
					return
				end
			end
		end
	end
end)
showCursor(true)

Final code, tested and working.

[FlyingSpoon]

Works, is it possible to make this into an export, so that I can use it multiple times instead of writing the code over and over, for gridlists?