Introduction To Using Derma

<cat>Dev.UI</cat>
<title>Introduction To Using Derma</title>

# Introduction
This is the first in a series of tutorials that aim to take you from zero knowledge on derma, through all the essentials, to a solid foundation towards creating your first UI project. 

Welcome to world of [User Interfaces (UI)](https://en.wikipedia.org/wiki/User_interface) specifically within Garry's Mod. Before we begin lets define a clear vocabulary. The source engine by default draws its UI using [VGUI (Valves Graphical User Interface)](https://developer.valvesoftware.com/wiki/VGUI_Documentation) and CPP. In Garry's Mod We Use Lua and Derma. Derma was created by Garry and TAD2020 to make drawing UI's easier. Under the hood our Lua code will access the VGUI code allowing us to create, customize, and destroy UI elements.

# Chapter 1: Panel (DPanel)
Panels are the root to root to everything, most (not all) other elements that you use and create will be comprised of these panels. The engine provides a VGUI control called "Panel" this is a control that has almost no default properties by default. Derma introduces "DPanel" a control that inherits from the engine panel while extending its functionality to be more flexible. Most of the time it will be better to use `DPanel` so that will be our focus.

## Creating a Panel
In order to use a panel you will need to create one. The most common method is <page>vgui.Create</page> like so
```lua
local myFirstPanel = vgui.Create( "DPanel" )
```
This code snippet creates a `DPanel` object in Lua and stores in the variable `myFirstPanel` so that we may access it. We can then use this variable to run functions or adjust properties like:
* Size - Width and Height of the Panel
* Position - Where the top-left corner is
* Draw Settings - Color and similar properties

## Adjusting Properties 
Panels don't make up much on their own, instead they act similarly to Lego bricks, allowing you to combine and connect multiple instances of them to create bigger components. 

As mentioned before Panels have properties like Size, Position, and Draw Settings (better known as the Paint function, which we'll get to later). Part of what Derma does is provide us with Lua functions to adjust these properties.

Here is an example of some of the more common functions so you can experiment with them.
```lua
myFirstPanel:SetSize( 200, 100 ) -- Makes the width 200 pixels and the height 100 pixels

myFirstPanel:SetPos( 50, 50 ) -- Sets the Panel 50 pixels from the left, then 50 from the top.

myFirstPanel:Center() -- Move the panel to the center of its parent (useful for locating)

```
 These should be fairly self-explanatory, however, its important to keep in mind how these functions use their numbers. Panels are drawn from the top-left, to the bottom-right. This means that when you use `:SetSize()`, the position of the top-left pixel will remain in the same spot while the bottom right pixel shoots out. Same thing with `:SetPos()`, this function will move the top-left pixel to those local coordinates on the screen _(top-left of your screen being 0,0)_

These functions are interpreted as they are read. If i use `:Center()` then `:SetSize( w, h )` the panel will not appear center since it was centered first then the size changed.

## Controlling Visibility
As you read this section, use `vgui_visualizelayout 1` to help you spot any hidden panels. This function will make panels flash red when they **UPDATE**.

Visibility is important for controlling what you can and cant see within the elements. Derma provides us with a simple command <page>Panel:SetVisible</page>. Panels will automatically be shown and hidden based off of their parents state. Meaning if you hide a panel, all its children will hide to.

The visibility of panel is different than a transparent panel. A transparent panel will still update and act as though it is visible, while a hidden panel will not update correctly.

a `DPanel` can be made transparent by using <page>DPanel:SetPaintBackground</page>

## Conclusion
That's it, everything you need to get started.

Here is a codeblock detailing everything we covered in this chapter:
```lua
-- Create the DPanel
local myFirstPanel = vgui.Create( "DPanel" )

-- Set its size (Width: 200px, Height: 100px)
myFirstPanel:SetSize( 200, 100 )

-- Set its position (X: 300px from left, Y: 200px from top)
-- (Trying slightly different coords for visibility)
myFirstPanel:SetPos( 300, 200 )

-- Make it paint its background
myFirstPanel:SetPaintBackground( true )

-- Set the background color to blue (R=0, G=0, B=255, Alpha=255)
myFirstPanel:SetBackgroundColor( Color( 0, 0, 255, 255 ) )

-- Make sure it's visible (usually is by default if not parented to hidden)
myFirstPanel:SetVisible( true )
```

Introduction To Using Derma

Account Management

Special Pages

Wiki List

Garry's Mod Wiki