From GMod Wiki

This page needs to be edited as it contains information that is unclear or incorrect. Improvement can be discussed on the talk page. Find more pages that need work here. Details: None given.

Description

This tutorial is about how to use derma controls. It will be updated as soon as I learn something new in derma controls.

What is derma?

Derma is a set of vgui elements built-in into Garry's Mod that are really easy to use and quite beautiful.

Server or client side?

Derma controls are completely client-side, so you can use custom panels on servers.

Requirements

This tutorial requests that you have some lua skills.

Script Enforcer

Script Enforcer is the main enemy of all client-side addons, including Derma vgui set. It blocks any custom client-side scripts, so you can't use them. So, take note: You can't use your derma panels on servers with Script Enforcer!

Files And Folders

Folder

You may be wondering what to start from?
I recommend you to start from learning where your files must be placed into.

So, we will begin:
If you want to make client-side menu addon, you should place your files here:

 
<steam_path>\steamapps\<steam_user_name>\garrysmod\garrysmod\addons\<your_addon_name>\lua\autorun\client\your_file_here.lua
 

Else if you want to make client-side menu for personal use, you should place your files here:

 
<steam_path>\steamapps\<steam_user_name>\garrysmod\garrysmod\lua\autorun\client\your_file_here.lua
 

About gamemode menus you should read in article that teaches you doing gamemodes.

File

After you have created your file you should open it. It might look like this:

So you have to add some lines and file must look like this: (Copy the code)

 
hook.Add("Initialize","your_hook_name_here",function()
	-- Here you must put all your derma controls. 
end) -- Adds hook, so when we starting a new game or connecting to a server our menu creates.
concommand.Add("rb655_frame_open",function() DermaFrame:SetVisible(true) end) -- Create console command to open your panel.
concommand.Add("rb655_frame_close",function() DermaFrame:SetVisible(false) end) -- Create console command to close your panel.
 

Additional notes: DermaFrame is a variable, that you must change to your vgui.Create("DFrame") variable!

vgui.Create()

Description

This function creates a vgui element.

Usage

The right usage of this function is like this:

 
DermaFrame = vgui.Create("DFrame") -- Create a frame and store it to DermaFrame variable.
DermaButton = vgui.Create("DButton",DermaFrame) --Create a button, store it to DermaButton variable and parent to the frame(DermaFrame).
 

Additional notes: When you creating a button(DermaButton), that must be placed on your frame (DermaFrame), in the function vgui.Create("DButton") you must add a second argument(DermaFrame), to parent the button to your frame! Enter the right variable name of your frame!

VGUI Elements List

 
Base vgui elements:
Frame
 
Derma vgui elements:
DAlphaBar
DBevel
DButton
DCategoryCollapse
DCheckBox
DColorCircle
DColorCube
DColoredBox
DColorMixer
DComboBox
DForm
DFrame
DGrid
DHorizontalDivider
DHorizontalScroller
DImage
DImageButton
DKillIcon
DLabel
DListView
DListView_Column
DListView_Line
DMenu
DMenuOption
DModelPanel
DModelSelect
DModelSelectMulti
DMultiChoice
DNotify
DNumberWang
DNumPad
DNumSlider
DPanel
DPanelList
DPanelSelect
DPropertySheet
DRGBBar
DScrollBarGrip
DShape
DSlider
DSprite
DSysButton
DTextEntry
DTinyButton
DTooltip
DTree
DTree_Node
DTree_Node_Button
DVerticalDivider
DVScrollBar
SpawnIcon
 

Software

The best software to edit lua scripts and other scripts, for me is Notepad++. This notepad can open about 25-30 text file types with the code tags. You can get it here . Application is multilanguage so you can select any language you want.

Every thing below will be cleaned soon.

DFrame

Description

This is most important component of derma. On this frame will be placed all your buttons and other items.

Code

The element code looks like this:

 
DermaFrame = vgui.Create("DFrame") --Create the frame. [DermaFrame is your frame name and can be changed]
DermaFrame:SetPos(50,50) --Position on players screen. [X,Y]
DermaFrame:SetSize(500,350) --Size of the frame. [X,Y]
DermaFrame:SetTitle("Testing Derma Controls") --Title of the frame.
DermaFrame:SetVisible(true) --Visible by player? [true=Visible, false=Invisible]
DermaFrame:SetDraggable(true) --Draggable by player? [true=Can, flase=Can Not]
DermaFrame:ShowCloseButton(true) --Show the close button? [true=Show, false=Dont Show]
DermaFrame:SetBackgroundBlur(false) --Make everything behind the frame fade to blur? [true=yes, false=no]
DermaFrame:SetDeleteOnClose(false) --Delete frame on close? [true = yes; false = no]
DermaFrame:MakePopup() --Make the frame popup.
 

Additional functions:

 
DermaFrame:Close() --Closes the frame.
DermaFrame:Center() --Sets the frame position to center of the screen.
DermaFrame:IsActive() --Is the frame active or not?
 

So, our full code now look like this:

 
function frame_create() --Note that I changed the function name. You can change the function name to anything you want
	frame = vgui.Create("DFrame")
	frame:SetPos(50,50)
	frame:SetSize(500,350)
	frame:SetTitle("Testing Derma Controls")
	frame:SetVisible(false) --This is important to set false or your frame will pop-up every time you join to server or a single player game.
	frame:SetDraggable(true)
	frame:ShowCloseButton(true)
	frame:SetBackgroundBlur(false)
	frame:MakePopup()
end
 
function frame_open()
	frame:SetVisible(true)
end
 
function frame_close()
	frame:SetVisible(false)
end
 
concommand.Add("-our_concommand",frame_close)
concommand.Add("+our_concommand",frame_open)
hook.Add("Initialize","frame_create",frame_create)
 

Result Screenshot

DButton

Description

This is most used component of derma. The button is on almost all derma menus. It can execute console commands, hide other dermas and show them, or do anything that lua allows.

Code

The element code looks like this:

 
DermaButton = vgui.Create("DButton",DermaFrame) -- Create the button and set parent to your DermaFrame frame (Name must be changed to your derma frame's name). [DermaButton is your button name and can be changed]
DermaButton:SetText("Suicide") -- Text on the button.
DermaButton:SetPos(5,27) -- Position on your frame. [X, Y]
DermaButton:SetSize(150,50) -- Size of the button. [X, Y]
DermaButton:SetDisabled(false) -- Sets if the button can be pressed or not. [true = can't, false = can]
DermaButton.DoClick = function() -- What will happen if you will press the button with left mouse button.
	error("Derma Is Da Best! (Left Click)") -- If player will press the button with left mouse button, clientside(yellow) error message will be shown.
	-- Here you can enter ANYTHING you want that must happen on press with left mouse button.
end
DermaButton.DoRightClick = function() -- What will happen if you press the button with right mouse button.
	error("Woohoo! (Right Click)") -- If player will press the button with the right mouse button, other clientside(yellow) error message will be shown.
	-- Here you can enter ANYTHING you want that must happen on press with right mouse button.
end
 

Additional functions:

 
DermaButton:IsDown() --Is the button pressed?.
DermaButton:Center() --Sets the frame position to center of the screen.
DermaButton:SetConsoleCommand("say","It's Working!") --This forces the button to execute a console command when the button pressed by left mouse button. (Overrides DermaButton.DoClick)
 

So, our full code now look like this:

 
function frame_create() --Note that I changed the function name. You can change the fucntion name to anything you want
	frame = vgui.Create("DFrame")
	frame:SetPos(50,50)
	frame:SetSize(500,350)
	frame:SetTitle("Testing Derma Controls")
	frame:SetVisible(false) --This is important to set false or your frame will pop-up every time you join to server or a single player game.
	frame:SetDraggable(true)
	frame:ShowCloseButton(true)
	frame:SetBackgroundBlur(false)
	frame:MakePopup()
 
	button = vgui.Create("DButton",frame) --Note that I have changed the variables to button and frame. This is important to you.
	button:SetText("Suicide")
	button:SetPos(5,27)
	button:SetSize(150,50)
	button.DoClick = function()
		error("Derma Is Da Best! (Left Click)")
	end
	button.DoRightClick = function()
		error("Woohoo! (Right Click)")
	end
end
 
function frame_open()
	frame:SetVisible(true)
end
 
function frame_close()
	frame:SetVisible(false)
end
 
concommand.Add("-our_concommand",frame_close)
concommand.Add("+our_concommand",frame_open)
hook.Add("Initialize","frame_create",frame_create)
 

Result Screenshot