Guide to Derma

From GMod Wiki

Jump to: navigation, search

Contents

Everything About Derma and VGUI

What is Derma? Derma is the greatest thing to happen to VGUI in Garry's Mod. Some may disagree, but I love it. Derma is a library of VGUI controls made by Garry and TAD2020 which can be used to make your gamemode/addon a lot easier to use. Some exampes of Derma controls are the those that are used on the spawnmenu (qMenu).


Here is an example of some Derma items commonly used in VGUI scripting

DermaExample.png



Introduction This is a really long guide/manual on everything there is to know about how to use Derma. So far it is not complete, but will be on about a week.

So lets begin the guide.


DFrame

Description: This is a panel that you can lay out Derma items on. This item will be used 99% of the time.

Code:

 
local DermaPanel = vgui.Create( "DFrame" ) -- Creates the frame itself
DermaPanel:SetPos( 50,50 ) -- Position on the players screen
DermaPanel:SetSize( 1000, 900 ) -- Size of the frame
DermaPanel:SetTitle( "Testing Derma Stuff" ) -- Title of the frame
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true ) -- Draggable by mouse?
DermaPanel:ShowCloseButton( true ) -- Show the close button?
DermaPanel:MakePopup() -- Show the frame
 

DFrame.png



DButton

Description: This creates a simple button.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local DermaButton = vgui.Create( "DButton" )
DermaButton:SetParent( DermaPanel ) -- Set parent to our "DermaPanel"
DermaButton:SetText( "Kill yourself" )
DermaButton:SetPos( 25, 50 )
DermaButton:SetSize( 150, 50 )
DermaButton.DoClick = function ()
    RunConsoleCommand( "kill" ) -- What happens when you press the button
end
 

DButton.png




DSysButton

Description: This creates the same thing as DButton does, but you can place three different preset images on them.

Code:

 
 local DermaPanel = vgui.Create( "DFrame" )
 DermaPanel:SetPos( 50,50 )
 DermaPanel:SetSize( 200, 250 )
 DermaPanel:SetTitle( "Testing Derma Stuff" )
 DermaPanel:SetVisible( true )
 DermaPanel:SetDraggable( true )
 DermaPanel:ShowCloseButton( true )
 DermaPanel:MakePopup()
 
 local SystemButtonThingOne = vgui.Create("DSysButton", DermaPanel)
 SystemButtonThingOne:SetPos( 25,50 )
 SystemButtonThingOne:SetSize( 50, 25 )
 SystemButtonThingOne:SetType( "close" ) -- This can be "close", "down", or "up"
 SystemButtonThingOne.DoClick = function()
     Msg("You clicked the button!\n") -- What happens when you left click on it
 end
 SystemButtonThingOne.DoRightClick = function()
     Msg("You right-clicked the button!\n") -- What happens when you right click on it
 end
 

Dsysbutton.png




DCheckBoxLabel

Description: This is a checkbox with a label before it.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local CheckBoxThing = vgui.Create( "DCheckBoxLabel", DermaPanel )
CheckBoxThing:SetPos( 10,50 )
CheckBoxThing:SetText( "God Mode" )
CheckBoxThing:SetConVar( "sbox_godmode" ) -- ConCommand must be a 1 or 0 value
CheckBoxThing:SetValue( 1 )
CheckBoxThing:SizeToContents() -- Make its size to the contents. Duh?
 

DCheckBoxLabel.png



DNumSlider

Description: This creates a number slider to change an integer.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local NumSliderThingy = vgui.Create( "DNumSlider", DermaPanel )
NumSliderThingy:SetPos( 25,50 )
NumSliderThingy:SetSize( 150, 100 ) -- Keep the second number at 100
NumSliderThingy:SetText( "Max Props" )
NumSliderThingy:SetMin( 0 ) -- Minimum number of the slider
NumSliderThingy:SetMax( 256 ) -- Maximum number of the slider
NumSliderThingy:SetDecimals( 0 ) -- Sets a decimal. Zero means it's a whole number
NumSliderThingy:SetConVar( "sbox_maxprops" ) -- Set the convar
 

DNumSlider.png



DPanelList

Description: This creates some items in a list.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 250, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
DermaList = vgui.Create( "DPanelList", DermaPanel )
DermaList:SetPos( 25,25 )
DermaList:SetSize( 200, 200 )
DermaList:SetSpacing( 5 ) -- Spacing between items
DermaList:EnableHorizontal( false ) -- Only vertical items
DermaList:EnableVerticalScrollbar( true ) -- Allow scrollbar if you exceed the Y axis
 
    local CategoryContentOne = vgui.Create( "DCheckBoxLabel" )
    CategoryContentOne:SetText( "God Mode" )
    CategoryContentOne:SetConVar( "sbox_godmode" )
    CategoryContentOne:SetValue( 1 )
    CategoryContentOne:SizeToContents()
DermaList:AddItem( CategoryContentOne ) -- Add the item above
 
    local CategoryContentTwo = vgui.Create( "DCheckBoxLabel" )
    CategoryContentTwo:SetText( "Player Damage" )
    CategoryContentTwo:SetConVar( "sbox_plpldamage" )
    CategoryContentTwo:SetValue( 1 )
    CategoryContentTwo:SizeToContents()
DermaList:AddItem( CategoryContentTwo ) -- Add the item above
 
    local CategoryContentThree = vgui.Create( "DCheckBoxLabel" )
    CategoryContentThree:SetText( "Fall Damage" )
    CategoryContentThree:SetConVar( "mp_falldamage" )
    CategoryContentThree:SetValue( 1 )
    CategoryContentThree:SizeToContents()
DermaList:AddItem( CategoryContentThree ) -- Add the item above
 
    local CategoryContentFour = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFour:SetText( "Noclip" )
    CategoryContentFour:SetConVar( "sbox_noclip" )
    CategoryContentFour:SetValue( 1 )
    CategoryContentFour:SizeToContents()
DermaList:AddItem( CategoryContentFour ) -- Add the item above
 
    local CategoryContentFive = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFive:SetText( "All Talk" )
    CategoryContentFive:SetConVar( "sv_alltalk" )
    CategoryContentFive:SetValue( 1 )
    CategoryContentFive:SizeToContents()
DermaList:AddItem( CategoryContentFive ) -- Add the item above
 
    local CategoryContentSix = vgui.Create( "DNumSlider" )
    CategoryContentSix:SetSize( 150, 50 ) -- Keep the second number at 50
    CategoryContentSix:SetText( "Max Props" )
    CategoryContentSix:SetMin( 0 )
    CategoryContentSix:SetMax( 256 )
    CategoryContentSix:SetDecimals( 0 )
    CategoryContentSix:SetConVar( "sbox_maxprops" )
DermaList:AddItem( CategoryContentSix ) -- Add the item above
 
    local CategoryContentSeven = vgui.Create("DSysButton", DermaPanel)
    CategoryContentSeven:SetType( "close" )
    CategoryContentSeven.DoClick = function()
        RunConsoleCommand("sv_password", "toyboat")
    end
    CategoryContentSeven.DoRightClick = function()
        RunConsoleCommand("sv_password", "**")
    end
DermaList:AddItem( CategoryContentSeven ) -- Add the item above
 

DPanelList.png



DCollapsibleCategory

Description: Creates a collapsable list of items.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 250, 300 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local SomeCollapsibleCategory = vgui.Create("DCollapsibleCategory", DermaPanel)
SomeCollapsibleCategory:SetPos( 25,50 )
SomeCollapsibleCategory:SetSize( 200, 50 ) -- Keep the second number at 50
SomeCollapsibleCategory:SetExpanded( 0 ) -- Expanded when popped up
SomeCollapsibleCategory:SetLabel( "Our Collapsible Category" )
 
CategoryList = vgui.Create( "DPanelList" )
CategoryList:SetAutoSize( true )
CategoryList:SetSpacing( 5 )
CategoryList:EnableHorizontal( false )
CategoryList:EnableVerticalScrollbar( true )
 
SomeCollapsibleCategory:SetContents( CategoryList ) -- Add our list above us as the contents of the collapsible category
 
    local CategoryContentOne = vgui.Create( "DCheckBoxLabel" )
    CategoryContentOne:SetText( "God Mode" )
    CategoryContentOne:SetConVar( "sbox_godmode" )
    CategoryContentOne:SetValue( 1 )
    CategoryContentOne:SizeToContents()
CategoryList:AddItem( CategoryContentOne ) -- Add the above item to our list
 
    local CategoryContentTwo = vgui.Create( "DCheckBoxLabel" )
    CategoryContentTwo:SetText( "Player Damage" )
    CategoryContentTwo:SetConVar( "sbox_plpldamage" )
    CategoryContentTwo:SetValue( 1 )
    CategoryContentTwo:SizeToContents()
CategoryList:AddItem( CategoryContentTwo )
 
    local CategoryContentThree = vgui.Create( "DCheckBoxLabel" )
    CategoryContentThree:SetText( "Fall Damage" )
    CategoryContentThree:SetConVar( "mp_falldamage" )
    CategoryContentThree:SetValue( 1 )
    CategoryContentThree:SizeToContents()
CategoryList:AddItem( CategoryContentThree )
 
    local CategoryContentFour = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFour:SetText( "Noclip" )
    CategoryContentFour:SetConVar( "sbox_noclip" )
    CategoryContentFour:SetValue( 1 )
    CategoryContentFour:SizeToContents()
CategoryList:AddItem( CategoryContentFour )
 
    local CategoryContentFive = vgui.Create( "DCheckBoxLabel" )
    CategoryContentFive:SetText( "All Talk" )
    CategoryContentFive:SetConVar( "sv_alltalk" )
    CategoryContentFive:SetValue( 1 )
    CategoryContentFive:SizeToContents()
CategoryList:AddItem( CategoryContentFive )
 
    local CategoryContentSix = vgui.Create( "DNumSlider" )
    CategoryContentSix:SetSize( 150, 50 ) -- Keep the second number at 50
    CategoryContentSix:SetText( "Max Props" )
    CategoryContentSix:SetMin( 0 )
    CategoryContentSix:SetMax( 256 )
    CategoryContentSix:SetDecimals( 0 )
    CategoryContentSix:SetConVar( "sbox_maxprops" )
CategoryList:AddItem( CategoryContentSix )
 
    local CategoryContentSeven = vgui.Create( "DSysButton" )
    CategoryContentSeven:SetType( "close" )
    CategoryContentSeven.DoClick = function()
        RunConsoleCommand("sv_password", "toyboat")
    end
    CategoryContentSeven.DoRightClick = function()
        RunConsoleCommand("sv_password", "**")
    end
CategoryList:AddItem( CategoryContentSeven )
 

DCollapsibleCategory.png

When control clicked on.

DCClicked.png



DTextEntry

Description: Creates a text field to enter text into.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 250,250 )
DermaPanel:SetSize( 500, 50 )
DermaPanel:SetTitle( "Derma Testing Stuff" )
DermaPanel:ShowCloseButton( true )
DermaPanel:SetVisible( true )
DermaPanel:MakePopup()
 
local DermaText = vgui.Create( "DTextEntry", DermaPanel )
DermaText:SetPos( 20,25 )
DermaText:SetTall( 20 )
DermaText:SetWide( 450 )
DermaText:SetEnterAllowed( true )
DermaText.OnEnter = function()
    Msg("You entered -"..DermaText:GetValue().."-!" ) -- What happens when you press enter
    DermaPanel:SetVisible( false )
end
 

DTextEntry.png



DImage

Description: This creates an image in .vtf format.

Code:

 
DermaImage = vgui.Create( "DImageButton", DermaPanel )
DermaImage:SetPos( 25, 50 )
DermaImage:SetImage( "Brick/brickfloor001a.vtf" ) -- Set your .vtf image
DermaImage:SizeToContents()

DImage.png



DImageButton

Description: This creates a DButton in the shape of a .vtf image.

Code:

 
local DermaImage = vgui.Create( "DImageButton", DermaPanel ) 
DermaImage:SetPos( 25, 50 )
DermaImage:SetImage( "hoverskate/clearpoints.vtf" ) -- Set your .vtf image
DermaImage:SizeToContents()
DermaImage.DoClick = function()
    Msg("You clicked the image button! :O \n") -- What happens when you press the image
    DermaPanel:SetVisible( false )
end

DImage.png



DPropertySheet

Description: Creates tabs so you can have multiple tabs in one frame with many items in them. Mainly used for organization.

Code:

 
local PropertySheet = vgui.Create( "DPropertySheet" )
PropertySheet:SetParent( DermaPanel )
PropertySheet:SetPos( 5, 30 )
PropertySheet:SetSize( 340, 315 )
 
local SheetItemOne = vgui.Create( "DCheckBoxLabel" )
SheetItemOne:SetText( "Use Props?" )
SheetItemOne:SetConVar( "some_convar" )
SheetItemOne:SetValue( 1 )
SheetItemOne:SizeToContents()
 
local SheetItemTwo = vgui.Create( "DCheckBoxLabel" )
SheetItemTwo:SetText( "Use SENTs?" )
SheetItemTwo:SetConVar( "some_convar" )
SheetItemTwo:SetValue( 1 )
SheetItemTwo:SizeToContents()
 
PropertySheet:AddSheet( "Some Menu", SheetItemOne, "gui/silkicons/user", false, false, "WOW It's a text box!!!" )
PropertySheet:AddSheet( "Super Menu", SheetItemTwo, "gui/silkicons/group", false, false, "Can I haz meh cheezburger now?" ) 

DPropertySheet.png



DPanel

Description: This creates a blank frame (almost like DFrame) where you can use it as a parent and use SetPos() with items. This item can be added inside other items like DPropertySheet.

Code:

 
local TestingPanel = vgui.Create( "DPanel", DermaPanel )
TestingPanel:SetPos( 25, 50 )
TestingPanel:SetSize( 250, 250 )
TestingPanel.Paint = function() -- Paint function
    surface.SetDrawColor( 50, 50, 50, 255 ) -- Set our rect color below us; we do this so you can see items added to this panel
    surface.DrawRect( 0, 0, TestingPanel:GetWide(), TestingPanel:GetTall() ) -- Draw the rect
end
 
local DermaButton = vgui.Create( "DButton", TestingPanel )
DermaButton:SetText( "Click here for cheezburger!" )
DermaButton:SetPos( 20, 10 )
DermaButton:SetSize( 200, 100 )
DermaButton.DoClick = function ()
    RunConsoleCommand( "kill" )
end

DPanel.png



DComboBoxl

Description: This creates a list of options you can add to it then work with them later.

Code:

 
local TestingComboBox = vgui.Create( "DComboBox", DermaFrame )
TestingComboBox:SetPos( 10, 35 )
TestingComboBox:SetSize( 100, 185 )
TestingComboBox:SetMultiple( false ) -- Don't use this unless you know extensive knowledge about tables
TestingComboBox:AddItem( "Add" ) -- Add our options
TestingComboBox:AddItem( "Some" )
TestingComboBox:AddItem( "Options" )
TestingComboBox:AddItem( "Here" )
 
local MainMenuSheet = vgui.Create( "DPanel", DermaFrame ) -- We create a panel so we can draw shit on; if we use the frame, it comes up transparent for some reason
MainMenuSheet:SetPos( 125, 50 )
MainMenuSheet:SetSize( DermaFrame:GetWide() - 25, DermaFrame:GetTall() - 25 )
MainMenuSheet.Paint = function()
    if TestingComboBox:GetSelectedItems() and TestingComboBox:GetSelectedItems()[1] then -- make sure something is selected if not we get uber spam of errors
        local OurStringThing = "Your selection is: "..TestingComboBox:GetSelectedItems()[1]:GetValue().."!" -- This was a pain in the ass to figure out; this gets the name of the option chosen
        surface.SetFont( "default" )
        surface.SetTextColor( 255, 255, 255, 255 )
        surface.SetTextPos( 50, 50 )
        surface.DrawText( OurStringThing ) -- Draws the text
    end
end

DComboBox.png


DermaMenu

Description: This creates a menu which you can add options to.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 200, 250 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local MenuButton = vgui.Create("DButton")
MenuButton:SetParent( DermaPanel )
MenuButton:SetText( "Menu >" )
MenuButton:SetPos(25, 50)
MenuButton:SetSize( 150, 175 )
MenuButton.DoClick = function ( btn )
    local MenuButtonOptions = DermaMenu() -- Creates the menu
    MenuButtonOptions:AddOption("hello", function() Msg("Hello") end ) -- Add options to the menu
    MenuButtonOptions:AddOption("how", function() Msg("How") end )
    MenuButtonOptions:AddOption("are", function() Msg("Are") end )
    MenuButtonOptions:AddOption("you", function() Msg("You") end )
    MenuButtonOptions:AddOption("?", function() Msg("?") end )
    MenuButtonOptions:Open() -- Open the menu AFTER adding your options
end
 

DermaMenu.png



DListView

Description: Create a list of strings to be used with.

Code:

 
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 50,50 )
DermaPanel:SetSize( 500, 700 )
DermaPanel:SetTitle( "Testing Derma Stuff" )
DermaPanel:SetVisible( true )
DermaPanel:SetDraggable( true )
DermaPanel:ShowCloseButton( true )
DermaPanel:MakePopup()
 
local DermaListView = vgui.Create("DListView")
DermaListView:SetParent(DermaPanel)
DermaListView:SetPos(25, 50)
DermaListView:SetSize(450, 625)
DermaListView:SetMultiSelect(false)
DermaListView:AddColumn("Name") -- Add column
DermaListView:AddColumn("Amount of kills")
 
for k,v in pairs(player.GetAll()) do
    DermaListView:AddLine(v:Nick(),v:Frags()) -- Add lines
end
 

Dlistpanelje8.png

Keyboard & Mouse

Description: If you want to use the keyboard or mouse add these before MakePopup().

Code:

 
DermaPanel:SetMouseInputEnabled(true)
DermaPanel:SetKeyboardInputEnabled(true)
 


ALL OF THIS CODE HAS BEEN TESTED AND WORKS AS SEEN.

Personal tools
Namespaces
Variants
Actions
Navigation
Lua Scripting
Functions
Hooks
Toolbox