Guide to Derma

From GMod Wiki

(Difference between revisions)

Jump to: navigation, search

Latest revision as of 04:44, 16 October 2011

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

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

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

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

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?

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

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

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 )

When control clicked on.

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

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()

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

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?" )

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

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

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

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

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.

@@ Line 20: / Line 20: @@
-'''DFrame'''
+==DFrame==
 Description:
@@ Line 42: / Line 42: @@
-'''DButton'''
+==DButton==
 Description:
@@ Line 74: / Line 74: @@
-'''DSysButton'''
+==DSysButton==
 Description:
@@ Line 108: / Line 108: @@
-'''DCheckBoxLabel'''
+==DCheckBoxLabel==
 Description:
@@ Line 137: / Line 137: @@
-'''DNumSlider'''
+==DNumSlider==
 Description:
@@ Line 168: / Line 168: @@
-'''DPanelList'''
+==DPanelList==
 Description:
@@ Line 251: / Line 251: @@
-'''DCollapsibleCategory'''
+==DCollapsibleCategory==
 Description:
@@ Line 345: / Line 345: @@
-'''DTextEntry'''
+==DTextEntry==
 Description:
@@ Line 376: / Line 376: @@
-'''DImage'''
+==DImage==
 Description:
@@ Line 393: / Line 393: @@
-'''DImageButton'''
+==DImageButton==
 Description:
@@ Line 414: / Line 414: @@
-'''DPropertySheet'''
+==DPropertySheet==
 Description:
@@ Line 446: / Line 446: @@
-'''DPanel'''
+==DPanel==
 Description:
@@ Line 474: / Line 474: @@
-'''DComboBoxl'''
+==DComboBoxl==
 Description:
@@ Line 506: / Line 506: @@
-'''DermaMenu'''
+==DermaMenu==
 Description:
@@ Line 543: / Line 543: @@
-'''DListView'''
+==DListView==
 Description:
@@ Line 573: / Line 573: @@
 [[Image:Dlistpanelje8.png]]
-'''Keyboard & Mouse'''
+==Keyboard & Mouse==
 Description:

Guide to Derma

From GMod Wiki

Latest revision as of 04:44, 16 October 2011

Contents

Everything About Derma and VGUI

DFrame

DButton

DSysButton

DCheckBoxLabel

DNumSlider

DPanelList

DCollapsibleCategory

DTextEntry

DImage

DImageButton

DPropertySheet

DPanel

DComboBoxl

DermaMenu

DListView

Keyboard & Mouse

Personal tools

Namespaces

Variants

Views

Actions

Search (now fixed)

Navigation

Lua Scripting

Functions

Hooks

Lua Search

Toolbox