Dynamic Elements

Hey, I’ve been stuck on this for a while. I have a dpanel with a button on it. When the button is clicked, I want it to move down and make a rounded box with elements inside that visible. Similar to a new player joining on the scoreboard I guess. How would I go about this?

just put inside the DoClick function the DButton:SetPos(x, y), and for the rounded box you create a DPanel, and put inside the DButton’s DoClick “DPanel:SetVisible(true)”(you also have to set the DPanel’s visibility to False upon creaton, to prevent it being inside/below the button)

If I do that, though, if that panel is clicked won’t all the other panels lose focus and be ugly? That’s what happened when I had more than 1 panel on top of each other. And the button thing works, I figured that out a bit ago :slight_smile:

Thanks for the help

I dont get completely what you mean by “loose focus”? do you mean coloring? You could paint the DPanel.

Sorry, got it in reverse… I added a DPanel to test it, and it works fine, but if I click on the bigger panel that it’s parented to it’s sent behind it or something. It changes color and I can’t interact with it at all.

I am wondering, why wont you use a DFrame as base?

[editline]30th July 2015[/editline]

Heres a working code, it got an DPanel as base, the 2nd DPanel which you want to be toggled is hidden by default, the top left corner got the “toggle” button, to show/hide it, and the button also moves, the code should be fully readable, and its fully working.


concommand.Add("testpanel", function(ply)
	--[[ BEGIN: BASE ]]--
	local base = vgui.Create("DPanel")
	base:SetSize(ScrW() - 100, ScrH() - 100)
	base:SetPos(50, 50)
	function base:Paint(w, h)
		draw.RoundedBox(4, 0, 0, w, h, Color(63, 63, 63))
		draw.RoundedBox(4, 0, 0, w, 25, Color(51, 51, 51))
	end
	base:MakePopup()
	local closebtn = vgui.Create("DButton", base)
	closebtn:SetSize(120, 25)
	closebtn:SetText("CLOSE")
	closebtn:SetPos(base:GetWide() - 120, 0)
	function closebtn:Paint(w, h)
		draw.RoundedBox(0, 0, 0, w, h, self.Hovered and Color(231,76,60) or Color(192,57,43))
	end
	function closebtn:DoClick()
		base:SetVisible(false)
	end
	--[[ END: BASE ]]--

	--[[ BEGIN: CHILD ]]--

	local dpanel = vgui.Create("DPanel", base)
	dpanel:SetSize(base:GetWide(), base:GetTall() - 25)
	dpanel:SetPos(0, 25)
	dpanel:SetVisible(false)

	local toggled = false
	local togglebtn = vgui.Create("DButton", base)
	togglebtn:SetSize(120, 25)
	togglebtn:SetPos(0, 0)
	togglebtn:SetText("TOGGLE DPANEL")
	function togglebtn:DoClick()
		if toggled == false then
			dpanel:SetVisible(true)
			--As example of setting the pos if the DPanel gets ENABLED:
			self:SetPos(120, 0)
			toggled = true
		else
			dpanel:SetVisible(false)
			--As example of setting the pos if the DPanel gets DISABLED:
			self:SetPos(0, 0)
			toggled = false
		end
	end
	--[[ END: CHILD ]]--
end)

[editline]30th July 2015[/editline]

the stuff which you parent to the 2nd dpanel, will also be hidden/shown(active/inactive) when you toggle it, so you can make multiple toggles in each other.

[editline]30th July 2015[/editline]

if you want I can make the code even MORE readable with more comments :stuck_out_tongue:

That’s super helpful thanks! No need for extra comments.

But my issue is that, say theoretically I had a white panel 400x400. That’s parented to a DFrame. Then, I have a 380x380 dark blue panel parented to the white panel with a button on it. If I click in the 20 pixels between the two, the dark blue becomes light blue, and the button can’t be clicked. Are you getting that issue with your code?

Nope, my code is fine, and it also doesnt need a DFrame, its completely done, I just use DFrame by myself, but if you want DPanels, then just use the given code, maybe your parenting was wrong or so, could you give me your code which errors?

Look what I just did with the base I gave you:

[editline]30th July 2015[/editline]

I made this for my german community, so sorry for the german text :stuck_out_tongue:

Oh, cool! These are the parts that are most important:


BusinessBFrame = vgui.Create( "DFrame" )
    BusinessBFrame:SetSize( 800, 600 )
    BusinessBFrame:SetPos(ScrW() / 2 - 400, ScrH() / 2 - 300)
    BusinessBFrame:SetTitle( "" )
    BusinessBFrame:MakePopup()
    BusinessBFrame:ShowCloseButton(false)
    BusinessBFrame.Paint = function() end
            
    BusinessMainPanel = vgui.Create( "DPanel", BusinessBFrame )
    BusinessMainPanel:SetSize( 800, 600 )
    BusinessMainPanel:SetPos( ScrW() / 2 - 400, ScrH() / 2 - 300 )
    BusinessMainPanel:MakePopup()
    function BusinessMainPanel:Paint( w,h )
        draw.RoundedBox( 0,0,0,w,h, Color( 255, 255, 255, 130 ) )
        draw.RoundedBox( 0,0,0,w,50, Color( 0, 150, 255, 200 ) )
    end

if LocalPlayer():GetNWBool( "POwnsBusiness" ) then
    BusinessSecondPanel = vgui.Create( "DPanel", BusinessMainPanel )
    BusinessSecondPanel:SetSize( 776, 526 )
    BusinessSecondPanel:SetPos( ScrW() / 2 - 388, ScrH() / 2 - 240 )
    BusinessSecondPanel:MakePopup()
    function BusinessSecondPanel:Paint( w,h )
        draw.RoundedBox( 8,0,0,w,h, Color( 0, 100, 255, 225 ) )
        draw.RoundedBox( 0,0,75,w,5, Color( 255, 255, 255, 255 ) )
        if LocalPlayer():GetNWBool( "POwnsBusiness" ) then
            draw.DrawText( LocalPlayer():GetNWString( "PBusinessName" ), "NewTrebuchetBig", self:GetWide() / 2, 10, Color( 255, 255, 255, 255 ), 1)
            if LocalPlayer():GetNWString( "PBusinessType" ) == "retail" then
                draw.DrawText( "a retail company.", "NewTrebuchet", self:GetWide() / 2, 50, Color( 200, 200, 200, 255 ), 1 )
            elseif LocalPlayer():GetNWString( "PBusinessType" ) == "service" then
                draw.DrawText( "a service company.", "NewTrebuchet", self:GetWide() / 2, 50, Color( 200, 200, 200, 255), 1 )
            end
            draw.RoundedBox( 8,5,115,250,140, Color( 30, 30, 30, 220 ) )
            draw.DrawText( "Business Size: "..LocalPlayer():GetNWInt( "PBusinessLevel").."/500", "Trebuchet24", 43, 125, Color( 255, 255, 255, 255 ), 0)
            draw.DrawText( "Capital: $"..LocalPlayer():GetNWInt( "PBusinessCapital"), "Trebuchet24", 43, 151, Color( 255, 255, 255, 255 ), 0)
            draw.DrawText( "Locations: "..LocalPlayer():GetNWInt( "PBusinessLocations"), "Trebuchet24", 43, 177, Color( 255, 255, 255, 255 ), 0 )
            draw.DrawText( "Workers: "..LocalPlayer():GetNWInt( "PBusinessWorkers"), "Trebuchet24", 43, 203, Color( 255, 255, 255, 255 ), 0 )
            draw.RoundedBox( 8,5,290,250,229, Color( 30, 30, 30, 220 ) )
            draw.RoundedBox( 8,525,115,245,400, Color( 30, 30, 30, 220 ) )
        end
    end
    end


so when I press the MainPanel, the SecondPanel goes to the back.

You only need to make the DFrame “MakePopup”() :p, you focus 3 panels at once ;).

Just tried that - it only rearranged everything and the problem was still there.

edit: nvm - making only the frontmost panel pop up worked. However it is still rearranged.

edit 2: edited the positions so it worked. now the main thing isnt unfocusing, but when I try to add a smaller panel in front it happens all over again… And I want this panel only to be visible sometimes so that wouldn’t work too well if I only made that popup, plus I want multiple next to each other. So I have nothing popup except the invisible ones, but then the cursor doesn’t come up… this is so fucking complicated for something so simple omg

“BusinessSecondPanel” Is the one that shall be toggleable, right?

No, an extra one in front. Those two are just the “background”.

then I am asking why you got 2 different DPanels? You only need one, if the other one is parented to a “3rd” DPanel, the one that toggles

Because the second one changes depending on a boolean. The first one is a constant background.

You can use the Toggleable one as a background too, :stuck_out_tongue: its paintable ^^

Alright, it’s a bit too late to do that lol, I’d have to just about redo everything.

So what I’m trying to do is have a button that says “Hire a worker!”. When you do this, the button moves down, and in its place is a panel with the worker’s info. Right now, however, my problems are:

  • The button randomly resets for no reason
  • If the worker panel isn’t visible, nothing pops up and the user has to toggle their mouse.
  • I’m hating lua more and more :stuck_out_tongue:

Lua is one of the simplest languages :p, I’ll build that panel soon, but without NWInt checks, since you can add these later.

[editline]30th July 2015[/editline]

There you go:

Not toggled(default):

toggled:



concommand.Add("testpanel2", function(ply)
	local ply = LocalPlayer() -- declaring the player var so we dont have to use "LocalPlayer" all the time

	--[[ BEGIN: BASES ]]--
	--Main base
	local base = vgui.Create("DPanel")
	base:SetSize(ScrW() - 100, ScrH() - 100)
	base:SetPos(50, 50)
	function base:Paint(w, h)
		draw.RoundedBox(0, 0, 0, w, h, Color(51, 51, 51))
		draw.RoundedBox(0, 0, 0, w, 25, Color(63, 63, 63))
	end
	base:MakePopup()

	--Close button
	local closebtn = vgui.Create("DButton", base)
	closebtn:SetSize(120, 25)
	closebtn:SetPos(base:GetWide() - 120, 0)
	closebtn:SetText("")
	function closebtn:Paint(w, h)
		draw.RoundedBox(0, 0, 0, w, h, self.Hovered and Color(231, 76, 60) or Color(192, 57, 43))
		draw.SimpleText("CLOSE", "Trebuchet24", w/2, h/2, Color(255, 255, 255), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER)
	end
	function closebtn:DoClick()
		base:SetVisible(false)
	end

	--Toggleable 2nd Base
	local dpanel = vgui.Create("DPanel", base)
	dpanel:SetSize(base:GetWide(), (base:GetTall() - base:GetTall() / 4) - 25)
	dpanel:SetPos(0, 25)
	dpanel:SetVisible(false)
	--[[ END: BASES ]]--

	local toggled = false
	local togglebtn = vgui.Create("DButton", base)
	togglebtn:SetSize(base:GetWide(), (base:GetTall() - base:GetTall() / 4) - 25)
	togglebtn:SetPos(0, 25)
	togglebtn:SetText("")
	function togglebtn:Paint(w, h)
		if toggled then
			draw.RoundedBox(0, 0, 0, w, h, self.Hovered and Color(52, 152, 219) or Color(41, 128, 185))
			draw.SimpleText("UNHIRE", "Trebuchet24", w/2, h/2, Color(255, 255, 255), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER)
			return
		end
		draw.RoundedBox(0, 0, 0, w, h, self.Hovered and Color(52, 152, 219) or Color(41, 128, 185))
		draw.SimpleText("HIRE A WORKER", "Trebuchet24", w/2, h/2, Color(255, 255, 255), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER)
	end
	function togglebtn:DoClick()
		if toggled then
			dpanel:SetVisible(false)
			togglebtn:SetPos(0, 25)
			togglebtn:SetSize(base:GetWide(), (base:GetTall() - base:GetTall() / 4) - 25)
			toggled = false
		else
			dpanel:SetVisible(true)
			togglebtn:SetPos(0, base:GetTall() - base:GetTall() / 4)
			togglebtn:SetSize(200, 50)
			toggled = true
		end
	end
end)


I redeclared the “ply” var incase you use it outside of the concommand.

[editline]30th July 2015[/editline]

The Sizing & Positioning is just as example, therefore a gigantic button. :stuck_out_tongue:

btw, do you still need help with a team scoreboard? I can give you mine if you want.